2 files changed, 12 insertions, 22 deletions
diff --git a/src/views/Chores/ChoreCard.jsx b/src/views/Chores/ChoreCard.jsx
index 08a5406..97e407a 100644
--- a/src/views/Chores/ChoreCard.jsx
+++ b/src/views/Chores/ChoreCard.jsx
@@ -17,6 +17,7 @@ import {
   SwitchAccessShortcut,
   TimesOneMobiledata,
   Update,
+  ViewCarousel,
   Webhook,
 } from '@mui/icons-material'
 import {
@@ -38,7 +39,7 @@ import moment from 'moment'
 import React, { useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { API_URL } from '../../Config'
-import { MarkChoreComplete } from '../../utils/Fetcher'
+import { MarkChoreComplete, SkipChore } from '../../utils/Fetcher'
 import { Fetch } from '../../utils/TokenManager'
 import ConfirmationModal from '../Modals/Inputs/ConfirmationModal'
 import DateModal from '../Modals/Inputs/DateModal'
@@ -107,6 +108,9 @@ const ChoreCard = ({
   const handleEdit = () => {
     navigate(`/chores/${chore.id}/edit`)
   }
+  const handleView = () => {
+    navigate(`/chores/${chore.id}`)
+  }
   const handleDelete = () => {
     setConfirmModelConfig({
       isOpen: true,
@@ -521,13 +525,7 @@ const ChoreCard = ({
                 </MenuItem>
                 <MenuItem
                   onClick={() => {
-                    Fetch(`${API_URL}/chores/${chore.id}/skip`, {
-                      method: 'POST',
-                      headers: {
-                        'Content-Type': 'application/json',
-                      },
-                      body: JSON.stringify({}),
-                    }).then(response => {
+                    SkipChore(chore.id).then(response => {
                       if (response.ok) {
                         response.json().then(data => {
                           const newChore = data.res
@@ -585,6 +583,10 @@ const ChoreCard = ({
                   <Edit />
                   Edit
                 </MenuItem>
+                <MenuItem onClick={handleView}>
+                  <ViewCarousel />
+                  View
+                </MenuItem>
                 <MenuItem onClick={handleDelete} color='danger'>
                   <Delete />
                   Delete
diff --git a/src/views/Chores/MyChores.jsx b/src/views/Chores/MyChores.jsx
index cd90942..d4eed5a 100644
--- a/src/views/Chores/MyChores.jsx
+++ b/src/views/Chores/MyChores.jsx
@@ -3,7 +3,6 @@ import {
   Badge,
   Box,
   Checkbox,
-  CircularProgress,
   Container,
   IconButton,
   Input,
@@ -18,8 +17,8 @@ import Fuse from 'fuse.js'
 import { useContext, useEffect, useRef, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { UserContext } from '../../contexts/UserContext'
-import Logo from '../../Logo'
 import { GetAllUsers, GetChores, GetUserProfile } from '../../utils/Fetcher'
+import LoadingComponent from '../components/Loading'
 import ChoreCard from './ChoreCard'
 
 const MyChores = () => {
@@ -184,18 +183,7 @@ const MyChores = () => {
   }
 
   if (userProfile === null) {
-    return (
-      <Container className='flex h-full items-center justify-center'>
-        <Box className='flex flex-col items-center justify-center'>
-          <CircularProgress
-            color='success'
-            sx={{ '--CircularProgress-size': '200px' }}
-          >
-            <Logo />
-          </CircularProgress>
-        </Box>
-      </Container>
-    )
+    return <LoadingComponent />
   }
 
   return (