feat: add has mounted hook

refactor code remove popover warn chakra-ui/chakra-ui#1988
ahmadxgani · Feb 26, 2023 · 4b6f5a6 · 4b6f5a6
1 parent da6eeda
commit 4b6f5a6
Show file tree

Hide file tree

Showing 12 changed files with 135 additions and 439 deletions.
diff --git a/generated-types.ts b/generated-types.ts
diff --git a/lib/GraphQL/Mutations.ts b/lib/GraphQL/Mutations.ts
@@ -1,41 +1,32 @@
 import { gql } from "@apollo/client";
 
 export const CREATE_POST = gql`
-  mutation CreatePost($content: String!, $tags: [Int!], $slug: String!, $title: String!) {
+  mutation CreatePost($content: String!, $tags: [String!], $slug: String!, $title: String!) {
     createPost(payload: { title: $title, content: $content, tags: $tags, slug: $slug }) {
       slug
     }
   }
 `;
 
-export const BOOKMARK_POST = gql`
-  mutation BookmarkPost($id: Int!) {
-    bookmarkPost(payload: { idPost: $id }) {
-      isBookmarked
-    }
-  }
-`;
-
 export const LOGIN = gql`
   mutation Login($email: String!, $password: String!) {
     login(payload: { email: $email, password: $password }) {
       username
       email
-      image
     }
   }
 `;
 
 export const LIKE_POST = gql`
   mutation LikePost($id: Int!) {
-    likePost(payload: { idPost: $id }) {
+    likePost(payload: { id: $id }) {
       likes
     }
   }
 `;
 
 export const EDIT_POST = gql`
-  mutation UpdatePost($content: String!, $tags: [Int!], $slug: String!, $title: String!, $id: Int!) {
+  mutation UpdatePost($content: String!, $tags: [String!], $slug: String!, $title: String!, $id: Int!) {
     updatePost(payload: { title: $title, content: $content, tags: $tags, slug: $slug, id: $id }) {
       slug
     }
@@ -50,14 +41,6 @@ export const DELETE_POST = gql`
   }
 `;
 
-export const UPLOAD_IMAGE = gql`
-  mutation UploadFile($file: Upload!) {
-    uploadFile(file: $file) {
-      url
-    }
-  }
-`;
-
 export const REGISTER = gql`
   mutation CreateAuthor($username: String!, $password: String!, $email: String!) {
     createAccount(payload: { username: $username, password: $password, email: $email }) {

diff --git a/lib/GraphQL/Queries.ts b/lib/GraphQL/Queries.ts
@@ -1,18 +1,5 @@
 import { gql } from "@apollo/client";
 
-export const MY_BOOKMARK = gql`
-  query MyBookmark {
-    getMyBookmark {
-      id
-      title
-      author {
-        id
-        username
-      }
-    }
-  }
-`;
-
 export const GET_POST = gql`
   query GetPost($slug: String!) {
     getPost(payload: { slug: $slug }) {
@@ -22,7 +9,9 @@ export const GET_POST = gql`
         image
       }
       title
-      likes
+      like {
+        likes
+      }
       content
       slug
       createdAt
@@ -35,34 +24,10 @@ export const GET_POST = gql`
   }
 `;
 
-export const GET_LIKE = gql`
-  query GetLikePost($id: Int!) {
-    likedPost(payload: { id: $id }) {
-      isLiked
-    }
-  }
-`;
-
-export const GET_ROLE = gql`
-  query GetRole($id: Int!) {
-    getAuthorById(payload: { id: $id }) {
-      role
-    }
-  }
-`;
-
 export const LOAD_POSTS = gql`
   query LoadPosts {
     showAllPost {
-      id
       title
-      slug
-      tags {
-        name
-      }
-      author {
-        image
-      }
     }
   }
 `;
@@ -98,7 +63,6 @@ export const SHOW_ALL_USERS = gql`
       id
       username
       email
-      role
     }
   }
 `;

diff --git a/lib/auth.tsx b/lib/auth.tsx
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,6 +1,7 @@
 import type { AppProps } from "next/app";
 import { ApolloProvider } from "@apollo/client";
 import { ChakraProvider } from "@chakra-ui/react";
+
 import { useApollo } from "lib/GraphQL/apollo";
 import theme from "theme";
 

diff --git a/pages/login.tsx b/pages/login.tsx
@@ -6,7 +6,7 @@ import NextLink from "next/link";
 import { Mutation } from "generated-types";
 import { AuthLayout } from "components/layout";
 import { LOGIN } from "lib/GraphQL/Mutations";
-import { withNoAuth } from "lib/auth";
+import { withNoAuth } from "src/hooks/withNoAuth";
 import { CURRENT_USER } from "lib/GraphQL/Queries";
 
 const Login = () => {
@@ -22,9 +22,6 @@ const Login = () => {
         isClosable: true,
       });
     },
-    onCompleted(data) {
-      console.log(data);
-    },
     fetchPolicy: "no-cache",
   });
   const [email, setEmail] = useState("");
@@ -44,10 +41,12 @@ const Login = () => {
           cache.writeQuery({
             query: CURRENT_USER,
             data: {
-              email: user.email,
-              username: user.username
-            }
-          })
+              loggedInAuthor: {
+                email: user.email,
+                username: user.username,
+              },
+            },
+          });
         },
       });
     }

diff --git a/pages/profile.tsx b/pages/profile.tsx
@@ -2,9 +2,9 @@ import { GetServerSidePropsContext } from "next";
 import { Heading } from "@chakra-ui/react";
 import MainLayout from "components/layout/main.layout";
 import { Query } from "generated-types";
-import { withAuth } from "lib/auth";
 import { addApolloState, initializeApollo } from "lib/GraphQL/apollo";
-import { MY_BOOKMARK } from "lib/GraphQL/Queries";
+import { CURRENT_USER } from "lib/GraphQL/Queries";
+
 const Profile = () => {
   return (
     <MainLayout title="Profile">
@@ -18,7 +18,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
 
   try {
     await client.query<Query>({
-      query: MY_BOOKMARK,
+      query: CURRENT_USER,
     });
 
     return addApolloState(client, {
@@ -28,11 +28,11 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
     return {
       props: {},
       redirect: {
-        destination: "/signin",
+        destination: "/login",
         permanent: false,
       },
     };
   }
 };
 
-export default withAuth(Profile);
+export default Profile;
diff --git a/src/components/navbar/index.tsx b/src/components/navbar/index.tsx
@@ -1,9 +1,16 @@
-import { Avatar, Button, Flex, HStack, Input, InputGroup, InputLeftElement, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Spacer, Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
-import Link from "next/link";
-import { MdLogin } from "react-icons/md";
+/* eslint-disable react/no-children-prop */
+import { Avatar, Flex, HStack, Input, InputGroup, InputLeftElement, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Spacer, Tab, TabList, Tabs, Button, Portal } from "@chakra-ui/react";
 import { RiSearchLine } from "react-icons/ri";
+import { MdLogin } from "react-icons/md";
+import { useQuery } from "@apollo/client";
+
+import { CURRENT_USER } from "lib/GraphQL/Queries";
+import { Query } from "generated-types";
+import NextLink from "next/link";
 
 export const Navbar = () => {
+  const { data } = useQuery<Query>(CURRENT_USER);
+
   return (
     <Flex as={"nav"} bg={"whiteAlpha.200"} width={"full"} p={"3"}>
       <HStack spacing={3}>
@@ -18,30 +25,35 @@ export const Navbar = () => {
         <Tabs>
           <TabList>
             <Tab>Home</Tab>
-            <Tab>New Post</Tab>
+            {data?.loggedInAuthor && <Tab>New Post</Tab>}
           </TabList>
         </Tabs>
-        {/* conditional section */}
-        {/* <Button leftIcon={<MdLogin />} colorScheme="teal" variant="solid">
-          Sign In
-        </Button> */}
-
-        {/* create handler onclick on logout */}
-        <Menu placement="bottom-end">
-          <MenuButton>
-            <Avatar src={"/images/profile.jpg"} size={"md"} />
-          </MenuButton>
-          <MenuList>
-            {/* page for editable user data */}
-            <MenuItem>
-              <Link href="/profile">Setting</Link>
-            </MenuItem>
-            {/* show profile user like post, bookmarked, etc... if user role is member and show manager page if user role is admin */}
-            <MenuItem>Dashboard</MenuItem>
-            <MenuDivider />
-            <MenuItem>Logout</MenuItem>
-          </MenuList>
-        </Menu>
+        {data?.loggedInAuthor ? (
+          <Menu placement="bottom-end">
+            <MenuButton>
+              <Avatar src={"/images/profile.jpg"} size={"md"} />
+            </MenuButton>
+            <Portal>
+              <MenuList>
+                {/* page for editable user data */}
+                <MenuItem as={NextLink} href="/setting">
+                  Setting
+                </MenuItem>
+                {/* show profile user like post, bookmarked, etc... if user role is member and show manager page if user role is admin */}
+                <MenuItem>Dashboard</MenuItem>
+                <MenuDivider />
+                <MenuItem onClick={() => (document.cookie = "token=;expires=Thu, 01 Jan 1970 00:00:00 GMT")}>Logout</MenuItem>
+              </MenuList>
+            </Portal>
+          </Menu>
+        ) : (
+          <NextLink href="/login" passHref legacyBehavior>
+            <Button as="a" leftIcon={<MdLogin />} colorScheme="teal" variant="solid">
+              Sign In
+            </Button>
+          </NextLink>
+          // <p>hello</p>
+        )}
       </HStack>
     </Flex>
   );

diff --git a/src/hooks/ClientOnly.tsx b/src/hooks/ClientOnly.tsx
@@ -0,0 +1,15 @@
+import useHasMounted from "./useHasMounted"
+
+const OnlyOnClient: React.FC<React.PropsWithChildren> = ({ children }) => {
+  const isMounted = useHasMounted()
+
+  if (!isMounted) return null
+
+  return (
+    <>
+      {children}
+    </>
+  )
+}
+
+export default OnlyOnClient
diff --git a/src/hooks/useHasMounted.tsx b/src/hooks/useHasMounted.tsx
@@ -0,0 +1,11 @@
+import { useState, useEffect } from "react";
+
+const useHasMounted = () => {
+  const [isMounted, setIsMounted] = useState(false);
+  useEffect(() => {
+    setIsMounted(true);
+  }, [isMounted]);
+  return isMounted;
+};
+
+export default useHasMounted;