Create dailyTracker.js sub-component for weeklyTracker.js

Task Use the mockup in the design directory to create a dailyTracker.js sub-component for weeklyTracker.js

See the following for the design/wireframes/CORONATRACKER UI-#1 This component is the sliders which show “You said you felt x/10 today”. It is below the Calendar.

weeklyTracker.js will hold the four dailyTracker.js components. One for the last four days.

What done looks like:

1. See if you can find a component that already handles this online. If so, just import it, and figure out how to style it in weeklyTracker.css like the mockup.
2. Add comments to explain code if necessary
3. We have dailyTracker.js component in /components.
4. We have dailyTracker.css file in /css to style the dailyTracker.js sub-component.
5. They are slideable and change color as per the mockup.
6. Takes state of symptoms and passes to the redux store
7. Can set an alert for a reminder to add state later
8. Takes state of symptoms and passes to the database for storage

@BrianHHough to add more clarity on functionality. @SomeMoosery will add clarity on what needs to passed to the database and/or redux.

Design considerations: We have decided to use regular CSS files to keep things simple for now. This allows for more contributors and less time to upskill to contribute.

Once MVP is done the team can discuss if we want to transition it to styled-components or something like CSS modules.

Folder paths CSS is located in /client/src/css Components are located in /client/src/components

Style guide for CSS files: Naming convention: Component -> dailyTracker.js CSS file -> dailyTracker.css

To avoid naming collisions: prefix class names with the name of component and link with kebab case. Class name -> .dailyTracker.js-header { ... }

How to handle state: If you can use redux, use it. Create action and reducer with an appropriate name.

Testing: No need to worry about testing for now. If you choose to add tests, please place in client/src/tests

[BrianHHough]

will need the bar image that belongs on the far left side

Hey @sedmo: the bar image is here as SVG and PNG: “Calendar_Three-Lines.png/.svg” here: https://github.com/COVID-19-electronic-health-system/Corona-tracker/tree/master/client/src/img

[AdhamAH]

this was fixed in #323