https://github.com/victor-lis/studyplus-front-end
https://github.com/victor-lis/studyplus-front-end
axios-react react responsive-design stlyed-components
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/victor-lis/studyplus-front-end
- Owner: Victor-Lis
- Created: 2023-12-29T16:17:22.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-01-28T20:41:29.000Z (over 1 year ago)
- Last Synced: 2024-10-05T12:41:03.388Z (about 1 year ago)
- Topics: axios-react, react, responsive-design, stlyed-components
- Language: JavaScript
- Homepage:
- Size: 1000 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Study+ Front End - Versão em React Vanilla
[Study+ BackEnd](https://github.com/Victor-Lis/StudyPlus-Back-End)
Esse é um projeto que ainda tenho muitos planos, essa ainda é a versão 1, mas já tenho em mente features futuras. Falando dele em si, eu já tinha esse projeto em mente há alguns meses, conversava bastante sobre a ideia com o [@Vinicius-Buava](https://github.com/Vinicius-B-Leite), além de já ter feito uma "versão anterior" desse projeto, mas ele estava bem simples e foi um dos meus primeiros projetos em Node, então existiam muitas melhoras a serem feitas.
O projeto consiste em um sistema para ajudar a organizar seu tempo disposto em atividades mais focadas como estudo, sendo possível inclusive programar tarefas futuras(dentro do prazo de uma semana) para ajudar na organização.
É possível criar as próprias "categorias", que serão atribuidas as atividades.
## Desafios
- Requisições HTTP vindas da API do projeto;
- Telas dinâmicas em relação aos dados;
- Delay mínimo ao manipular dados;
- Visual Responsivo.
## Aprendizados
Por final aprendi algumas coisas interessantes como:
## Na prática
### Axios
Nesse projeto irei utilizar o Axios ao invés do tão comum fetch(), que já usei bastante em outros projetos. O Axios será o responsável por requisições HTTP.
```js
import axios from "axios";
const api = axios.create({
baseURL: 'http://localhost:4000'
})
export default api;
```
### useContext
Criação do "IndexContext" e algumas funções para manipular o Banco que serão uteis em outras telas. O useContext() é o responsável por repassar os dados vindos e manipulados pelo Axios.
```js
import React, {useState, useEffect, createContext} from 'react'
import api from '../Connections/axios'
export const IndexContext = createContext({})
export default function IndexProvider({children}){
const [weeks, setWeeks] = useState([])
const [tasks, setTasks] = useState([])
const [categories, setCategories] = useState([])
const [creatingTask, setCreatingTask] = useState(false)
const [updatingTask, setUpdatingTask] = useState()
const [creatingCategorie, setCreatingCategorie] = useState(false)
const [updatingCategorie, setUpdatingCategorie] = useState()
const [selectedDay, setSelectedDay] = useState()
const [loading, setLoading] = useState(false)
async function getWeeks(){...}
async function getTasks(){...}
async function getCategories(){...}
async function createTask(title, desc, primeira_hora, ultima_hora, categorie){...}
async function updateTask(){...}
async function completeTask(id, completed, index){...}
async function deleteTask(id, index){...}
async function createCategorie(title, color){...}
async function updateCategorie(){...}
async function deleteCategorie(id, index){...}
useEffect(() => {
getWeeks()
getTasks()
getCategories()
}, [])
return(
{children}
)
}
```
### React-Router-DOM
O React-Router-DOM é o responsável pela sistema de navegações do projeto.
```js
import React from 'react'
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Navbar from '../Layout/Navbar';
import Home from '../Components/Home';
import Tasks from '../Components/Tasks';
export default function Router() {
return (
}/>
}/>
)
}
```
### Um componente que merece destaque é o "WeekContainer"
Está no "layout" pois será utilizado em mais de uma tela. Esse componente tem uma característica muito bacana, ele pode ser alterado a partir da props "all", que pode ser "true" ou "false", sendo assim ela é booleana.
Se a prop "all" for "false", ele apenas colocará um borda branca no entorno do dia atual.
Se a prop "all" for "true", ele permitirá a opção de selecionar um dia, deixando-o com as cores invertidas e ativando a propriedade :hover ao passar o mouse sobre um dia.
Essa possibilidade de alteração de estilo através de uma prop se torna muito fácil graças a utilização de um biblioteca que tenho muito carinho, a biblioteca "styled-components".
#### src/Layout/WeekContainer/index
```js
import React, { useState, useContext, useEffect } from 'react'
import { Container, Title, TitleStrong, Days } from './styles.js'
import { IndexContext } from '../../Contexts/index.js'
import Day from './Day/index.js'
export default function WeekContainer({setCreating, all}) {
const { weeks } = useContext(IndexContext)
function formatNum(num){...}
return (
Semana {!!weeks.length && weeks[0].id} - {!!weeks.length && `${formatNum(Math.floor(weeks[0].hours/60))}:${formatNum((weeks[0].hours%60))}h`}
{!!weeks.length && !!weeks[0].days && weeks[0].days.map((day) => {
return
})}
)
}
```
#### src/Layout/WeekContainer/Day/index
```js
import React, { useState, useEffect, useContext } from 'react'
import { Container, ContainerName, ContainerDate, ContainerHours } from './styles.js'
import { IndexContext } from '../../../Contexts/index.js'
export default function Day({ day, all }) {
const { selectedDay, setSelectedDay } = useContext(IndexContext)
const [today, setToday] = useState(new Date())
function handleSelectDay(){...}
function formatNum(num){...}
function formatDate(date, objectDate){...}
useEffect(() => {...}, [day])
return (
handleSelectDay()}
hover={(selectedDay && setSelectedDay && all)}
>
{day.name}
{`${formatNum(Math.floor(day.hours/60))}:${formatNum((day.hours%60))}h`}
{new Date(day.date).getDate()}/{new Date(day.date).getMonth() + 1}/{new Date(day.date).getFullYear()}
)
}
```
### Outro componente relevante é o "DataAnalysis"
Esse componente é responsável por ler os dados do CategoriesContext e exibir para o user.
```js
export default function DataAnalysis() {
const {
selectedCategorie,
percentage,
allTasks, categorieTasksCount,
tasksWithCategorieInThisWeek, allTasksInThisWeek,
allHours, allHoursInCategorie,
hoursInThisWeek, categorieHoursInThisWeek
} = useContext(CategorieContext)
const formatNum = (num) => num < 10? `0${num}`: num
return (
{percentage.toFixed(2)}% das tarefas totais tem a categoria {selectedCategorie?.title}
{categorieTasksCount} de {allTasks?.length} tarefas tem a categoria {selectedCategorie?.title}
{tasksWithCategorieInThisWeek}/{allTasksInThisWeek} tarefas essa semana tem a categoria {selectedCategorie?.title}
{formatNum(parseInt(allHoursInCategorie/60))}:{formatNum(allHoursInCategorie%60)}h de {formatNum(parseInt(allHours/60))}:{formatNum(allHours%60)}h no total foram investidas na categoria {selectedCategorie?.title}
{formatNum(parseInt(categorieHoursInThisWeek/60))}:{formatNum(categorieHoursInThisWeek%60)}h de {formatNum(parseInt(hoursInThisWeek/60))}:{formatNum(hoursInThisWeek%60)}h dessa semana foram investidas na categoria {selectedCategorie?.title}
)
}
```
### Screenshots
#### Início
#### Tarefas
Selecionando dia
Visualizando categorias
#### Análise
## Instalação do Projeto
```cmd
git clone https://github.com/Victor-Lis/StudyPlus-Front-End & git clone https://github.com/Victor-Lis/StudyPlus-Back-End
```
Dentro de ambos os repositórios
```
npm i dependencies
```
## Inicialização
No endereço do repositório do Front-End
```cmd
npm start
```
No endereço do repositório do Back-End
```cmd
npm run dev
```
## Restante do projeto
[Study+ BackEnd](https://github.com/Victor-Lis/StudyPlus-Back-End)
## Autores
- [@Victor-Lis](https://github.com/Victor-Lis)