feat: adds separate pages for query and subscription

packages/frontend/components/layout/container.tsx

@@ -0,0 +1,23 @@
+import React, { FC } from "react";
+import { Box, useColorMode } from "@chakra-ui/core";
+
+const Container: FC = ({ children }) => {
+  const { colorMode } = useColorMode();
+  const bgColor = { light: "gray.100", dark: "gray.900" };
+  const heightOfNavbar: string = "74px";
+
+  return (
+    <Box
+      minH={`calc(100vh - ${heightOfNavbar})`}
+      p={4}
+      fontSize="sm"
+      bg={bgColor[colorMode]}
+    >
+      <Box maxW="6xl" mx="auto">
+        {children}
+      </Box>
+    </Box>
+  );
+};
+
+export default Container;

packages/frontend/components/layout/index.tsx

@@ -0,0 +1,17 @@
+import React, { FC } from "react";
+import { ColorModeProvider, LightMode } from "@chakra-ui/core";
+import Container from "components/layout/container";
+import Navbar from "components/navbar";
+
+const Layout: FC = ({ children }) => {
+  return (
+    <ColorModeProvider>
+      <LightMode>
+        <Navbar />
+        <Container>{children}</Container>
+      </LightMode>
+    </ColorModeProvider>
+  );
+};
+
+export default Layout;

packages/frontend/components/loader/index.tsx

@@ -1,14 +1,19 @@
 import React, { FC } from "react";
 import { Box, CircularProgress } from "@chakra-ui/core";
 
-const Loader: FC = () => {
+interface Props {
+  size?: string;
+  thickness?: number;
+}
+
+const Loader: FC<Props> = ({ size = "50px", thickness = 0.15 }) => {
   return (
     <Box w="full" textAlign="center" maxH="200px">
       <CircularProgress
         isIndeterminate
-        color="purple"
-        size="50px"
-        thickness={0.15}
+        color="cyan"
+        size={size}
+        thickness={thickness}
       />
     </Box>
   );

packages/frontend/components/navbar/index.tsx

@@ -1,11 +1,86 @@
-import React from "react";
+import React, { ChangeEvent } from "react";
 import { NextComponentType } from "next";
 import Link from "next/link";
 import { signIn, signOut, useSession } from "next-auth/client";
-import { Box, Stack, Link as _Link, Button } from "@chakra-ui/core";
+import {
+  Box,
+  Stack,
+  Link as _Link,
+  Button,
+  useColorMode,
+  Menu,
+  MenuButton,
+  Icon,
+  MenuList,
+  MenuGroup,
+  MenuItem,
+  Switch,
+  MenuDivider,
+} from "@chakra-ui/core";
 
 const Navbar: NextComponentType = () => {
   const [session] = useSession();
+  const { colorMode, toggleColorMode } = useColorMode();
+  const bgColor = { light: "white", dark: "gray.800" };
+  const borderColor = { light: "gray.300", dark: "gray.700" };
+  const color = { light: "gray.800", dark: "gray.100" };
+
+  const handleToggleTheme = async (e: ChangeEvent<HTMLInputElement>) => {
+    const theme: string = !!e.target.checked ? "dark" : "light";
+
+    console.log(theme);
+
+    toggleColorMode();
+  };
+
+  const profileDropDown = () => {
+    if (!session) {
+      return false;
+    }
+
+    return (
+      <Box>
+        <Menu closeOnSelect={false}>
+          <MenuButton
+            as={Button}
+            color={color[colorMode]}
+            borderColor={borderColor[colorMode]}
+          >
+            Profile <Icon name="chevron-down" />
+          </MenuButton>
+          <MenuList
+            color={color[colorMode]}
+            borderColor={borderColor[colorMode]}
+            placement="bottom-end"
+          >
+            <MenuGroup title="Profile">
+              <MenuItem>
+                <Link href="/my-profile">
+                  <_Link>My Account</_Link>
+                </Link>
+              </MenuItem>
+              <MenuItem>
+                <Stack justify="center" align="center" spacing={4} isInline>
+                  <Box>Dark Theme</Box>
+                  <Box>
+                    <Switch
+                      isChecked={colorMode === "dark"}
+                      onChange={handleToggleTheme}
+                    />
+                  </Box>
+                </Stack>
+              </MenuItem>
+            </MenuGroup>
+            <MenuDivider />
+            <MenuGroup title="Help">
+              <MenuItem>Docs</MenuItem>
+              <MenuItem>FAQ</MenuItem>
+            </MenuGroup>
+          </MenuList>
+        </Menu>
+      </Box>
+    );
+  };
 
   const signInButtonNode = () => {
     if (session) {
@@ -52,8 +127,17 @@ const Navbar: NextComponentType = () => {
   };
 
   return (
-    <Box borderWidth={1} shadow="sm">
-      <Box justifyContent="space-between" p={4}>
+    <Box bg={bgColor[colorMode]}>
+      <Box
+        w="full"
+        mx="auto"
+        d="flex"
+        justifyContent="space-between"
+        p={4}
+        color={color[colorMode]}
+        borderWidth={1}
+        borderColor={borderColor[colorMode]}
+      >
         <Stack
           isInline
           spacing={4}
@@ -68,15 +152,21 @@ const Navbar: NextComponentType = () => {
                   <_Link>Home</_Link>
                 </Link>
               </Box>
+              <Box>
+                <Link href="/subscription">
+                  <_Link>Subscription</_Link>
+                </Link>
+              </Box>
+              <Box>
+                <Link href="/query">
+                  <_Link>Query</_Link>
+                </Link>
+              </Box>
             </Stack>
           </Box>
           <Box>
             <Stack isInline spacing={4} align="center">
-              <Box>
-                <Link href="/users">
-                  <_Link>Users</_Link>
-                </Link>
-              </Box>
+              {profileDropDown()}
               {signInButtonNode()}
               {signOutButtonNode()}
             </Stack>

packages/frontend/components/pages/query/index.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import gql from "graphql-tag";
+import { useQuery } from "urql";
+import { Box, Stack, Text } from "@chakra-ui/core";
+import IUser from "types/user";
+
+const usersQuery = gql`
+  query FetchUsers {
+    users {
+      id
+      name
+    }
+  }
+`;
+
+const Query = () => {
+  const [result] = useQuery({
+    query: usersQuery,
+  });
+
+  if (result.fetching || !result.data) {
+    return null;
+  }
+
+  if (result.error) {
+    return null;
+  }
+
+  return (
+    <Stack spacing={4}>
+      {result.data.users.map((user: IUser) => (
+        <Box key={user.id} p={4} shadow="sm" rounded="md">
+          <Text>{user.name}</Text>
+        </Box>
+      ))}
+    </Stack>
+  );
+};
+
+export default Query;

packages/frontend/components/pages/users/index.tsx → packages/frontend/components/pages/subscription/index.tsx

@@ -13,7 +13,7 @@ const usersSubscription = gql`
   }
 `;
 
-const Users = () => {
+const Subscription = () => {
   const [result] = useSubscription({
     query: usersSubscription,
   });
@@ -33,4 +33,4 @@ const Users = () => {
   );
 };
 
-export default Users;
+export default Subscription;

packages/frontend/configs/graphql-query.ts

@@ -0,0 +1,12 @@
+import { defaultExchanges } from "urql";
+
+const graphqlQueryConfig = () => ({
+  url: process.env.API_URL || "http://localhost:8080/v1/graphql",
+  exchanges: [...defaultExchanges],
+  fetch,
+  fetchOptions: {
+    headers: { "X-Hasura-Admin-Secret": "secret" },
+  },
+});
+
+export default graphqlQueryConfig;

packages/frontend/configs/graphql-subscription.ts

@@ -0,0 +1,18 @@
+import { defaultExchanges, subscriptionExchange } from "urql";
+import subscriptionClient from "lib/graphql-subscription-client";
+
+const graphqlSubscriptionConfig = () => ({
+  url: process.env.WS_URL || "ws://localhost:8080/v1/graphql",
+  exchanges: [
+    ...defaultExchanges,
+    subscriptionExchange({
+      forwardSubscription(operation) {
+        return subscriptionClient.request(operation);
+      },
+    }),
+  ],
+  fetch,
+  suspense: true,
+});
+
+export default graphqlSubscriptionConfig;

packages/frontend/lib/graphql-subscription-client.ts

@@ -0,0 +1,15 @@
+import { SubscriptionClient } from "subscriptions-transport-ws";
+import ws from "isomorphic-ws";
+
+const subscriptionClient = new SubscriptionClient(
+  process.env.WS_URL || "ws://localhost:8080/v1/graphql",
+  {
+    reconnect: true,
+    connectionParams: {
+      headers: { "X-Hasura-Admin-Secret": "secret" },
+    },
+  },
+  ws
+);
+
+export default subscriptionClient;

packages/frontend/package.json

@@ -45,7 +45,7 @@
     "prettier": "^2.0.5",
     "tslint": "^6.1.2",
     "tslint-react": "^5.0.0",
-    "typescript": "^3.9.6"
+    "typescript": "^3.9.7"
   },
   "husky": {
     "hooks": {

packages/frontend/pages/_app.tsx

@@ -1,23 +1,12 @@
-// @ts-nocheck
-
 import React from "react";
-import NextApp from "next/app";
+import { AppProps } from "next/app";
 import Head from "next/head";
-import { cookieParser } from "lib/cookie";
-import Navbar from "components/navbar";
 import { Provider as NextAuthProvider } from "next-auth/client";
-import {
-  ThemeProvider,
-  CSSReset,
-  ColorModeProvider,
-  Grid,
-  Box,
-  theme,
-} from "@chakra-ui/core";
+import { ThemeProvider, CSSReset, theme } from "@chakra-ui/core";
+import Layout from "components/layout";
 
-const App = ({ Component, pageProps }) => {
+const App = ({ Component, pageProps }: AppProps) => {
   const { session } = pageProps;
-  const heightOfNavbar: string = "74px";
 
   return (
     <>
@@ -27,17 +16,9 @@ const App = ({ Component, pageProps }) => {
       <NextAuthProvider session={session}>
         <ThemeProvider theme={theme}>
           <CSSReset />
-          <Navbar />
-          <Box>
-            <Box
-              minH={`calc(100vh - ${heightOfNavbar})`}
-              maxW="6xl"
-              mx="auto"
-              p={4}
-            >
-              <Component {...pageProps} />
-            </Box>
-          </Box>
+          <Layout>
+            <Component {...pageProps} />
+          </Layout>
         </ThemeProvider>
       </NextAuthProvider>
     </>

packages/frontend/pages/query.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import Head from "next/head";
+import Page from "components/pages/query";
+import { withUrqlClient } from "next-urql";
+import { NextPage } from "next";
+import Loader from "components/loader";
+import AccessDeniedIndicator from "components/access-denied-indicator";
+import { useSession } from "next-auth/client";
+import graphqlQueryConfig from "configs/graphql-query";
+
+const QueryPage: NextPage = () => {
+  const [session, loading] = useSession();
+
+  if (loading) {
+    return <Loader />;
+  }
+
+  if (!session) {
+    return <AccessDeniedIndicator />;
+  }
+
+  return (
+    <>
+      <Head>
+        <title>People Page</title>
+      </Head>
+      <Page />
+    </>
+  );
+};
+
+export default withUrqlClient(graphqlQueryConfig)(QueryPage);