Merge pull request #166 from ghoshnirmalya/feat/simplify-code

Simplify on-boarding process

backend/.env.example

@@ -0,0 +1,6 @@
+HASURA_GRAPHQL_ADMIN_SECRET=secret
+PORT=8080
+DATABASE_URL=postgresql://user:password@db:5432/database
+POSTGRES_USER=user
+POSTGRES_PASSWORD=password
+POSTGRES_DB=database

backend/Dockerfile

@@ -1,4 +1,4 @@
-FROM hasura/graphql-engine:v1.3.1.cli-migrations-v2
+FROM hasura/graphql-engine:v1.3.3.cli-migrations-v2
 
 # # Copy migrations directory
 COPY ./migrations /hasura-migrations

backend/docker-compose.yml

@@ -8,23 +8,18 @@ services:
       context: .
     depends_on:
       - db
-    environment:
-      DATABASE_URL: postgres://postgres:@db:5432/postgres
-      HASURA_GRAPHQL_JWT_SECRET: '{"type":"RS256", "key": "-----BEGIN PUBLIC KEY-----\nMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA0U3NR0eyMehHBlx6DK5s\nJ+Pys9dTWf558kpKVeQvL2oIZEY3LvS3/jdrIm/dU4WrIGPki1r/AWXQAyBZ2FKn\nZROcUWN0IqdmxrC5zTDymuscqhKXqxjSwrwOVWHc+zWWmXCQGmDdoCokXd9ZW66n\nA0BN66MdMC2+d5GrZdKUF305dpzTUdzDE12/XwOEUalCM0703eGu8zFwutLYc3+v\nf2CFOQ1z+rvDQD4N2aZABKTxZRtEkMHljnoyKlF9rljNzT/5N8YQE7qn4pBh6CMa\n1zcSilk9nhgl55n/Kjn2xMieWdIalaOEKw1LqqIjiT1ESkAKfPaIoSSnmTaYy78g\nbwIDAQAB\n-----END PUBLIC KEY-----\n"}'
-      HASURA_GRAPHQL_ADMIN_SECRET: secret
-      PORT: 8080
+    env_file: ./.env
     ports:
       - "8080:8080"
-    restart: on-failure
 
   db:
     container_name: nextjs-hasura-boilerplate-db
-    image: postgres:11.3-alpine
+    image: postgres:latest
     ports:
       - "5432:5432"
     volumes:
       - db_data:/var/lib/postgresql/data
-    restart: unless-stopped
+    env_file: ./.env
 
 volumes:
   db_data:

frontend/.env.example

@@ -1,7 +1,6 @@
 NEXT_PUBLIC_API_URL=http://localhost:8080/v1/graphql
 NEXT_PUBLIC_WS_URL=ws://localhost:8080/v1/graphql
-DATABASE_URL=postgres://postgres:@localhost:5432/postgres
-AUTH_PRIVATE_KEY='{"type":"RS256", "key": "-----BEGIN RSA PRIVATE KEY-----\nMIIEowIBAAKCAQEA0U3NR0eyMehHBlx6DK5sJ+Pys9dTWf558kpKVeQvL2oIZEY3\nLvS3/jdrIm/dU4WrIGPki1r/AWXQAyBZ2FKnZROcUWN0IqdmxrC5zTDymuscqhKX\nqxjSwrwOVWHc+zWWmXCQGmDdoCokXd9ZW66nA0BN66MdMC2+d5GrZdKUF305dpzT\nUdzDE12/XwOEUalCM0703eGu8zFwutLYc3+vf2CFOQ1z+rvDQD4N2aZABKTxZRtE\nkMHljnoyKlF9rljNzT/5N8YQE7qn4pBh6CMa1zcSilk9nhgl55n/Kjn2xMieWdIa\nlaOEKw1LqqIjiT1ESkAKfPaIoSSnmTaYy78gbwIDAQABAoIBAF+3t+AYLqraMdj7\n46j2/2lCupR6LZkjYntmdBZRky6YzBunbMchjR9KEsmd5Na0c20NodAFHkdyWy2C\n1vOx4PG9hShHVi4e5kaJPX9UGi60xNgWRpwtbv01aUysw5VyjVvAeXZGxDPh8d2o\nLcJa3fADsV7IqqmE0ez2hi67nZQbkbEUbKs7aGfCE6srCfjCfOadfNnto9+7qDjJ\nnd4rK18H1rBSLTqj4T7wd1K8THgo25vjEuVRbGsEVrNB/B1Dz0pdOqhqukzixfcS\nVL/7uYDXehLasmUQu2VtMFsLqDpAbQgvpoNnzeZuB0WARvygSi/n4t+pCi84hXXe\na1m/01kCgYEA6+i5FwJAPxe2oCc0iignHjA20itTalyUhgJrLa8tTs721GJ3ku0A\n/EJVgmoNOLCQnZMldWvEDGmf6QuaWitq8ZWK/0BmHrEjbDA7m1fPdf3hrNx6eH/i\nazxjAoWA/u0yZg6QvUC7hSOO6WEpFYGuc2+/mHlnm5RLdL3QNIlHyyUCgYEA4yEI\n2deZ9MgmxbnFc76u7VhT1lc1MHpuAcDR3hqKT9xH2fTBaTDpVqeFbQJR5Hu+ZqgT\nL3+zV5kzIz3RaNMGN1IaxDEEx+tDnL9aw8sqawauWZtp7W2EeFvtP8uhHiBWpqVl\nvus6Gpl6hpNg6X96vHRcW+mB13I/h5YWA25EEwMCgYA5YbkrvJNuBVGZsQ+Zj1y8\nfhPHmVxH4c8KranuSc7mfXcSgAT/ywBTW7s65prisCfs/C6/WgAs2MBZykW4Kxlv\nO+W8Yqi0THgGR9En3vsKgz+ScWqkxs6HMQAQS/LtjzqUEnToY8d5AgYwBD8fCRUq\n5QKgjt9Bu5eDBOyQ6td4tQKBgBtDrOdRfTaoDBdyHGSvgBoXn0C8iTL/j1MAjXDG\n6NF7VNiyC8GP0ILJazfRrnjp7cou5Nav0pxyVHQniIq3wihD39irNbK16BDZ25Bj\nQ/1C+Qzing2VNvCnwEwHKpkOMrigZB1N6VSmFdIvwNNmrRoQMcIKvr5ZBY1GE/Bn\nfR53AoGBAIXaWIoDW5d9XwFa8HdxkgMPyLlizckZKyXASYEGWD2VU8P1NwA/bZ1t\nymioQPRJymTBfUL6E44Ebwx25DezjYEun1yqouZ+WZBlsEYtssffzTs2IocZ6aCN\nYfzt3orUEI/rWbRSqYFEuOntzzf3a7r3MtDU41e7iXcNkRSxCAIV\n-----END RSA PRIVATE KEY-----\n"}'
+DATABASE_URL=postgres://user:password@localhost:5432/database
 NEXTAUTH_URL=http://localhost:3000
 GOOGLE_CLIENT_ID=""
 GOOGLE_CLIENT_SECRET=""

frontend/codegen.yml

@@ -0,0 +1,32 @@
+schema:
+  - "http://localhost:8080/v1/graphql":
+      headers:
+        x-hasura-admin-secret: secret
+documents:
+  - "./**/*.graphql"
+watch: true
+config:
+  scalars:
+    DateTime: Date
+    JSON: "{ [key: string]: any }"
+    timestamptz: string
+    numeric: number
+overwrite: true
+generates:
+  ./generated/graphql.tsx:
+    plugins:
+      - "typescript"
+      - "typescript-operations"
+      - "typescript-react-apollo"
+      - "typescript-resolvers"
+    config:
+      maybeValue: T | undefined
+      withHooks: true
+      withComponent: true
+      withHOC: true
+    hooks:
+      afterOneFileWrite:
+        - prettier --write
+  ./graphql.schema.json:
+    plugins:
+      - "introspection"

frontend/components/access-denied-indicator/index.tsx → frontend/components/AccessDeniedIndicator/index.tsx

@@ -1,7 +1,8 @@
-import React, { FC } from "react";
-import { Icon, Flex, Button, Stack, Box } from "@chakra-ui/core";
-import Link from "next/link";
+import { WarningTwoIcon } from "@chakra-ui/icons";
+import { Box, Button, Flex, Stack } from "@chakra-ui/react";
 import { signIn } from "next-auth/client";
+import Link from "next/link";
+import React, { FC } from "react";
 
 interface IProps {
   message?: string;
@@ -11,7 +12,7 @@ const AccessDeniedIndicator: FC<IProps> = ({
   message = "You need to Sign In to view this content!",
 }) => {
   const iconNode = () => {
-    return <Icon name="warning-2" color="purple" size="50px" />;
+    return <WarningTwoIcon color="purple" size="50px" />;
   };
 
   const signInButtonNode = () => {

frontend/components/Layout/index.tsx

@@ -0,0 +1,16 @@
+import { Box, ChakraProvider, theme, VStack } from "@chakra-ui/react";
+import Navbar from "components/Navbar";
+import React, { FC } from "react";
+
+const Layout: FC = ({ children }) => {
+  return (
+    <ChakraProvider theme={theme}>
+      <Navbar />
+      <Box maxW="xl" mx="auto" w="full" py={8}>
+        {children}
+      </Box>
+    </ChakraProvider>
+  );
+};
+
+export default Layout;

frontend/components/loader/index.tsx → frontend/components/Loader/index.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from "react";
-import { Box, CircularProgress } from "@chakra-ui/core";
+import { Box, CircularProgress } from "@chakra-ui/react";
 
 interface Props {
   size?: string;

frontend/components/navbar/index.tsx → frontend/components/Navbar/index.tsx

@@ -1,25 +1,22 @@
-import React from "react";
-import { NextComponentType } from "next";
-import Link from "next/link";
-import { signIn, signOut, useSession } from "next-auth/client";
+import { MoonIcon, SunIcon } from "@chakra-ui/icons";
 import {
   Box,
-  Stack,
-  Link as _Link,
   Button,
   IconButton,
+  Link as _Link,
+  Stack,
   useColorMode,
-} from "@chakra-ui/core";
+} from "@chakra-ui/react";
+import { NextComponentType } from "next";
+import { signIn, signOut, useSession } from "next-auth/client";
+import Link from "next/link";
+import React from "react";
 
 const Navbar: NextComponentType = () => {
   const [session] = useSession();
   const { colorMode, toggleColorMode } = useColorMode();
-  const bgColor = { light: "white", dark: "gray.800" };
-  const color = { light: "gray.800", dark: "gray.100" };
 
   const handleToggleTheme = () => {
-    console.log("hello");
-
     toggleColorMode();
   };
 
@@ -91,15 +88,15 @@ const Navbar: NextComponentType = () => {
       <IconButton
         aria-label="Toggle theme"
         fontSize="20px"
-        icon={colorMode === "dark" ? "sun" : "moon"}
+        icon={colorMode === "dark" ? <SunIcon /> : <MoonIcon />}
         onClick={handleToggleTheme}
       />
     );
   };
 
   return (
-    <Box bg={bgColor[colorMode]}>
-      <Box p={4} color={color[colorMode]} shadow="lg" pos="relative">
+    <Box>
+      <Box p={4} shadow="lg" pos="relative">
         <Box maxW="xl" mx="auto" w="full">
           <Stack
             isInline

frontend/components/pages/error/index.tsx → frontend/components/Pages/Error/index.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from "react";
-import { Box, Heading, Stack, Text, Button, Flex } from "@chakra-ui/core";
+import { Box, Heading, Stack, Text, Button, Flex } from "@chakra-ui/react";
 import Link from "next/link";
 
 interface IProps {

frontend/components/pages/feeds/add-new-feed-form.tsx → frontend/components/Pages/Feeds/AddNewFeedForm.tsx

@@ -1,52 +1,40 @@
-import React, { useState, FormEvent } from "react";
-import gql from "graphql-tag";
-import { useMutation } from "urql";
 import {
-  Box,
-  Stack,
-  FormControl,
-  FormLabel,
-  Button,
   Alert,
   AlertIcon,
   AlertTitle,
+  Box,
+  Button,
   CloseButton,
+  FormControl,
+  FormLabel,
+  Stack,
   Textarea,
-  useColorMode,
-} from "@chakra-ui/core";
+} from "@chakra-ui/react";
+import AccessDeniedIndicator from "components/AccessDeniedIndicator";
+import { useInsertFeedMutation } from "generated-graphql";
 import { useSession } from "next-auth/client";
-import AccessDeniedIndicator from "components/access-denied-indicator";
-
-const insertFeedMutation = gql`
-  mutation insertFeed($author_id: uuid!, $body: String) {
-    insert_feeds_one(object: { author_id: $author_id, body: $body }) {
-      id
-    }
-  }
-`;
+import React, { ChangeEvent, useState } from "react";
 
 const AddNewFeedForm = () => {
-  const { colorMode } = useColorMode();
-  const bgColor = { light: "white", dark: "gray.800" };
-  const color = { light: "gray.800", dark: "gray.100" };
   const [body, setBody] = useState("");
   const [session] = useSession();
+  const [
+    insertFeed,
+    { loading: insertFeedFetching, error: insertFeedError },
+  ] = useInsertFeedMutation();
 
   if (!session) {
     return (
       <AccessDeniedIndicator message="You need to be signed in to add a new feed!" />
     );
   }
 
-  const [
-    { fetching: insertFeedFetching, error: insertFeedError },
-    insertFeed,
-  ] = useMutation(insertFeedMutation);
-
   const handleSubmit = async () => {
     await insertFeed({
-      author_id: session.id,
-      body,
+      variables: {
+        author_id: session.id,
+        body,
+      },
     });
 
     setBody("");
@@ -69,20 +57,14 @@ const AddNewFeedForm = () => {
   return (
     <Stack spacing={4}>
       {errorNode()}
-      <Box
-        p={4}
-        bg={bgColor[colorMode]}
-        color={color[colorMode]}
-        shadow="lg"
-        rounded="lg"
-      >
+      <Box p={4} shadow="lg" rounded="lg">
         <Stack spacing={4}>
           <FormControl isRequired>
             <FormLabel htmlFor="body">What's on your mind?</FormLabel>
             <Textarea
               id="body"
               value={body}
-              onChange={(e: FormEvent<HTMLInputElement>) =>
+              onChange={(e: ChangeEvent<HTMLTextAreaElement>) =>
                 setBody(e.currentTarget.value)
               }
               isDisabled={insertFeedFetching}

frontend/components/pages/feeds/feed.tsx → frontend/components/Pages/Feeds/Feed.tsx

@@ -1,18 +1,13 @@
+import { Avatar, Box, Stack, Text } from "@chakra-ui/react";
+import timeFromNow from "lib/timeFromNow";
 import React, { FC } from "react";
-import { Box, Stack, Text, Avatar, useColorMode } from "@chakra-ui/core";
 import IFeed from "types/feed";
-import timeFromNow from "lib/time-from-now";
 
 interface IProps {
   feed: IFeed;
 }
 
 const Feed: FC<IProps> = ({ feed }) => {
-  const { colorMode } = useColorMode();
-  const bgColor = { light: "white", dark: "gray.800" };
-  const color = { light: "gray.800", dark: "gray.100" };
-  const borderColor = { light: "gray.300", dark: "gray.700" };
-
   const authorNode = () => {
     return (
       <Stack
@@ -21,7 +16,6 @@ const Feed: FC<IProps> = ({ feed }) => {
         alignItems="center"
         p={4}
         borderBottomWidth={1}
-        borderColor={borderColor[colorMode]}
       >
         <Avatar name={feed.author.name} src={feed.author.image} />
         <Stack>
@@ -41,12 +35,7 @@ const Feed: FC<IProps> = ({ feed }) => {
   };
 
   return (
-    <Box
-      bg={bgColor[colorMode]}
-      color={color[colorMode]}
-      shadow="lg"
-      rounded="lg"
-    >
+    <Box shadow="lg" rounded="lg">
       <Stack spacing={0}>
         {authorNode()}
         {bodyNode()}

frontend/components/Pages/Feeds/index.tsx

@@ -0,0 +1,32 @@
+import { Box, Stack } from "@chakra-ui/react";
+import Loader from "components/Loader";
+import AddNewFeedForm from "components/Pages/Feeds/AddNewFeedForm";
+import Feed from "components/Pages/Feeds/Feed";
+import { useFetchFeedsSubscription } from "generated-graphql";
+import React from "react";
+import IFeed from "types/feed";
+
+const FeedsPageComponent = () => {
+  const { data } = useFetchFeedsSubscription();
+
+  if (!data) {
+    return <Loader />;
+  }
+
+  return (
+    <Stack spacing={8}>
+      <Box>
+        <AddNewFeedForm />
+      </Box>
+      {data.feeds.map((feed: IFeed, index: number) => {
+        return (
+          <Box key={index}>
+            <Feed feed={feed} />
+          </Box>
+        );
+      })}
+    </Stack>
+  );
+};
+
+export default FeedsPageComponent;

frontend/components/pages/index/index.tsx → frontend/components/Pages/Index/index.tsx

@@ -1,22 +1,12 @@
-import React from "react";
-import {
-  Box,
-  Heading,
-  Stack,
-  Text,
-  Button,
-  Flex,
-  useColorMode,
-} from "@chakra-ui/core";
+import { Box, Button, Flex, Heading, Stack, Text } from "@chakra-ui/react";
 import { signIn, signOut, useSession } from "next-auth/client";
 import Link from "next/link";
+import React from "react";
 
 const IndexPageComponent = () => {
   const [session] = useSession();
   const heightOfNavbar: string = "74px";
   const containerPadding: string = "1rem";
-  const { colorMode } = useColorMode();
-  const color = { light: "gray.800", dark: "gray.100" };
 
   const signInButtonNode = () => {
     if (session) {
@@ -66,14 +56,13 @@ const IndexPageComponent = () => {
         minH={`calc(100vh - ${heightOfNavbar} - ${containerPadding}*2)`}
         justifyContent="center"
         alignItems="center"
-        color={color[colorMode]}
       >
         <Stack spacing={4} maxW="xl" mx="auto">
           <Heading textAlign="center">Nextjs Hasura Boilerplate</Heading>
           <Text fontSize="xl" lineHeight="tall" textAlign="center">
             Boilerplate for building applications using Hasura and Next.js. This
             demo application has been built using Chakra UI, NextAuth.js and
-            urql.
+            Apollo.
           </Text>
           <Box>
             <Stack isInline align="center" justifyContent="center">