feat: add fetch inital data error handle

roanrobersson · May 2, 2022 · 99408c2 · 99408c2
1 parent 668369b
commit 99408c2
Show file tree

Hide file tree

Showing 12 changed files with 189 additions and 82 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -69,7 +69,7 @@ const App = () => {
         showRetryButton={authState.error}
         onRetryClick={handleRetryClick}
       />
-      <LoadingModal isOpen={commonState.loadingInitialData}/>
+      <LoadingModal isOpen={commonState.initialData.loading}/>
     </BrowserRouter>
   );
 };

diff --git a/src/assets/images/logo.png → src/assets/images/logo_151x151.png b/src/assets/images/logo.png → src/assets/images/logo_151x151.png
diff --git a/src/assets/images/logo_75x75.png b/src/assets/images/logo_75x75.png
diff --git 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
@@ -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 (
-    <StyledDrawer variant="persistent" anchor="left" open={isOpen}>
-      <Divider />
-
-      <List component="nav">
-        <ListItemButton
+    <StyledDrawer
+      variant="persistent"
+      anchor="left"
+      open={isOpen}
+      onMouseEnter={() => setIsMouseOverLeftMenu(true)}
+      onMouseLeave={() => setIsMouseOverLeftMenu(false)}
+    >
+      <List component="nav" sx={{ pl: 5, pt: 5 }}>
+        <StyledListItemButton
           selected={projectIdParam == inboxObject?.id}
           onClick={(event) => handleProjectItemClick(event, inboxObject)}
         >
           <ListItemIcon>
-            <InboxIcon />
+            <InboxIcon htmlColor="#246fe0" />
           </ListItemIcon>
           <ListItemText primary="Entrada" />
-        </ListItemButton>
+        </StyledListItemButton>
 
-        <ListItemButton
+        <StyledListItemButton
           selected={projectIdParam == 1}
           onClick={(event) => handleListItemClick(event, 1)}
         >
           <ListItemIcon>
-            <EventIcon />
+            <EventIcon htmlColor="#058527" />
           </ListItemIcon>
           <ListItemText primary="Hoje" />
-        </ListItemButton>
+        </StyledListItemButton>
 
-        <ListItemButton
+        <StyledListItemButton
           selected={projectIdParam == 2}
           onClick={(event) => handleListItemClick(event, 2)}
         >
           <ListItemIcon>
-            <CalendarMonthIcon />
+            <CalendarMonthIcon htmlColor="#692fc2" />
           </ListItemIcon>
           <ListItemText primary="Em breve" />
-        </ListItemButton>
-
-        <Divider />
+        </StyledListItemButton>
 
-        <ListItemButton onClick={handleProjectListClick}>
+        <StyledListItemButton
+          onClick={handleProjectListClick}
+          sx={{ mt: 3 }}
+          style={{ backgroundColor: "transparent" }}
+        >
+          {projectListIsOpen ? (
+            <ExpandLessIcon sx={{ mr: 4 }} />
+          ) : (
+            <ExpandMoreIcon sx={{ mr: 4 }} />
+          )}
           <ListItemText primary="Projetos" />
-          {projectListIsOpen ? <ExpandLessIcon /> : <ExpandMoreIcon />}
-        </ListItemButton>
-      </List>
 
-      <Collapse in={projectListIsOpen} timeout="auto" unmountOnExit>
-        <List component="div" disablePadding>
-          {projects
-            .filter((project) => project.name != "Inbox")
-            .map((project) => (
-              <ListItemButton
-                sx={{ pl: 4 }}
-                selected={projectIdParam == project.id}
-                onClick={(event) => handleProjectItemClick(event, project)}
-                key={project.id}
-              >
-                <ListItemIcon>
-                  <CircleIcon
-                    fontSize="small"
-                    htmlColor={normalizeColor(project.color)}
-                  />
-                </ListItemIcon>
-                <ListItemText primary={project.name} />
-              </ListItemButton>
-            ))}
-        </List>
-      </Collapse>
+          <IconButton
+            color="inherit"
+            onClick={(event) => event.stopPropagation()}
+            sx={{ ...(!isMouseOverLeftMenu && { visibility: "hidden" }) }}
+          >
+            <AddIcon fontSize="small" />
+          </IconButton>
+        </StyledListItemButton>
+
+        <Collapse in={projectListIsOpen} timeout="auto" unmountOnExit>
+          <List component="div" disablePadding>
+            {projects
+              .filter((project) => project.name != "Inbox")
+              .map((project) => (
+                <StyledListItemButton
+                  sx={{ pl: 4 }}
+                  selected={projectIdParam == project.id}
+                  onClick={(event) => handleProjectItemClick(event, project)}
+                  key={project.id}
+                >
+                  <ListItemIcon>
+                    <CircleIcon
+                      fontSize="small"
+                      htmlColor={normalizeColor(project.color)}
+                    />
+                  </ListItemIcon>
+                  <ListItemText primary={project.name} />
+                  <IconButton
+                    color="inherit"
+                    onClick={(event) => event.stopPropagation()}
+                    sx={{
+                      ...(!isMouseOverLeftMenu && { visibility: "hidden" }),
+                    }}
+                  >
+                    <MoreHorizIcon />
+                  </IconButton>
+                </StyledListItemButton>
+              ))}
+          </List>
+        </Collapse>
+      </List>
     </StyledDrawer>
   );
 };

diff --git a/src/components/LoadingModal/LoadingModal.jsx b/src/components/LoadingModal/LoadingModal.jsx
@@ -1,14 +1,14 @@
 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",
   top: "50%",
   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 }) => {
     >
       <Box sx={style}>
         <Box sx={{ display: "flex", justifyContent: "center", pb: 4 }}>
-          <img src={logoImg} />
+          <img src={logoImg}/>
         </Box>
         <Loading noPadding="true" />
       </Box>

diff --git 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 (
-    <Main open={isOpen}>
-      <Typography paragraph variant="h6">
-        {normalizeProjectName(project?.name)}
-      </Typography>
+    <Container>
+      <Main open={isOpen} sx={{ pt: 4, px: 7 }}>
+        <Typography variant="h6" sx={{ fontWeight: "bold" }}>
+          {normalizeProjectName(project?.name)}
+        </Typography>
 
-      {tasks.map((task) => (
-        <Box key={task.id}>
-          <Typography paragraph>Título: {task.content}</Typography>
-          <Typography paragraph>Descrição: {task.description}</Typography>
-          <Divider />
-        </Box>
-      ))}
+        {tasks.map((task) => (
+          <Box key={task.id}>
+            <Box sx={{ display: "flex" }}>
+              <Box>
+                <Checkbox />
+              </Box>
+              <Box sx={{ py: 1 }}>
+                <Typography variant="body2" sx={{ mb: 0 }}>
+                  Título: {task.content}
+                </Typography>
+                <Typography
+                  variant="body2"
+                  sx={{
+                    color: "gray",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap",
+                    overflow: "hidden",
+                    maxWidth: "500px",
+                  }}
+                >
+                  Descrição: {task.description}
+                </Typography>
+              </Box>
+            </Box>
+            <Divider />
+          </Box>
+        ))}
 
-      <button onClick={() => localStorage.clear()}>Clear localStorage</button>
-      {!project && <Typography>Nenhum projeto selecionado</Typography>}
-    </Main>
+        {!project && <Typography>Nenhum projeto selecionado</Typography>}
+      </Main>
+    </Container>
   );
 };
 

diff --git a/src/components/TopBar/TopBar.jsx b/src/components/TopBar/TopBar.jsx
@@ -97,7 +97,7 @@ const TopBar = () => {
       </MenuItem>
       <MenuItem>
         <IconButton size="large" color="inherit">
-          <Badge badgeContent={17} color="error">
+          <Badge badgeContent={0} color="error">
             <NotificationsIcon />
           </Badge>
         </IconButton>
@@ -148,7 +148,7 @@ const TopBar = () => {
               <SearchIcon />
             </SearchIconWrapper>
             <StyledInputBase
-              placeholder="Search…"
+              placeholder="Pesquisar..."
               inputProps={{ "aria-label": "search" }}
             />
           </Search>
@@ -164,7 +164,7 @@ const TopBar = () => {
               aria-label="show 17 new notifications"
               color="inherit"
             >
-              <Badge badgeContent={17} color="error">
+              <Badge badgeContent={0} color="error">
                 <NotificationsIcon />
               </Badge>
             </IconButton>

diff --git 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),
   ]);
 }