Feature/forum-basic-routing

forum/package.json

@@ -37,6 +37,7 @@
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-prettier": "8.5.0",
     "eslint-config-react-app": "7.0.0",
+    "eslint-config-ts-react-important-stuff": "3.0.0",
     "eslint-plugin-import": "2.25.4",
     "eslint-plugin-jsx-a11y": "6.5.1",
     "eslint-plugin-prefer-arrow": "1.2.3",
@@ -79,6 +80,7 @@
     "react-helmet": "6.1.0",
     "react-i18next": "11.15.6",
     "react-router-dom": "^6.3.0",
+    "recoil": "^0.7.6",
     "single-spa-react": "3.2.0",
     "styled-components": "5.3.3",
     "vite": "^2.9.9",

forum/src/components/App.tsx

@@ -4,9 +4,10 @@ import { BrowserRouter, Routes, Route } from "react-router-dom";
 import Header from "@bit/wasedatime.core.ts.ui.header";
 
 import { ThemeContext } from "@app/utils/theme-context";
-import Board from "@app/components/Board";
+import Board from "./Board";
 import BoardMenu from "@app/components/BoardMenu";
 import Thread from "@app/components/Thread";
+import FilterMenu from "./FilterMenu";
 
 const App = () => {
   const { t, i18n } = useTranslation();
@@ -38,10 +39,11 @@ const App = () => {
           {/* <div className="basis-[calc(100vh-187px)] lg:basis-[80%] dark:text-dark-text1"> */}
           <div className="flex h-screen justify-between pl-2 gap-4">
             <div className="flex flex-row w-full">
+              <FilterMenu />
               <div className="w-5/6">
                 <Routes>
                   <Route element={<Board />} path="forum/:boardId" />
-                  <Route element={<Thread />} path="forum/:board/:threadId" />
+                  <Route element={<Thread />} path="forum/:boardId/:threadId" />
                 </Routes>
               </div>
               <div className="bg-gray-100 md:h-full flex w-1/6">

forum/src/components/Board.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useParams } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
 import ThreadBlock from "./ThreadBlock";
 
 const Board = () => {
@@ -8,32 +8,43 @@ const Board = () => {
   const threads: any[] = [
     {
       // univId: '12345' -> Future feature for different universities (According to Trello)
-      boardId: boardId,
+      boardId: "freechat",
       userId: "userid123",
-      // threadId: threadId,
-      threadTitle: "Hello world",
+      threadId: "12345",
+      threadTitle: "Hello world (Free Chat)",
       threadAuthor: "Waseda Taro",
       threadBody: "This is the body located in the Board component.",
       createdAt: "October 1, 2022",
       updatedAt: "October 2, 2022",
     },
     {
       // univId: '12345' -> Future feature for different universities (According to Trello)
-      boardId: boardId,
+      boardId: "courses",
       userId: "userid123",
-      // threadId: threadId,
-      threadTitle: "Hello world",
+      threadId: "12346",
+      threadTitle: "Hello world (Courses)",
       threadAuthor: "Waseda Taro",
       threadBody: "This is the body located in the Board component.",
       createdAt: "October 1, 2022",
       updatedAt: "October 2, 2022",
     },
     {
       // univId: '12345' -> Future feature for different universities (According to Trello)
-      boardId: boardId,
+      boardId: "life",
       userId: "userid123",
-      // threadId: threadId,
-      threadTitle: "Hello world",
+      threadId: "12346",
+      threadTitle: "Hello world (Life)",
+      threadAuthor: "Waseda Taro",
+      threadBody: "This is the body located in the Board component.",
+      createdAt: "October 1, 2022",
+      updatedAt: "October 2, 2022",
+    },
+    {
+      // univId: '12345' -> Future feature for different universities (According to Trello)
+      boardId: "jobhunting",
+      userId: "userid123",
+      threadId: "12345",
+      threadTitle: "Hello world (Job Hunting)",
       threadAuthor: "Waseda Taro",
       threadBody: "This is the body located in the Board component.",
       createdAt: "October 1, 2022",
@@ -42,27 +53,12 @@ const Board = () => {
   ];
 
   return (
-    <div className="flex flex-row w-full">
-      <div className="w-64 text-center">
-        <h1>Home ---- Group</h1>
-        <h1 className="border bg-light-lighter hover:bg-light-main cursor-pointer text-white text-center rounded-xl px-4 py-2">
-          Select the School
-        </h1>
-        <h1>Undergrad, Grad</h1>
-        <div className="border px-4 py-2 rounded-xl">
-          <h1>Spring Semester</h1>
-        </div>
-        <h1>Languages</h1>
-        <div className="border px-4 py-2 rounded-xl">
-          <h1>English</h1>
-        </div>
-      </div>
-
-      <div className="w-full">
-        {threads.map((thread) => (
+    <div className="max-w-2/5 w-5/6 mx-auto h-full">
+      {threads
+        .filter((thread) => thread.boardId === boardId)
+        .map((thread) => (
           <ThreadBlock isPreview={true} thread={thread} />
         ))}
-      </div>
     </div>
   );
 };

forum/src/components/BoardMenu.tsx

@@ -1,26 +1,26 @@
-import React from "react";
-import { CoursesIcon, CoursesIconHovered } from "./icons/CoursesIcon";
-import { FreeChatIcon, FreeChatIconHovered } from "./icons/FreeChatIcon";
-import { JobHuntingIcon, JobHuntingIconHovered } from "./icons/JobHuntingIcon";
-import { LifeIcon, LifeIconHovered } from "./icons/LifeIcon";
-import { ResearchIcon, ResearchIconHovered } from "./icons/ResearchIcon";
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
 
 const menuItems: any[] = [
   {
     // icon: <CoursesIcon />,
     title: "Courses",
+    slug: "courses",
   },
   {
     // icon: <ResearchIcon />,
-    title: "Research",
+    title: "Life",
+    slug: "life",
   },
   {
     // icon: <JobHuntingIcon />,
     title: "Job Hunting",
+    slug: "jobhunting",
   },
   {
     // icon: <FreeChatIcon />,
     title: "Free Chat",
+    slug: "freechat",
   },
   // {
   //   icon: <FreeChatIcon />,
@@ -30,13 +30,12 @@ const menuItems: any[] = [
 
 const BoardMenu = () => {
   return (
-    <div className="bg-gray-100 flex justify-evenly">
+    <div className="flex text-lg justify-evenly">
       {menuItems.map((item) => (
         <>
           <div className="px-3.5 py-2 md:py-6">
-            <div className="text-center hover:text-light-main cursor-pointer">
-              <div>{item.icon}</div>
-              <div>{item.title}</div>
+            <div className={`text-center hover:text-light-main cursor-pointer`}>
+              <Link to={`forum/${item.slug}`}>{item.title}</Link>
             </div>
           </div>
         </>

forum/src/components/FilterMenu.tsx

@@ -0,0 +1,42 @@
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+const FilterMenu = () => {
+  const [openSchoolModal, setOpenSchoolModal] = useState(false);
+  const navigate = useNavigate();
+
+  return (
+    // New component created by Michael -- Zero functionality so far, moreso there for visuals
+    <div className="w-64 text-center">
+      <div className="flex justify-center gap-4">
+        <h1 onClick={() => navigate("/forum")} className="cursor-pointer">
+          Home
+        </h1>
+        <h1
+          onClick={() => navigate(`/forum/courses`)}
+          className="cursor-pointer"
+        >
+          Courses
+        </h1>
+      </div>
+
+      <h1
+        className="border bg-light-lighter hover:bg-light-main cursor-pointer text-white text-center rounded-xl px-4 py-2"
+        onClick={() => setOpenSchoolModal(!openSchoolModal)}
+      >
+        Select the School
+      </h1>
+      {/* School Select Div */}
+      <h1>Undergrad, Grad</h1>
+      <div className="border px-4 py-2 rounded-xl">
+        <h1 onClick={() => console.log(openSchoolModal)}>Spring Semester</h1>
+      </div>
+      <h1>Languages</h1>
+      <div className="border px-4 py-2 rounded-xl">
+        <h1>English</h1>
+      </div>
+    </div>
+  );
+};
+
+export default FilterMenu;

forum/src/components/ThreadBlock.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { Link, useNavigate } from "react-router-dom";
 import Block from "./Block";
 
 type Props = {
@@ -14,28 +15,37 @@ const ThreadBlock = ({ isPreview, thread }: Props) => {
       onClick: () => {},
     },
   ];
+
+  // const navigate = useNavigate()
+
   return (
     <Block actions={actions}>
-      <div
-        className={
-          isPreview ? `border-2 mt-12 mx-16 rounded-xl shadow-lg pb-6` : ``
-        }
-      >
-        <div className="px-2">
-          <div className="flex justify-between mt-2">
-            <h1 className="text-2xl text-light-main my-auto">
-              {thread.threadTitle}
-            </h1>
-            <h2 className="text-sm text-light-text2 my-auto">
-              {thread.threadAuthor}
-            </h2>
+      <Link to={isPreview ? `${thread.threadId}` : ``}>
+        <div
+          className={
+            isPreview
+              ? `border-2 mt-12 mx-16 rounded-xl shadow-lg pb-6 hover:bg-gray-50`
+              : `cursor-default`
+          }
+        >
+          {/* {isPreview ? `` : <div onClick={() => navigate(-1)} className='text-xs mt-2 cursor-pointer text-gray-400 hover:text-gray-500 w-fit'>Back</div>} */}
+          {/* ^ This line goes to parent board on click while in thread */}
+          <div className={`px-2`}>
+            <div className="flex justify-between mt-2">
+              <h1 className="text-2xl text-light-main my-auto">
+                {thread.threadTitle}
+              </h1>
+              <h2 className="text-sm text-light-text2 my-auto">
+                {thread.threadAuthor}
+              </h2>
+            </div>
+            <p className="justify-left text-light-text1 pt-4">
+              {thread.threadBody}
+            </p>
           </div>
-          <p className="justify-left text-light-text1 pt-4">
-            {thread.threadBody}
-          </p>
+          <hr className="mx-2 pt-4 mt-6" />
         </div>
-        <hr className="mx-2 pt-4 mt-6" />
-      </div>
+      </Link>
     </Block>
   );
 };