Forum: Create + View Discussion

[IsoPhoenix]

Forum: Create + View Discussion

Overview

Functionality to create discussion threads and leave comments

Resources

• React Query v3 documentation (We are using v3, not v4!)
• react-query-firebase documentation
• MUI documentation
• Cloud firestore documentation
• React Router documentation

  Frontend

• Reference Evelyn's Figma designs for the Forum page!!
• Create a new route in src/routes/general called ForumView.tsx that can be accessed from both StudentView.tsx and TeacherView.tsx
  • You can reference existing code or the React Router documentation to understand how to do this
• "Create thread" button that opens a "Create thread" modal to input:
  • Title: string
  • Content: string
• Table displaying all of the created threads
  • Title: string
  • Poster: user
  • Post time: timestamp
• "Thread View" page that opens when you click on a row in the above table
  • Displays the title, content, poster, post time in the thread
  • Ability to leave comments with:
    • Text: string
    • Poster: user
    • Post time: timestamp

      Backend

• Use react-query-firebase to write all your database operations (queries and mutations). You can write queries in the files in which they are used, but I advise factoring mutations out to mutations.js.
• For queries like getting all created threads, I would use the useDatabaseSnapshot hook from React Query Firebase.

[IsoPhoenix]

Additional Notes from 2/26 meeting:

General flow of using react-router for the forum page:

1. To TeacherView.tsx and StudentView.tsx, add a new /forum route with a /:postID child route.
2. /forum route should display a component ForumView.tsx that displays all created posts and has option to create a new post. Should contain components:
   • CreatePostModal: Inputs for creating a new post
   • ForumPostCard: Card that lists a specific forum post. Clicking on it should utilize a Link to navigate to /forum/:postID corresponding to the post.
3. /forum/:postID should correspond to a component ForumPost.tsx that displays the information in the post. Use useParams() to get the post ID from the URL.
4. Overall structure looks like:

   // TeacherView.tsx
   <Routes>
      ...
      <Route path='forum' element={<ForumView />}>
          <Route path=':postID/*' element={<ForumPost />} // the * includes any subroutes of the post
      </Route>
   </Routes>

Additional notes:

• Eventually we will need to add the sidebar from Figma with the post categories, plus other overarching forum navigation elements. To have these layout-like components display regardless of what forum page we're on, we could modify the routing structure a little. This is a potential solution:
  • Use an Outlet in ForumView to render child components (like posts) inside the overall forum view. Then ForumView would contain the nagivation sidebar with categories.
  • You would then need some additional subroutes inside ForumView to handle display of the top-level forum page and any posts, and a default / path that uses a Navigate to a ForumHome component.
• Structure could look like:

  
  // TeacherView.tsx
  <Routes>
  ...
  <Route path='forum/*' element={<ForumView />} />
  </Routes>

// ForumView.tsx ... // Layout and navigation elements go here

} /> } /> } />

... // Displays children components (ForumHome or ForumPost) inside the layout elements

// ForumHome.tsx // Contains the master list of posts and create post functionality (with CreatePostModal and ForumPostCard components as described above)

// ForumPost.tsx // Same as above