refactor: projectViewer and slices

roanrobersson · May 3, 2022 · 82eb0ad · 82eb0ad
1 parent d27f852
commit 82eb0ad
Show file tree

Hide file tree

Showing 6 changed files with 158 additions and 63 deletions.
diff --git a/src/components/Home/HomePage.jsx b/src/components/Home/HomePage.jsx
@@ -18,7 +18,6 @@ const Home = () => {
   const navigate = useNavigate();
   const projects = useSelector((state) => state.projects.data);
   const inboxProjectId = useSelector((state) => state.projects.inboxProjectId);
-  const tasks = useSelector((state) => state.tasks.data);
   const dispatch = useDispatch();
   const { projectId: projectIdParam } = useParams();
   const [projectModalType, setProjectModalType] = useState(null);
@@ -60,24 +59,12 @@ const Home = () => {
     dispatch(DELETE_PROJECT(projectId));
   };
 
-  const getProjectById = (id) => {
-    return projects.find((project) => project.id == id);
-  };
-
-  const selectedProject = () => {
-    return projects.find((project) => project.id == selectedProjectId);
-  };
-
-  const tasksOfSelectedProject = () => {
-    return tasks.filter((task) => task.projectId == selectedProjectId);
-  };
-
   useEffect(() => {
     if (inboxProjectId != null && projectIdParam == undefined) {
       dispatch(TOGGLE_SELECTED_PROJECT(inboxProjectId));
       return;
     }
-    if (projectIdParam != undefined && getProjectById(projectIdParam) != null) {
+    if (projectIdParam != undefined && findProjectById(projectIdParam) != null) {
       dispatch(TOGGLE_SELECTED_PROJECT(projectIdParam));
     }
   }, [projectIdParam, inboxProjectId]);
@@ -100,10 +87,7 @@ const Home = () => {
             onDeleteProjectClick={handleDeleteProjectClick}
           />
 
-          <ProjectViewer
-            project={selectedProject()}
-            tasks={tasksOfSelectedProject()}
-          />
+          <ProjectViewer />
         </Box>
       </LeftMenuProvider>
       {projectModalType && (

diff --git a/src/components/LeftMenu/LeftMenu.jsx b/src/components/LeftMenu/LeftMenu.jsx
@@ -223,10 +223,11 @@ const LeftMenu = ({
         anchorEl={projectMenuAnchorEl}
         open={isProjectMenuOpen}
         onClose={handleProjectMenuClose}
+        sx={{ color: "gray" }}
       >
         <MenuItem onClick={() => handleProjectEditClick(projectMenuProjectId)}>
           <ListItemIcon>
-            <BorderColorIcon fontSize="small" htmlColor="gray" />
+            <BorderColorIcon fontSize="small" />
           </ListItemIcon>
           <ListItemText>Editar projeto</ListItemText>
         </MenuItem>
@@ -235,7 +236,7 @@ const LeftMenu = ({
           onClick={() => handleProjectDeleteClick(projectMenuProjectId)}
         >
           <ListItemIcon>
-            <DeleteIcon fontSize="small" htmlColor="gray" />
+            <DeleteIcon fontSize="small" />
           </ListItemIcon>
           <ListItemText>Excluir projeto</ListItemText>
         </MenuItem>

diff --git a/src/components/ProjectViewer/ProjectViewer.jsx b/src/components/ProjectViewer/ProjectViewer.jsx
@@ -1,53 +1,131 @@
-import { useContext } from "react";
+import { useContext, useState } from "react";
 import { LeftMenuContext } from "@/providers/LeftMenuProvider";
+import { useSelector, useDispatch } from "react-redux";
 import { Main } from "./styles";
-import { Typography, Divider, Box, Checkbox, Container } from "@mui/material";
+import {
+  MoreHoriz as MoreHorizIcon,
+  BorderColorOutlined as BorderColorIcon,
+} from "@mui/icons-material";
+import {
+  Typography,
+  Divider,
+  Box,
+  Checkbox,
+  Container,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemText,
+  IconButton,
+} from "@mui/material";
 
-const ProjectViewer = ({ project, tasks }) => {
+const ProjectViewer = () => {
   const { isOpen, setIsOpen } = useContext(LeftMenuContext);
+  const [checked, setChecked] = useState([0]);
+  const [hoveredTaskId, setHoveredTaskId] = useState(null);
+  const dispatch = useDispatch();
+  const selectedProjectId = useSelector(
+    (state) => state.projects.selectedProjectId
+  );
+  const selectedProject = useSelector((state) => state.projects.data).find(
+    (project) => project.id == selectedProjectId
+  );
+  const tasks = useSelector((state) => state.tasks.data).filter(
+    (task) => task.projectId == selectedProjectId
+  );
 
   const normalizeProjectName = (projectName) => {
     return projectName == "Inbox" ? "Entrada" : projectName;
   };
 
-  if (!project) return null;
+  const handleTaskCheckToggle = (taskId) => {
+    const currentIndex = checked.indexOf(taskId);
+    const newChecked = [...checked];
+    if (currentIndex === -1) {
+      newChecked.push(taskId);
+    } else {
+      newChecked.splice(currentIndex, 1);
+    }
+    setChecked(newChecked);
+  };
+
+  const handleTaskClick = (taskId) => {};
+
+  const handleTaskEditClick = (taskId) => {};
+
+  const handleTaskOptionsClick = (taskId) => {};
+
+  if (!selectedProject) return null;
 
   return (
     <Container>
       <Main open={isOpen} sx={{ pt: 4, px: 7 }}>
         <Typography variant="h6" sx={{ fontWeight: "bold" }}>
-          {normalizeProjectName(project?.name)}
+          {normalizeProjectName(selectedProject?.name)}
         </Typography>
 
-        {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",
-                  }}
+        <List sx={{ width: "100%" }}>
+          {tasks
+            .sort((a, b) => a.order > b.order)
+            .map((task) => (
+              <Box
+                key={task.id}
+                onMouseEnter={() => setHoveredTaskId(task.id)}
+                onMouseLeave={() => setHoveredTaskId(null)}
+              >
+                <ListItem
+                  disablePadding
+                  secondaryAction={
+                    <Box
+                      sx={{
+                        color: "gray",
+                        ...(hoveredTaskId != task.id && {
+                          visibility: "hidden",
+                        }),
+                      }}
+                    >
+                      <IconButton
+                        edge="end"
+                        sx={{ mr: 1 }}
+                        onClick={handleTaskEditClick}
+                      >
+                        <BorderColorIcon />
+                      </IconButton>
+                      <IconButton edge="end" onClick={handleTaskOptionsClick}>
+                        <MoreHorizIcon />
+                      </IconButton>
+                    </Box>
+                  }
                 >
-                  Descrição: {task.description}
-                </Typography>
+                  <Checkbox
+                    edge="start"
+                    checked={checked.indexOf(task.id) !== -1}
+                    onClick={() => handleTaskCheckToggle(task.id)}
+                    disableRipple
+                  />
+                  <ListItemButton
+                    dense
+                    onClick={handleTaskClick}
+                    sx={{
+                      "&.MuiListItemButton-root:hover": {
+                        backgroundColor: "transparent",
+                      },
+                    }}
+                  >
+                    <ListItemText
+                      primary={task.content}
+                      secondary={task.description}
+                    />
+                  </ListItemButton>
+                </ListItem>
+                <Divider />
               </Box>
-            </Box>
-            <Divider />
-          </Box>
-        ))}
+            ))}
+        </List>
 
-        {!project && <Typography>Nenhum projeto selecionado</Typography>}
+        {!selectedProject && (
+          <Typography>Nenhum projeto selecionado</Typography>
+        )}
       </Main>
     </Container>
   );

diff --git a/src/state/slices/authSlice.js b/src/state/slices/authSlice.js
@@ -4,8 +4,9 @@ import { tokenRequest } from "@/api/request.js";
 import { clearAllParamsFromActualURL } from "@/lib/util.js";
 
 export function* onRequestToken(action) {
+  const code = action.payload;
   try {
-    const response = yield call(tokenRequest, [action.payload]);
+    const response = yield call(tokenRequest, [code]);
     const token = response.data.access_token;
     yield localStorage.setItem("token", token);
     yield put(FETCH_TOKEN_SUCCESS(token));
@@ -16,13 +17,13 @@ export function* onRequestToken(action) {
 }
 
 export function* onReceiveToken(action) {
-  yield put(AUTHORIZED(action.payload));
+  const token = action.payload;
+  yield put(AUTHORIZED(token));
 }
 
 export function* onAuthorized(action) {
-  yield window.dispatchEvent(
-    new CustomEvent("new_token", { detail: action.payload })
-  );
+  const token = action.payload;
+  yield window.dispatchEvent(new CustomEvent("new_token", { detail: token }));
 }
 
 const initialState = {

diff --git a/src/state/slices/projectsSlice.js b/src/state/slices/projectsSlice.js
@@ -12,27 +12,30 @@ export function* onRequestProjects() {
 }
 
 export function* onAddProject(action) {
+  const project = action.payload;
   try {
-    const response = yield call(() => getApi().addProject(action.payload));
+    const response = yield call(() => getApi().addProject(project));
     yield put(ADD_PROJECT_SUCCESS(response));
   } catch (error) {
     yield put(ADD_PROJECT_ERROR());
   }
 }
 
 export function* onUpdateProject(action) {
+  const project = action.payload;
   try {
-    yield call(() => getApi().updateProject(action.payload.id, action.payload));
-    yield put(UPDATE_PROJECT_SUCCESS(action.payload));
+    yield call(() => getApi().updateProject(project.id, project));
+    yield put(UPDATE_PROJECT_SUCCESS(project));
   } catch (error) {
     yield put(UPDATE_PROJECT_ERROR());
   }
 }
 
 export function* onDeleteProject(action) {
+  const projectId = action.payload;
   try {
-    yield call(() => getApi().deleteProject(action.payload));
-    yield put(DELETE_PROJECT_SUCCESS(action.payload));
+    yield call(() => getApi().deleteProject(projectId));
+    yield put(DELETE_PROJECT_SUCCESS(projectId));
   } catch (error) {
     yield put(DELETE_PROJECT_ERROR());
   }

diff --git a/src/state/slices/tasksSlice.js b/src/state/slices/tasksSlice.js
@@ -11,6 +11,16 @@ export function* onRequestTasks() {
   }
 }
 
+export function* onCloseTasks(action) {
+  const taskId = action.payload;
+  try {
+    const response = yield call(() => getApi().closeTask(taskId));
+    yield put(CLOSE_TASK_SUCCESS(response));
+  } catch (error) {
+    yield put(CLOSE_TASK_ERROR());
+  }
+}
+
 const initialState = {
   data: [],
   loading: false,
@@ -33,9 +43,27 @@ export const tasksSlice = createSlice({
       state.loading = false;
       state.error = true;
     },
+    CLOSE_TASK: (state) => {
+      state.loading = true;
+      state.error = false;
+    },
+    CLOSE_TASK_SUCCESS: (state, action) => {
+      state.loading = false;
+      //state.data = action.payload;
+    },
+    CLOSE_TASK_ERROR: (state) => {
+      state.loading = false;
+      state.error = true;
+    },
   },
 });
 
-export const { FETCH_TASKS, FETCH_TASKS_SUCCESS, FETCH_TASKS_ERROR } =
-  tasksSlice.actions;
+export const {
+  FETCH_TASKS,
+  FETCH_TASKS_SUCCESS,
+  FETCH_TASKS_ERROR,
+  CLOSE_TASK,
+  CLOSE_TASK_SUCCESS,
+  CLOSE_TASK_ERROR,
+} = tasksSlice.actions;
 export default tasksSlice.reducer;