Recoil installation and defining global states (#417)

* created tag modal component

* added recoil in root.components.tsx

* feat: define recoil state

Co-authored-by: Kyoungjun Han <[email protected]>

forum/src/components/BoardMenu.tsx

@@ -26,6 +26,7 @@ const menuItems: any[] = [
   //   icon: <FreeChatIcon />,
   //   title: "School Select"
   // },
+
 ];
 
 const BoardMenu = () => {

forum/src/components/FilterMenu.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
+import TagsModal from "./TagsModal";
 
 const FilterMenu = () => {
   const [openSchoolModal, setOpenSchoolModal] = useState(false);
@@ -18,6 +19,7 @@ const FilterMenu = () => {
         >
           Courses
         </h1>
+        <TagsModal />
       </div>
 
       <h1
@@ -26,6 +28,7 @@ const FilterMenu = () => {
       >
         Select the School
       </h1>
+
       {/* School Select Div */}
       <h1>Undergrad, Grad</h1>
       <div className="border px-4 py-2 rounded-xl">

forum/src/components/TagsModal.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import { useState, useEffect } from "react";
+
+const TagsModal = () => {
+  const [show, setShow] = useState(false);
+
+  const handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
+
+
+  const tags: Array<string> = ["tag1", "tag2", "tag3"];
+  const [selectedTags, setSelectedTags] = useState([]);
+
+  return (
+    <>
+      <button
+        type="button"
+        className="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
+        data-bs-toggle="modal"
+        data-bs-target="#staticBackdrop"
+        onClick={handleShow}
+      >
+        Choose Tags
+      </button>
+
+      <div
+        className="modal fade fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
+        id="staticBackdrop"
+        data-bs-backdrop="static"
+        data-bs-keyboard="false"
+        tabIndex={-1}
+        aria-labelledby="staticBackdropLabel"
+        aria-hidden="true"
+      >
+        <div className="modal-dialog relative w-auto pointer-events-none">
+          <div className="modal-content border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current">
+            <div className="modal-header flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md">
+              <h5
+                className="text-xl font-medium leading-normal text-gray-800"
+                id="exampleModalLabel"
+              >
+                Choose Your Tags
+              </h5>
+              <button
+                type="button"
+                className="btn-close box-content w-4 h-4 p-1 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline"
+                data-bs-dismiss="modal"
+                aria-label="Close"
+              ></button>
+            </div>
+            <div className="modal-body relative p-4">...</div>
+            <div className="modal-footer flex flex-shrink-0 flex-wrap items-center justify-end p-4 border-t border-gray-200 rounded-b-md">
+              <button
+                type="button"
+                className="inline-block px-6 py-2.5 bg-purple-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-purple-700 hover:shadow-lg focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-purple-800 active:shadow-lg transition duration-150 ease-in-out"
+                data-bs-dismiss="modal"
+              >
+                Close
+              </button>
+              <button
+                type="button"
+                className="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out ml-1"
+              >
+                Apply
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default TagsModal;

forum/src/recoil/atom.d.ts

@@ -0,0 +1,6 @@
+export interface AtomOptions<T> {
+  key: NodeKey;
+  default: RecoilValue<T> | Promise<T> | T;
+  effects_UNSTABLE?: ReadonlyArray<AtomEffect<T>>;
+  dangerouslyAllowMutability?: boolean;
+}

forum/src/recoil/atoms.ts

@@ -0,0 +1,16 @@
+import { atom } from "recoil";
+
+export const currentBoardIdState = atom<string>({
+  key: "currentBoardId",
+  default: "Default Board",
+});
+
+export const currentTagsState = atom<string[]>({
+  key: "currentTags",
+  default: [],
+});
+
+export const currentGroupsState = atom<string[]>({
+  key: "currentGroups",
+  default: [],
+});

forum/src/root.component.tsx

@@ -7,6 +7,7 @@ import App from "@app/components/App";
 import translationEN from "@app/constants/locales/en/translation.json";
 import translationJA from "@app/constants/locales/ja/translation.json";
 import { ThemeProvider } from "@app/utils/theme-context";
+import { RecoilRoot } from 'recoil';
 
 import "@app/styles/main.css";
 
@@ -21,9 +22,11 @@ i18nConfig({
 export default function Root(props) {
   return (
     <section className="h-screen">
-      <ThemeProvider>
-        <App />
-      </ThemeProvider>
+      <RecoilRoot>
+        <ThemeProvider>
+          <App />
+        </ThemeProvider>
+      </RecoilRoot>
     </section>
   );
 }