11 |
19 | )
--------------------------------------------------------------------------------
/src/components/Landing.tsx:
--------------------------------------------------------------------------------
1 | import { useQuery } from "@apollo/client"
2 |
3 | import { Login } from "components/Login"
4 | import { MainNav } from "components/MainNav"
5 | import { GetCurrentUser } from "graphql/queries/GetCurrentUser"
6 |
7 | import { QueryError } from "./partials/QueryError"
8 |
9 | export const Landing = (): JSX.Element => {
10 | const { data, loading, error } = useQuery(GetCurrentUser)
11 |
12 | if (loading || !data) return
12 |
18 |
14 |
17 | {header}
15 |{subHeader}
16 |loading...
13 | if (error) return
17 | {data.currentUser ? (
18 |
23 | )
24 | }
25 |
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import ReactDOM from "react-dom"
3 | import "./index.css"
4 | import App from "components/App"
5 | import reportWebVitals from "./reportWebVitals"
6 |
7 | if (process.env.NODE_ENV === "development") {
8 | // eslint-disable-next-line @typescript-eslint/no-var-requires
9 | const { worker } = require("./mocks/browser")
10 | worker.start()
11 | }
12 |
13 | ReactDOM.render(
14 |
15 | 
19 |
20 | )
21 | }
22 |
--------------------------------------------------------------------------------
/src/components/WelcomeDashboard/StudentSection.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import { Link } from "react-router-dom"
3 |
4 | import { Student } from "models/Student"
5 | import { getAge } from "utils/getAge"
6 |
7 | import { UserItem } from "../partials/UserItem"
8 |
9 | interface StudentSectionProps {
10 | students: Student[];
11 | }
12 |
13 | export const StudentSection = ({
14 | students,
15 | }: StudentSectionProps): JSX.Element => {
16 | return (
17 | Success!
16 |{text}
17 |Return to your profile.
18 |
18 | {students.map((student: Student) => {
19 | return (
20 |
21 |
30 | )
31 | }
32 |
--------------------------------------------------------------------------------
/src/graphql/mutations/__generated__/SignIn.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable */
2 | /* eslint-disable */
3 | // @generated
4 | // This file was automatically generated and should not be edited.
5 |
6 |
7 | import { AuthProviderCredentialsInput } from "./../../../../__generated__/globalTypes";
8 |
9 | // ====================================================
10 | // GraphQL mutation operation: SignIn
11 | // ====================================================
12 |
13 |
14 | export interface SignIn_signInUser_user {
15 | __typename: "User";
16 | id: string;
17 | name: string;
18 | email: string | null;
19 | }
20 |
21 | export interface SignIn_signInUser {
22 | __typename: "SignInUserPayload";
23 | user: SignIn_signInUser_user | null;
24 | token: string | null;
25 | }
26 |
27 | export interface SignIn {
28 | signInUser: SignIn_signInUser;
29 | }
30 |
31 | export interface SignInVariables {
32 | credentials: AuthProviderCredentialsInput;
33 | }
34 |
--------------------------------------------------------------------------------
/src/graphql/queries/__generated__/GetStudent.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable */
2 | /* eslint-disable */
3 | // @generated
4 | // This file was automatically generated and should not be edited.
5 |
6 |
7 | // ====================================================
8 | // GraphQL query operation: GetStudent
9 | // ====================================================
10 |
11 |
12 | export interface GetStudent_student {
13 | __typename: "Student";
14 | id: string;
15 | dateOfBirth: any | null;
16 | email: string | null;
17 | name: string;
18 | createdAt: any;
19 | updatedAt: any;
20 | guardianName: string | null;
21 | guardianPhoneNumber: string | null;
22 | emergencyContactName: string | null;
23 | emergencyContactPhoneNumber: string | null;
24 | }
25 |
26 | export interface GetStudent {
27 | /**
28 | * A single student
29 | */
30 | student: GetStudent_student;
31 | }
32 |
33 | export interface GetStudentVariables {
34 | id: string;
35 | }
36 |
--------------------------------------------------------------------------------
/src/graphql/mutations/__generated__/CreateSupportTicket.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable */
2 | /* eslint-disable */
3 | // @generated
4 | // This file was automatically generated and should not be edited.
5 |
6 |
7 | // ====================================================
8 | // GraphQL mutation operation: CreateSupportTicket
9 | // ====================================================
10 |
11 |
12 | export interface CreateSupportTicket_createSupportTicket_supportTicket {
13 | __typename: "SupportTicket";
14 | id: string;
15 | }
16 |
17 | export interface CreateSupportTicket_createSupportTicket {
18 | __typename: "CreateSupportTicketPayload";
19 | supportTicket: CreateSupportTicket_createSupportTicket_supportTicket;
20 | }
21 |
22 | export interface CreateSupportTicket {
23 | createSupportTicket: CreateSupportTicket_createSupportTicket | null;
24 | }
25 |
26 | export interface CreateSupportTicketVariables {
27 | surveyResponseId: string;
28 | description?: string | null;
29 | }
30 |
--------------------------------------------------------------------------------
/src/graphql/mutations/__generated__/CreateSurveyResponse.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable */
2 | /* eslint-disable */
3 | // @generated
4 | // This file was automatically generated and should not be edited.
5 |
6 |
7 | // ====================================================
8 | // GraphQL mutation operation: CreateSurveyResponse
9 | // ====================================================
10 |
11 |
12 | export interface CreateSurveyResponse_createSurveyResponse_response {
13 | __typename: "SurveyResponse";
14 | id: string;
15 | }
16 |
17 | export interface CreateSurveyResponse_createSurveyResponse {
18 | __typename: "CreateSurveyResponsePayload";
19 | response: CreateSurveyResponse_createSurveyResponse_response;
20 | }
21 |
22 | export interface CreateSurveyResponse {
23 | createSurveyResponse: CreateSurveyResponse_createSurveyResponse | null;
24 | }
25 |
26 | export interface CreateSurveyResponseVariables {
27 | surveyId: string;
28 | studentId: string;
29 | userId: string;
30 | }
31 |
--------------------------------------------------------------------------------
/src/components/SessionDuration/style.scss:
--------------------------------------------------------------------------------
1 | input,
2 | input::placeholder {
3 | color: #546E7A;
4 | font-size: 16px;
5 | }
6 |
7 | div.react-datepicker__header {
8 | background-color: white;
9 | border-bottom: none;
10 |
11 | .react-datepicker__current-month {
12 | color: #FF3B30
13 | }
14 |
15 | .react-datepicker__day-name {
16 | color: rgba(60, 60, 67, 0.3);
17 | text-transform: uppercase;
18 | }
19 |
20 | }
21 |
22 | div.react-datepicker__week {
23 | & > div.react-datepicker__day {
24 | color: #FF3B30;
25 |
26 | &.react-datepicker__day--outside-month {
27 | color: white;
28 | }
29 |
30 | &.react-datepicker__day--selected {
31 | background-color: rgba(60, 60, 67, 0.3);
32 | }
33 | }
34 | }
35 |
36 | .submit-button {
37 | position: absolute;
38 | left: 0;
39 | right: 0;
40 | bottom: 100px;
41 | margin-left: auto;
42 | margin-right: auto;
43 | }
44 |
45 | .hide { visibility: collapse }
46 | .show { visibility: visible }
--------------------------------------------------------------------------------
/src/components/icons/homeSelected.svg:
--------------------------------------------------------------------------------
1 |
2 |
12 |
--------------------------------------------------------------------------------
/external/graphql/schema.graphql:
--------------------------------------------------------------------------------
1 | input AuthProviderCredentialsInput {
2 | email: String!
3 | password: String!
4 | }
5 |
6 | """
7 | An ISO 8601-encoded datetime
8 | """
9 | scalar ISO8601DateTime
10 |
11 | type Mutation {
12 | signInUser(credentials: AuthProviderCredentialsInput): SignInUserPayload
13 | }
14 |
15 | type Query {
16 | currentUser: User
17 |
18 | """
19 | A single student
20 | """
21 | student(id: ID!): Student!
22 |
23 | """
24 | All students associated with signed in volunteer
25 | """
26 | students: [Student!]
27 | }
28 |
29 | """
30 | Autogenerated return type of SignInUser
31 | """
32 | type SignInUserPayload {
33 | token: String
34 | user: User
35 | }
36 |
37 | type Student {
38 | createdAt: ISO8601DateTime!
39 | dateOfBirth: ISO8601DateTime
40 | email: String
41 | id: ID!
42 | name: String!
43 | nickname: String
44 | updatedAt: ISO8601DateTime!
45 | }
46 |
47 | type User {
48 | createdAt: ISO8601DateTime!
49 | email: String
50 | id: ID!
51 | name: String
52 | role: String
53 | updatedAt: ISO8601DateTime!
54 | }
55 |
--------------------------------------------------------------------------------
/src/graphql/queries/__generated__/GetSurvey.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable */
2 | /* eslint-disable */
3 | // @generated
4 | // This file was automatically generated and should not be edited.
5 |
6 |
7 | // ====================================================
8 | // GraphQL query operation: GetSurvey
9 | // ====================================================
10 |
11 |
12 | export interface GetSurvey_survey_questions_options {
13 | __typename: "QuestionOption";
14 | id: string;
15 | label: string;
16 | }
17 |
18 | export interface GetSurvey_survey_questions {
19 | __typename: "Question";
20 | id: string;
21 | prompt: string;
22 | type: string;
23 | options: GetSurvey_survey_questions_options[] | null;
24 | }
25 |
26 | export interface GetSurvey_survey {
27 | __typename: "Survey";
28 | id: string;
29 | name: string;
30 | questions: GetSurvey_survey_questions[] | null;
31 | }
32 |
33 | export interface GetSurvey {
34 | /**
35 | * A single survey
36 | */
37 | survey: GetSurvey_survey;
38 | }
39 |
40 | export interface GetSurveyVariables {
41 | id: string;
42 | }
43 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2021 Ruby for Good
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
6 |
7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
8 |
9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
10 |
--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "parser": "@typescript-eslint/parser",
3 | "parserOptions": {
4 | "ecmaVersion": 2019,
5 | "sourceType": "module",
6 | "ecmaFeatures": {
7 | "jsx": true
8 | }
9 | },
10 | "settings": {
11 | "react": {
12 | "version": "detect"
13 | }
14 | },
15 | "extends": ["eslint:recommended"],
16 | "rules": {
17 | "semi": ["error", "never"],
18 | "strict": ["error", "never"],
19 | "react/prop-types": ["off"]
20 | },
21 | "env": {
22 | "jest": true,
23 | "browser": true,
24 | "node": true
25 | },
26 | "overrides": [
27 | {
28 | "files": "**/*.+(ts|tsx)",
29 | "parser": "@typescript-eslint/parser",
30 | "parserOptions": {
31 | "project": "./tsconfig.json"
32 | },
33 | "plugins": ["@typescript-eslint/eslint-plugin"],
34 | "extends": [
35 | "plugin:@typescript-eslint/eslint-recommended",
36 | "plugin:@typescript-eslint/recommended"
37 | ],
38 | "rules": {
39 | "@typescript-eslint/ban-ts-comment": ["off"]
40 | }
41 | }
42 | ]
43 | }
44 |
--------------------------------------------------------------------------------
/src/__test__/components/VolunteerProfilePage.test.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 |
3 | import { render, screen, waitFor } from "@testing-library/react"
4 | import { Account } from "components/Account"
5 | import { User } from "models/User"
6 | import { BrowserRouter as Router } from 'react-router-dom'
7 |
8 | test("renders the volunteer's profile page", async () => {
9 | const fillAccountIcon = (a: boolean) => undefined
10 | const user: User = { firstName: "John", lastName: "Smith", phoneNumber: "111-222-3333", email: "john@smith.com" }
11 |
12 | render(
13 | 18 | 25 | 26 |
27 | )} 28 | )} 29 |
14 |
31 | )
32 | }
33 |
--------------------------------------------------------------------------------
/src/graphql/queries/__generated__/GetSurveyResponses.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable */
2 | /* eslint-disable */
3 | // @generated
4 | // This file was automatically generated and should not be edited.
5 |
6 |
7 | // ====================================================
8 | // GraphQL query operation: GetSurveyResponses
9 | // ====================================================
10 |
11 |
12 | export interface GetSurveyResponses_surveyResponses_student {
13 | __typename: "Student";
14 | name: string;
15 | initials: string;
16 | }
17 |
18 | export interface GetSurveyResponses_surveyResponses_volunteer {
19 | __typename: "User";
20 | id: string;
21 | name: string;
22 | }
23 |
24 | export interface GetSurveyResponses_surveyResponses_meetingDuration {
25 | __typename: "MeetingDuration";
26 | minutes: number;
27 | startedAt: any;
28 | }
29 |
30 | export interface GetSurveyResponses_surveyResponses {
31 | __typename: "SurveyResponse";
32 | id: string;
33 | student: GetSurveyResponses_surveyResponses_student;
34 | volunteer: GetSurveyResponses_surveyResponses_volunteer;
35 | meetingDuration: GetSurveyResponses_surveyResponses_meetingDuration | null;
36 | }
37 |
38 | export interface GetSurveyResponses {
39 | /**
40 | * All survey_responses associated with signed in volunteer
41 | */
42 | surveyResponses: GetSurveyResponses_surveyResponses[] | null;
43 | }
44 |
--------------------------------------------------------------------------------
/src/graphql/queries/__generated__/GetStudentSurveyResponses.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable */
2 | /* eslint-disable */
3 | // @generated
4 | // This file was automatically generated and should not be edited.
5 |
6 |
7 | // ====================================================
8 | // GraphQL query operation: GetStudentSurveyResponses
9 | // ====================================================
10 |
11 |
12 | export interface GetStudentSurveyResponses_studentSurveyResponses_student {
13 | __typename: "Student";
14 | name: string;
15 | initials: string;
16 | }
17 |
18 | export interface GetStudentSurveyResponses_studentSurveyResponses_meetingDuration {
19 | __typename: "MeetingDuration";
20 | minutes: number;
21 | startedAt: any;
22 | }
23 |
24 | export interface GetStudentSurveyResponses_studentSurveyResponses {
25 | __typename: "SurveyResponse";
26 | id: string;
27 | student: GetStudentSurveyResponses_studentSurveyResponses_student;
28 | meetingDuration: GetStudentSurveyResponses_studentSurveyResponses_meetingDuration | null;
29 | }
30 |
31 | export interface GetStudentSurveyResponses {
32 | /**
33 | * All survey_responses for a specific student associated with signed in volunteer
34 | */
35 | studentSurveyResponses: GetStudentSurveyResponses_studentSurveyResponses[] | null;
36 | }
37 |
38 | export interface GetStudentSurveyResponsesVariables {
39 | id: string;
40 | }
41 |
--------------------------------------------------------------------------------
/src/components/App.tsx:
--------------------------------------------------------------------------------
1 | import { QueryClient, QueryClientProvider } from "react-query"
2 | import {
3 | ApolloClient,
4 | ApolloProvider,
5 | createHttpLink,
6 | InMemoryCache,
7 | NormalizedCacheObject,
8 | } from "@apollo/client"
9 | import { authenticatedHttpLink, setToken } from "lib/authentication"
10 | import { Landing } from "components/Landing"
11 |
12 | const urlSearchParams = new URLSearchParams(window.location.search)
13 | const params = Object.fromEntries(urlSearchParams.entries())
14 | if (params.token) {
15 | setToken(params.token)
16 | }
17 |
18 | const queryClient = new QueryClient()
19 |
20 | const uriLink = () => {
21 | // if (window.location.href.indexOf("inkind-volunteer.herokuapp.com") > -1) {
22 | return "https://inkind-admining.herokuapp.com/graphql"
23 | // } else {
24 | // return "http://localhost:3001/graphql"
25 | // }
26 | }
27 |
28 | const link = createHttpLink({
29 | uri: uriLink(),
30 | credentials: "include",
31 | })
32 |
33 | const apolloClient: ApolloClient
15 |
16 | })
17 |
18 |
19 | {`${currentQuestionIndex + 1} of ${questions.length}`}
20 |
21 |
22 |
23 |
24 |
30 |
25 |
29 |
27 |
28 | Loading ....
}
29 | if (error) { return
33 |
40 | )
41 | }
42 |
--------------------------------------------------------------------------------
/src/graphql/queries/__generated__/GetSurveyResponse.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable */
2 | /* eslint-disable */
3 | // @generated
4 | // This file was automatically generated and should not be edited.
5 |
6 |
7 | // ====================================================
8 | // GraphQL query operation: GetSurveyResponse
9 | // ====================================================
10 |
11 |
12 | export interface GetSurveyResponse_surveyResponse_survey_questions_options {
13 | __typename: "QuestionOption";
14 | id: string;
15 | label: string;
16 | }
17 |
18 | export interface GetSurveyResponse_surveyResponse_survey_questions {
19 | __typename: "Question";
20 | id: string;
21 | heading: string | null;
22 | prompt: string;
23 | description: string | null;
24 | type: string;
25 | options: GetSurveyResponse_surveyResponse_survey_questions_options[] | null;
26 | }
27 |
28 | export interface GetSurveyResponse_surveyResponse_survey {
29 | __typename: "Survey";
30 | id: string;
31 | name: string;
32 | questions: GetSurveyResponse_surveyResponse_survey_questions[] | null;
33 | }
34 |
35 | export interface GetSurveyResponse_surveyResponse {
36 | __typename: "SurveyResponse";
37 | id: string;
38 | survey: GetSurveyResponse_surveyResponse_survey;
39 | }
40 |
41 | export interface GetSurveyResponse {
42 | /**
43 | * A single survey response
44 | */
45 | surveyResponse: GetSurveyResponse_surveyResponse;
46 | }
47 |
48 | export interface GetSurveyResponseVariables {
49 | id: string;
50 | }
51 |
--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
1 | Resolves #000
2 |
3 |
16 |
17 | ### Description
18 |
19 | - Include summary of change and what issue is fixed, including relevant motivation and context.
20 | - Explain the need for any added dependencies for this change.
21 | - How have you tested this?
22 | - Anything else we should know about?
23 |
24 | ### Type of change
25 |
26 |
27 |
28 | - Bug fix (non-breaking change which fixes an issue)
29 | - New feature (non-breaking change which adds functionality)
30 | - Breaking change (fix or feature that would cause existing functionality to not work as expected)
31 | - This change requires a documentation update
32 | - Documentation update
33 |
34 | ### Screenshots
35 |
36 |
37 |
--------------------------------------------------------------------------------
/src/components/SurveyShow/MultipleSelectionOption.tsx:
--------------------------------------------------------------------------------
1 | import { GetSurvey_survey_questions_options } from "graphql/queries/__generated__/GetSurvey"
2 |
3 | interface MultipleSelectionOptionProps {
4 | options: GetSurvey_survey_questions_options[],
5 | onAnswer: any,
6 | }
7 |
8 | export const MultipleSelectionOption = ({ options, onAnswer }: MultipleSelectionOptionProps): JSX.Element | null => {
9 | const onSelectAnswer = (event: React.ChangeEvent
34 |
39 | Hi {user.name?.split(" ")[0]}!
35 |My Students
36 |29 | 36 | 37 |
38 | )} 39 | )} 40 |Loading ....
}
15 | if (error) { return
19 |
39 | )
40 | }
41 |
--------------------------------------------------------------------------------
/src/components/icons/person.svg:
--------------------------------------------------------------------------------
1 |
2 |
12 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
1 | *Before filing the ticket you should replace all text between the horizontal rules with your own words. We recommend keeping the headings (optional headings can be left off if you don't need them)*
2 |
3 | --------
4 |
5 | # Summary
6 |
7 | Describe an overview of the problem. Provide a general description of the problem it's solving or why this issue should be addressed.
8 |
9 | ## Things to Consider
10 | > **OPTIONAL** If you happen to know that this particular issue will touch other parts of the application in non-obvious ways (maybe there are side effects, or there are other parts of the application that depend on the thing that needs to be changed), you can list them out here. This is an opportunity to share *domain knowledge* that you might have about the problemset.
11 |
12 | # Criteria for Completion
13 | > This should be a bulleted list of items that, if satisfied, would result in an acceptably complete Pull Request. Be as specific as you need to be. For example:
14 |
15 | - [ ] When a user clicks on {this} it should now do {that}
16 | - [ ] This feature should only be available to volunteers
17 | - [ ] Add a test proving that it works
18 |
19 | # Bonus Round
20 | > **OPTIONAL** This can be additional work that is related to the work performed but might be more challenging or require a little extra effort to resolve. It's NOT required for the PR to be accepted and merged. Usually if this work isn't performed it would be created in a separate issue later. For example:
21 |
22 | - [ ] Present more data from the GraphQL endpoint on the backend
23 | - [ ] Refactor this widget away because it is no longer needed
24 |
25 | -------
26 |
27 | The goal here is to minimize the amount of clarification that a user needs in order to get started on the work, as well as reducing the likelihood that a lengthy PR discussion about the scope of work ensues. This whole project is volunteer-driven, on both sides, so we want to communicate expectations and needs as clearly as possible up front.
28 |
--------------------------------------------------------------------------------
/src/components/Account.tsx:
--------------------------------------------------------------------------------
1 | import { User } from "models/User"
2 | import { Link } from "react-router-dom"
3 |
4 | import { setToken } from "lib/authentication"
5 | import { Avatar } from "./partials/Avatar"
6 |
7 | interface AccountProps {
8 | fillAccountIcon: (a: boolean) => void;
9 | user: User;
10 | }
11 |
12 | export const Account = ({
13 | fillAccountIcon,
14 | user,
15 | }: AccountProps): JSX.Element => {
16 | fillAccountIcon(true)
17 |
18 | const clearSession = () => {
19 | setToken("")
20 | window.location.reload()
21 | }
22 |
23 | return (
24 | <>
25 | Recent Sessions
20 | {data?.surveyResponses?.length === 0 && 21 |
22 |
30 | }
31 |
32 | {data?.surveyResponses?.map((response: SurveyResponse) => (
33 |
23 | You haven't completed a session survey yet!
24 | Log a session now!
25 |
27 | })
28 |
29 |
26 |
42 |
43 |
27 |
34 |
35 |
36 |
38 | Profile
37 |
39 | Edit
40 |
41 | {user.firstName}
47 | {user.lastName}
48 | {user.email}
49 | {user.phoneNumber}
50 | Security
53 | Change Password 54 | 55 | ) 56 | } 57 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"], 3 | darkMode: false, 4 | theme: { 5 | boxShadow: { 6 | md: "0 20px 20px -1px rgba(120, 144, 156, .5), 0 2px 20px -1px rgba(120, 144, 156, .5)", 7 | }, 8 | extend: { 9 | colors: { 10 | 'purple': '#673AB7', 11 | 'purple-light': '#D1C4E9', 12 | 'gray-lightest': '#F8FBFE', 13 | 'gray-light': '#CFD8DC', 14 | 'gray-medium': '#B0BEC5', 15 | 'gray-dark': '#37474F', 16 | 'login-gradient-top': '#512da8', 17 | 'login-gradient-middle': '#9575cd', 18 | 'login-gradient-bottom': '#1ed4eb', 19 | primary: { 20 | DEFAULT: '#673ab7', 21 | '50': '#ede7f6', 22 | '100': '#d1c4e9', 23 | '200': '#b39ddb', 24 | '300': '#9575cd', 25 | '400': '#7e57c2', 26 | '500': '#673ab7', 27 | '600': '#5e35b1', 28 | '700': '#512da8', 29 | '800': '#4527a0', 30 | '900': '#311b92', 31 | }, 32 | secondary: { 33 | DEFAULT: '#00bcd4', 34 | '50': '#e0f7fa', 35 | '100': '#b2ebf2', 36 | '200': '#80deea', 37 | '300': '#4dd0e1', 38 | '400': '#26c6da', 39 | '500': '#00bcd4', 40 | '600': '#00acc1', 41 | '700': '#0097a7', 42 | '800': '#00838f', 43 | '900': '#006064', 44 | }, 45 | neutral: { 46 | DEFAULT: '#607d8b', 47 | '50': '#eceff1', 48 | '100': '#cfd8dc', 49 | '200': '#b0bec5', 50 | '300': '#9a44ae', 51 | '400': '#78909c', 52 | '500': '#607d8b', 53 | '600': '#546e7a', 54 | '700': '#455a64', 55 | '800': '#37474f', 56 | '900': '#263238', 57 | }, 58 | }, 59 | }, 60 | fontFamily: { 61 | 'nunito': ['nunito', 'sans-serif'], 62 | 'tenor': ['Tenor Sans', 'sans-serif'], 63 | }, 64 | }, 65 | variants: { 66 | extend: {}, 67 | }, 68 | plugins: [], 69 | } 70 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 19 | 20 | 29 |
31 |
73 | 32 | InKind 33 |
34 | 35 | {error &&{error.message}
}
36 |
37 |
72 | {name}
53 |Student Information
54 | 55 |
56 |
83 |
84 |
90 |
91 |
57 | Guardian Name
58 | {guardianName}
59 |
60 |
61 |
62 | Guardian Phone
63 | {guardianPhoneNumber}
64 |
65 |
66 |
67 | Emergency Contact
68 | {emergencyContactName}
69 |
70 |
71 |
72 | Emergency Phone
73 | {emergencyContactPhoneNumber}
74 |
75 |
76 |
77 | Student's Age
78 | {getAge(dateOfBirth)}
79 |
80 |
81 |
82 | Session History
92 | {surveyData?.studentSurveyResponses?.map((response: StudentSurveyResponse) => ( 93 |
27 |
98 | )
99 | }
100 |
--------------------------------------------------------------------------------
/src/components/MainNav.tsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from "react"
2 | import {
3 | BrowserRouter as Router,
4 | Link,
5 | Route,
6 | Routes,
7 | } from "react-router-dom"
8 |
9 | import HomeIcon from "./icons/home.svg"
10 | import HomeSelectedIcon from "./icons/homeSelected.svg"
11 | import PersonIcon from "./icons/person.svg"
12 | import PersonSelectedIcon from "./icons/personSelected.svg"
13 |
14 | import { User } from "models/User"
15 |
16 | import { WelcomeDashboard } from "./WelcomeDashboard/index"
17 | import { StudentShow } from "./StudentShow"
18 | import { SurveyShow } from "./SurveyShow/index"
19 | import { Account } from "./Account"
20 | import { EditAccount } from "./EditAccount"
21 | import { EditAccountPassword } from "./EditAccountPassword"
22 | import { EditAccountSuccess } from "./EditAccountSuccess"
23 | import { SessionDuration } from "./SessionDuration/index"
24 |
25 | interface MainNavProps {
26 | user: User;
27 | }
28 |
29 | export const MainNav = ({ user }: MainNavProps): JSX.Element => {
30 | const [filledHomeIcon, fillHomeIcon] = useState
28 |
97 | Enter Date and Time
29 |Enter your session date and duration. Round up to the nearest 15 mins, if necessary.
30 | 96 |
46 |
82 |
83 |
116 |
117 | {"Please describe the reason for this request in a few words:"}
122 | 123 | 129 | 130 |
131 |
132 |
133 |
134 | :
135 | <>
136 | {currentQuestion.heading}
137 |{currentQuestion.prompt}
138 |{currentQuestion.description}
139 | 140 | {renderQuestion(currentQuestion)} 141 | 142 |
143 |
144 |
145 |
146 |
147 | }
148 |