From 5cea8f0621ee39962fc2907ed6be2038b956b963 Mon Sep 17 00:00:00 2001
From: Pranav Ramesh <laphatize@protonmail.com>
Date: Sun, 15 Sep 2024 00:06:36 -0400
Subject: [PATCH] sync options to local storage

---
 package.json                          |  3 +-
 src/components/practice/community.jsx | 28 ++++++++++-
 src/pages/create.jsx                  | 71 +++++++++++++++++++++++++++
 3 files changed, 100 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 62c0282d..f36fd898 100644
--- a/package.json
+++ b/package.json
@@ -87,7 +87,8 @@
     "tailwind-merge": "^2.3.0",
     "tailwindcss": "^3.2.1",
     "tailwindcss-animate": "^1.0.7",
-    "xterm": "^5.3.0"
+    "xterm": "^5.3.0",
+    "node-fetch": "^2.6.7"
   },
   "devDependencies": {
     "eslint": "8.26.0",
diff --git a/src/components/practice/community.jsx b/src/components/practice/community.jsx
index 14689a20..be6e7f2b 100644
--- a/src/components/practice/community.jsx
+++ b/src/components/practice/community.jsx
@@ -5,6 +5,7 @@ import { Listbox, Transition } from '@headlessui/react';
 import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/24/solid';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faFolderOpen } from '@fortawesome/free-solid-svg-icons';
+
 function getCategoryIcon(category) {
   switch (category.toLowerCase()) {
     case 'forensics':
@@ -79,7 +80,6 @@ function CategorySelect({ category, setCategory, isDifficulty }) {
                 <ChevronUpDownIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
               </span>
             </Listbox.Button>
-
             <Transition
               show={open}
               as={Fragment}
@@ -137,6 +137,32 @@ export function Community({ challenges }) {
   const [filter, setFilter] = useState('');
   const [solvedFilter, setSolvedFilter] = useState('all');
 
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      setDifficulty(localStorage.getItem('difficulty') || 'all');
+      setCategory(localStorage.getItem('category') || 'all');
+      setSolvedFilter(localStorage.getItem('solvedFilter') || 'all');
+    }
+  }, []);
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      localStorage.setItem('difficulty', difficulty);
+    }
+  }, [difficulty]);
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      localStorage.setItem('category', category);
+    }
+  }, [category]);
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      localStorage.setItem('solvedFilter', solvedFilter);
+    }
+  }, [solvedFilter]);
+
   useEffect(() => {
     const filteredChallenges = challenges
       .filter((challenge) => {
diff --git a/src/pages/create.jsx b/src/pages/create.jsx
index 4ae17cf6..337eac00 100644
--- a/src/pages/create.jsx
+++ b/src/pages/create.jsx
@@ -567,6 +567,77 @@ export default function Create() {
                 </div>
 
 
+                <hr className='mt-4 border-neutral-700'></hr>
+                <div className=" mt-4  pb-4  ">
+                  <div className="flex items-center">
+                    <h1 className="flex-1 text-2xl font-medium  text-white">
+                      <div className="flex">
+                        Your Learn Modules
+                        <div className='ml-auto'>
+                          <button onClick={() => { setIsCreating(true) }} className='bg-blue-700 text-sm shadow-sm hover:bg-blue-700/90 px-2 py-1 text-white rounded-sm mr-3'>New Draft Module</button>
+
+                        </div>
+
+
+
+                      </div>
+
+
+
+                      <div className="mt-4 flow-root">
+                        <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+                          <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
+                            <table className="min-w-full divide-y divide-neutral-800 border border-neutral-800">
+                              <thead>
+                                <tr>
+                                  <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text--white">
+                                    Module Name
+                                  </th>
+                               
+
+                                  <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text--white">
+                                    Last Updated
+                                  </th>
+                                  <th scope="col" className="relative py-3.5 pl-3 pr-4 sm:pr-3">
+                                    <span className="sr-only">Edit</span>
+                                  </th>
+                                </tr>
+                              </thead>
+                              <tbody className="bg-neutral-800">
+                                {writeups.map((writeup) => (
+                                  <tr key={writeup.title} className="even:bg-neutral-900">
+
+                                    <td className="whitespace-nowrap px-3 py-4 text-sm text-white">
+                                      {writeup.draft &&
+                                        <span className='text-yellow-400 bg-yellow-900 px-2 rounded-full mr-2'>draft</span>
+                                      }
+
+                                      {!writeup.draft &&
+                                        <span className='text-green-400 bg-green-900 px-2 rounded-full mr-2'>published</span>
+                                      }
+
+                                      {writeup.title} </td>
+                                   
+                                    <td className="whitespace-nowrap px-3 py-4 text-sm text-white">{new Date(writeup.updatedAt).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}</td>
+
+                                    <td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-3">
+                                        <button className='bg-neutral-700 text-sm shadow-sm hover:bg-neutral-700/90 px-2 py-1 text-white rounded-sm mr-3'>Open in Studio</button>
+                                      </td>
+                                  </tr>
+                                )) || <Skeleton containerClassName='tbody' className='mb-4' baseColor='#999' count={2} />
+                                }
+                              </tbody>
+                            </table>
+                          </div>
+
+                        </div>
+                      </div>
+                    </h1>
+
+
+                  </div>
+                </div>
+
 
               </div>
             </div>