Getting Started with Create React App
This project was bootstrapped with Create React App.
Available Scripts
In the project directory, you can run:
npm start
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
npm test
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
npm run build
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
npm run eject
Note: this is a one-way operation. Once you eject, you can’t go back!
If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
Learn More
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
About the Package
learning space package: Our app includes 3 sides, some of the sides have the same components so we created a package with those components.
The components are:
- Login page (/pages/LoginPage.tsx)
- 404 page (/not-found/NotFound.tsx)
- Unauthorized page (/not-found/UserNotFound.tsx)
- Icons (/icons/Icons.tsx)
- Organizations (/organisations/Organisations.tsx)
- Page for classroom code in student or select school in teacher (/pages/CodePage.tsx)
- loader (/generic-components/Loader.tsx)
- Page Loader (/generic-components/PageLoder.tsx)
- embed task page (/embed-task-page/components/TaskPage.tsx)
- Journey Diary Page (/journey-diary/components/journey-diary-components/JourneyDiary.tsx)
- Journey Diary PDF (/journey-diary/components/pdf/JourneyPDF.tsx)
The information below are saved in DB for each learning space. Almost every component expects to get some of them as props:
| name | type |
|---|---|
| primaryColor | string |
| secondaryColor | string |
| backgroundColor | string |
| Icons | IconType[] |
| lsName | string |
| learningSpaceId | number |
In some cases the component expects to get a prop named classroom which is an object with the following props that are mentioned above, and:
| name | type | side / component |
|---|---|---|
| classroomId | number | student side |
| headerColor | string | jd component |
| journeyDotColor | string | jd component |
| studentPhoto | string | student side |
| pointsName | string | student side |
| nextPointsStep | number | student side |
In addition most of the components gets additional props.
Main components:
Task Page:
Task page is a component for all task page types (capish, regular, preview). This component uses Task provider which includes:
| name | type | description |
|---|---|---|
| preview | boolean | if is a preview state |
| taskData | TaskData | information of the current task (id, task title, embed url and so on...) |
| closePage | () => void | function that gets called while the page is closing. |
| fetchCapishQuestions? | (capishAccess: string, textId: string) => Promise | saving all capish questions and answers in DB |
| finishTask | () => Promise | function that gets called while finish btn is pressed |
| historyPush | () => void | history push with state |
| capishDomain | string | find it in the env file |
| getAccessToken | () => Promise | returns google access token for capish login |
|
Related components:
(/embed-task-page/components)
- Embed:
- determine if it is a preview and if it is a capish task.
- renders the iframe.
- CapishIframe:
- special component for capish task (capish tasks have different css and different functions)
- PreviewHeader
- page header in preview state
- HeaderFooter :
- page header in regular state
Journey Diary:
Journey diary is a part of the app that includes all the questions (and the answer) that were in capish tasks that the students already did. the student can edit it and the teacher can view it. (in the next epic teacher should also have the ability to edit it).
The journey diary contains two main components :
- JourneyDiary.tsx - the journey diary JourneyDiary.tsx: the journey diary component.
- JourneyPDF.tsx - a component that exports a pdf file based on the journey diary component. We will talk about those components separately.
The JD flow:
JD component renders an array of entries - entry is a question (from capish page) with its answer.
The entry includes:
- category name (the category of the capish task)
- question (not editable, can be consists of many parts)
- answers (editable)
The questions and the answers consists of 4 different content types :
- text (TextAnswer.tsx)
- audio (AudioAnswer.tsx)
- youtube video - we are saving a link for youtube video and embed the link. (YoutubeLinkAnswer.tsx)
- image (ImageAnswer.tsk)
Questions:
The entry renders the Content component that renders the relevant components according to the question’s part type.
Answers:
The entry renders the EntryContent component which renders Draggable, DragIndicator and delete btn (if edit mode is true) and the Content component. If there are more than 2 answers only the first two are rendered and also see more/ see less btn is rendered.
Edit Mode:
When the entry is in state of edit mode the user can add answers (from all types) , delete answers, and change the order of the answers (using drag and drop). also the user can delete the whole question (entry). (not just in edit mode)
Journey Diary components:
Note: you can find all the customized types in /src/journey-diary/types
Content:
determine which components to render according to the question / answer type.
Props:
| name | type |
|---|---|
| content | Answer[] | Question[] |
| setAnswers? | (answers: Answer[]) => void |
| editMode? | boolean |
| item | Answer | Question |
| index? | number |
Content Components :
(journey-diary-components/content)
AudioAnswer:
props:
| name | type |
|---|---|
| link | string |
| answerId | number |
Also use AudioContext:
context that determines whether the right audio is played by checking if the audio id matches that id that is saved in the context. if the id does not match and the audio is playing, the audio will be stopped.