feat: major changes added some refresh functionalities

apps/forum/src/components/App.tsx

@@ -8,7 +8,7 @@ import BoardMenu from "@app/components/BoardMenu";
 import Thread from "@app/components/Thread";
 import FilterMenu from "./FilterMenu";
 import SearchTags from "./SearchTags";
-import Home from "@app/components/Home";
+import Forum from "@app/components/Forum";
 
 const App = () => {
   const { t, i18n } = useTranslation();
@@ -39,7 +39,7 @@ const App = () => {
             </div>
             <div className="flex flex-col w-3/5">
               <Routes>
-                <Route element={<Home />} path="forum" />
+                <Route element={<Forum />} path="forum" />
                 <Route element={<Board />} path="forum/:boardSlug" />
                 <Route
                   element={<Thread />}

apps/forum/src/components/Board.tsx

@@ -62,7 +62,6 @@ const Board = () => {
           (thread: Thread) => thread.board_id === boardId
         );
         setBoardThreads(threads);
-        console.log(threads);
 
         var filteredThreads = filterThreadsByTags(threads, currentTags);
         filteredThreads = filterThreadsBySchool(
@@ -84,8 +83,6 @@ const Board = () => {
   useEffect(() => {
     var filteredThreads = filterThreadsByTags(boardThreads, currentTags);
     filteredThreads = filterThreadsBySchool(filteredThreads, currentSchools);
-    if (filteredThreads.length > threadCountPerPage * page)
-      filteredThreads = filteredThreads.slice(0, threadCountPerPage * page);
     if (filteredThreads.length > threadCountPerPage * page)
       filteredThreads = filteredThreads.slice(0, threadCountPerPage * page);
     setFilteredThreads(filteredThreads);

apps/forum/src/components/CommentForm.tsx

@@ -12,8 +12,6 @@ const CommentForm = () => {
   const { threadUuid } = useParams();
   const { t } = useTranslation();
 
-  // console.log(threadUuid);
-
   const handleFocusForm = async () => {
     if (userToken?.length <= 0) {
       const idToken = await getIdToken();
@@ -50,12 +48,11 @@ const CommentForm = () => {
           Authorization: idToken,
         },
       });
-      console.log("Successfully posted comment");
     } catch (error) {
       console.error("An error occurred:", error);
     }
-
     setComment("");
+    window.location.reload();
   };
 
   return (

apps/forum/src/components/CreateThread.tsx

@@ -7,17 +7,17 @@ import tagsData from "@app/constants/tags.json";
 import groupsData from "@app/constants/groups.json";
 import { SignInModal, getIdToken } from "wasedatime-ui";
 import { useTranslation } from "react-i18next";
+import { getUserId, getUserIdToken } from "@app/utils/auth";
 
 const CreateThread = () => {
   const [isExpanded, setIsExpanded] = useState(false);
   const [expandTags, setExpandTags] = useState(false);
-  const [expandGroups, setExpandGroups] = useState(false);
+  const [expandSchool, setExpandSchool] = useState(false);
   const [userToken, setUserToken] = useState("");
   const [isSignInModalOpen, setSignInModalOpen] = useState(false);
   const [textContent, setTextContent] = useState("");
   const [titleContent, setTitleContent] = useState("");
   const [tags, setTags] = useState([]);
-  const [group, setGroups] = useState(groupsData);
   const [selectedTag, setSelectedTag] = useState(null);
 
   // Tags and Group buttons might be best moved to their respective components but this is how I will leave it for now.
@@ -28,7 +28,7 @@ const CreateThread = () => {
   useEffect(() => {
     setIsExpanded(false);
     setExpandTags(false);
-    setExpandGroups(false);
+    setExpandSchool(false);
   }, [boardSlug]);
 
   useEffect(() => {
@@ -92,7 +92,7 @@ const CreateThread = () => {
             body: textContent,
             title: titleContent,
             tag_id: selectedTag.title,
-            group_id: "SILS",
+            group_id: "PSE",
             univ_id: "1",
           },
         },
@@ -101,14 +101,11 @@ const CreateThread = () => {
           Authorization: idToken,
         },
       });
-      console.log("It worked!:", response);
       setTextContent("");
-    } catch (error) {
-      console.error("It didn't work!:", error);
-    }
-
+    } catch (error) {}
     setTitleContent("");
     setTextContent("");
+    window.location.reload();
   };
 
   const findBoardIndex: number = boards.findIndex(
@@ -162,10 +159,10 @@ const CreateThread = () => {
           </button>
           <button
             className="relative border-light-main border px-4 rounded-lg hover:text-white hover:bg-light-main"
-            onClick={() => setExpandGroups(!expandGroups)}
+            onClick={() => setExpandSchool(!expandSchool)}
           >
-            Groups
-            {expandGroups ? (
+            School
+            {expandSchool ? (
               <div className="bg-white border border-light-main absolute h-32 w-32 top-8 left-0 rounded-lg z-10">
                 Text
               </div>

apps/forum/src/components/Home.tsx → apps/forum/src/components/Forum.tsx

@@ -1,10 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { useRecoilValue } from "recoil";
-import { useParams } from "react-router-dom";
 import CreateThread from "./CreateThread";
 import ThreadBlock from "./ThreadBlock";
-import boards from "@app/constants/boards.json";
-import localForage from "localforage";
 import { currentSchoolState, currentTagsState } from "@app/recoil/atoms";
 import { filterThreadsByTags, filterThreadsBySchool } from "@app/utils/filter";
 import { API } from "@aws-amplify/api";
@@ -14,7 +11,7 @@ import InfiniteScroll from "react-infinite-scroll-component";
 
 const threadCountPerPage = 3; // 10
 
-const Home = () => {
+const Forum: React.FC = () => {
   const currentTags = useRecoilValue(currentTagsState);
   const currentSchools = useRecoilValue(currentSchoolState);
 
@@ -23,70 +20,45 @@ const Home = () => {
   const [userToken, setUserToken] = useState("");
   const [page, setPage] = useState(1);
 
-  // fetching the all thread data
   useEffect(() => {
-    const fetchData = async () => {
-      try {
-        let userId = userToken;
-        if (userId.length === 0) {
-          const userAttr = await getUserAttr();
-          if (userAttr) {
-            userId = userAttr.id;
-            setUserToken(userId);
-          }
-        }
-
-        console.log(`Fetching data for userId: ${userId}`); // Debugging
-
-        const response = await API.get(
-          "wasedatime-dev",
-          `/forum?uid=${userId}`,
-          {
-            headers: {
-              "Content-Type": "application/json",
-            },
-          }
-        );
-
-        console.log("API Response:", response.data); // Debugging
-        setAllThreads([...response.data]);
-        setFilteredThreads([...response.data]);
-      } catch (error) {
-        console.error("An error occurred:", error); // Enhanced error logging
-      }
-    };
-
     fetchData();
   }, []);
 
+  const fetchData = async () => {
+    try {
+      let userId = userToken;
+      if (userId.length === 0) {
+        const userAttr = await getUserAttr();
+        if (userAttr) {
+          userId = userAttr.id;
+          setUserToken(userId);
+        }
+      }
+      const response = await API.get("wasedatime-dev", `/forum?uid=${userId}`, {
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+      setAllThreads([...response.data]);
+    } catch (error) {}
+  };
   useEffect(() => {
     var filteredThreads = filterThreadsByTags(allThreads, currentTags);
     filteredThreads = filterThreadsBySchool(filteredThreads, currentSchools);
     if (filteredThreads.length > threadCountPerPage * page)
       filteredThreads = filteredThreads.slice(0, threadCountPerPage * page);
-    setFilteredThreads(filteredThreads);
+    setAllThreads(filteredThreads);
     displayMoreThread();
   }, [currentTags, currentSchools]);
 
   const displayMoreThread = () => {
-    console.log("displayMoreThread called"); // Debugging
     setTimeout(() => {
-      console.log(
-        "Inside setTimeout, allThreads.length:",
-        allThreads.length,
-        "threadCountPerPage:",
-        threadCountPerPage,
-        "page:",
-        page
-      ); // Debugging
-
       if (allThreads.length < threadCountPerPage * page) return;
       const nextPage = page + 1;
       setPage(nextPage);
       var threads = filterThreadsByTags(allThreads, currentTags);
       threads = filterThreadsBySchool(threads, currentSchools);
       threads = threads.slice(0, threadCountPerPage * nextPage);
-      console.log("Setting filteredThreads:", threads); // Debugging
       setFilteredThreads(threads);
     }, 1000);
   };
@@ -117,7 +89,7 @@ const Home = () => {
   );
 };
 
-export default Home;
+export default Forum;
 
 // 1 when you first enter) fetch posts (useEffect) -> display posts
 // 2 filtering by "groups" -> state that manages groups ("") -> group is selected then setGroup(selected group)

apps/forum/src/components/SchoolFilterForm.tsx

@@ -77,7 +77,6 @@ const SchoolFilterForm = ({ isOpen, setOpen }: SchoolFilterFormProps) => {
     useRecoilState(currentSchoolState);
 
   const toggleGroup = (school: string) => {
-    console.log(school);
     if (currentSchools.includes(school)) {
       var schools = [...currentSchools];
       const index = schools.indexOf(school);

apps/forum/src/components/Thread.tsx

@@ -17,7 +17,6 @@ const Thread = () => {
       const idToken = await getIdToken();
       const userAttr = await getUserAttr();
       if (userAttr?.id > 0) {
-        console.log("could not find user Id");
       } else {
         let userId = userAttr.id;
         setUserToken(userId);
@@ -39,10 +38,7 @@ const Thread = () => {
           response: true,
         }
       );
-
       setThread(threadRes.data.data);
-      console.log(threadRes.data.data);
-
       const commentsRes = await API.get(
         "wasedatime-dev",
         `/forum-comment/${threadUuid}?uid=${token}`,
@@ -53,12 +49,9 @@ const Thread = () => {
           response: true,
         }
       );
-
       setComments(commentsRes.data.data);
-
-      console.log(commentsRes.data.data);
     } catch (e) {
-      console.error(e);
+      console.error("An error occurred:", e);
     }
   };
 

apps/forum/src/components/ThreadBlock.tsx

@@ -12,9 +12,10 @@ import getSchoolIconPath from "@app/utils/get-school-icon-path";
 type Props = {
   isPreview: boolean;
   thread: any;
+  text?: string;
 };
 
-const convertUrlsToLinks = (text: string) => {
+const convertUrlsToLinks = ({ isPreview, text }: Props) => {
   if (!text) return null;
 
   const urlRegex = /https?:\/\/[^\s]+/g;
@@ -25,17 +26,21 @@ const convertUrlsToLinks = (text: string) => {
     <div>
       {parts.map((part, index) => (
         <React.Fragment key={index}>
-          {part}
-          {matches && matches[index] ? (
-            <a
-              href={matches[index]}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-blue-600"
-            >
-              {matches[index]}
-            </a>
-          ) : null}
+          {part && <span className="text-black">{part}</span>}
+          {matches &&
+            matches[index] &&
+            (isPreview ? (
+              <h3 className="text-blue-600">{matches[index]}</h3>
+            ) : (
+              <a
+                href={matches[index]}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-blue-600"
+              >
+                {matches[index]}
+              </a>
+            ))}
         </React.Fragment>
       ))}
     </div>
@@ -72,7 +77,6 @@ const ThreadBlock = ({ isPreview, thread }: Props) => {
   };
 
   const updateThread = async (title: string, body: string) => {
-    console.log(`Try updating thread...\nTitle: ${title}\nBody: ${body}`);
     try {
       const response = await API.patch(
         "wasedatime-dev",
@@ -92,7 +96,6 @@ const ThreadBlock = ({ isPreview, thread }: Props) => {
           },
         }
       );
-      console.log("Thread updated!:", response);
     } catch (error) {
       console.error("Thread not updated successfully!:", error);
     }
@@ -116,17 +119,18 @@ const ThreadBlock = ({ isPreview, thread }: Props) => {
           },
         }
       );
-      console.log("Thread deleted!:", response);
+      setDeleteModalOpen(false);
     } catch (error) {
       console.error("Thread not deleted successfully!:", error);
     }
+    window.location.reload();
   };
 
   const navigate = useNavigate();
-
+  // /forum/_abddior / thread_id;
   return (
     <Block actions={actions}>
-      <Link to={isPreview ? `${thread.thread_id}` : ``}>
+      <Link to={isPreview ? `${thread.board_id}/${thread.thread_id}` : ``}>
         <div
           className={
             isPreview
@@ -192,12 +196,16 @@ const ThreadBlock = ({ isPreview, thread }: Props) => {
                 }
               </div>
             </div>
-            <p
+            <h2
               className="justify-left text-light-text1 pt-4"
               style={{ whiteSpace: "pre-line" }}
             >
-              {convertUrlsToLinks(thread.body)}
-            </p>
+              {convertUrlsToLinks({
+                isPreview,
+                text: thread.body,
+                thread: thread,
+              })}
+            </h2>
           </div>
           <div className="inline-block text-blue-600 rounded-lg pl-2 pt-2">
             {" "}