-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #48 from BU-Spark/reconcile-dev
Reconcile dev
- Loading branch information
Showing
2,796 changed files
with
295,219 additions
and
2,816 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| # Technical Issues Summary and Solutions | ||
|
|
||
| ## Context | ||
| Developing a web application featuring a choice-based questionnaire. The frontend interacts with Strapi CMS. This document logs encountered issues and their resolutions. | ||
|
|
||
| ## Primary Issues and Resolutions | ||
|
|
||
| ### 1. Frontend Data Fetching Error (404 Not Found) | ||
| - **Problem:** Errors when fetching data for "Communication" choice from Strapi (`/api/choice-to-question-maps/comm?populate=*`), resulting in a 404 Not Found error. | ||
| - **Resolution:** Discovered that the endpoint was incorrect. Correct endpoint should reference the ID number rather than a string (`comm`). The correct API call is `/api/choice-to-question-maps?populate=*`. Issue resolved by updating the `id` reference in the frontend `QuestionairePage.tsx` file from "comm" to the numerical ID "2". | ||
|
|
||
| ### 2. Strapi Data Import Script Failure (405 Method Not Allowed and 404 Not Found) | ||
| - **Problem:** Node.js script (`import-script.js`) failed to authenticate with Strapi. Attempts to access `/auth/local` endpoint for a token resulted in 405 Method Not Allowed and 404 Not Found errors. | ||
| - **Resolution:** Resolved by adjusting user and permissions settings in the Strapi admin panel. Specifically, modified public role permissions for content types like `choice-to-question-map`, `question-to-choice-map`, `first-entry` etc., to address the 403 Forbidden and 405 Method Not Allowed errors. | ||
|
|
||
| ### 3. Strapi Console Errors (403 Forbidden, 404 Not Found) | ||
| - **Reported Errors:** | ||
| - 405 error on POST to `/auth/local`. | ||
| - 404 error on GET to `/auth/local`. | ||
| - 403 and 404 errors on GET requests to various API endpoints (`/api/first-entries/1?populate=*`, `/api/choice-to-question-maps/comm?populate=*`). | ||
| - **Resolution:** The 403 Forbidden error was due to inadequate permissions set in Strapi for certain roles. Adjusting these permissions in the Strapi admin panel resolved the issue. The 404 errors were fixed by correcting the API endpoints as detailed above. | ||
|
|
||
| ### 4. Adding TitleDescription Box to Questions | ||
| - **Requirement:** Implementing a feature to add a short paragraph of description to questions displayed on the website. | ||
| - **Resolution:** | ||
| - Added an additional text field `QuestionDescription` in Strapi content manager under the `question-to-choice-map` collection type. | ||
| - Modified `QuestionairePage.tsx` to include this new field in the displayed content. | ||
| - Updated `tempNextChoiceSelectionFromJson.tsx` to fetch `QuestionDescription` as part of the question data. | ||
| - Adjusted styling in `BodyContentUseStyles` to properly display the description text alongside the question title. | ||
|
|
||
| ## Future Considerations | ||
| This document serves as a log of issues and resolutions during the development phase. It is intended to assist future developers encountering similar challenges, providing guidance and solutions without the need for direct consultation. | ||
|
|
||
| --- |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,3 @@ | ||
| chien-ying | ||
| mernaAlghannam | ||
| marsof02 | ||
| ArkashJ | ||
| LionelCC | ||
| GavinXZhang | ||
| WillZChan |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -3,25 +3,30 @@ | |
| ## ALS Resource App | ||
|
|
||
| ### Project Description | ||
| People with ALS around the world are not offered a variety of clinical options. There are dozens of opportunities for what could be the most beneficial option to them, but are usually only offered a few. The goal is to take clinical decision making and turn it into a tool that allows ALS patients to look at options and discuss them with their clinician (I have questions about a, b, and c). This tool/guide will allow people with ALS and clinicians/clinics to collaborate in the process of identifying best options throughout the disease process. Tools, resources, and methodologies are continually evolving to help people with ALS to cope with their condition. Because of the rapid nature of development(s), communicating updated resources to both clinicians and patients is difficult. | ||
|
|
||
| The two primary users of this application (mobile or web app) would be patients with ALS or clinicians who work with ALS patients on occasion (such as primary care physicians etc). The goal would be to provide them with a guided system that is constantly updated with the latest information. Each answer to a question or series of questions would lead the user down a different branch of questions and finally suggestions for the patient's current condition. The end goal would be creating a platform that helps distribute the information to patients and clinicians who might not have access to clinics with ALS experts. | ||
| People with ALS around the world are not offered a variety of clinical options. There are dozens of opportunities for what could be the most beneficial option to them, but are usually only offered a few. The goal is to take clinical decision making and turn it into a tool that allows ALS patients to look at options and discuss them with their clinician (I have questions about a, b, and c). This tool/guide will allow people with ALS and clinicians/clinics to collaborate in the process of identifying best options throughout the disease process. Tools, resources, and methodologies are continually evolving to help people with ALS to cope with their condition. Because of the rapid nature of development(s), communicating updated resources to both clinicians and patients is difficult. | ||
|
|
||
| The two primary users of this application (mobile or web app) would be patients with ALS or clinicians who work with ALS patients on occasion (such as primary care physicians etc). The goal would be to provide them with a guided system that is constantly updated with the latest information. Each answer to a question or series of questions would lead the user down a different branch of questions and finally suggestions for the patient's current condition. The end goal would be creating a platform that helps distribute the information to patients and clinicians who might not have access to clinics with ALS experts. | ||
|
|
||
| ### Run Project | ||
|
|
||
| Frontend: <br> | ||
| nagivate to \code <br> | ||
|
|
||
| ```bash | ||
| npm install | ||
| npm run dev | ||
| ``` | ||
|
|
||
| Strapi: <br> | ||
| nagivate to \backend_strapi to run strapi locally <br> | ||
| create a .env for keys file. Contact me or spark for the file's details. <br> | ||
| create a .env for keys file. Contact me or spark for the file's details. <br> | ||
|
|
||
| ```bash | ||
| npm install | ||
| npm run develop | ||
| ``` | ||
|
|
||
| <br> uncomment this line to use the local version of strapi on your computer https://github.com/BU-Spark/se-bch-als-resource-app/blob/8bbdc2c0b6e2e775b7928429743426246e97d274/code/src/constants/globals.tsx#L2 | ||
| <br> ask me on [email protected] for access as an admin to strapi | ||
|
|
||
|
|
@@ -31,62 +36,67 @@ npm run develop | |
| npm install | ||
| npm run dev | ||
| ``` | ||
|
|
||
| ### Architecture | ||
|
|
||
| A presentation explaning the project | ||
|
|
||
| https://docs.google.com/presentation/d/11JwhtYG3_TAnesC0EPIhte9aymyAj1dD0EDDxbxzQCE/edit?usp=sharing | ||
|
|
||
| <img width="875" alt="Screenshot 2023-05-02 at 5 49 11 PM" src="https://user-images.githubusercontent.com/86805856/235793618-32ef3573-40b2-4ad6-acb2-ac6d1a01c521.png"> | ||
|
|
||
| ### Files | ||
|
|
||
| To modify components you can go to /src/components. Details for the components, constants, | ||
| images and styles are in the ComponentDocs.md file. | ||
|
|
||
| <img width="196" alt="Screenshot 2023-05-02 at 5 41 20 PM" src="https://user-images.githubusercontent.com/86805856/235792999-e6a4e35a-8127-45d3-b8c7-c9b593922b25.png"> | ||
|
|
||
| ### API and Pages | ||
|
|
||
| To understand the API and pages, naviagte to the the Pages&APIDocs.md file in src. | ||
| <img width="489" alt="Screenshot 2023-05-02 at 5 41 05 PM" src="https://user-images.githubusercontent.com/86805856/235792972-93dc9152-dc3a-4bfa-89c6-942290798f1d.png"> | ||
|
|
||
| ### Extendability | ||
|
|
||
| 1) Database: The code for storing the data in a database (for this code it is mongodb) has been provided. Since it was not required to do so for our project, we did not do so but for future teams, they can modify this code data storage. | ||
| 1. Database: The code for storing the data in a database (for this code it is mongodb) has been provided. Since it was not required to do so for our project, we did not do so but for future teams, they can modify this code data storage. | ||
|
|
||
| 2) Deployment on cloud: The application can easily be deployed on a cloud provider. The tests help users see if the code breaks or not. Furthemore, they can view our CI/CI workflows for cloudflare/vercel to deploy this app. | ||
| 2. Deployment on cloud: The application can easily be deployed on a cloud provider. The tests help users see if the code breaks or not. Furthemore, they can view our CI/CI workflows for cloudflare/vercel to deploy this app. | ||
|
|
||
| 3) Code modification: We have written modular code written, dividing code into components and classes. Furthermore, detailed explanations for each class can be provided below and on the application. | ||
| 3. Code modification: We have written modular code written, dividing code into components and classes. Furthermore, detailed explanations for each class can be provided below and on the application. | ||
|
|
||
| Detailed Explanations: | ||
|
|
||
| ### Components | ||
|
|
||
| Docs Written by @ArkashJ, contact for assistance | ||
| DOCUMENTATION: | ||
|
|
||
| File Structure: | ||
| --> code | ||
| -> components | ||
| -> Footer | ||
| -> Footer.tsx | ||
| -> Titles.tsx | ||
| -> MainBody | ||
| -> HelperFunctions | ||
| -> BodyContentStyle.tsx | ||
| -> Selection.tsx | ||
| -> SolutionPageContent | ||
| -> PageContentHelpers | ||
| -> Paragraph.tsx | ||
| -> Video.tsx | ||
| -> PageContent.tsx | ||
| -> Resources.tsx | ||
| -> TestimonialOrHandouts.tsx | ||
| -> VideoImageParagraphsContent.tsx | ||
| -> ToggleButton.tsx | ||
| -> Navbar | ||
| -> Nav.tsx | ||
| -> Docs.md | ||
|
|
||
|
|
||
| ### Footer | ||
| --> code | ||
| -> components | ||
| -> Footer | ||
| -> Footer.tsx | ||
| -> Titles.tsx | ||
| -> MainBody | ||
| -> HelperFunctions | ||
| -> BodyContentStyle.tsx | ||
| -> Selection.tsx | ||
| -> SolutionPageContent | ||
| -> PageContentHelpers | ||
| -> Paragraph.tsx | ||
| -> Video.tsx | ||
| -> PageContent.tsx | ||
| -> Resources.tsx | ||
| -> TestimonialOrHandouts.tsx | ||
| -> VideoImageParagraphsContent.tsx | ||
| -> ToggleButton.tsx | ||
| -> Navbar | ||
| -> Nav.tsx | ||
| -> Docs.md | ||
|
|
||
| ### Footer | ||
|
|
||
| * Titles.tsx | ||
| * useStyles | ||
| - custom styles for titles (position, size, color) | ||
|
|
@@ -113,6 +123,7 @@ File Structure: | |
| * return <div> with all the links | ||
|
|
||
| ### MainBody | ||
|
|
||
| * HelperFunctions | ||
| * BodyContentStyle.tsx | ||
| * inner | ||
|
|
@@ -128,7 +139,7 @@ File Structure: | |
| - paddingLeft, paddingRight | ||
| * Selection.tsx | ||
| - return selection div | ||
|
|
||
| * SolutionPageContent | ||
| * PageContentHelpers | ||
| * Paragraph.tsx | ||
|
|
@@ -193,7 +204,7 @@ File Structure: | |
|
|
||
| * ToggleButton.tsx | ||
| * ToggleButtonProps | ||
| * updateContent: | ||
| * updateContent: | ||
| - A function to update the content based on the selected choice | ||
| - choice: An object of type IChoice representing a choice | ||
| - className: A string representing the CSS class name to apply to the Button component | ||
|
|
@@ -211,48 +222,50 @@ File Structure: | |
| Renders a Header component with a height of HEADER_HEIGHT, borderBottom set to 0, borderTop set to 4, and withBorder enabled Wrapped in a Container component with the inner class from useStyles and fluid property | ||
| - Contains a Group component with an Image component inside, which has properties like maw, mah, ml, mx, radius, src, and alt | ||
| - Also contains a Burger component with properties like size and color, and opened set to false | ||
|
|
||
|
|
||
| ### Pages and Api | ||
|
|
||
| Docs Written by @ArkashJ, contact for assistance | ||
| DOCUMENTATION: | ||
|
|
||
| ---> public | ||
| -> Boston_Children's Hospital_logo.png | ||
| -> CommImg.png | ||
| -> communications.png | ||
| -> doctor.png | ||
| -> footerImg.png | ||
| -> friend.png | ||
| -> home.png | ||
| -> titleImgHome.png | ||
| -> Boston_Children's Hospital_logo.png | ||
| -> CommImg.png | ||
| -> communications.png | ||
| -> doctor.png | ||
| -> footerImg.png | ||
| -> friend.png | ||
| -> home.png | ||
| -> titleImgHome.png | ||
|
|
||
| ---> src | ||
| -> constants | ||
| -> pages | ||
| -> api | ||
| -> GetSolutionPageForChoices.tsx | ||
| -> hello.ts | ||
| -> TempNextQuestionChoices.tsx | ||
| -> _app.tsx | ||
| -> _document.tsx | ||
| -> AccountPage.tsx | ||
| -> CommunicationPage.tsx | ||
| -> FinalPage.tsx | ||
| -> index.tsx | ||
| -> QuestionareBodyContentPages.tsx | ||
| -> QuestionarePage.tsx | ||
| -> SolutionPages.tsx | ||
| -> styles | ||
| -> global.css | ||
| -> Home.module.css | ||
| -> image12.png | ||
| -> types | ||
| -> api_types.tsx | ||
| -> dataTypes.tsx | ||
| -> Docs.md | ||
|
|
||
| -> constants | ||
| -> pages | ||
| -> api | ||
| -> GetSolutionPageForChoices.tsx | ||
| -> hello.ts | ||
| -> TempNextQuestionChoices.tsx | ||
| -> \_app.tsx | ||
| -> \_document.tsx | ||
| -> AccountPage.tsx | ||
| -> CommunicationPage.tsx | ||
| -> FinalPage.tsx | ||
| -> index.tsx | ||
| -> QuestionareBodyContentPages.tsx | ||
| -> QuestionarePage.tsx | ||
| -> SolutionPages.tsx | ||
| -> styles | ||
| -> global.css | ||
| -> Home.module.css | ||
| -> image12.png | ||
| -> types | ||
| -> api_types.tsx | ||
| -> dataTypes.tsx | ||
| -> Docs.md | ||
|
|
||
| ### Pages | ||
|
|
||
| * api | ||
| * GetSolutionPageForChoices.tsx | ||
| * getSolutionContent.ts | ||
|
|
@@ -281,9 +294,9 @@ DOCUMENTATION: | |
| * An array of `IChoice` objects representing the next set of choices | ||
| * A boolean indicating if the current choice has a solution | ||
| * An `ISolution` object representing the solution associated with the current choice | ||
| * This function fetches data from the API based on the input `clickedChoice` object and processes the data to return the required information about the next question, its choices, and any solution associated with the input choice. | ||
|
|
||
| * This function fetches data from the API based on the input `clickedChoice` object and processes the data to return the required information about the next question, its choices, and any solution associated with the input choice. | ||
|
|
||
| * If the input choice does not have a next question or solution, the function returns an empty question, an empty array of choices, and a boolean value set to false. | ||
|
|
||
| * pages/_app.tsx | ||
|
|
@@ -315,44 +328,46 @@ DOCUMENTATION: | |
| * This is the QuestionairePage component that wraps and renders the QuestionaireBodyContent component. | ||
|
|
||
| ### Tests | ||
|
|
||
| Docs Written by @ArkashJ, contact for assistance | ||
| DOCUMENTATION | ||
|
|
||
| ---> Nextjs-Tests | ||
| -> index.tests.tsx | ||
| -> QuestionnareBodyContent.tests.tsx | ||
| -> Questionnare.tests.tsx | ||
| -> SolutionPages.tests.tsx | ||
| -> index.tests.tsx | ||
| -> QuestionnareBodyContent.tests.tsx | ||
| -> Questionnare.tests.tsx | ||
| -> SolutionPages.tests.tsx | ||
|
|
||
| All these tests check whether the components have been rendered or not | ||
|
|
||
| cd to the Nextjs-Tests file, install the jest dependency and run tests. Detailed explantion in the TestDocs.md file | ||
|
|
||
| <img width="285" alt="Screenshot 2023-05-02 at 5 41 41 PM" src="https://user-images.githubusercontent.com/86805856/235793030-dfd1807f-3157-4a73-a605-c2cae6f6e88e.png"> | ||
|
|
||
|
|
||
| Move the tests to "__ test __" folder in pages folder. Then run 'npm run test'. Make sure you have jest installed. For more instructions, navigate to docs in tests folder. | ||
| Move the tests to "** test **" folder in pages folder. Then run 'npm run test'. Make sure you have jest installed. For more instructions, navigate to docs in tests folder. | ||
|
|
||
| Commands to Run: | ||
| $ npm run test | ||
|
|
||
| ### Files | ||
|
|
||
| To modify components you can go to /src/components. Details for the components, constants, | ||
| images and styles are in the ComponentDocs.md file. | ||
|
|
||
| <img width="196" alt="Screenshot 2023-05-02 at 5 41 20 PM" src="https://user-images.githubusercontent.com/86805856/235792999-e6a4e35a-8127-45d3-b8c7-c9b593922b25.png"> | ||
|
|
||
| ### API and Pages | ||
|
|
||
| To understand the API and pages, naviagte to the the Pages&APIDocs.md file in src. | ||
| <img width="489" alt="Screenshot 2023-05-02 at 5 41 05 PM" src="https://user-images.githubusercontent.com/86805856/235792972-93dc9152-dc3a-4bfa-89c6-942290798f1d.png"> | ||
|
|
||
| ### Bugs and errors | ||
|
|
||
| - UseEffect gets called twice during dev. Therefore, the back button may appear sooner, cause the page title not to render correctly. Useeffect is not a good option. Thus, we solved this in dev branch by using dynamic routes. It reroute to previous page when user clicks back button. <br><br> | ||
| - UseEffect gets called twice during dev. Therefore, the back button may appear sooner, cause the page title not to render correctly. Useeffect is not a good option. Thus, we solved this in dev branch by using dynamic routes. It reroute to previous page when user clicks back button. <br><br> | ||
|
|
||
| - In dev branch, we used dynamic routes because it makes our code cleaner and easier to follow. In addition, it creates a page for each question. However, it currently can only be deployed as a dynamic website. To make it a static site, next team would need to usegetstatic paths to generate all pages during build. (Note: our teammate believes we should keep it dynamic as generating all pages at once wastes resources) | ||
|
|
||
| - Our page rendering performance can be improved by using possibly dynamic routes (working starter code in dev branch). In addition, the back button is difficult to press. Thus, usecallback can also be useful there. | ||
| - Our page rendering performance can be improved by using possibly dynamic routes (working starter code in dev branch). In addition, the back button is difficult to press. Thus, usecallback can also be useful there. | ||
|
|
||
| - When the page load is slow, it does not show a loading icon | ||
|
|
||
|
|
@@ -361,11 +376,12 @@ To understand the API and pages, naviagte to the the Pages&APIDocs.md file in sr | |
| More details can be found in issues section. | ||
|
|
||
| ### Summary of we did | ||
|
|
||
| Branch: main: <br> | ||
| -used strapi to update questions, choices, and resource page content <br> | ||
| -resource page includes vidoes, paragraphs, pdf and website links all fetched from strapi <br> | ||
| -created a dynamic questionaire <br> | ||
| -created a new | ||
| -created a new | ||
| Branch: dev:<br> | ||
| -created dynamic routes for each question. Used routeback to navigate to previous page after clickling back button <br> | ||
| -starter code for saving content into mongodb after clickling on save button <br> | ||
|
|
@@ -380,6 +396,6 @@ https://se-bch-als-resource-app.vercel.app/ | |
| In addition, we deployed strapi on railway | ||
| Link: https://se-bch-als-resource-app-production.up.railway.app | ||
|
|
||
| You can contact me t [email protected] for access to strapi. | ||
| You can contact me t [email protected] for access to strapi. | ||
|
|
||
| In addition, we have provided a folder called strapi, which contains all content of strapi for reference. | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| [] |
Oops, something went wrong.