When I click on a scheduler/admin (currently uses the User model), then I want to go to a new page that displays that admin's already scheduled events.

This issue addresses the minimum features needed for the "User" view from the wireframe, it is not intended to be the finished layout, but merely demonstrate the initial connection.

User Query

• Create a frontend query with graphql that passes back a single user and all of their associated events/meetings/appointments
  • This was completed in #35

This should be placed in client/src/utils/queries.js

EventList component

• Add a frontend component that will be used to return a list of Events to other pages

New file should go in client/src/components/EventList/

See here for an example: https://github.com/TottoMoe/star-chart/blob/main/client/src/pages/HomePage.js

The EventList/index.js file will reference the Event model and associated fields from start-chart:

• https://github.com/TottoMoe/star-chart/blob/main/server/models/Event.js

UserPage

• Create a new page title "UserPage" that will be used to display the User's information and associated Events.

The "Home" route currently has some of this layout; however, that is a static route, and we need to make a dynamic route that is specific to each User.

It is suggested that the "HomePage.js" file is copied into a new file and simplified for testing the connection.

• https://github.com/TottoMoe/star-chart/blob/main/client/src/pages/HomePage.js

• Use the EventList component from the previous section to populate the list of events for the user

An example of how this is used:

• https://ucb.bootcampcontent.com/UCB-Coding-Bootcamp/UCB-VIRT-FSF-PT-05-2022-U-LOLC/-/blob/main/21-MERN/01-Activities/20-Stu_React-Router/Solved/client/src/pages/Home.js

The "ThoughtList" from that page would be our "EventList", so something like this:

import React from 'react';
import { useQuery } from '@apollo/client';

import EventList from '../components/EventList';

import { QUERY_USER } from '../utils/queries';

const UserPage = () => {
  const { loading, data } = useQuery(QUERY_USER); // This is likely not correct (see next section in this Issue)
  const events = data?.events || [];

  return (
    <main>
      <div className="flex-row justify-center">

        <div className="col-12 col-md-8 mb-3">
          {loading ? (
            <div>Loading...</div>
          ) : (
            <EventList
              events={events}
              title="Your list of appointments."
            />
          )}
        </div>
      </div>
    </main>
  );
};

export default UserPage;

Make the UserPage dynamic

We want to dynamically pass an ID of the user so that the user page displays only the appoinments/events for a given user. @ryan-whit is not quite sure how to do this, but he thinks it is by added a useParams hook, similar to this line:

https://ucb.bootcampcontent.com/UCB-Coding-Bootcamp/UCB-VIRT-FSF-PT-05-2022-U-LOLC/-/blob/main/21-MERN/01-Activities/20-Stu_React-Router/Solved/client/src/pages/SingleThought.js#L14

• Add the userId parameter via useParams hook to the UserPage to make the page dynamic

Add Route to ContainerPage

The last piece of the puzzle is to add a Route to the ContainerPage:

• https://github.com/TottoMoe/star-chart/blob/main/client/src/ContainerPage.js

The modified page should likely look something like this:

export default function ContainerPage(){
    return(
        <div>
            <NavBar/>
            <div className="container">
            <Routes>
                <Route path="/Home" element={<HomePage/>}/>
                <Route path="/Login" element={<LoginForm/>}/>
                <Route path="/events/:eventId" element={<SingleEvent/>}/>
                <Route path="/users/:userId" element={<UserPage/>}/>
            </Routes>
            </div>
            <Footer/>
        </div>
    );
}

User will see all scheduled appointment
It shows multiple appointments by title, date, and time

Create a page that shows available appointment by day
Users will be able to select one or multiple appointments

Generate seed information for populating the GraphQL database.

Similar to: https://ucb.bootcampcontent.com/UCB-Coding-Bootcamp/UCB-VIRT-FSF-PT-05-2022-U-LOLC/-/blob/main/21-MERN/01-Activities/20-Stu_React-Router/Solved/client/src/components/ThoughtForm/index.js

form is currently not creating a new event.

Missing the required arg creator from the form.

Exit Criterion:

npm run start within the ./server package doesn't throw errors.

Create a page the shows a single Event.

Create a page that users can create a new meeting or multiple appointments at the same time by having the following attributes
Start time
End time
Duration
Number of meetings
Gap time between meetings

Star Chart!

Initial scoping:

• Define Model (write out object contents. What do we need? Relationships?)
• Implement models (mongoose setup)
• Determine if react-calendar fits our purposes by prototyping something
• Start working on the wireframe
• Start working on CRUD/REST routes with mongoose/graphql
• Database seeds for our models
• React frontend connected to the routes
• Look at integrating a CSS framework with
• JWT for sign-in and auth

Define models

• Jenny and Clarence (with help from John)

Connecting the user story and requirements to the Model definitions

React Calendar

• Ryan

Wireframing

• Jose and John - connect user story to the "pages"

Currently the User model is not referencing an array of Events. Convert this to an array.

Current definition:

    createdEvents: {
      type: Schema.Types.ObjectId,
      ref: "Event",
    },

We want createdEvents to be an array of the Event Model.

Generate connection and routes to use in the frontend.