From 36db47ad0e47bb2788f10c49ae6b5a07c3733007 Mon Sep 17 00:00:00 2001
From: Kyoungjun Han <kjers96@gmail.com>
Date: Thu, 5 Jan 2023 21:29:53 +0900
Subject: [PATCH] update for jan 5 2023

---
 forum/src/components/Atoms.tsx      |  8 +++++
 forum/src/components/FilterMenu.tsx |  7 ++--
 forum/src/components/ModalTags.tsx  | 30 ----------------
 forum/src/components/TagsModal.tsx  | 55 +++++++++++++++++++++++------
 4 files changed, 57 insertions(+), 43 deletions(-)
 create mode 100644 forum/src/components/Atoms.tsx
 delete mode 100644 forum/src/components/ModalTags.tsx

diff --git a/forum/src/components/Atoms.tsx b/forum/src/components/Atoms.tsx
new file mode 100644
index 000000000..233e7fc60
--- /dev/null
+++ b/forum/src/components/Atoms.tsx
@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { atom } from 'recoil';
+import { useRecoilState } from 'recoil';
+
+export const TagState = atom({
+    key: 'tagState',
+    default: [],
+  });
\ No newline at end of file
diff --git a/forum/src/components/FilterMenu.tsx b/forum/src/components/FilterMenu.tsx
index c52d30d24..8c25b730f 100644
--- a/forum/src/components/FilterMenu.tsx
+++ b/forum/src/components/FilterMenu.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import TagsModal from "./TagsModal";
-import ModalTags from "./ModalTags";
+
 
 const FilterMenu = () => {
   const [openSchoolModal, setOpenSchoolModal] = useState(false);
@@ -26,7 +26,6 @@ const FilterMenu = () => {
         >
           Courses
         </h1>
-        <TagsModal />
       </div>
 
       <h1
@@ -45,6 +44,10 @@ const FilterMenu = () => {
       <div className="border px-4 py-2 rounded-xl">
         <h1>English</h1>
       </div>
+      <br/>
+      <div>
+      <TagsModal />
+      </div>
     </div>
   );
 };
diff --git a/forum/src/components/ModalTags.tsx b/forum/src/components/ModalTags.tsx
deleted file mode 100644
index d2e3b45a8..000000000
--- a/forum/src/components/ModalTags.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React, { useState } from 'react';
-import { Modal } from 'react-bootstrap';
-
-const ModalTags: React.FC = () => {
-  const [show, setShow] = useState(false);
-
-  const handleClose = () => setShow(false);
-  const handleShow = () => setShow(true);
-
-  return (
-    <>
-      <button type="button" onClick={handleShow}>
-        Select Tags
-      </button>
-      <Modal show={show} onHide={handleClose} backdrop="static">
-        <Modal.Header closeButton>
-          <Modal.Title>Select Your Tags</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>Tags here.</Modal.Body>
-        <Modal.Footer>
-          <button type="button" onClick={handleClose}>
-            Close
-          </button>
-        </Modal.Footer>
-      </Modal>
-    </>
-  );
-};
-
-export default ModalTags;
diff --git a/forum/src/components/TagsModal.tsx b/forum/src/components/TagsModal.tsx
index 7babcd9db..143fbbb2b 100644
--- a/forum/src/components/TagsModal.tsx
+++ b/forum/src/components/TagsModal.tsx
@@ -1,5 +1,8 @@
 import React from "react";
 import { useState, useEffect } from "react";
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
+import { atom } from 'recoil';
+import { TagState } from './Atoms'
 
 const TagsModal: React.FC = () => {
   const [show, setShow] = useState(false);
@@ -7,15 +10,33 @@ const TagsModal: React.FC = () => {
   const handleClose = () => setShow(false);
   const toggleShow = () => setShow(!show);
   
+  const testing = useRecoilState(TagState)
 
   const tags: Array<string> = ["tag1", "tag2", "tag3"];
-  const [selectedTags, setSelectedTags] = useState([]);
-
+  /* const tags = useRecoilValue(TagState) */
+  const [selectedTags, setSelectedTags] = useState<[]>([])
+  const setTagsSelected = useSetRecoilState(TagState);
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value;
+    if (selectedTags.indexOf(value) === -1) {
+      setSelectedTags([...selectedTags, value]);
+    } else {
+      setSelectedTags(selectedTags.filter((item) => item !== value));
+    }
+  };
+  console.log(selectedTags);
+  
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    toggleShow();
+    setTagsSelected(selectedTags)
+  };
+  console.log(testing)
   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"
+        className="border bg-light-lighter hover:bg-light-main cursor-pointer text-white text-center rounded-xl px-4 py-2"
         onClick={toggleShow}
       >
         Choose Tags
@@ -39,22 +60,34 @@ const TagsModal: React.FC = () => {
               >
                 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"
-              ></button>
             </div>
-            <div className="modal-body relative p-4">...</div>
+            <div className="modal-body relative p-4">
+              {tags.map(tag => (
+                <div>
+                <label key={tag}>
+                  <input
+                    type="checkbox"
+                    value={tag}
+                    checked={selectedTags.indexOf(tag) !== -1}
+                    onChange={handleChange}
+                  />
+                  {tag}
+                </label>
+                </div>
+              ))}
+            </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"
+                className="border bg-light-lighter hover:bg-light-main cursor-pointer text-white text-center rounded-xl px-4 py-2"
+                onClick={toggleShow}
               >
                 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"
+                type="submit"
+                className="border bg-light-lighter hover:bg-light-main cursor-pointer text-white text-center rounded-xl px-4 py-2"
+                onClick={handleSubmit}
               >
                 Apply
               </button>