feat: add fileUpload, editor, and tag/category input component and cr…

…eate post page

create custom react context and reducer

also refactor code and folder structure, and editorjs plugin dependencies

lib/GraphQL/Queries.ts

@@ -72,7 +72,6 @@ export const SHOW_ALL_TAGS = gql`
   query ShowAllTags {
     showAllTag {
       name
-      id
     }
   }
 `;

lib/constants/category.ts

@@ -0,0 +1,6 @@
+const KEY_CODES = {
+  comma: 188,
+  enter: 13,
+};
+
+export const DELIMITER = [KEY_CODES.comma, KEY_CODES.enter];

lib/constants/types.ts

@@ -0,0 +1,23 @@
+import { useTagSource } from "src/context/tag.context";
+
+export type TagState = {
+  suggestions: string[];
+  tags: string[];
+  input: string;
+};
+
+export type TagProviderType = ReturnType<typeof useTagSource>;
+
+export type TagAction =
+  | {
+      type: "insert";
+      payload: {
+        name: string;
+      };
+    }
+  | {
+      type: "delete";
+      payload: {
+        index: number;
+      };
+    };

src/utility.ts → lib/utility.ts

@@ -9,3 +9,12 @@ export const setToStorage = (key: string, value: string) => {
     return window.localStorage.setItem(key, value);
   }
 };
+
+export const escapedRegex = (text: string) => {
+  return text.trim().replace(/[-\\^$*+?.()|[\]{}]/g, "\\$&");
+};
+
+export const stopNextEvent = (event: React.KeyboardEvent<HTMLInputElement>) => {
+  event.stopPropagation();
+  event.preventDefault();
+};

package.json

@@ -14,6 +14,8 @@
     "@apollo/link-error": "^2.0.0-beta.3",
     "@apollo/react-hooks": "^4.0.0",
     "@chakra-ui/react": "^2.4.6",
+    "@editorjs/editorjs": "^2.26.5",
+    "@editorjs/header": "^2.7.0",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@next/font": "13.0.7",
@@ -31,6 +33,7 @@
     "next": "13.0.7",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-hook-form": "^7.43.3",
     "react-icons": "^4.7.1",
     "typescript": "4.9.4"
   },

pages/[username]/index.tsx

@@ -2,7 +2,7 @@ import { GetServerSidePropsContext } from "next";
 import { Heading } from "@chakra-ui/react";
 import MainLayout from "components/layout/main.layout";
 import { Query } from "generated-types";
-import { addApolloState, initializeApollo } from "lib/GraphQL/apollo";
+import { addApolloState, initializeApollo } from "src/hooks/apollo";
 import { CURRENT_USER } from "lib/GraphQL/Queries";
 import { useRouter } from "next/router";
 import { withWrapper } from "src/hooks/withWrapper";

pages/_app.tsx

@@ -2,7 +2,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 { useApollo } from "src/hooks/apollo";
 import theme from "theme";
 
 export default function App({ Component, pageProps }: AppProps) {

pages/new.tsx

@@ -1,10 +1,24 @@
-import { Heading } from "@chakra-ui/react";
+import { Heading, Input, VStack } from "@chakra-ui/react";
+import UploadImage from "components/fileUpload";
 import MainLayout from "components/layout/main.layout";
+import dynamic from "next/dynamic";
+import TagInput from "src/context/tag.context";
+
+const Editor = dynamic(() => import("components/editor"), {
+  loading: () => <>loading...</>,
+  ssr: false,
+});
 
 const NewPost = () => {
   return (
     <MainLayout title={"New Post"}>
-      <Heading>Create Post Page</Heading>
+      <Heading>Create Post</Heading>
+      <VStack as="form" maxW="50rem" w="full" alignItems={"stretch"} spacing={4} bg="cyan.100" p={10} 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 />
+        <Editor />
+      </VStack>
     </MainLayout>
   );
 };

src/components/editor/index.tsx

@@ -0,0 +1,21 @@
+import { Box } from "@chakra-ui/react";
+import EditorJS from "@editorjs/editorjs";
+import Header from "@editorjs/header";
+
+const Editor = () => {
+  const editor = new EditorJS({
+    holder: "editorjs",
+    tools: {
+      headers: Header,
+    },
+    autofocus: false,
+  });
+
+  return (
+    <Box w="full" h="full">
+      <div id="editorjs"></div>
+    </Box>
+  );
+};
+
+export default Editor;