Skip to content
This repository has been archived by the owner on May 4, 2021. It is now read-only.

Components

Jasmine Terry edited this page Apr 24, 2020 · 30 revisions

Story Squad's components are grouped in sections, indexed, then further subdivided into component folders which contain a single component and its test file. cashed out look at all this Listed below is each section, as well as a brief overview of the components it contains.

admin-dashboard (src/app/components/admin-dashboard)

Components that control the admin's interactions with the app

add account (/add-account.component.tsx)

located at: src/app/components/admin-dashboard/accounts

  • Adds administrator or moderator account.

accounts list (/list.component.tsx)

located at: src/app/components/admin-dashboard/accounts/list

  • Calls for a list of accounts
  • renders them in a table for admin account management.

item (/item.component.tsx)

located at: src/app/components/admin-dashboard/cohort/list

  • Fetches cohort data
  • Renders it to a table row,
  • Option to delete or edit the cohort.

cohort list (/list.component.tsx)

located at: src/app/components/admin-dashboard/cohort/list

  • Takes in cohort list items
  • Renders them to a table.

edit cohort (/edit.component.tsx)

located at: src/app/components/admin-dashboard/cohort/edit

  • Takes in data from the selected table row
  • Allows the admin to update the applicable cohort info.

navigation (/admin-navigation.component.tsx)

located at: src/app/components/admin-dashboard/navigation

  • Material UI drawer containing navigational links specific to the admin dashboard.

create story pdf (/create.component.tsx)

located at: src/app/components/admin-dashboard/pdf/create

  • Takes in an uploaded PDF from the admin
  • Converts it to a base64 string
  • Sends it to the backend.

pdf list (/list.component.tsx)

located at: src/app/components/admin-dashboard/pdf/list

  • Retrieves pdf info from the backend
  • Creates a table so that the admin can select a pdf to view.

admin-onboarding (src/app/components/admin-onboarding)

Handles login and sign up functionality for site admins.

admin sign-up (/sign-up.component.tsx)

located at: src/app/components/admin-onboarding/sign-up

  • Stores email/password in DB
  • Sets and stores token
  • Routes to admin dashboard

admin sign-in (/sign-in.component.tsx)

located at: src/app/components/admin-onboarding/sign-in

  • Authenticates admin credentials and sets the token
  • Routes to the admin dashboard.

child-dashboard (src/app/components/child-dashboard)

Components that control creative content submissions and team pairing for child users.

drawing-form (/drawing-form.component.tsx)

located at: src/app/components/child-dashboard/creative-content-submission/drawing-form

  • Allows child users to submit drawing portion of CCS submissions.
  • Saves child's drawings to backend DB
  • Routes child to kids-dash upon successful submission

ccs entry form (/form.component.tsx)

located at: src/app/components/child-dashboard/creative-content-submission/form

  • Allows the child user to upload images of their submission as well as enter text
  • Sends input to the backend to either create or update the corresponding weekly entry
  • Allows the child to delete their entry

ccs list (/list.component.tsx)

located at: src/app/components/child-dashboard/creative-content-submission/list

  • Creates a table for the current week's activities
  • Links to the relevant prompt and the entry form

story-form (/story-form.component.tsx)

located at: src/app/components/child-dashboard/creative-content-submission/story-form

  • Allows child users to submit story portion of CCS submissions.
  • Saves child's story to backend DB
  • Routes child to kids-dash upon successful submission

kids's progress (/kid-progress.component.tsx)

located at: src/app/components/child-dashboard/kid-progress

  • Checks the child's progress on each of the current weekly tasks
  • Returns appropriate links for the child
  • Renders a dynamic progress button
  • Renders dynamic checkboxes based on child's progress

team-join (/team-join.component.tsx)

located at: src/app/components/child-dashboard/team-join

  • Renders page for student to see teammate paired up with for first round of scoring and continue to point allocation page

welcome card (/welcome-card.component.tsx)

located at: src/app/components/child-dashboard/welcome-card

  • Renders a welcome message for the logged-in child user.

child-home (src/app/components/child-home)

Component that controls the initial landing page for student upon login.

child-home (/child-home.tsx)

located at: src/app/components/child-home

  • Renders child-home component
  • Redirects child user to 'child-dashboard' upon 'accept the mission' click

common (src/app/components/common)

Components used in multiple places throughout the app, rather than in a specific section.

error handler (/error-handler.component.tsx)

located at: src/app/components/common/error-handler

  • Detects errors
  • When an error occurs, renders an alert with an appropriate message.

materialize input (/materialize-input.component.tsx)

located at: src/app/components/common/materialize-input

  • Takes in user input
  • Returns that input styled via the site's theme

private route (/private-route.component.tsx)

located at: src/app/components/common/private-route

dashboard (src/app/components/dashboard)

Components for parent dashboard, including: adding a child, navigation, stripe.

child (src/app/components/dashboard/child)

  • Components for adding a child account, subscription, and edit child preferences

card (/card/component.tsx)

located at: src/app/components/dashboard/child/card

  • Renders component based on if child has already subscribed or not to either login or be pushed to subscribe page.

create (/create.component.tsx)

located at: src/app/components/dashboard/child/create

  • Allows parent user to create child account and have information be sent to backend for saving.

edit (/edit.component.tsx)

located at: src/app/components/dashboard/child/edit

  • Allows parent to update preferences for child, as well as cancel membership.

heading (/heading.component.tsx)

located at: src/app/components/dashboard/heading

  • Contains dashboard menu items on parent dashboard.

navigation (/navigation.component.tsx)

located at: src/app/components/dashboard/navigation

  • Contains navigational links and items for parent dashboard navigation side bar.

onboarding (src/app/components/onboarding)

Components for parent sign up and sign-in.

sign-in (/sign-in.component.tsx)

located at: src/app/components/onboarding

  • Component to allow parent users to sign in
  • Redirect parent user to parent dashboard upon successful login.

sign-up (/sign-up.component.tsx)

located at: src/app/components/onboarding

  • Component to allow parent users to sign up and send user data to backend for storage.
  • Contains links to privacy policy and ToS components.
  • Redirect parent user to parent dash upon successful registration.

pdf-display (src/app/components/pdf-display)

Component for retrieving pdf story info from the backend to display to child users.

pdf-display (/pdf-display.component.tsx)

located at: src/app/components/pdf-display

*Component for retrieving pdf story from backend to display to child users.

point-allocation (src/app/components/point-allocation-dashboard)

Handles components for allocation of points between child user and teammate's(another child user) CCS submission.

header (/header.component.tsx)

located at: src/app/components/point-allocation-dashboard

  • Header component for point-allocation page
  • Remaining points rendered in header based on child user allocation.

modals (/submissionDisplay.component.tsx)

located at: src/app/components/point-allocation-dashboard/modals

  • Material UI based component for controlling CCS preview styling
  • Validates point allocations are at least 10, and no more than 70 per CCS
  • Opens full size view of CCS submissions on click

point-allocation (/point-allocation-dashboard.tsx)

located at: src/app/components/point-allocation-dashboard

  • Holds child user and teammate match data including submissions and points allocation state
  • Holds modals for CCS display
  • Re-directs child user to versus component if points have already been allocated and store in backend

policies (src/app/components/policies)

Holds privacy and terms of service components for users

privacy-policy (/privacy-policy.component.tsx)

located at: src/app/components/policies

  • Holds privacy policy component with mapping over each paragraph and Drawer component from Material UI.

tos (/tos.component.tsx)

located at: src/app/component/policies

  • Holds terms of service component with mapping over each paragraph and Drawer component from Material UI.

reusable-components (src/app/components/reusable-components)

Holds reusable components for entire app such as menu button and child header

kid-header (/kid-header.tsx)

located at: src/app/components/reusable-components/kid-header

  • Reusable header component for child users

menu-button (/menu-button.tsx)

located at: src/app/components/reusable-components/menu-button

  • Reusable menu button component for child users.
  • Redirects user based on option selected.

versus (src/app/components/versus)

Holds components for child user CCS battles after team point allocation has been completed.

modals (/subDisplay.component.tsx)

located at: src/app/components/versus/modals

  • Reusable Material UI based component for controlling CCS preview styling
  • Conditional rendering for full size view based on story page amount
  • Opens full size view of CCS submissions on click

versusSubComponents (src/app/components/versus/versusSubComponents)

located at: src/app/components/versus

  • Holds sub components for versus page
  • versusButton component for back and next buttons rendering
  • versusRound component for conditional style rendering for child user team and opponent team

versus component (/versus.component.tsx)

located at: src/app/components/versus

  • Holds all versus sub components for child user and teammate matchup against other child users
Clone this wiki locally