diff --git a/src/App.jsx b/src/App.jsx index 1655486..e1d9957 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -69,7 +69,7 @@ const App = () => { showRetryButton={authState.error} onRetryClick={handleRetryClick} /> - + ); }; diff --git a/src/assets/images/logo.png b/src/assets/images/logo_151x151.png similarity index 100% rename from src/assets/images/logo.png rename to src/assets/images/logo_151x151.png diff --git a/src/assets/images/logo_75x75.png b/src/assets/images/logo_75x75.png new file mode 100644 index 0000000..9866048 Binary files /dev/null and b/src/assets/images/logo_75x75.png differ diff --git a/src/components/Home/HomePage.jsx b/src/components/Home/HomePage.jsx index 71067ee..e4c5c9d 100644 --- a/src/components/Home/HomePage.jsx +++ b/src/components/Home/HomePage.jsx @@ -1,3 +1,4 @@ +import { useEffect } from "react"; import { useSelector, useDispatch } from "react-redux"; import { TOGGLE_SELECTED_PROJECT } from "@/state/slices/projectsSlice.js"; import TopBar from "@/components/TopBar"; @@ -15,15 +16,25 @@ const Home = () => { (state) => state.projects.selectedProject ); const dispatch = useDispatch(); - const { projectId } = useParams(); + const { projectId: projectIdParam } = useParams(); const handleProjectItemClick = (project) => { navigate("/app/projects/" + project.id); // arrumar isso aqui!!!!!!!!!!!!! dispatch(TOGGLE_SELECTED_PROJECT(project)); }; + const getProjectById = (id) => { + return projects.find((project) => project.id == id); + }; + + useEffect(() => { + if (projectIdParam == undefined) return; + const project = getProjectById(projectIdParam); + if (projectIdParam && project) TOGGLE_SELECTED_PROJECT(project); + }, [projectIdParam]); + const tasksOfSelectedProject = () => { - return tasks.filter((task) => task.projectId == projectId); + return tasks.filter((task) => task.projectId == projectIdParam); }; return ( diff --git a/src/components/LeftMenu/LeftMenu.jsx b/src/components/LeftMenu/LeftMenu.jsx index 87c8770..03c42b8 100644 --- a/src/components/LeftMenu/LeftMenu.jsx +++ b/src/components/LeftMenu/LeftMenu.jsx @@ -12,6 +12,8 @@ import { ExpandMore as ExpandMoreIcon, Circle as CircleIcon, CalendarMonth as CalendarMonthIcon, + Add as AddIcon, + MoreHoriz as MoreHorizIcon, } from "@mui/icons-material"; import { Divider, @@ -20,6 +22,7 @@ import { ListItemButton, Collapse, Drawer, + IconButton, } from "@mui/material"; export const StyledDrawer = styled(Drawer)(({ theme }) => ({ @@ -32,10 +35,17 @@ export const StyledDrawer = styled(Drawer)(({ theme }) => ({ }, })); +export const StyledListItemButton = styled(ListItemButton)(({ theme }) => ({ + borderRadius: 5, + paddingTop: 1, + paddingBottom: 1, +})); + const LeftMenu = ({ projects, onProjectItemClick }) => { const { projectId: projectIdParam } = useParams(); //const [selectedIndex, setSelectedIndex] = useState(1); const [projectListIsOpen, setProjectListIsOpen] = useState(false); + const [isMouseOverLeftMenu, setIsMouseOverLeftMenu] = useState(false); const { isOpen, setIsOpen } = useContext(LeftMenuContext); const inboxObject = projects.find((project) => project.name == "Inbox"); @@ -62,70 +72,97 @@ const LeftMenu = ({ projects, onProjectItemClick }) => { }, [projects]); return ( - - - - - setIsMouseOverLeftMenu(true)} + onMouseLeave={() => setIsMouseOverLeftMenu(false)} + > + + handleProjectItemClick(event, inboxObject)} > - + - + - handleListItemClick(event, 1)} > - + - + - handleListItemClick(event, 2)} > - + - - - + - + + {projectListIsOpen ? ( + + ) : ( + + )} - {projectListIsOpen ? : } - - - - - {projects - .filter((project) => project.name != "Inbox") - .map((project) => ( - handleProjectItemClick(event, project)} - key={project.id} - > - - - - - - ))} - - + event.stopPropagation()} + sx={{ ...(!isMouseOverLeftMenu && { visibility: "hidden" }) }} + > + + + + + + + {projects + .filter((project) => project.name != "Inbox") + .map((project) => ( + handleProjectItemClick(event, project)} + key={project.id} + > + + + + + event.stopPropagation()} + sx={{ + ...(!isMouseOverLeftMenu && { visibility: "hidden" }), + }} + > + + + + ))} + + + ); }; diff --git a/src/components/LoadingModal/LoadingModal.jsx b/src/components/LoadingModal/LoadingModal.jsx index fa14fbc..5501149 100644 --- a/src/components/LoadingModal/LoadingModal.jsx +++ b/src/components/LoadingModal/LoadingModal.jsx @@ -1,6 +1,6 @@ import { Modal, Box } from "@mui/material"; import Loading from "../Loading"; -import logoImg from "@/assets/images/logo.png"; +import logoImg from "@/assets/images/logo_75x75.png"; const style = { position: "absolute", @@ -8,7 +8,7 @@ const style = { left: "50%", transform: "translate(-50%, -50%)", width: 600, - height: 400, + height: 300, bgcolor: "background.paper", boxShadow: 24, pt: 9, @@ -23,7 +23,7 @@ const LoadingModal = ({ isOpen }) => { > - + diff --git a/src/components/ProjectViewer/ProjectViewer.jsx b/src/components/ProjectViewer/ProjectViewer.jsx index 21d981f..38f1253 100644 --- a/src/components/ProjectViewer/ProjectViewer.jsx +++ b/src/components/ProjectViewer/ProjectViewer.jsx @@ -2,7 +2,7 @@ import { useContext } from "react"; import { useDispatch } from "react-redux"; import { LeftMenuContext } from "@/providers/LeftMenuProvider"; import { Main } from "./styles"; -import { Typography, Divider, Box } from "@mui/material"; +import { Typography, Divider, Box, Checkbox, Container } from "@mui/material"; import { useParams } from "react-router-dom"; const ProjectViewer = ({ project, tasks }) => { @@ -17,22 +17,43 @@ const ProjectViewer = ({ project, tasks }) => { if (!project) return null; return ( -
- - {normalizeProjectName(project?.name)} - + +
+ + {normalizeProjectName(project?.name)} + - {tasks.map((task) => ( - - Título: {task.content} - Descrição: {task.description} - - - ))} + {tasks.map((task) => ( + + + + + + + + Título: {task.content} + + + Descrição: {task.description} + + + + + + ))} - - {!project && Nenhum projeto selecionado} -
+ {!project && Nenhum projeto selecionado} +
+ ); }; diff --git a/src/components/TopBar/TopBar.jsx b/src/components/TopBar/TopBar.jsx index 01870b8..edcc032 100644 --- a/src/components/TopBar/TopBar.jsx +++ b/src/components/TopBar/TopBar.jsx @@ -97,7 +97,7 @@ const TopBar = () => { - + @@ -148,7 +148,7 @@ const TopBar = () => { @@ -164,7 +164,7 @@ const TopBar = () => { aria-label="show 17 new notifications" color="inherit" > - + diff --git a/src/state/rootSaga.js b/src/state/rootSaga.js index af0045e..d97fdd6 100644 --- a/src/state/rootSaga.js +++ b/src/state/rootSaga.js @@ -1,8 +1,10 @@ import { all, takeLatest } from "redux-saga/effects"; import { FETCH_INITIAL_DATA, + FETCH_INITIAL_DATA_SUCCESS, onAuthorized as commonSliceOnAuthorized, onRequestInitialData, + onRequestInitialDataSuccess, } from "./slices/commonSlice"; import { FETCH_TOKEN, @@ -39,5 +41,6 @@ export default function* rootSaga() { takeLatest(TOGGLE_SELECTED_PROJECT.type, onToggleSelectedProject), takeLatest(FETCH_TASKS.type, onRequestTasks), takeLatest(FETCH_TASKS_SUCCESS.type, onReceiveTasks), + takeLatest(FETCH_INITIAL_DATA_SUCCESS.type, onRequestInitialDataSuccess), ]); } diff --git a/src/state/slices/commonSlice.js b/src/state/slices/commonSlice.js index d21b3d5..4bedbd4 100644 --- a/src/state/slices/commonSlice.js +++ b/src/state/slices/commonSlice.js @@ -1,27 +1,47 @@ import { createSlice } from "@reduxjs/toolkit"; -import { put, take, all } from "redux-saga/effects"; +import { put, take, all, race } from "redux-saga/effects"; import { FETCH_PROJECTS, FETCH_PROJECTS_SUCCESS, + FETCH_PROJECTS_ERROR, TOGGLE_SELECTED_PROJECT, } from "./projectsSlice"; -import { FETCH_TASKS, FETCH_TASKS_SUCCESS } from "./tasksSlice"; +import { + FETCH_TASKS, + FETCH_TASKS_SUCCESS, + FETCH_TASKS_ERROR, +} from "./tasksSlice"; export function* onAuthorized(action) { yield put(FETCH_INITIAL_DATA()); } export function* onRequestInitialData(action) { - yield all([ - yield put(FETCH_PROJECTS()), - yield put(FETCH_TASKS()), - ]); - yield put(FETCH_INITIAL_DATA_SUCCESS()); - //yield put(TOGGLE_SELECTED_PROJECT()); + yield put(FETCH_PROJECTS()); + yield put(FETCH_TASKS()); + + const { response, cancel } = yield race({ + response: all([ + take(FETCH_PROJECTS_SUCCESS.type), + take(FETCH_TASKS_SUCCESS.type), + ]), + cancel: take([FETCH_PROJECTS_ERROR.type, FETCH_TASKS_ERROR.type]), + }); + + yield response + ? put(FETCH_INITIAL_DATA_SUCCESS()) + : put(FETCH_INITIAL_DATA_ERROR()); +} + +export function* onRequestInitialDataSuccess(action) { + yield put(TOGGLE_SELECTED_PROJECT(1)); } const initialState = { - loadingInitialData: false, + initialData: { + loading: false, + error: false, + }, }; export const commonSlice = createSlice({ @@ -29,14 +49,22 @@ export const commonSlice = createSlice({ initialState: initialState, reducers: { FETCH_INITIAL_DATA: (state) => { - state.loadingInitialData = true; + state.initialData.loading = true; + state.error = false; }, FETCH_INITIAL_DATA_SUCCESS: (state) => { - state.loadingInitialData = false; + state.initialData.loading = false; + }, + FETCH_INITIAL_DATA_ERROR: (state) => { + state.initialData.loading = false; + state.initialData.error = true; }, }, }); -export const { FETCH_INITIAL_DATA, FETCH_INITIAL_DATA_SUCCESS } = - commonSlice.actions; +export const { + FETCH_INITIAL_DATA, + FETCH_INITIAL_DATA_SUCCESS, + FETCH_INITIAL_DATA_ERROR, +} = commonSlice.actions; export default commonSlice.reducer; diff --git a/src/state/slices/projectsSlice.js b/src/state/slices/projectsSlice.js index 972c971..5913519 100644 --- a/src/state/slices/projectsSlice.js +++ b/src/state/slices/projectsSlice.js @@ -1,7 +1,6 @@ import { createSlice } from "@reduxjs/toolkit"; import { call, put } from "redux-saga/effects"; import getApi from "@/api/todoistApi.js"; -import { FETCH_TASKS } from "./tasksSlice.js"; export function* onRequestProjects() { try { @@ -17,7 +16,7 @@ export function* onReceiveProjects(action) { } export function* onToggleSelectedProject(action) { - yield put(FETCH_TASKS()); + } const initialState = { diff --git a/src/state/slices/tasksSlice.js b/src/state/slices/tasksSlice.js index dd48897..ff6cbce 100644 --- a/src/state/slices/tasksSlice.js +++ b/src/state/slices/tasksSlice.js @@ -32,12 +32,20 @@ export const tasksSlice = createSlice({ FETCH_TASKS_SUCCESS: (state) => { state.loading = true; }, + FETCH_TASKS_ERROR: (state) => { + state.loading = false; + state.error = true; + }, SET_TASKS: (state, action) => { state.data = action.payload; }, }, }); -export const { FETCH_TASKS, FETCH_TASKS_SUCCESS, SET_TASKS } = - tasksSlice.actions; +export const { + FETCH_TASKS, + FETCH_TASKS_SUCCESS, + SET_TASKS, + FETCH_TASKS_ERROR, +} = tasksSlice.actions; export default tasksSlice.reducer;