se701group2/daily-focus

Shared repo for 701 Group 2 project

daily-focus's Issues

Rearrange Backend File Structure

Developer Story
As a developer, I want to arrange the back-end file system/structure into a more orderly layout to ensure readability/maintainability

Acceptance Criteria

• All tests in a test folder
• New Util folder for utility files/functions
• All routing files in appropriate route files
• Remove unneeded files

Dependencies
#40 , #41

Create sign-up API handler

User Story
As a user, I want to be able to sign-up for an account

Acceptance Criteria

• User account should be managed by Firebase Authentication
• User account should be created with an email address and password
• Email should be checked that it is in a valid format

Establish contribution guidelines

Team Story
As a team, we want guidelines on filing bug reports, feature requests, and environment setup + running a test suite. Git stuff too - fork/pull workflow using squash & merge for PRs.

Acceptance Criteria

• All documents outlined under the "Contributing" section in the Wiki table of contents are completed (see https://github.com/SE701Group2/daily-focus/wiki)

Additional Context

https://opensource.guide/starting-a-project/#launching-your-own-open-source-project

Also includes PR templates and potentially issue templates - these belong in a .github/ folder.

https://docs.github.com/en/github/building-a-strong-community/about-issue-and-pull-request-templates

Important: Also, also - needs to cover an issue approval process for newly created issues

Create a static component that show current weather in Auckland

User Story
As a user, I want a widget that tells me what the weather is like at a given location.

Acceptance Criteria

• A weather component that shows the current weather in Auckland
• On hover, the component expands and shows the weather for the next 12 hours (see Figma design)

Additional Context
Figma Link: https://www.figma.com/file/J2DDVa9redQigCzTee56xw/SE701-Daily-Focus?node-id=0%3A1

Add enzyme and enzyme-to-json testing packages to the frontend

Developer Story
As a developer, I want to be able to shallow render components so that I can create snapshot tests.

Acceptance Criteria

• enzyme package is added to the package.json
• enzyme-to-json package is added to the package.json

Additional Context
enzyme package link: https://www.npmjs.com/package/enzyme
enzyme-to-json package link: https://www.npmjs.com/package/enzyme-to-json

how to write snapshot tests with jest (already added to the project) and enzyme: https://medium.com/opendoor-labs/testing-react-components-with-jest-a7e8e4d312d8

Method for authenticating users

Developer Story
As a developer, I should be able to use a method to authenticate users before responding to requests within API methods.

Acceptance Criteria
A method that can be used by other API methods to check if the token given in the request is valid through firebase authentication. If it is not valid, a 403 response should be returned. Else, the user id should be returned by the method.

Additional Context
https://firebase.google.com/docs/auth/admin/verify-id-tokens

Dependencies
#45 #44

Create the calendar widget

User Story
As a user, I want to see a calendar that shows me my events for the day.

Acceptance Criteria

• Add/remove/update events
• Different views, eg. monthly, weekly, etc...
• Link with Google Calendar API

Additional Context
Figma Link: https://www.figma.com/file/J2DDVa9redQigCzTee56xw/SE701-Daily-Focus?node-id=32%3A3

Login endpoint does not work for incorrect username or password

Describe the bug
When an incorrect password or email is sent in the request for "/login", no response is received

Steps To Reproduce
Either: enter an incorrect password or username in the request for "/login"

Screenshots
[Screenshots/screen recordings of the bug]

Expected behavior
A 401 unauthorized response

How to fix
delete the console.log(err)
Would be good to change line 32 to

return res.status(401).json({ message: err.message });

and delete validation checks

Additional Information

Rearrange frontend file structure

Developer Story
As a developer, I want the frontend file structure to be clean and intuitive.

Acceptance Criteria

• a pages folder is created which contains the LandingPage and the LoginPage
• App is contained in its own folder
• a HomePage is created which contains the Header and Body components

Set up Todo list routes

Developer Story:
As a developer, I want to have the routes for the todo list API calls configured to allow for work delegation.

Acceptance Criteria:

• have a todo.js file in routes
• todo.js file will contain the HTTP API methods for handling todo list requests
• have the route configured for /todo in app.js

Add a library to enable local storage access

Developer Story
As a developer, I want a way to implement the storage of API tokens.

Acceptance Criteria

• Add the use-persisted-state library to package.json

Document design decisions in wiki

Team Story
As a team, we want documentation of the application design, such as design patterns used, colour schemes, screenshots of Figma hi-fi prototypes.

Acceptance Criteria
(N/A - this is an ongoing task)

Add widgets into the dashboard

User Story
As a user, I want to see the widgets that I have selected appear in the dashboard

Acceptance Criteria

• Design as per Figma prototype
• The page renders the head and body component properly
• The selected widgets are rendered properly

Additional Context
N/A

Dependencies
Blocked by #6, #13 , #14 , #15 , #16 , #65

Document backend architecture in wiki

Team Story
As a team, we want a document that describes the architecture of the backend. We want a description of the packages, the REST endpoints available, the testing framework, and any other relevant documentation that would help a new developer start coding.

Acceptance Criteria
(N/A - this is an ongoing task)

Link 'Sign Up' button on landing page to endpoint

User Story
As a user, I want to be able to create an account using the signup form on the landing page

Acceptance Criteria

• If email address & password are appropriate, then a new account is created
• If new account is created, user is logged in automatically & taken to home page
• If email and/or password are not appropriate, an error message is displayed

Additional Context
The landing page has already been designed and the signup form has been created. This issue only involves sending the form data to the appropriate API endpoint for signups.

Dependencies
#52

Prepare the entire application for the demonstration

User Story
As a user, I want to have the application in a demoable, working state.

Acceptance Criteria

• The application is in a state that can be demoed

Add firebase real-time database into project

Developer Story
As a developer, I want to be able access the real-time database on firebase

Acceptance Criteria
There is a database instance that can be written to and read from

Additional Context
https://firebase.google.com/docs/database/web/start

Add material UI icons dependency

Developer Story
As a developer, I want Material UI icons to be included as a dependency so I can use the icons.

Acceptance Criteria

• Material UI icons is listed as a dependency in the package.json file

Establish Code of Conduct

Team Story
As a team, we want a code of conduct document so that we understand the behaviour that is expected by contributors to the codebase.

Acceptance Criteria

• Code of conduct created as per template (see link below)

Additional Context
https://www.contributor-covenant.org/

Link todo list component with backend APIs

User Story
As a user, I want to make sure my todo list items are persistent. They should be in sync across different devices

Acceptance Criteria

• A working todo list that links with the backend
• Calling the API endpoints to do CRUD operations about the todo list
• Todo list items should not be stored in browser local storage

Additional Context
None

Dependencies
#6 #38 #39 #40 #41

Create POST API handler for Todo list

User Story:
User wants to be able post a new entry onto their todo list.

Acceptance Criteria:

• Input: user ID, entry details
• Should create and insert entry into database

Dependencies:
Issue #42

Document frontend architecture in wiki

Team Story
As a team, we want a document that describes the architecture of the frontend. We want a description of each of the components, the APIs that are used, the testing framework, and any other relevant documentation that would help a new developer start coding.

Acceptance Criteria
(N/A - this is an ongoing task)

Add Jest and Supertest testing packages

Developer Story
As a developer, I want to be able to unit test my API end points

Acceptance Criteria

• Jest and Supertest packages should be added to package.json
• Configure test scripts

Additional Context
https://dev.to/nedsoft/testing-nodejs-express-api-with-jest-and-supertest-1km6

Dependencies
[If applicable, links to other issues that this issue is dependent on]

Create DELETE API handler for Todo list

User Story:
User wants to be able to remove an entry from their todo list

Acceptance Criteria:

• Input: user ID, entry to be removed
• Should delete the entry from the database

Dependencies:
Issue #42

Initialise frontend with create-react-app

Developer Story
As a developer, I want to have a React app initialised so that I can start implementing the frontend of the application.

Acceptance Criteria

• create-react-app command is run inside of a client folder

App.js styling is showing incorrectly

Steps to reproduce

• run npm start and open the application homepage
• observe that the css styling is incorrect

Expected Behaviour
The background should be dark blue. Instead it is white and the text is all janky.

How to fix
App.js is importing the wrong css - it should be importing App.css, not style.css

Create Select Widgets Modal

User Story
As a user, I want to be able to manage my widgets and add/remove widgets to my focus page as I see fit.

Acceptance Criteria

• User should be able to select widgets in the select widgets modal

Additional Context

Dependencies
[If applicable, links to other issues that this issue is dependent on]

Remove extra app.js code causing issues

Describe the bug
There is extra code in app.js that:
Causes the server to run on localhost:3000 instead of 9000 which conflicts with the front-end port

Steps To Reproduce
Run:
node app.js
This will cause the server to run on port 3000.

Expected behavior
The server should run on port 9000.

How to fix
Remove the unnecessary lines of code in app.js

Make a small game

User Story
As a user, I want to get some points when I finish one task, then I can use these points to water trees(Planting trees game), and then the trees can be more beautiful and big.

Acceptance Criteria

• The progress bar will show the growth progress of the trees.
• The picture shows the tree. For example, when the progress bar reaches 10%, we will change another picture with a bigger tree to make it as growth progress.
• A button that, when clicked, the points will be reduced and the progress bar will be increased.
• These features are inside of a pop-up modal
• A small button (the same size as the todo list plus button) is created that, when clicked, shows the modal

Add login page

User Story
As a user, I want to be able to log into the app with my registered email and password, so that I can access my dashboard with my data.

Acceptance Criteria

• Design as per Figma prototype
• Sign-up button that hits the backend and retrieves a user token if successful
• User token is persisted with use-persisted-state

Additional Context
Hi-fi prototype of login page

Dependencies
#52 - will have a route to this page
#59 - for persisting the user token

Mock Landing Page

User Story
As a user, I want to be able to prototype a landing page for the application with mocked sign-up/sign-in functionality

Acceptance Criteria

• Design as per figma prototype
• Stub sign-up button (does nothing)
• Mock sign-in page arbitrarily allowing all users

Additional Context
This is purely for demonstration purposes; the real signup/login functionality will have to be implemented at a later date.

Dependencies
N/A

Create Timer Widget

User Story
As a user, I like to there to be some kind of stopwatch functionality.

Acceptance Criteria
A new widget with a stop watch that can be started, paused and reset.

Additional Context

Dependencies

Add Prettier/ESLint to backend

Developer Story
As a developer, I want Prettier/ESLint to be set up so that code styles are enforced and we maintain a consistent and clean codebase.

Acceptance Criteria

• Prettier, ESLint, and necessary configuration files are added and work correctly

Additional Context
_Note - this has already been done in the frontend in PR #17 _

Create PUT API handler for Todo list

User Story:
User wants to be able to update todo list entry contents or check/uncheck them

Acceptance Criteria:

• Input: user ID, entry to update, changes to entry
• Should set boolean of checked/unchecked if needed in the database
• Should update entry's contents if changed

Dependencies:
Issue #42

Create a date/time component

User Story
As a user, I want to be able to see what the time and date is at a glance

Acceptance Criteria

• A component that shows the current date and time
• Component updates in real time

Additional Context
Figma Link: https://www.figma.com/file/J2DDVa9redQigCzTee56xw/SE701-Daily-Focus?node-id=0%3A1

Create body component

User Story
As a user, I want to see my available widgets on the homepage in a grid layout

Acceptance Criteria

• Body component that will hold all widget component
• Grid layout

Additional Context
Figma Link: https://www.figma.com/file/J2DDVa9redQigCzTee56xw/SE701-Daily-Focus?node-id=0%3A1

Add plant game button to todo list footer

User Story
As a user, I want a way to open the plant game and see my progress

Acceptance Criteria

• Add the button created in #8 to the footer of the todo list
• If there is time - hook up the waterCoins with the checking off of todo list items so that the user gets points (if this is not done, then a follow-up issue for this functionality should be created)

Dependencies
#8 #6

Create Login API handler

User story
I want to be able to login to access my dashboard

Acceptance Criteria
User login credentials should be validated by firebase
User login credentials should be used to access obtain token

Clean up create-react-app auto-generated files

Developer Story
As a developer, I want the contents of public folder, reportWebVitals.js, and stock react logos to be cleaned up and to match the theme of our project.

Acceptance Criteria

• remove the reportWebVitals.js file - and remove the call to reportWebVitals() in the client/index.js file and the commenting
• delete the package-lock.json in the root directory
• replace favicon.ico and logo192.png with the focus target logo
• Change the name of the app from "React App" to "Focus" in the index.html

Additional Context
Logo images can be found in the #design Discord.

Figma link: https://www.figma.com/file/J2DDVa9redQigCzTee56xw/SE701-Daily-Focus?node-id=0%3A1

refactor App component to be a level above components folder

Developer Story
As a developer, I want to move the App component to be one level about the components folder because the App should not be considered a component.

Acceptance Criteria

• App component is moved out of the components folder

Client project set-up

Developer Story
Ass a developer, I want packages available to aid frontend developed. I want my code to be automatically configured to match the project standard and I want additional options for styling.

Acceptance Criteria

• Add SCSS & Bootstrap dependencies.
• Add ESLint and Prettier configuration files
• Add Material-UI core to project, node-sass, and Ropa Sans font.

Initialise Backend Server

Developer Story
As a developer, I want the backend to be initialised so that I can start implementing the application backend.

Acceptance Criteria

• backend is initialised inside a server folder

Add database validation for Firebase API

User Story
Ensure user data integrity.

Acceptance Criteria

• Data-checking mechanisms are present in POST and PUT methods to ensure entries and changes to database are valid.
• Include test cases which taste abnormal data cases.

Dependencies

• Jest is required to run unit tests with mock database.

Create Header component

User Story
As a user, I want to see a header component that contains important components: date time, search bar, button to add widgets.

Acceptance Criteria

• A header component that sits at the top of the page
• Component contains Focus logo, date and time, search bar, button to add widgets, and profile settings (see Figma design linked below)
  A header component that will contain the Focus logo, search bar, date and time, profile button

Additional Context
Figma Link: https://www.figma.com/file/J2DDVa9redQigCzTee56xw/SE701-Daily-Focus?node-id=0%3A1

Dependencies
Search bar component: #7
Date time component: #4

Update & create READMEs

Team Story
As a team, we want READMEs that introduce the project and point new contributers to basic resources (contributing guidelines, the wiki, etc)

Acceptance Criteria

• The frontend ('client') folder has a README.md file that explains how to get started and how run each component. It describes a file structure.
• The backend ('server;) folder has a README.md file

Additional Context
Helpful website: https://www.makeareadme.com/

For the frontend README.md, the auto-generated create-react-app README.md is a good starting point, but it needs to be pruned.

Document team operations in wiki

Team Story
As a team, we want clear documentation of the activities we have been completing together, such as meeting minutes and decisions about team structure.

Acceptance Criteria
(N/A - this is an ongoing issue)

Create GET API handler for Todo List

User Story:
User wants to be able to get and see all their todo list entries.

Acceptance Criteria:

• Input: user ID
• Output: List/Array of all entries related to the user

Dependencies:
Issue #42

Backend server does not have CORS configured

Describe the bug
The backend server does not have a Cross-Origin Resource Sharing (CORS) policy configured. Currently, the backend rejects calls from anything running on anything other than itself - including the frontend calling the API from a different port on localhost.

Steps To Reproduce

1. Run the frontend and backend on two different ports on localhost
2. Attempt to call a backend API endpoint from the frontend
3. The request will be rejected due to CORS policy

Screenshots
Screenshot of CORS error

Expected behavior
The server should allow a request from the localhost origin of any port through and respond to the API request.

How to fix
Access-Control-Allow-Origin CORS headers need to be configured to allow requests from the localhost origin at a minimum.

This could be expanded as far as allowing requests from any origin (*) to ensure that it will always work - but that does present a security issue in that any random person would be able to call our API and perform a DDoS attack.

Additional Information
Not applicable

Make a minimum to-do list

User Story
As a user, I want a to do list that I add items to and which I can check off as completed.

Acceptance Criteria

• A to do list component with items that can be checked off
• A way to add items to the list
• Able to persist the items after reload - browser storage for now

Additional Context
Figma Link: https://www.figma.com/file/J2DDVa9redQigCzTee56xw/SE701-Daily-Focus?node-id=0%3A1

In future, this component will be integrated with the backend so the list can sync across multiple computers. However, for this minimum component, the goal is for it to simply be stored in browser storage.

Create a Google search bar component

User Story
As a user, I want to be able to perform a Google search from the home page of the application.

Acceptance Criteria

• A search bar component - an input text box where a search query can be typed
• A button - when pressed, the google search query is opened in a new tab

Additional Context
Figma Link: https://www.figma.com/file/J2DDVa9redQigCzTee56xw/SE701-Daily-Focus?node-id=0%3A1