diff --git a/package.json b/package.json deleted file mode 100644 index cb8a7ae..0000000 --- a/package.json +++ /dev/null @@ -1,46 +0,0 @@ -{ - "name": "projeto_10_tracklt", - "version": "0.1.0", - "private": true, - "dependencies": { - "add": "^2.0.6", - "axios": "^0.24.0", - "dayjs": "^1.10.7", - "or": "^0.2.0", - "react": "^17.0.2", - "react-calendar": "^3.5.0", - "react-circular-progressbar": "^2.0.4", - "react-confirm-alert": "^2.7.0", - "react-dom": "^17.0.2", - "react-ionicons": "^4.2.0", - "react-loader-spinner": "^4.0.0", - "react-router-dom": "^6.2.1", - "react-scripts": "^4.0.3", - "react-toastify": "^8.1.0", - "styled-components": "^5.3.3", - "yarn": "^1.22.17" - }, - "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", - "eject": "react-scripts eject" - }, - "eslintConfig": { - "extends": [ - "react-app" - ] - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] - } -} diff --git a/public/index.html b/public/index.html deleted file mode 100644 index 664bd71..0000000 --- a/public/index.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - Track-it - - - -
- - diff --git a/src/Providers/auth.js b/src/Providers/auth.js deleted file mode 100644 index b6f0d47..0000000 --- a/src/Providers/auth.js +++ /dev/null @@ -1,25 +0,0 @@ -import React, { useEffect, useState } from 'react'; - -export const AuthContext = React.createContext({}); - -export const AuthProvider = (props) => { - const [user, setUser] = useState(null); - const [progress, setProgress] = useState(null); - const [navbar, setNavbar] = useState(false); - - useEffect(() => { - if (localStorage.getItem('userLogged')) { - let person = localStorage.getItem('userLogged'); - person = JSON.parse(person); - setUser(person); - } - }, []) - - return ( - - {props.children} - - ) -} - -export const useAuth = () => React.useContext(AuthContext); \ No newline at end of file diff --git a/src/assets/logo.png b/src/assets/logo.png deleted file mode 100644 index 791c6fb..0000000 Binary files a/src/assets/logo.png and /dev/null differ diff --git a/src/assets/logoHeader.png b/src/assets/logoHeader.png deleted file mode 100644 index 31050d4..0000000 Binary files a/src/assets/logoHeader.png and /dev/null differ diff --git a/src/components/BildHabit/index.js b/src/components/BildHabit/index.js deleted file mode 100644 index 9cd8057..0000000 --- a/src/components/BildHabit/index.js +++ /dev/null @@ -1,82 +0,0 @@ -import axios from 'axios'; -import { useState } from 'react'; -import { useAuth } from '../../Providers/auth'; -import WeekDay from '../WeekDay'; -import { Container, Days, Botoes, Cancel, Save } from './style'; -import Loader from "react-loader-spinner"; -import { ToastContainer, toast } from 'react-toastify'; -import "react-toastify/dist/ReactToastify.css"; - -export default function BildHabit({ setCreatingHabit }) { - - const [daysSelected, setDaysSelected] = useState([]); - const [loading, setLoading] = useState(false); - const [habit, setHabit] = useState(''); - const { user } = useAuth(); - const daysOfWeek = ['D', 'S', 'T', 'Q', 'Q', 'S', 'S']; - const daysOfWeekNumber = [7, 1, 2, 3, 4, 5, 6]; - let selected = false; - - function cancelBild() { - setCreatingHabit(false); - setDaysSelected([]); - } - - function changeDays(day) { - let arr = daysSelected; - if (daysSelected.includes(day)) { - arr.splice(daysSelected.indexOf(day), 1); - setDaysSelected([...arr]); - } else { setDaysSelected([...daysSelected, day]) } - } - - function checkData() { - if (habit === '') { - toast.warn('Insira um hábito!'); - } else if (daysSelected.length === 0) { - toast.warn('Selecione pelo menos um dia da semana!') - } else { CreateHabit(); } - } - - function CreateHabit() { - setLoading(true); - console.log(habit, daysSelected.sort(), user.token) - const promise = axios.post('https://mock-api.bootcamp.respondeai.com.br/api/v2/trackit/habits', - { name: habit, days: daysSelected.sort() }, - { headers: { 'Authorization': `Bearer ${user.token}` } } - ) - promise.then(response => { - setCreatingHabit(false); - setDaysSelected([]); - setLoading(false); - window.location.reload(); - }) - promise.catch(err => setLoading(false)) - } - - return ( - -
- setHabit(e.target.value)} value={habit} /> - - - {daysOfWeek.map((day, index) => { - const number = daysOfWeekNumber[index]; - daysSelected.includes(number) ? selected = true : selected = false; - - return - })} - -
- - - Cancelar - - - {loading ? : 'Salvar'} - - - - - ) -} \ No newline at end of file diff --git a/src/components/BildHabit/style.js b/src/components/BildHabit/style.js deleted file mode 100644 index 40369a4..0000000 --- a/src/components/BildHabit/style.js +++ /dev/null @@ -1,62 +0,0 @@ -import styled from "styled-components"; - -export const Container = styled.div` -height: 180px; -padding: 18px; -margin: 0 18px 30px; - -background-color: #fff; -border-radius: 5px; - -display: flex; -flex-direction: column; -justify-content: space-between; - -input{ - width: 100%; - height: 45px; - border-radius: 5px; -} -` - -export const Days = styled.div` -display: flex; -gap: 8px; -` - -export const Botoes = styled.div` -display: flex; -justify-content: end; -align-items: center; -gap: 20px; -` - -export const Cancel = styled.div` -font-size: 15.976px; -line-height: 20px; -color: #52B6FF; -text-align: center; -${props => props.loading && 'opacity: 0.5;'} - -&:hover{ - cursor: pointer; -} -` - -export const Save = styled.div` -width: 84px; -height: 35px; - -background: #52B6FF; -color: #fff; -border-radius: 4.63636px; -${props => props.loading && 'opacity: 0.5;'} - -display: flex; -justify-content: center; -align-items: center; - -&:hover{ - cursor: pointer; -} -` \ No newline at end of file diff --git a/src/components/Button/index.js b/src/components/Button/index.js deleted file mode 100644 index 894a480..0000000 --- a/src/components/Button/index.js +++ /dev/null @@ -1,17 +0,0 @@ -import { Link } from 'react-router-dom'; -import styled from 'styled-components'; - -export default function Button({ text, type, destiny, action, loading }) { - - return ( - - - {text} - - - ) -} - -const Container = styled.button` - text-align: center; -` \ No newline at end of file diff --git a/src/components/Confirm/index.js b/src/components/Confirm/index.js deleted file mode 100644 index 5c658bb..0000000 --- a/src/components/Confirm/index.js +++ /dev/null @@ -1,97 +0,0 @@ -import styled from "styled-components"; - - -export default function Confirm({ setConfirmShow, id, removeHabit }) { - - return ( - <> - - -

Deseja realmente excluir este hábito?

- - setConfirmShow(false)} >Cancelar - removeHabit(id)} >Excluir - - - - ); -} - -const Background = styled.div` -width: 100vw; -height: 100vh; - -background: #fff; -opacity: 0.5; - -display: flex; -flex-direction: column; -justify-content: center; -align-items: center; - -position: fixed; -top: 0; -left: 0; -z-index: 500; -` - -const Box = styled.div` -max-width: 350px; -width: 100vw; -height: 200px; -background-color: #52B6FF; -border-radius: 10px; - -display: flex; -gap: 50px; -flex-direction: column; -justify-content: center; -align-items: center; - -position: fixed; -z-index: 501; -top: 0; -bottom: 0; -left: 0; -right: 0; -margin: auto; - -h1 { -font-size: 20px; -color: #fff; -text-align: center; -} -` - -const Buttons = styled.div` -font-weight: 700; -font-size: 16px; -display: flex; -align-items: center; -gap: 35px; -` - -const Remove = styled.div` -width: 80px; -height: 40px; - -background: #fff; -border-radius: 5px; -color: #52B6FF; - -display: flex; -justify-content: center; -align-items: center; - -&:hover{ - cursor: pointer; -} -` - -const Cancel = styled.div` -color: #fff; - -&:hover{ - cursor: pointer; -} -` \ No newline at end of file diff --git a/src/components/DayHistoric/index.js b/src/components/DayHistoric/index.js deleted file mode 100644 index a530371..0000000 --- a/src/components/DayHistoric/index.js +++ /dev/null @@ -1,27 +0,0 @@ -import styled from "styled-components"; -import { CheckmarkOutline, CloseOutline } from 'react-ionicons' - - -export default function Day({ habit }) { - - return ( - - {habit.name} - {habit.done ? : } - - ) -} - -const Conatiner = styled.div` -width: 100%; -height: 60px; -padding: 20px; - -background-color: #EA5766; -${props => props.finished && 'background: #8CC654;'} -border-radius: 10px; - -display: flex; -justify-content: space-between; -align-items: center; -` diff --git a/src/components/Habit/index.js b/src/components/Habit/index.js deleted file mode 100644 index 822efc8..0000000 --- a/src/components/Habit/index.js +++ /dev/null @@ -1,45 +0,0 @@ -import { Container, Days, Icon } from './style'; -import WeekDay from '../WeekDay'; -import { TrashOutline } from 'react-ionicons'; -import { useAuth } from '../../Providers/auth'; -import axios from 'axios'; -import Confirm from '../Confirm'; -import { useState } from 'react'; - -export default function Habit({ habit }) { - - const DaysOfWeek = ['D', 'S', 'T', 'Q', 'Q', 'S', 'S']; - const daysOfWeekNumber = [7, 1, 2, 3, 4, 5, 6]; - const { user } = useAuth(); - const [confirmShow, setConfirmShow] = useState(false); - - function removeHabit(id) { - const promise = axios.delete(`https://mock-api.bootcamp.respondeai.com.br/api/v2/trackit/habits/${id}`, - { headers: { 'Authorization': `Bearer ${user.token}` } } - ) - promise.then(() => window.location.reload()) - } - - return ( - - {confirmShow && } - setConfirmShow(true)}> - - - - {habit.name} - - - {DaysOfWeek.map((day, index) => { - let selected; - habit.days.includes(daysOfWeekNumber[index]) ? selected = true : selected = false; - - return - })} - - - ) -} \ No newline at end of file diff --git a/src/components/Habit/style.js b/src/components/Habit/style.js deleted file mode 100644 index d3819ea..0000000 --- a/src/components/Habit/style.js +++ /dev/null @@ -1,32 +0,0 @@ -import styled from "styled-components"; - - -export const Container = styled.div` -height: 91px; -margin: 8px 20px; -padding: 15px; - -background: #FFFFFF; -border-radius: 5px; - -position: relative; -display: flex; -flex-direction: column; -justify-content: center; -` -export const Days = styled.div` -display: flex; -gap: 8px; -` - -export const Icon = styled.div` -width: 13px; - -position: absolute; -top: 7px; -right: 10px; - -&:hover{ - cursor: pointer; -} -` diff --git a/src/components/Header/index.js b/src/components/Header/index.js deleted file mode 100644 index 09c74d7..0000000 --- a/src/components/Header/index.js +++ /dev/null @@ -1,19 +0,0 @@ -import logoHeader from '../../assets/logoHeader.png'; -import { useAuth } from '../../Providers/auth'; -import { Container } from './style'; - -export default function Header() { - - const { user, setNavbar } = useAuth(); - - return ( - user !== null && ( - - Logo app -
- Imagem usuário setNavbar(true)} /> -
- - ) - ) -} diff --git a/src/components/Header/style.js b/src/components/Header/style.js deleted file mode 100644 index bd4cfa2..0000000 --- a/src/components/Header/style.js +++ /dev/null @@ -1,42 +0,0 @@ -import styled from 'styled-components'; - -const Container = styled.div` - width: 100vw; - height: 70px; - - padding: 0px 20px; - background-color: #126BA5; - box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15); - - display: flex; - justify-content: space-between; - align-items: center; - - position: fixed; - top: 0; - left: 0; - z-index: 10; - - img { - height: 40px; - } - - .userImage { - width: 40px; - height: 40px; - - border-radius: 50%; - - display: flex; - justify-content: center; - align-items: center; - overflow: hidden; - - img { - width: 100%; - height: 100%; - } - } -` - -export { Container } diff --git a/src/components/Menu/index.js b/src/components/Menu/index.js deleted file mode 100644 index edd7673..0000000 --- a/src/components/Menu/index.js +++ /dev/null @@ -1,35 +0,0 @@ -import { Link } from 'react-router-dom'; -import { Container, Button } from './style'; -import { useAuth } from '../../Providers/auth'; -import { CircularProgressbar, buildStyles } from "react-circular-progressbar"; -import "react-circular-progressbar/dist/styles.css"; - -export default function Menu() { - - const { progress } = useAuth(); - - return ( - <> - - Hábitos - Histórico - - - - - - ) -} - - diff --git a/src/components/Menu/style.js b/src/components/Menu/style.js deleted file mode 100644 index dd8f79e..0000000 --- a/src/components/Menu/style.js +++ /dev/null @@ -1,48 +0,0 @@ -import { Link } from "react-router-dom"; -import styled from "styled-components"; - - -export const Container = styled.div` -width: 100vw; -height: 70px; - -background: #fff; -font-size: 17.976px; -line-height: 22px; - -display: flex; -align-items: center; -justify-content: space-between; -padding: 0px 10vw; - -position: fixed; -bottom: 0; -left: 0; -index: 10; - -a{ - color: #52B6FF; - &:hover{ - cursor: pointer; - } -} -` - -export const Button = styled(Link)` -width: 91px; -height: 91px; -padding: 5px; - -background: #52B6FF; -border-radius: 50%; - -position: absolute; -bottom: 10px; -left: 0; -right: 0; -margin: auto; - -display: flex; -justify-content: center; -align-items: center; -` diff --git a/src/components/Message-PageEmpty/index.js b/src/components/Message-PageEmpty/index.js deleted file mode 100644 index fd9e1e6..0000000 --- a/src/components/Message-PageEmpty/index.js +++ /dev/null @@ -1,13 +0,0 @@ -import styled from "styled-components" - -export default function Menssage({ text }) { - return {text} -} - -const Text = styled.div` -padding: 0px 5%; -font-size: 17.976px; -line-height: 22px; - -color: #666666; -` \ No newline at end of file diff --git a/src/components/Navbar/index.js b/src/components/Navbar/index.js deleted file mode 100644 index e426efd..0000000 --- a/src/components/Navbar/index.js +++ /dev/null @@ -1,33 +0,0 @@ -import { Container, Content, Background, Exit, Footer, Text, Top } from './style'; -import logo from '../../assets/logo.png'; -import { useAuth } from '../../Providers/auth'; -import { useNavigate } from 'react-router-dom'; - -export default function Navbar() { - - const navigate = useNavigate(); - const { user, setNavbar } = useAuth(); - - function exitApp() { - setNavbar(false); - navigate('/'); - localStorage.clear(); - window.location.reload(); - } - - return ( - - - - {'Logo - {user && Obrigado pela
preferência, {user.name}! :)} - -
- {user && {'Imagem} - Sair -
- - setNavbar(false)} /> - - ) -} \ No newline at end of file diff --git a/src/components/Navbar/style.js b/src/components/Navbar/style.js deleted file mode 100644 index 67fbbac..0000000 --- a/src/components/Navbar/style.js +++ /dev/null @@ -1,83 +0,0 @@ -import styled from 'styled-components'; - -export const Container = styled.div` -width: 100vw; -height: 100vh; - -display: flex; - -position: fixed; -top: 0; -left: 0; -z-index: 20; -` - -export const Content = styled.div` -width: 65vw; -height: 100vh; -padding: 30px 8px; - -background: #fff; -box-shadow: 0 0 1em #666666; - -display: flex; -flex-direction: column; -align-items: center; -justify-content: space-between; - -img{ - width: 60%; -} -` - -export const Background = styled.div` -width: 35vw; -height: 100vh; - -background: #666666; -opacity: 0.5; -` - -export const Exit = styled.button` -width: 90px; -height: 40px; - -background: #52B6FF; -border-radius: 5px; -color: #fff; -font-size: 23px; - -&:hover{ - cursor: pointer; -} -` - -export const Text = styled.span` - -` - -export const Footer = styled.div` -display: flex; -gap: 30px; -flex-direction: column; -align-items: center; - -img{ - width: 100px; - height: 100px; - border-radius: 50%; - - box-shadow: 0 0 0.5em #666666; -} -` - -export const Top = styled.div` -color: #666666; -line-height: 1.15; - -display: flex; -gap: 20px; -flex-direction: column; -align-items: center; -text-align: center; -` \ No newline at end of file diff --git a/src/components/PageHabits/index.js b/src/components/PageHabits/index.js deleted file mode 100644 index d9f08cb..0000000 --- a/src/components/PageHabits/index.js +++ /dev/null @@ -1,61 +0,0 @@ -import Header from "../Header"; -import Menu from "../Menu"; -import Title from "../Title"; -import Habit from "../Habit"; -import BildHabit from "../BildHabit"; -import { Container, Top, CreateHabit } from './style'; -import { AddOutline } from 'react-ionicons'; -import { useEffect, useState } from "react"; -import Menssage from "../Message-PageEmpty"; -import axios from "axios"; -import { useAuth } from "../../Providers/auth"; - - -export default function PageHabits() { - - const [creatingHabit, setCreatingHabit] = useState(false); - const [message, setMessage] = useState(true); - const [habits, setHabits] = useState([]); - const { user } = useAuth(); - - useEffect(() => { - if (user !== null) { - const promise = axios.get('https://mock-api.bootcamp.respondeai.com.br/api/v2/trackit/habits', - { headers: { 'Authorization': `Bearer ${user.token}` } } - ); - promise.then(response => { - setHabits(response.data); - response.data.length > 0 && setMessage(false); - }) - } - }, [user]) - - function showBildHabit() { - setCreatingHabit(true); - } - - return ( - -
- - - <CreateHabit onClick={showBildHabit}> - <AddOutline - color='#fff' - width="25px" - /> - </CreateHabit> - </Top> - - {creatingHabit && <BildHabit setCreatingHabit={setCreatingHabit} />} - {(message && habits.length === 0) && <Menssage text={"Você não tem nenhum hábito cadastrado ainda. Adicione um hábito para começar a trackear!"} />} - {(habits && !creatingHabit) && ( - habits.map((habit) => { - return <Habit key={habit.id} habit={habit} /> - }) - )} - - <Menu /> - </Container> - ) -} diff --git a/src/components/PageHabits/style.js b/src/components/PageHabits/style.js deleted file mode 100644 index 7694e40..0000000 --- a/src/components/PageHabits/style.js +++ /dev/null @@ -1,31 +0,0 @@ -import styled from "styled-components"; - - -export const Container = styled.div` -min-height: 100vh; -padding: 70px 0; -background-color: #e5e5e5; -` - -export const Top = styled.div` -padding-right: 20px; -display: flex; -justify-content: space-between; -align-items: center; -` - -export const CreateHabit = styled.div` -width: 40px; -height: 35px; - -background: #52B6FF; -border-radius: 4.63636px; - -display: flex; -justify-content: center; -align-items: center; - -&:hover{ - cursor: pointer; -} -` \ No newline at end of file diff --git a/src/components/PageHistory/index.js b/src/components/PageHistory/index.js deleted file mode 100644 index 284ce2b..0000000 --- a/src/components/PageHistory/index.js +++ /dev/null @@ -1,132 +0,0 @@ -import axios from "axios"; -import dayjs from "dayjs"; -import { useEffect, useState } from "react"; -import { Calendar } from "react-calendar"; -import 'react-calendar/dist/Calendar.css'; -import { useAuth } from "../../Providers/auth"; -import Header from "../Header"; -import Menu from "../Menu"; -import Title from "../Title"; -import Day from "../DayHistoric"; -import { Container, ContainerCalendar, ContainerDays, DateSelected, styleCalendar } from './style'; - - -export default function PageHistory() { - - const [date, setDate] = useState(new Date()); - const { user } = useAuth(); - const [dateHabits, setDateHabits] = useState([]); - const [habitsHistoric, setHabitsHistoric] = useState([]); - const [allDates, setAllDates] = useState([]); - const formatDay = ("0" + date.getDate()).slice(-2) + "/" + ("0" + (date.getMonth() + 1)).slice(-2) + "/" + date.getFullYear(); - - - useEffect(() => { - if (user) { - const promise = axios.get('https://mock-api.bootcamp.respondeai.com.br/api/v2/trackit/habits/history/daily', - { headers: { 'Authorization': `Bearer ${user.token}` } } - ); - promise.then(response => { - console.log(response); - setHabitsHistoric(response.data); - let dateArray = []; - let dates = []; - - response.data.forEach(data => { - data.habits.forEach(habit => { - convertDate(habit.date).dateFormat3 !== dayjs().format('DD/MM/YYYY') && dates.push(convertDate(habit.date).dateFormat3); - let className = verificationHabits(habit); - if (convertDate(habit.date).dateFormat3 !== dayjs().format('DD/MM/YYYY')) { - dateArray.push({ - date: habit.date, - style: className - }); - } - }) - }) - setAllDates(dates); - setDateHabits(dateArray); - }); - } - }, [user]); - - function verificationHabits(habit) { - let name; - let fails = []; - - if (habit.done && !fails.includes(habit.date)) { - name = 'styleDay-green'; - } else { - fails.push(habit.date); - name = 'styleDay-red'; - } - return name; - } - - const onChange = date => { - setDate(date); - }; - - function setClass(date) { - if (dateHabits) { - const dateobj = dateHabits.find((x) => { - return ( - date.getDay() === new Date(x.date).getDay() && - date.getMonth() === new Date(x.date).getMonth() && - date.getDate() === new Date(x.date).getDate() - ); - }); - return dateobj ? dateobj.style : ""; - } - } - - function convertDate(date) { - var date = date.match(/^([0-9]{4})-([0-9]{2})-([0-9]{2})T([0-9]{2}):([0-9]{2}):([0-9]{2})/); - if (date == null) { - return false; - } else { - var dateObj = { - dateFormat1: date[3] + '.' + date[2] + '.' + date[1], - dateFormat2: date[1] + '-' + date[2] + '-' + date[3], - dateFormat3: date[3] + '/' + date[2] + '/' + date[1], - time: date[4] + ':' + date[5] + ':' + date[6], - }; - return dateObj; - } - }; - - return ( - <Container> - <Header /> - <Title text={'Histórico'} /> - - <ContainerCalendar> - <Calendar - className={styleCalendar} - value={date} - locale="pt-Br" - onChange={onChange} - formatDay={(locale, date) => dayjs(date).format("DD")} - tileClassName={({ activeStartDate, date, view }) => setClass(date)} - /> - </ContainerCalendar> - - {allDates.includes(formatDay) && ( - <ContainerDays> - <DateSelected>{formatDay}</DateSelected> - {habitsHistoric.map(data => { - if (data.day === formatDay) { - // return day.habits.forEach(() => <Day />) - let habits = []; - data.habits.forEach((habit, index) => { - habits.push(<Day key={index} habit={habit} />); - }); - return habits; - } - })} - </ContainerDays> - )} - <Menu /> - </Container> - ) -} \ No newline at end of file diff --git a/src/components/PageHistory/style.js b/src/components/PageHistory/style.js deleted file mode 100644 index b706af8..0000000 --- a/src/components/PageHistory/style.js +++ /dev/null @@ -1,165 +0,0 @@ -import styled from "styled-components"; - -export const Container = styled.div` -min-height: 100vh; -padding: 70px 0; -background: #E5E5E5; - -display: flex; -flex-direction: column; -align-items: center; - -.styleDay-green { - padding: 2px; - color: black; - background-color: #8CC654; - border-radius: 50%; -} - -.styleDay-red { - padding: 2px; - color: black; - background-color: #EA5766; - border-radius: 50%; -} -` - -export const ContainerCalendar = styled.div` -width: 100vw; -max-width: 500px; -padding: 20px; - -display: flex; -flex-direction: column; -justify-content: center; -align-items: center; -box-sizing: border-box; -` - -export const ContainerDays = styled.div` -width: 100%; -padding: 20px; - -display: flex; -flex-direction: column; -gap: 20px; -` - -export const DateSelected = styled.div` - padding-left: 20px; -` - -export const styleCalendar = styled.div` -.react-calendar { - max-width: 90vw; - background: #fff; - border-radius: 10px; - font-family: Arial, Helvetica, sans-serif; - line-height: 1.125em; -} -.react-calendar--doubleView { - width: 700px; -} -.react-calendar--doubleView .react-calendar__viewContainer { - display: flex; - margin: -0.5em; -} -.react-calendar--doubleView .react-calendar__viewContainer > * { - width: 50%; - margin: 0.5em; -} -.react-calendar, -.react-calendar *, -.react-calendar *:before, -.react-calendar *:after { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} -.react-calendar button { - margin: 0; - border: 0; - outline: none; -} -.react-calendar button:enabled:hover { - cursor: pointer; -} -.react-calendar__navigation { - display: flex; - height: 44px; - margin-bottom: 1em; -} -.react-calendar__navigation button { - min-width: 44px; - background: none; -} -.react-calendar__navigation button:enabled:hover, -.react-calendar__navigation button:enabled:focus { - background-color: #e6e6e6; -} -.react-calendar__navigation button[disabled] { - background-color: #f0f0f0; -} -.react-calendar__month-view__weekdays { - text-align: center; - text-transform: uppercase; - font-weight: bold; - font-size: 0.75em; -} -.react-calendar__month-view__weekdays__weekday { - padding: 0.5em; -} -.react-calendar__month-view__weekNumbers .react-calendar__tile { - display: flex; - align-items: center; - justify-content: center; - font-size: 0.75em; - font-weight: bold; - padding: calc(0.75em / 0.75) calc(0.5em / 0.75); -} -.react-calendar__month-view__days__day--weekend { - height: 50px; - color: #d10000; -} -.react-calendar__month-view__days__day--neighboringMonth { - height: 50px; - color: #757575; -} -.react-calendar__year-view .react-calendar__tile, -.react-calendar__decade-view .react-calendar__tile, -.react-calendar__century-view .react-calendar__tile { - padding: 2em 0.5em; -} -.react-calendar__tile { - max-width: 100%; - text-align: center; - padding: 0.75em 0.5em; - background: none; -} -.react-calendar__tile:disabled { - background-color: #f0f0f0; -} -.react-calendar__tile:enabled:hover, -.react-calendar__tile:enabled:focus { - background-color: #e6e6e6; - border-radius: 50%; -} -.react-calendar__tile--now { - background: #ffff76; -} -.react-calendar__tile--now:enabled:hover, -.react-calendar__tile--now:enabled:focus { - background: #ffffa9; -} -.react-calendar__tile--hasActive { - background: #76baff; -} -.react-calendar__tile--hasActive:enabled:hover, -.react-calendar__tile--hasActive:enabled:focus { - background: #a9d4ff; -} - -.react-calendar--selectRange .react-calendar__tile--hover { - background-color: #e6e6e6; -} -` diff --git a/src/components/PageLogin/index.js b/src/components/PageLogin/index.js deleted file mode 100644 index e6c0b86..0000000 --- a/src/components/PageLogin/index.js +++ /dev/null @@ -1,79 +0,0 @@ -import { useNavigate } from "react-router-dom"; -import { useState } from 'react'; -import { useAuth } from "../../Providers/auth"; -import axios from "axios"; -import Button from "../Button"; -import Loader from "react-loader-spinner"; -import logo from '../../assets/logo.png'; - -import { ToastContainer, toast } from 'react-toastify'; -import "react-toastify/dist/ReactToastify.css"; -import { Container } from "./style"; - - -export default function PageLogin() { - - const navigate = useNavigate(); - const [loading, setLoading] = useState(false); - const { user, setUser } = useAuth(); - - if (user !== null) { - navigate('/hoje'); - } - - const [userLogin, setUserLogin] = useState({ - email: '', - password: '' - }); - - function login(e) { - e.preventDefault(); - setLoading(true); - - const promise = axios.post('https://mock-api.bootcamp.respondeai.com.br/api/v2/trackit/auth/login', { ...userLogin }); - promise.then(response => { - //navigate('/hoje'); - setLoading(false); - setUser(response.data); - - const person = { - id: response.data.id, - name: response.data.name, - email: response.data.email, - image: response.data.image, - token: response.data.token - } - localStorage.setItem('userLogged', JSON.stringify(person)); - - }); - promise.catch(err => { - setLoading(false); - toast.error('E-mail ou senha inválidos!'); - }); - } - - function ChangeInput(e) { - setUserLogin({ ...userLogin, [e.target.name]: e.target.value }); - } - - return ( - <Container> - <img src={logo} alt="Logo App" /> - - <form> - <input type="email" placeholder="E-mail" value={userLogin.email} name="email" onChange={ChangeInput} /> - <input type="password" placeholder='Senha' value={userLogin.password} name="password" onChange={ChangeInput} /> - - {loading === false ? ( - <Button type={'submit'} text={'Entrar'} destiny={''} action={login} /> - ) : ( - <Loader type="ThreeDots" color="#52B6FF" height={100} width={100} /> - )} - </form> - - <Button loading={loading} type={'button'} text={'Não tem uma conta? cadastre-se!'} destiny={'/cadastro'} /> - <ToastContainer limit={1} /> - </ Container> - ) -} - diff --git a/src/components/PageLogin/style.js b/src/components/PageLogin/style.js deleted file mode 100644 index c4ae37b..0000000 --- a/src/components/PageLogin/style.js +++ /dev/null @@ -1,59 +0,0 @@ -import styled from 'styled-components'; - -const Container = styled.div` - height: 100vh; - - align-items: center; - justify-content: center; - gap: 20px; - - display: flex; - flex-direction: column; - - form { - width: 100%; - - align-items: center; - gap: 6px; - - display: flex; - flex-direction: column; - - button { - background-color: #52B6FF; - color: #FFFFFF; - font-size: 20.976px; - line-height: 26px; - text-decoration-line: none; - &:hover { - cursor: pointer; - } - } - - a { - width: 90%; - } - } - - button, input { - min-width: 90%; - height: 40px; - border-radius: 5px; - } - - button { - width: 100%; - background-color: #ffffff; - color: #52B6FF; - font-size: 13.976px; - line-height: 17px; - text-decoration-line: underline; - span { - &:hover{ - cursor: pointer; - } - } - } -` - -export { Container } \ No newline at end of file diff --git a/src/components/PageRegister/index.js b/src/components/PageRegister/index.js deleted file mode 100644 index 25a4ffb..0000000 --- a/src/components/PageRegister/index.js +++ /dev/null @@ -1,64 +0,0 @@ -import { Container } from "./style"; -import axios from 'axios'; -import Button from "../Button"; -import { useState } from "react"; -import { useNavigate } from "react-router-dom"; -import Loader from "react-loader-spinner"; -import logo from '../../assets/logo.png'; -import { ToastContainer, toast } from 'react-toastify'; -import "react-toastify/dist/ReactToastify.css"; - - -export default function PageRegister() { - - const navigate = useNavigate(); - const [loading, setLoading] = useState(false); - const [userRegister, setUserRegister] = useState({ - email: '', - name: '', - image: '', - password: '' - }); - - function register(e) { - e.preventDefault(); - setLoading(true); - - const promise = axios.post('https://mock-api.bootcamp.respondeai.com.br/api/v2/trackit/auth/sign-up', { ...userRegister }); - promise.then(response => { - navigate('/'); - setLoading(false); - }); - promise.catch(err => { - console.log(err); - setLoading(false); - toast.error('E-mail ou senha inválidos!'); - }); - } - - function ChangeInput(e) { - setUserRegister({ ...userRegister, [e.target.name]: e.target.value }) - } - - return ( - <Container> - <img src={logo} alt="Logo App" /> - <ToastContainer position="top-right" /> - - <form> - <input type="email" placeholder="E-mail" value={userRegister.email} name="email" onChange={ChangeInput} /> - <input type="password" placeholder='Senha' value={userRegister.password} name="password" onChange={ChangeInput} /> - <input type="text" placeholder='Nome' value={userRegister.name} name="name" onChange={ChangeInput} /> - <input type="url" placeholder="Imagem" value={userRegister.image} name="image" onChange={ChangeInput} /> - - {loading === false ? ( - <Button type={'submit'} text={'Cadastrar'} destiny={''} action={register} /> - ) : ( - <Loader type="ThreeDots" color="#52B6FF" height={100} width={100} /> - )} - </form> - - <Button loading={loading} type="button" text={'Já tem uma conta? Faça login'} destiny={'/'} /> - </ Container> - ) -} \ No newline at end of file diff --git a/src/components/PageRegister/style.js b/src/components/PageRegister/style.js deleted file mode 100644 index ac150cc..0000000 --- a/src/components/PageRegister/style.js +++ /dev/null @@ -1,59 +0,0 @@ -import styled from 'styled-components'; - -const Container = styled.div` - height: 100vh; - - align-items: center; - justify-content: center; - gap: 20px; - - display: flex; - flex-direction: column; - - form { - width: 100%; - - align-items: center; - gap: 6px; - - display: flex; - flex-direction: column; - - button { - background-color: #52B6FF; - color: #FFFFFF; - font-size: 20.976px; - line-height: 26px; - text-decoration-line: none; - &:hover { - cursor: pointer; - } - } - - a { - width: 90%; - } - } - - button, input { - min-width: 90%; - height: 40px; - border-radius: 5px; - } - - button { - width: 100%; - background-color: #ffffff; - color: #52B6FF; - font-size: 13.976px; - line-height: 17px; - text-decoration-line: underline; - span { - &:hover{ - cursor: pointer; - } - } - } -` - -export { Container } \ No newline at end of file diff --git a/src/components/PageToday/index.js b/src/components/PageToday/index.js deleted file mode 100644 index 41a92c6..0000000 --- a/src/components/PageToday/index.js +++ /dev/null @@ -1,73 +0,0 @@ -import Header from "../Header"; -import Menu from "../Menu"; -import Title from "../Title"; -import Task from "../Task"; -import { Container, Tasks, LoaderConatiner } from "./style"; -import dayjs from "dayjs"; -import { useEffect, useState } from "react"; -import { useAuth } from "../../Providers/auth"; -import axios from "axios"; -import Menssage from "../Message-PageEmpty"; -import Loader from "react-loader-spinner"; - -export default function PageToday() { - - const daysOfWeek = ['Domingo', 'Segunda-feira', 'Terça-feira', 'Quarta-feira', 'Quinta-feira', 'Sexta-feira', 'Sábado']; - const { user, setProgress } = useAuth(); - const [tasks, setTasks] = useState([]); - const [subtitle, setSubtitle] = useState('Nenhum Hábito concluido ainda!'); - const [numberFinishedTasks, setNumberFinishedTasks] = useState(0); - const [loading, setLoading] = useState(false); - - useEffect(() => { - setLoading(true); - if (user) { - const promise = axios.get('https://mock-api.bootcamp.respondeai.com.br/api/v2/trackit/habits/today', - { headers: { 'Authorization': `Bearer ${user.token}` } } - ); - promise.then(response => { - const numberHabits = response.data.length; - let finishedTasks = 0; - setTasks(response.data); - setLoading(false); - - response.data.forEach(task => { - task.done && finishedTasks++; - }) - - if (finishedTasks !== 0) { - let percentage = (finishedTasks / numberHabits) * 100; - setSubtitle(`${percentage.toFixed(0)}% dos hábitos concluídos!`); - setProgress(percentage); - setNumberFinishedTasks(finishedTasks); - }; - }) - } - }, [user, setProgress]); - - return ( - <Container> - <Header /> - <Title text={`${daysOfWeek[dayjs().day()]}, ${dayjs().format('DD/MM')}`} description={subtitle} finishedTasks={numberFinishedTasks} /> - - {tasks.length === 0 && ( - <Menssage text={"Você não tem nenhum hábito cadastrado para hoje ainda. Click em 'Hábitos' e crie um novo para começar! :)"} /> - )} - - {loading && ( - <LoaderConatiner> - <span>Carregando ...</span> - <Loader type='ThreeDots' color={'#52B6FF'} /> - </LoaderConatiner> - )} - - <Tasks> - {tasks.length !== 0 && ( - tasks.map(task => (<Task key={task.id} task={task} />)) - )} - </Tasks> - - <Menu /> - </ Container> - ) -} \ No newline at end of file diff --git a/src/components/PageToday/style.js b/src/components/PageToday/style.js deleted file mode 100644 index a422b91..0000000 --- a/src/components/PageToday/style.js +++ /dev/null @@ -1,31 +0,0 @@ -import styled from "styled-components"; - -export const Container = styled.div` - width: 100vw; - min-height: 100vh; - padding: 75px 0px; - - background: #E5E5E5; -` - -export const Tasks = styled.div` - width: 100vw; - - display: flex; - flex-direction: column; - align-items: center; - gap: 10px; -` - -export const LoaderConatiner = styled.div` -width: 100vw; -height: 300px; -color: #52B6FF; -font-size: 25px; - -display: flex; -flex-direction: column; -align-items: center; -justify-content: center; -` - diff --git a/src/components/Task/index.js b/src/components/Task/index.js deleted file mode 100644 index 3928669..0000000 --- a/src/components/Task/index.js +++ /dev/null @@ -1,46 +0,0 @@ -import axios from 'axios'; -import { CheckmarkOutline } from 'react-ionicons'; -import { useAuth } from '../../Providers/auth'; -import { Texts, Container, Checkbox, CurrentSequence, HighestSequence } from './style'; - -export default function Task({ task }) { - - const { user } = useAuth(); - - function clickCheckbox(id) { - task.done ? noFinishTask(id) : finishTask(id); - } - - function noFinishTask(id) { - const promise = axios.post(`https://mock-api.bootcamp.respondeai.com.br/api/v2/trackit/habits/${id}/uncheck`, {}, - { headers: { 'Authorization': `Bearer ${user.token}` } } - ); - promise.then(() => window.location.reload()); - } - - function finishTask(id) { - const promise = axios.post(`https://mock-api.bootcamp.respondeai.com.br/api/v2/trackit/habits/${id}/check`, {}, - { headers: { 'Authorization': `Bearer ${user.token}` } } - ); - promise.then(() => window.location.reload()); - } - - return ( - <Container> - <Texts> - <h1>{task.name}</h1> - <span>Sequência atual: <CurrentSequence task={task}>{task.currentSequence} dias</CurrentSequence></span> - <span>Seu recorde: <HighestSequence task={task}>{task.highestSequence} dias</HighestSequence></span> - </Texts> - <Checkbox task={task} onClick={() => clickCheckbox(task.id)}> - <CheckmarkOutline - color="white" - height="100%" - width="100%" - /> - </Checkbox> - </Container> - ) -} - - diff --git a/src/components/Task/style.js b/src/components/Task/style.js deleted file mode 100644 index 79e5cc7..0000000 --- a/src/components/Task/style.js +++ /dev/null @@ -1,57 +0,0 @@ -import styled from 'styled-components'; - - -export const Container = styled.div` -width: 90vw; -height: 94px; -padding: 20px; - -background: #FFFFFF; -border-radius: 5px; - -display: flex; -align-items: center; -justify-content: space-between; -` -export const Texts = styled.div` -width: 70%; -height: 100%; - -color: #666666; - -display: flex; -flex-direction: column; -justify-content: center; -gap: 7px; - -h1 { - font-size: 19.976px; - line-height: 25px; -} - -span { - font-size: 12.976px; - line-height: 16px; -} -` -export const Checkbox = styled.div` -width: 69px; -height: 69px; - -background: #EBEBEB; -${props => props.task.done && 'background: #8FC549;'} -border: 1px solid #E7E7E7; -border-radius: 5px; - -&:hover{ - cursor: pointer; -} -` - -export const CurrentSequence = styled.span` -${props => props.task.done && 'color: #8FC549'} -` - -export const HighestSequence = styled.span` -${props => (props.task.currentSequence === props.task.highestSequence && props.task.done) && 'color: #8FC549'} -` \ No newline at end of file diff --git a/src/components/Title/index.js b/src/components/Title/index.js deleted file mode 100644 index 787e8a8..0000000 --- a/src/components/Title/index.js +++ /dev/null @@ -1,34 +0,0 @@ -import styled from 'styled-components'; - -export default function Title({ text, description, finishedTasks }) { - - return ( - <Container finishedTasks={finishedTasks}> - <h1>{text}</h1> - <span>{description}</span> - </Container> - ) -} - -const Container = styled.div` - width: 100vw; - height: 100px; - padding: 0px 5%; - - display: flex; - flex-direction: column; - justify-content: center; - - h1 { - font-size: 22.976px; - line-height: 29px; - color: #126BA5; - } - - span { - font-size: 17.976px; - line-height: 22px; - color: #BABABA; - ${props => props.finishedTasks !== 0 && 'color: #8FC549;'} - } -` diff --git a/src/components/WeekDay/index.js b/src/components/WeekDay/index.js deleted file mode 100644 index 811ea50..0000000 --- a/src/components/WeekDay/index.js +++ /dev/null @@ -1,33 +0,0 @@ -import styled from "styled-components" - -export default function WeekDay({ text, number, changeDays, selected, loading }) { - - return ( - <Container onClick={() => changeDays(number)} selected={selected} disabled={loading}> - <span>{text}</span> - </Container> - ) -} - -const Container = styled.button` -width: 30px; -height: 30px; -margin-top: 10px; - -border: 1px solid #D5D5D5; -background-color: #FFFFFF; -color: #D5D5D5; -font-size: 19.976px; -line-height: 25px; -border-radius: 5px; -${props => props.selected === true && 'background-color: #cfcfcf;'} -${props => props.selected === true && 'color: white;'} - -display: flex; -justify-content: center; -align-items: center; - -&:hover{ - cursor: pointer; -} -` \ No newline at end of file diff --git a/src/index.js b/src/index.js deleted file mode 100644 index 31abf27..0000000 --- a/src/index.js +++ /dev/null @@ -1,37 +0,0 @@ -import { render } from "react-dom"; -import { BrowserRouter, Routes, Route } from "react-router-dom"; -import { AuthProvider, useAuth } from "./Providers/auth"; -import PageLogin from "./components/PageLogin"; -import PageHistory from "./components/PageHistory"; -import PageRegister from "./components/PageRegister"; -import PageHabits from "./components/PageHabits"; -import PageToday from "./components/PageToday"; -import Navbar from "./components/Navbar"; - -import './reset.css'; -import './style.css'; - -function App() { - - const { navbar } = useAuth(); - - return ( - <BrowserRouter> - {navbar && <Navbar />} - <Routes> - <Route path='/' element={<PageLogin />} /> - <Route path='/cadastro' element={<PageRegister />} /> - <Route path='/habitos' element={<PageHabits />} /> - <Route path='/hoje' element={<PageToday />} /> - <Route path='/historico' element={<PageHistory />} /> - </Routes> - </BrowserRouter> - ) -} - -render( - <AuthProvider> - <App /> - </AuthProvider>, - document.querySelector('.root') -); diff --git a/src/reset.css b/src/reset.css deleted file mode 100644 index 66ed219..0000000 --- a/src/reset.css +++ /dev/null @@ -1,47 +0,0 @@ -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; -} -/* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; -} -body { - line-height: 1; -} -ol, ul { - list-style: none; -} -blockquote, q { - quotes: none; -} -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; -} -table { - border-collapse: collapse; - border-spacing: 0; -} - -button { - border: none; -} \ No newline at end of file diff --git a/src/style.css b/src/style.css deleted file mode 100644 index 2401c67..0000000 --- a/src/style.css +++ /dev/null @@ -1,22 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&family=Roboto:ital,wght@0,100;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); - -body { - font-family: 'Lexend Deca', sans-serif; - max-width: 100vw; - height: 100vh; -} - - -*{ - box-sizing: border-box; - text-decoration: none; -} - -input { - padding-left: 10px; - border: 1px solid #D5D5D5; -} -input::placeholder { - font-style: italic; -} -