From fda4fad87047b3da18d53f180309d9bcbe3c3593 Mon Sep 17 00:00:00 2001
From: ahmadxgani <ahmadxgani01@gmail.com>
Date: Sun, 12 Mar 2023 01:04:33 +0700
Subject: [PATCH] feat: optimize ssr side, and add compatibility with dark mode

---
 pages/_app.tsx                           |  7 +++---
 pages/new.tsx                            |  4 ++--
 src/components/editor/ImageTooltip.tsx   |  4 ++--
 src/components/editor/MilkdownEditor.tsx |  6 +++---
 src/components/fileUpload.tsx            |  4 ++--
 src/components/tag/index.tsx             |  4 ++--
 src/components/tag/suggestion.tsx        |  6 +++---
 src/context/chakra.context.tsx           | 27 ++++++++++++++++++++++++
 8 files changed, 44 insertions(+), 18 deletions(-)
 create mode 100644 src/context/chakra.context.tsx

diff --git a/pages/_app.tsx b/pages/_app.tsx
index d9d76bb..67c3088 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,22 +1,21 @@
 import "./swiper.css";
 import type { AppProps } from "next/app";
 import { ApolloProvider } from "@apollo/client";
-import { ChakraProvider } from "@chakra-ui/react";
 
 import "@fontsource/lexend/500.css";
 import "@fontsource/roboto-slab/500.css";
 
+import { Chakra } from "src/context/chakra.context";
 import { useApollo } from "src/hooks/apollo";
-import theme from "theme";
 
 export default function App({ Component, pageProps }: AppProps) {
   const apolloClient = useApollo(pageProps.initialApolloState);
 
   return (
     <ApolloProvider client={apolloClient}>
-      <ChakraProvider theme={theme}>
+      <Chakra>
         <Component {...pageProps} />
-      </ChakraProvider>
+      </Chakra>
     </ApolloProvider>
   );
 }
diff --git a/pages/new.tsx b/pages/new.tsx
index 8141fda..7239da2 100644
--- a/pages/new.tsx
+++ b/pages/new.tsx
@@ -1,4 +1,4 @@
-import { Box, Input, VStack } from "@chakra-ui/react";
+import { Box, Input, useColorModeValue, VStack } from "@chakra-ui/react";
 import UploadImage from "components/fileUpload";
 import MainLayout from "components/layout/main.layout";
 import TagInput from "src/context/tag.context";
@@ -14,7 +14,7 @@ const NewPost = () => {
   return (
     <MainLayout title={"New Post"}>
       <Box px={4}>
-        <VStack as="form" maxW="50rem" w="full" alignItems={"stretch"} spacing={4} bg="cyan.100" p={10} mx="auto" rounded="lg">
+        <VStack as="form" maxW="50rem" w="full" alignItems={"stretch"} spacing={4} bg={useColorModeValue("cyan.100", "cyan.900")} p={10} mx="auto" rounded="lg">
           <UploadImage />
           <Input type={"text"} fontSize="5xl" size="lg" border="none" background="transparent" _focus={{ boxShadow: "none" }} placeholder="New post title here..." _placeholder={{ fontWeight: 700 }} />
           <TagInput />
diff --git a/src/components/editor/ImageTooltip.tsx b/src/components/editor/ImageTooltip.tsx
index ff26def..ec7294e 100644
--- a/src/components/editor/ImageTooltip.tsx
+++ b/src/components/editor/ImageTooltip.tsx
@@ -1,4 +1,4 @@
-import { Box, FormControl, FormLabel, HStack, Input } from "@chakra-ui/react";
+import { Box, FormControl, FormLabel, HStack, Input, useColorModeValue } from "@chakra-ui/react";
 import { commandsCtx } from "@milkdown/core";
 import { TooltipProvider, tooltipFactory } from "@milkdown/plugin-tooltip";
 import { updateImageCommand } from "@milkdown/preset-commonmark";
@@ -68,7 +68,7 @@ export const ImageTooltip: React.FC = () => {
 
   return (
     <Box display="none">
-      <HStack ref={ref} bg="gray.100" p="5" rounded="lg">
+      <HStack ref={ref} bg={useColorModeValue("gray.100", "gray.900")} p="5" rounded="lg">
         <FormControl>
           <FormLabel>Link</FormLabel>
           <Input
diff --git a/src/components/editor/MilkdownEditor.tsx b/src/components/editor/MilkdownEditor.tsx
index 85856e3..737c4ac 100644
--- a/src/components/editor/MilkdownEditor.tsx
+++ b/src/components/editor/MilkdownEditor.tsx
@@ -1,5 +1,5 @@
 import { CmdKey } from "@milkdown/core";
-import { Box, HStack, IconButton, VStack } from "@chakra-ui/react";
+import { Box, HStack, IconButton, useColorModeValue, VStack } from "@chakra-ui/react";
 import { GrUndo, GrRedo, GrBold, GrItalic, GrStrikeThrough, GrOrderedList, GrUnorderedList, GrBlockQuote } from "react-icons/gr";
 import { useMilkdownEditor } from "src/hooks/useEditor";
 import { callCommand } from "@milkdown/utils";
@@ -18,7 +18,7 @@ const MilkdownEditor: React.FC = () => {
 
   return (
     <VStack h="33rem" alignItems="stretch">
-      <Box bg="gray.50" p="3" rounded="md">
+      <Box bg={useColorModeValue("gray.50", "gray.800")} p="3" rounded="md">
         <HStack>
           <IconButton icon={<GrUndo />} aria-label="Undo" onClick={() => call(undoCommand.key)} />
           <IconButton icon={<GrRedo />} aria-label="Redo" onClick={() => call(redoCommand.key)} />
@@ -30,7 +30,7 @@ const MilkdownEditor: React.FC = () => {
           <IconButton icon={<GrBlockQuote />} aria-label="Quote" onClick={() => call(wrapInBlockquoteCommand.key)} />
         </HStack>
       </Box>
-      <Prose bg="gray.50" h="full" overflow="auto" overscroll="none" shadow="xl" rounded="xl">
+      <Prose bg={useColorModeValue("gray.50", "gray.800")} h="full" overflow="auto" overscroll="none" shadow="xl" rounded="xl">
         <Milkdown />
       </Prose>
     </VStack>
diff --git a/src/components/fileUpload.tsx b/src/components/fileUpload.tsx
index 9330a93..bd4b8cb 100644
--- a/src/components/fileUpload.tsx
+++ b/src/components/fileUpload.tsx
@@ -1,5 +1,5 @@
 import { ReactNode, useRef } from "react";
-import { Button, FormControl, FormErrorMessage, Icon, InputGroup } from "@chakra-ui/react";
+import { Button, FormControl, FormErrorMessage, Icon, InputGroup, useColorModeValue } from "@chakra-ui/react";
 import { useForm, UseFormRegisterReturn } from "react-hook-form";
 import { FiImage } from "react-icons/fi";
 
@@ -66,7 +66,7 @@ const App = () => {
     <>
       <FormControl isInvalid={!!errors.file_} isRequired>
         <FileUpload accept={"image/*"} multiple register={register("file_", { validate: validateFiles })}>
-          <Button leftIcon={<Icon as={FiImage} />} bg="gray.50">
+          <Button leftIcon={<Icon as={FiImage} />} bg={useColorModeValue("gray.50", "gray.800")}>
             Add a cover image
           </Button>
         </FileUpload>
diff --git a/src/components/tag/index.tsx b/src/components/tag/index.tsx
index 9279306..44bf208 100644
--- a/src/components/tag/index.tsx
+++ b/src/components/tag/index.tsx
@@ -1,4 +1,4 @@
-import { Box, HStack, Input, Tag, TagCloseButton, TagLabel } from "@chakra-ui/react";
+import { Box, HStack, Input, Tag, TagCloseButton, TagLabel, useColorModeValue } from "@chakra-ui/react";
 
 import { Suggestion } from "./suggestion";
 import { useTag } from "src/context/tag.context";
@@ -67,7 +67,7 @@ const Tags = () => {
 
   return (
     <Box>
-      <HStack p={1} px={3} spacing={0} bg={readOnly ? "gray.100" : "gray.50"} rounded="xl" roundedBottom={suggestionTags.length || query.length ? "none" : "xl"}>
+      <HStack p={1} px={3} spacing={0} bg={useColorModeValue(readOnly ? "gray.100" : "gray.50", readOnly ? "gray.900" : "gray.800")} rounded="xl" roundedBottom={suggestionTags.length || query.length ? "none" : "xl"}>
         <StoredTags />
         <Input
           value={query}
diff --git a/src/components/tag/suggestion.tsx b/src/components/tag/suggestion.tsx
index 1f313ae..b2d9074 100644
--- a/src/components/tag/suggestion.tsx
+++ b/src/components/tag/suggestion.tsx
@@ -1,4 +1,4 @@
-import { Box, VStack, Divider } from "@chakra-ui/react";
+import { Box, VStack, Divider, useColorModeValue } from "@chakra-ui/react";
 import { useEffect, useRef } from "react";
 import { useTag } from "src/context/tag.context";
 
@@ -40,7 +40,7 @@ export const Suggestion: React.FC = () => {
                 listStyleType="none"
                 p={3}
                 rounded={0}
-                bgColor={suggestionTags.indexOf(selectedTag) == index ? "gray.100" : "gray.50"}
+                bg={useColorModeValue(suggestionTags.indexOf(selectedTag) == index ? "gray.100" : "gray.50", suggestionTags.indexOf(selectedTag) == index ? "gray.900" : "gray.800")}
                 cursor="pointer"
                 key={item}
                 id={suggestionTags.indexOf(selectedTag) == index ? "selected" : undefined}
@@ -52,7 +52,7 @@ export const Suggestion: React.FC = () => {
               </Box>
             ))
           ) : (
-            <Box as={"li"} listStyleType="none" p={3} rounded={0} _hover={{ bgColor: "gray.100", cursor: "not-allowed" }}>
+            <Box as={"li"} listStyleType="none" p={3} rounded={0} _hover={{ bg: useColorModeValue("gray.100", "gray.900"), cursor: "not-allowed" }}>
               Tag not found!
             </Box>
           )}
diff --git a/src/context/chakra.context.tsx b/src/context/chakra.context.tsx
new file mode 100644
index 0000000..23df1f8
--- /dev/null
+++ b/src/context/chakra.context.tsx
@@ -0,0 +1,27 @@
+// e.g. src/Chakra.js
+// a) import `ChakraProvider` component as well as the storageManagers
+import { ChakraProvider, cookieStorageManagerSSR, localStorageManager } from "@chakra-ui/react";
+import { GetServerSidePropsContext } from "next";
+import theme from "theme";
+
+export function Chakra({ cookies, children }: { cookies?: string | undefined; children: React.ReactNode }) {
+  // b) Pass `colorModeManager` prop
+  const colorModeManager = typeof cookies === "string" ? cookieStorageManagerSSR(cookies) : localStorageManager;
+
+  return (
+    <ChakraProvider colorModeManager={colorModeManager} theme={theme}>
+      {children}
+    </ChakraProvider>
+  );
+}
+
+// also export a reusable function getServerSideProps
+export function getServerSideProps({ req }: GetServerSidePropsContext) {
+  return {
+    props: {
+      // first time users will not have any cookies and you may not return
+      // undefined here, hence ?? is necessary
+      cookies: req.headers.cookie ?? "",
+    },
+  };
+}