2 | ## Table of Contents
3 | 1. [ Introdution. ](#intro)
4 | 2. [ Business Goals and Objectives ](#business)
5 | 3. [ Requirements ](#req)
6 | 4. [ Project Glossary ](#glossary)
7 | 5. [ Technical Stack ](#techstack)
8 | 6. [ Stakeholders Roles. ](#stake)
9 | 7. [ User Stories ](#stories)
10 | 8. [ Design Documentation ](#design)
11 | 9. [ Architecture And Diagrams ](#arc)
12 | 10. [ Run the App ](#run-app)
13 | 11. [ Demo ](#demo)
14 | 12. [ Authors ](#auth)
15 |
16 |
17 |
18 |
19 |
21 |
22 |
23 |
25 | {(!auth && !user) &&
28 |
32 |
33 |
34 |
36 |
37 |
38 |
39 |
43 |
44 |
45 |
49 |
50 |
54 |
55 |
56 |
57 |
58 | }
59 | export default App;
--------------------------------------------------------------------------------
/src/Goalify-logos.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Goalify/front-end/28774210e489d82e97b0ec30412296f71eb75d0f/src/Goalify-logos.jpeg
--------------------------------------------------------------------------------
/src/components/AboutUs.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | function AboutUs(){
4 |
5 | return Discover component to be implemented
47 | 48 |
6 |
8 | }
9 |
10 | export default AboutUs;
--------------------------------------------------------------------------------
/src/components/HeaderNavBar.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Goalify/front-end/28774210e489d82e97b0ec30412296f71eb75d0f/src/components/HeaderNavBar.css
--------------------------------------------------------------------------------
/src/components/HeaderNavBar.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Link,
3 | useHistory,
4 | } from "react-router-dom";
5 | import { useDispatch } from "react-redux";
6 | import { Dispatch } from "redux"
7 | import * as actions from "../redux/account_setup/actions";
8 | import { Navbar, Nav } from "react-bootstrap";
9 | import 'components/HeaderNavBar.css';
10 |
11 | const HeaderNavBar = () => {
12 | const history = useHistory();
13 | const dispatch: DispatchAbout Us Page
7 |
6 |
8 | }
9 |
10 | export default Profile;
--------------------------------------------------------------------------------
/src/components/account_setup/Login.css:
--------------------------------------------------------------------------------
1 | .login-form{
2 | margin-top: 20vh;
3 | margin-left: 40vw;
4 | margin-right: 40vw;
5 | }
6 | img {
7 | max-width:100%;
8 | height:auto;
9 | }
10 |
11 | .btn-primary{
12 | width: 5vw;
13 | margin-left: 7.5vw;
14 | }
15 |
--------------------------------------------------------------------------------
/src/components/account_setup/Login.tsx:
--------------------------------------------------------------------------------
1 | import {useEffect, useRef} from "react";
2 | import { Link } from "react-router-dom";
3 | import { Redirect } from "react-router-dom";
4 | import React from 'react';
5 | import * as actions from "../../redux/account_setup/actions";
6 | import { Dispatch } from "redux"
7 | import { useSelector, useDispatch } from "react-redux"
8 | import { useAuth } from "../../hooks/useAuth";
9 | import { Form, Button } from 'react-bootstrap';
10 | import './Login.css';
11 | import logo from '../../Goalify-logos.jpeg';
12 | const Login: React.FC = () => {
13 |
14 | const usernameRef = useRefProfile
7 |
60 |
84 | }
85 |
86 | export default Login;
--------------------------------------------------------------------------------
/src/components/account_setup/Register.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { Link } from "react-router-dom";
3 | import { Form, Button } from 'react-bootstrap';
4 | import './Login.css';
5 | import logo from '../../Goalify-logos.jpeg';
6 | import { useRef } from "react";
7 | import { useHistory } from "react-router";
8 |
9 | const Register = () => {
10 | const usernameRef = useRef
61 | 
62 |
82 |
83 |
44 |
74 | }
75 |
76 | export default Register;
--------------------------------------------------------------------------------
/src/components/common/Footer.css:
--------------------------------------------------------------------------------
1 | footer {
2 | margin-top: 100vh;
3 | }
--------------------------------------------------------------------------------
/src/components/common/Footer.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | function Footer(){
4 | return
5 |
6 | }
7 |
8 | export default Footer;
--------------------------------------------------------------------------------
/src/components/common/LogoFooter.tsx:
--------------------------------------------------------------------------------
1 | import logo from "../../Goalify-logos.jpeg"
2 | const LogoFooter = () => {
3 |
4 | return
45 | 
46 |
72 |
73 |
5 |
6 |
7 | }
8 |
9 | export default LogoFooter;
--------------------------------------------------------------------------------
/src/components/common/utilities.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 |
4 | // TODO integrate with backend
5 |
6 |
7 | export function authenticate(){
8 | const current_token = localStorage.getItem('access_token');
9 | return current_token === 'true' ? true : false;
10 | }
11 |
12 | export function getUserId(): string{
13 | const id = localStorage.getItem('id');
14 | if(id === null){
15 | return "";
16 | }
17 | return id;
18 | }
19 |
20 | export function logOut(){
21 | localStorage.setItem('access_token', 'false');
22 | }
23 |
24 | export function getCurrentDateFormat(){
25 | const nlBEFormatter = new Intl.DateTimeFormat('nl-BE');
26 |
27 | let today = new Date();
28 |
29 | const tranformFormat = (time: string) => {
30 | const hours = time.length == 2 ? time : "0" + time;
31 | return hours;
32 | }
33 |
34 | let dateCreated = nlBEFormatter.format(today) + " " + tranformFormat(today.getHours().toString()) + ":" + tranformFormat(today.getMinutes().toString());
35 | return dateCreated;
36 | }
37 |
--------------------------------------------------------------------------------
/src/components/dashboard/Dashboard.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import GoalsList from "./GoalsList";
3 | import HeaderNavBar from "components/HeaderNavBar";
4 | import Footer from "components/common/Footer";
5 |
6 | function Dashboard(){
7 |
8 | return
9 |
13 | }
14 |
15 | export default Dashboard;
--------------------------------------------------------------------------------
/src/components/dashboard/Goal.css:
--------------------------------------------------------------------------------
1 | .deadline{
2 | display: flex;
3 | flex-direction: row;
4 | }
5 | .milestone-item{
6 | padding-right: 1%;
7 | display: inline-block;
8 | }
9 | .btn-close{
10 | float: right
11 | }
--------------------------------------------------------------------------------
/src/components/dashboard/Goal.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from "react";
2 | import {Goal, Milestone} from "../../tsInterfaces/interfaces";
3 | import "./Goal.css"
4 | import {MilestonesList} from "./MilestoneList"
5 | import { Card, Collapse, Form } from 'react-bootstrap';
6 |
7 | export function DbClickField(props: {className?: string, text: string, setText: any}){
8 |
9 | const nameRef = React.useRef {
35 | setToggle(false)
36 | }}
37 | >{props.text}
38 | ) : (
39 |
52 |
53 | )
54 | );
55 | }
56 |
57 | function GoalItem(props: {goal: Goal, setGoal: any, deleteGoal: any}) {
58 |
59 | let goal = props.goal;
60 | function edit_name(name: string){
61 | let new_goal = JSON.parse(JSON.stringify(goal));
62 | new_goal.name = name;
63 | props.setGoal(new_goal);
64 | }
65 | function edit_description(description: string){
66 | let new_goal = JSON.parse(JSON.stringify(goal));
67 | new_goal.description = description;
68 | props.setGoal(new_goal);
69 | }
70 | function edit_state(state: string){
71 | let new_goal = JSON.parse(JSON.stringify(goal));
72 | new_goal.state = state;
73 | props.setGoal(new_goal);
74 | }
75 | function edit_published(published: boolean){
76 | let new_goal = JSON.parse(JSON.stringify(goal));
77 | new_goal.published = published;
78 | props.setGoal(new_goal);
79 | }
80 | function edit_milestones(milestones: Milestone[]){
81 | let new_goal = JSON.parse(JSON.stringify(goal));
82 | new_goal.milestones = milestones;
83 | props.setGoal(new_goal);
84 | }
85 | function edit_deadline(deadline: string){
86 | let new_goal = JSON.parse(JSON.stringify(goal));
87 | new_goal.deadline = deadline;
88 | props.setGoal(new_goal);
89 | }
90 |
91 | const [open, setOpen] = React.useState
94 |
95 | setOpen(!open)}>
96 |
98 |
99 |
100 |
101 |
121 |
122 |
123 | {goal.dateCreated}
124 |
125 |
126 | }
127 |
128 | export default GoalItem;
--------------------------------------------------------------------------------
/src/components/dashboard/GoalsList.css:
--------------------------------------------------------------------------------
1 | .card-header{
2 | border-bottom: 0px solid rgba(0,0,0,.125) !important;
3 | }
4 | .card-footer{
5 | border-top: 0px solid rgba(0,0,0,.125) !important;
6 | }
--------------------------------------------------------------------------------
/src/components/dashboard/GoalsList.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import {Goals, Goal} from '../../tsInterfaces/interfaces'
3 | import GoalItem from './Goal';
4 | import { Card, Button, Modal, Form } from 'react-bootstrap';
5 | import './GoalsList.css';
6 | import GoalStats from './statistics/GoalStats';
7 | import { useAuth } from 'hooks/useAuth';
8 | function GoalsList() {
9 |
10 | const [goals, setGoals] = React.useState
102 |
120 |
103 |
108 |
112 |
113 |
114 |
115 | Deadline:
117 |
118 |
132 | {goals.list.map((goal) =>
133 | setModalShow(true)}>
138 |
139 |
140 | Add a new goal
141 |
142 |
143 |
144 | setModalShow(false)}/>
145 |
;
146 | }
147 |
148 |
149 | const AddGoalModal = ({addGoal, show, handleClose} : any) => {
150 | const nameRef = React.useRef
24 |
28 | );
29 | }
30 |
31 | export function MilestonesList(props: {goal_id: string, milestonesList: Milestone[], editMilestoneList: any}){
32 |
33 | const [milestones, setMilestones] = React.useState{milestones.map((milestone, ind) =>
162 |
;
163 |
164 | return (
165 |
166 | setModalShow(false)}>
167 |
168 | Add a new milestone
169 |
170 |
171 |
178 |
179 |
180 |
183 |
186 |
187 |
188 | {milestoneList}
189 |
)
193 |
194 | }
--------------------------------------------------------------------------------
/src/components/dashboard/statistics/GoalStats.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import {Goal, Milestone} from '../../../tsInterfaces/interfaces'
3 |
4 | function GoalStats(props: {goal: Goal}){
5 |
6 | const countCompletedMilstones = (milestones: Milestone[]) => {
7 | let count = 0;
8 | for(let i=0;i
190 |
191 |
192 | The goal is {(completePercentage*100).toFixed(0)}% complete. {" "}
22 | {countCompletedMilstones(props.goal.milestones)}/{props.goal.milestones.length} milestones finished.
23 | }
24 |
25 |
26 | let timeSpentElement: JSX.Element = ;
27 | if(props.goal.milestones.every((milestone) => milestone.state === true) && props.goal.milestones.length !== 0){
28 | let timeSpent: number = 0;
29 | if(props.goal.dateFinished && props.goal.dateFinished !== "")
30 | timeSpent = new Date(props.goal.dateFinished).getTime() - new Date(props.goal.dateCreated).getTime();
31 | timeSpentElement =
32 | Time spent: {msToTime(timeSpent)}
33 |
34 | }
35 |
36 | function msToTime(s: number) {
37 | let ms = s % 1000;
38 | s = (s - ms) / 1000;
39 | let secs = s % 60;
40 | s = (s - secs) / 60;
41 | let mins = s % 60;
42 | s = (s - mins) / 60;
43 | let hrs = s % 24;
44 | s = (s - hrs) / 24;
45 | let days = s;
46 |
47 | return days + " days, " + hrs + ' hours, ' + mins + ' minutes, and ' + secs + ' seconds';
48 | }
49 |
50 | let expectedTimeToFinishElement: JSX.Element = ;
51 | if(props.goal.milestones.length !== 0){
52 | let completedMilestones: number = countCompletedMilstones(props.goal.milestones);
53 | let allMilestones: number = props.goal.milestones.length;
54 | if(completedMilestones !== 0 && completedMilestones !== allMilestones){
55 | let timeSpent: number = new Date().getTime() - new Date(props.goal.dateCreated).getTime();
56 | let expectedTime: number = (timeSpent / completedMilestones) * (allMilestones - completedMilestones);
57 |
58 | expectedTimeToFinishElement = Expected time to finish the goal is: {msToTime(expectedTime)}
59 | }
60 | }
61 |
62 | return(
63 | {completePercentageElement}
64 |
)
65 | }
66 |
67 | export default GoalStats;
--------------------------------------------------------------------------------
/src/components/dashboard/statistics/Stats.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import {Goals} from '../../../tsInterfaces/interfaces'
3 |
4 | function Stats(props: {goals: Goals}){
5 |
6 | }
7 |
8 | export default Stats;
--------------------------------------------------------------------------------
/src/hooks/useAuth.ts:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react';
2 |
3 | type Auth = {
4 | token: string,
5 | username: string
6 | }
7 |
8 | export function useAuth() {
9 | const [auth, setAuth] = useState