From e2547e94516cc42b8918ffc655570779b72ff74c Mon Sep 17 00:00:00 2001
From: Nirmalya Ghosh <nirmalya.email@gmail.com>
Date: Sat, 18 Jul 2020 20:37:39 +0530
Subject: [PATCH] feat: adds separate pages for query and subscription

---
 .../frontend/components/layout/container.tsx  |  23 ++++
 packages/frontend/components/layout/index.tsx |  17 +++
 packages/frontend/components/loader/index.tsx |  13 ++-
 packages/frontend/components/navbar/index.tsx | 108 ++++++++++++++++--
 .../frontend/components/pages/query/index.tsx |  40 +++++++
 .../pages/{users => subscription}/index.tsx   |   4 +-
 packages/frontend/configs/graphql-query.ts    |  12 ++
 .../frontend/configs/graphql-subscription.ts  |  18 +++
 .../lib/graphql-subscription-client.ts        |  15 +++
 packages/frontend/package.json                |   2 +-
 packages/frontend/pages/_app.tsx              |  33 ++----
 packages/frontend/pages/query.tsx             |  32 ++++++
 packages/frontend/pages/subscription.tsx      |  32 ++++++
 packages/frontend/pages/users.tsx             |  67 -----------
 packages/frontend/tsconfig.json               |   1 +
 yarn.lock                                     |   8 +-
 16 files changed, 312 insertions(+), 113 deletions(-)
 create mode 100644 packages/frontend/components/layout/container.tsx
 create mode 100644 packages/frontend/components/layout/index.tsx
 create mode 100644 packages/frontend/components/pages/query/index.tsx
 rename packages/frontend/components/pages/{users => subscription}/index.tsx (91%)
 create mode 100644 packages/frontend/configs/graphql-query.ts
 create mode 100644 packages/frontend/configs/graphql-subscription.ts
 create mode 100644 packages/frontend/lib/graphql-subscription-client.ts
 create mode 100644 packages/frontend/pages/query.tsx
 create mode 100644 packages/frontend/pages/subscription.tsx
 delete mode 100644 packages/frontend/pages/users.tsx

diff --git a/packages/frontend/components/layout/container.tsx b/packages/frontend/components/layout/container.tsx
new file mode 100644
index 00000000..649f8798
--- /dev/null
+++ b/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;
diff --git a/packages/frontend/components/layout/index.tsx b/packages/frontend/components/layout/index.tsx
new file mode 100644
index 00000000..8eba4acb
--- /dev/null
+++ b/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;
diff --git a/packages/frontend/components/loader/index.tsx b/packages/frontend/components/loader/index.tsx
index b5470685..1276f050 100644
--- a/packages/frontend/components/loader/index.tsx
+++ b/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>
   );
diff --git a/packages/frontend/components/navbar/index.tsx b/packages/frontend/components/navbar/index.tsx
index 6191efc1..fb83078b 100644
--- a/packages/frontend/components/navbar/index.tsx
+++ b/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>
diff --git a/packages/frontend/components/pages/query/index.tsx b/packages/frontend/components/pages/query/index.tsx
new file mode 100644
index 00000000..351a497c
--- /dev/null
+++ b/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;
diff --git a/packages/frontend/components/pages/users/index.tsx b/packages/frontend/components/pages/subscription/index.tsx
similarity index 91%
rename from packages/frontend/components/pages/users/index.tsx
rename to packages/frontend/components/pages/subscription/index.tsx
index f7870e70..6d03d4e5 100644
--- a/packages/frontend/components/pages/users/index.tsx
+++ b/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;
diff --git a/packages/frontend/configs/graphql-query.ts b/packages/frontend/configs/graphql-query.ts
new file mode 100644
index 00000000..63b1a482
--- /dev/null
+++ b/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;
diff --git a/packages/frontend/configs/graphql-subscription.ts b/packages/frontend/configs/graphql-subscription.ts
new file mode 100644
index 00000000..c1af99f3
--- /dev/null
+++ b/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;
diff --git a/packages/frontend/lib/graphql-subscription-client.ts b/packages/frontend/lib/graphql-subscription-client.ts
new file mode 100644
index 00000000..7a36d63f
--- /dev/null
+++ b/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;
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index bf1cae14..24c839bd 100644
--- a/packages/frontend/package.json
+++ b/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": {
diff --git a/packages/frontend/pages/_app.tsx b/packages/frontend/pages/_app.tsx
index c5976992..5875cd55 100644
--- a/packages/frontend/pages/_app.tsx
+++ b/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>
     </>
diff --git a/packages/frontend/pages/query.tsx b/packages/frontend/pages/query.tsx
new file mode 100644
index 00000000..4d7d5570
--- /dev/null
+++ b/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);
diff --git a/packages/frontend/pages/subscription.tsx b/packages/frontend/pages/subscription.tsx
new file mode 100644
index 00000000..a3507e4b
--- /dev/null
+++ b/packages/frontend/pages/subscription.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import Head from "next/head";
+import Page from "components/pages/subscription";
+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 graphqlSubscriptionConfig from "configs/graphql-subscription";
+
+const SubscriptionPage: NextPage = () => {
+  const [session, loading] = useSession();
+
+  if (loading) {
+    return <Loader />;
+  }
+
+  if (!session) {
+    return <AccessDeniedIndicator />;
+  }
+
+  return (
+    <>
+      <Head>
+        <title>Users Page</title>
+      </Head>
+      <Page />
+    </>
+  );
+};
+
+export default withUrqlClient(graphqlSubscriptionConfig)(SubscriptionPage);
diff --git a/packages/frontend/pages/users.tsx b/packages/frontend/pages/users.tsx
deleted file mode 100644
index c4af13f3..00000000
--- a/packages/frontend/pages/users.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import React from "react";
-import Head from "next/head";
-import Page from "components/pages/users";
-import { withUrqlClient } from "next-urql";
-import { defaultExchanges, subscriptionExchange } from "urql";
-import fetch from "isomorphic-unfetch";
-import { SubscriptionClient } from "subscriptions-transport-ws";
-import ws from "isomorphic-ws";
-import { NextPage } from "next";
-import Loader from "components/loader";
-import AccessDeniedIndicator from "components/access-denied-indicator";
-import { useSession } from "next-auth/client";
-
-const subscriptionClient = new SubscriptionClient(
-  process.env.WS_URL || "ws://localhost:8080/v1/graphql",
-  {
-    reconnect: true,
-    connectionParams: {
-      headers: { "X-Hasura-Admin-Secret": "secret" },
-    },
-  },
-  ws
-);
-
-const IndexPage: NextPage = () => {
-  const [session, loading] = useSession();
-
-  if (loading) {
-    return <Loader />;
-  }
-
-  if (!session) {
-    return <AccessDeniedIndicator />;
-  }
-
-  return (
-    <>
-      <Head>
-        <title>Index Page</title>
-      </Head>
-      <Page />
-    </>
-  );
-};
-
-export default withUrqlClient(
-  () => ({
-    url: process.env.API_URL || "http://localhost:8080/v1/graphql",
-    exchanges: [
-      ...defaultExchanges,
-      subscriptionExchange({
-        forwardSubscription(operation) {
-          return subscriptionClient.request(operation);
-        },
-      }),
-    ],
-    fetch,
-    suspense: true,
-    fetchOptions: () => {
-      return {
-        headers: { "X-Hasura-Admin-Secret": "secret" },
-      };
-    },
-    requestPolicy: "cache-and-network",
-  }),
-  { ssr: true }
-)(IndexPage);
diff --git a/packages/frontend/tsconfig.json b/packages/frontend/tsconfig.json
index 63198894..35e70869 100644
--- a/packages/frontend/tsconfig.json
+++ b/packages/frontend/tsconfig.json
@@ -19,6 +19,7 @@
       "lib/*": ["lib/*"],
       "pages/*": ["pages/*"],
       "types/*": ["types/*"],
+      "configs/*": ["configs/*"],
     }
   },
   "exclude": ["node_modules"],
diff --git a/yarn.lock b/yarn.lock
index 1844950e..db0764e4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14729,10 +14729,10 @@ typescript@3.8.3:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.8.3.tgz#409eb8544ea0335711205869ec458ab109ee1061"
   integrity sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==
 
-typescript@^3.9.6:
-  version "3.9.6"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.6.tgz#8f3e0198a34c3ae17091b35571d3afd31999365a"
-  integrity sha512-Pspx3oKAPJtjNwE92YS05HQoY7z2SFyOpHo9MqJor3BXAGNaPUs83CuVp9VISFkSjyRfiTpmKuAYGJB7S7hOxw==
+typescript@^3.9.7:
+  version "3.9.7"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.7.tgz#98d600a5ebdc38f40cb277522f12dc800e9e25fa"
+  integrity sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw==
 
 uglify-es@^3.3.4:
   version "3.3.9"