Start hooks (#8)

* data model tweaks — squash

* env example

* start hooks

* more hooks

.gitignore

@@ -39,3 +39,6 @@ testem.log
 Thumbs.db
 
 **/**/.env
+**/**/.env.local
+
+package-lock.json

apps/frontend/.env.example

@@ -0,0 +1,10 @@
+# PUBLIC
+# HASURA API ENDPOINT
+NEXT_PUBLIC_API_URL='http://localhost:8080/v1/graphql'
+# PRIVATE
+# Admin key for the console or API requests, leave blank for localhost
+HASURA_GRAPHQL_ADMIN_SECRET=
+# Tells NextAuth where to authenticate the API
+NEXTAUTH_URL=http://localhost:4200
+# Secret hash used for encoding JWTs
+NEXTAUTH_SECRET=supersecret

apps/frontend/components/ChakraNextLink.tsx

@@ -0,0 +1,10 @@
+import { Link as ChakraLink } from '@raidguild/design-system';
+import NextLink from 'next/link';
+
+const ChakraNextLink = ({ href, children, ...props }) => (
+  <NextLink href={href} passHref>
+    <ChakraLink {...props}>{children}</ChakraLink>
+  </NextLink>
+);
+
+export default ChakraNextLink;

apps/frontend/components/Navbar.tsx

@@ -0,0 +1,31 @@
+import _ from 'lodash';
+import { Flex, Heading, HStack } from '@raidguild/design-system';
+import Link from './ChakraNextLink';
+import ConnectWallet from './ConnectWallet';
+
+const links = [
+  { href: '/raids', label: 'Raids' },
+  { href: '/consultations', label: 'Consultations' },
+  { href: '/members', label: 'Members' },
+  { href: '/applications', label: 'Applications' },
+];
+
+const Navbar = () => (
+  <Flex justify="space-between" p={8}>
+    <HStack spacing={10}>
+      <Link href="/">
+        <Heading>🏰</Heading>
+      </Link>
+      <HStack align="center" spacing={4}>
+        {_.map(links, ({ href, label }) => (
+          <Link key={href} href={href}>
+            <Heading size="sm">{label}</Heading>
+          </Link>
+        ))}
+      </HStack>
+    </HStack>
+    <ConnectWallet />
+  </Flex>
+);
+
+export default Navbar;

apps/frontend/components/SiteLayout.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Flex } from '@chakra-ui/react';
+import Navbar from './Navbar';
 
 interface SiteLayoutProps {
   children: React.ReactChild;
@@ -20,7 +21,7 @@ const SiteLayout: React.FC<SiteLayoutProps> = ({
       position="relative"
       background="gray.700"
     >
-      {/* <Navbar /> */}
+      <Navbar />
       <Flex
         direction="column"
         align="center"

apps/frontend/gql/client.ts

@@ -0,0 +1,48 @@
+import {
+  ApolloClient,
+  ApolloLink,
+  HttpLink,
+  InMemoryCache,
+} from '@apollo/client';
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL;
+const ADMIN_SECRET = process.env.HASURA_GRAPHQL_ADMIN_SECRET;
+
+interface setLinkProps {
+  token?: string;
+}
+
+const setLink = ({ token }: setLinkProps) => {
+  const httpLink = new HttpLink({ uri: API_URL });
+
+  const authLink = new ApolloLink((operation: any, forward: any) => {
+    // Use the setContext method to set the HTTP headers.
+    const headers: {
+      authorization?: string | null;
+      'x-hasura-admin-secret'?: string | undefined | null;
+    } = {};
+    if (token) {
+      headers.authorization = `Bearer ${token}`;
+    }
+    if (ADMIN_SECRET) {
+      headers['x-hasura-admin-secret'] = ADMIN_SECRET;
+    }
+
+    operation.setContext({
+      headers,
+    });
+
+    // Call the next link in the middleware chain.
+    return forward(operation);
+  });
+
+  return authLink.concat(httpLink);
+};
+
+const client = (token?: string) =>
+  new ApolloClient({
+    link: setLink({ token }),
+    cache: new InMemoryCache(),
+  });
+
+export default client;

apps/frontend/gql/index.ts

@@ -0,0 +1,2 @@
+export { default as client } from './client';
+export * from './queries';

apps/frontend/gql/queries/applications.ts

@@ -0,0 +1,19 @@
+import { gql } from '@apollo/client';
+
+export const APPLICATION_LIST_QUERY = gql`
+  query ApplicationsList {
+    applications {
+      id
+      name
+    }
+  }
+`;
+
+export const APPLICATION_DETAIL_QUERY = gql`
+  query ApplicationDetail($id: uuid!) {
+    applications_by_pk(id: $id) {
+      id
+      name
+    }
+  }
+`;

apps/frontend/gql/queries/consultations.ts

@@ -0,0 +1,21 @@
+import { gql } from '@apollo/client';
+
+export const CONSULTATION_LIST_QUERY = gql`
+  query ConsultationsList {
+    consultations {
+      id
+      project_name
+      project_desc
+    }
+  }
+`;
+
+export const CONSULTATION_DETAIL_QUERY = gql`
+  query ConsultationDetail($id: uuid!) {
+    consultations_by_pk(id: $id) {
+      id
+      project_name
+      project_desc
+    }
+  }
+`;

apps/frontend/gql/queries/index.ts

@@ -0,0 +1,4 @@
+export * from './applications';
+export * from './consultations';
+export * from './members';
+export * from './raids';

apps/frontend/gql/queries/members.ts

@@ -0,0 +1,33 @@
+import { gql } from '@apollo/client';
+
+export const MEMBER_LIST_QUERY = gql`
+  query MemberList {
+    members {
+      id
+      name
+      email_address
+      eth_address
+    }
+  }
+`;
+
+export const MEMBER_ADDRESS_LOOKUP_QUERY = gql`
+  query MemberAddressLookup($address: String!) {
+    members(where: { eth_address: { _eq: $address } }) {
+      id
+      eth_address
+      name
+    }
+  }
+`;
+
+export const MEMBER_DETAIL_QUERY = gql`
+  query MemberDetail($id: uuid!) {
+    members_by_pk(id: $id) {
+      id
+      name
+      email_address
+      eth_address
+    }
+  }
+`;

apps/frontend/gql/queries/raids.ts

@@ -0,0 +1,31 @@
+import { gql } from '@apollo/client';
+
+export const RAIDS_LIST_QUERY = gql`
+  query RaidsListQuery {
+    raids {
+      id
+      name
+      cleric
+      airtable_id
+      portfolio
+      locker_hash
+      escrow_index
+      status
+    }
+  }
+`;
+
+export const RAID_DETAIL_QUERY = gql`
+  query RaidDetailQuery($id: uuid!) {
+    raids_by_pk(id: $id) {
+      id
+      name
+      cleric
+      airtable_id
+      portfolio
+      locker_hash
+      escrow_index
+      status
+    }
+  }
+`;

apps/frontend/hooks/useApplicationDetail.ts

@@ -0,0 +1,34 @@
+import { useSession } from 'next-auth/react';
+import _ from 'lodash';
+import { useQuery } from 'react-query';
+import { client, APPLICATION_DETAIL_QUERY } from '../gql';
+import { useRouter } from 'next/router';
+
+const useApplicationDetail = () => {
+  const router = useRouter();
+  const applicationId = _.get(router, 'query.application');
+  const { data: session } = useSession();
+
+  const applicationQueryResult = async () => {
+    if (!applicationId) return;
+    // TODO handle filters
+
+    const { data } = await client(_.get(session, 'token')).query({
+      query: APPLICATION_DETAIL_QUERY,
+      variables: {
+        id: applicationId,
+      },
+    });
+
+    return _.get(data, 'applications_by_pk');
+  };
+
+  const { isLoading, isFetching, isError, error, data } = useQuery<any, Error>(
+    ['applicationDetail', applicationId],
+    applicationQueryResult
+  );
+
+  return { isLoading, isFetching, isError, error, data };
+};
+
+export default useApplicationDetail;

apps/frontend/hooks/useApplicationList.ts

@@ -0,0 +1,27 @@
+import { useSession } from 'next-auth/react';
+import _ from 'lodash';
+import { useQuery } from 'react-query';
+import { client, APPLICATION_LIST_QUERY } from '../gql';
+
+const useApplicationList = () => {
+  const { data: session } = useSession();
+
+  const applicationQueryResult = async () => {
+    // TODO handle filters
+
+    const { data } = await client(_.get(session, 'token')).query({
+      query: APPLICATION_LIST_QUERY,
+    });
+
+    return _.get(data, 'applications');
+  };
+
+  const { isLoading, isFetching, isError, error, data } = useQuery<any, Error>(
+    'applicationList',
+    applicationQueryResult
+  );
+
+  return { isLoading, isFetching, isError, error, data };
+};
+
+export default useApplicationList;

apps/frontend/hooks/useCommentCreate.ts

@@ -0,0 +1,5 @@
+const useCommentCreate = () => {
+  console.log('useCommentCreate');
+};
+
+export default useCommentCreate;

apps/frontend/hooks/useConsultationDetail.ts

@@ -0,0 +1,34 @@
+import { useSession } from 'next-auth/react';
+import _ from 'lodash';
+import { useQuery } from 'react-query';
+import { client, CONSULTATION_DETAIL_QUERY } from '../gql';
+import { useRouter } from 'next/router';
+
+const useConsultationDetail = () => {
+  const router = useRouter();
+  const consultationId = _.get(router, 'query.consultation');
+  const { data: session } = useSession();
+
+  const consultationQueryResult = async () => {
+    if (!consultationId) return;
+    // TODO handle filters
+
+    const { data } = await client(_.get(session, 'token')).query({
+      query: CONSULTATION_DETAIL_QUERY,
+      variables: {
+        id: consultationId,
+      },
+    });
+
+    return _.get(data, 'consultations_by_pk');
+  };
+
+  const { isLoading, isFetching, isError, error, data } = useQuery<any, Error>(
+    ['consultationDetail', consultationId],
+    consultationQueryResult
+  );
+
+  return { isLoading, isFetching, isError, error, data };
+};
+
+export default useConsultationDetail;

apps/frontend/hooks/useConsultationList.ts

@@ -0,0 +1,27 @@
+import { useSession } from 'next-auth/react';
+import _ from 'lodash';
+import { useQuery } from 'react-query';
+import { client, CONSULTATION_LIST_QUERY } from '../gql';
+
+const useConsultationList = () => {
+  const { data: session } = useSession();
+
+  const consultationQueryResult = async () => {
+    // TODO handle filters
+
+    const { data } = await client(_.get(session, 'token')).query({
+      query: CONSULTATION_LIST_QUERY,
+    });
+
+    return _.get(data, 'consultations');
+  };
+
+  const { isLoading, isFetching, isError, error, data } = useQuery<any, Error>(
+    'consultationList',
+    consultationQueryResult
+  );
+
+  return { isLoading, isFetching, isError, error, data };
+};
+
+export default useConsultationList;

apps/frontend/hooks/useConsultationUpdate.ts

@@ -0,0 +1,5 @@
+const useConsultationUpdate = () => {
+  console.log('useConsultationUpdate');
+};
+
+export default useConsultationUpdate;