Merge pull request #2 from okplanbo/bugfix/S2/fix_progress_bar

fix: [S2] progress bar fix

package.json

@@ -1,7 +1,7 @@
 {
   "name": "sia",
   "private": true,
-  "version": "0.2.0",
+  "version": "0.2.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.tsx

@@ -9,18 +9,12 @@ import AddIcon from '@mui/icons-material/Add';
 import DeleteIcon from '@mui/icons-material/Delete';
 import { useTheme } from '@mui/material/styles';
 
-import { debounce } from ":src/helpers";
-import { basicList, debounce_delay, storage_key,
-    task_input_limit, tooptip_offset, total_percent } from ":src/constants";
+import { Task } from ":src/types";
+import { calcProgress, debounce } from ":src/helpers";
+import { basicList, debounce_delay, storage_key, task_input_limit, tooptip_offset } from ":src/constants";
 
 import "./App.scss";
 
-type Task = {
-    description: string;
-    checked: boolean;
-    key: string;
-};
-
 function getInitialTasks() {
     const initialTasks: Task[] = basicList.map(description => {
         return { description, checked: false, key: uuidv4() }
@@ -31,25 +25,15 @@ function getInitialTasks() {
 
 const saved_tasks = localStorage.getItem(storage_key);
 
-const calcProgress = (tasks: Task[]) => {
-    let completedCount = 0;
-    tasks.forEach(item => {
-        if (item.checked) {
-            completedCount++;
-        }
-    });
-    return total_percent / basicList.length * completedCount;
-}
-
 export default function App(): JSX.Element {
     const [tasks, setTasks] = useState<Task[]>(saved_tasks ? JSON.parse(saved_tasks) : getInitialTasks());
     const [editedTasks, setEditedTasks] = useState<Task[]>([]);
     const [progress, setProgress] = useState(calcProgress(tasks));
     const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
     const [isConfirmOpen, setIsConfirmOpen] = useState(false);
+    const addButtonRef = useRef<HTMLButtonElement>(null);
     const theme = useTheme();
     const fullScreen = useMediaQuery(theme.breakpoints.down('md'));
-    const addButtonRef = useRef<HTMLButtonElement>(null);
 
     const updateTasks = (newTasks: Task[]) => {
         localStorage.setItem(storage_key, JSON.stringify(newTasks));
@@ -63,6 +47,16 @@ export default function App(): JSX.Element {
         updateTasks(newTasks);
     }, [tasks]);
 
+    const debouncedUpdate = debounce((newDescription: string, key: string) => {
+        const tasks = editedTasks.map(task => {
+            if (task.key === key) {
+                task.description = newDescription;
+            }
+            return task;
+        });
+        setEditedTasks(tasks);
+    }, debounce_delay);
+
     const handleRestart = useCallback(() => {
         const newTasks = tasks.slice();
         newTasks.forEach(task => task.checked = false);
@@ -104,16 +98,6 @@ export default function App(): JSX.Element {
         updateTasks(newTasks);
     };
 
-    const debouncedUpdate = debounce((newDescription: string, key: string) => {
-        const tasks = editedTasks.map(task => {
-            if (task.key === key) {
-                task.description = newDescription;
-            }
-            return task;
-        });
-        setEditedTasks(tasks);
-    }, debounce_delay);
-
     const handleTaskEdit = (value: string, key: string) => {
         debouncedUpdate(value, key);
     };

src/helpers.ts

@@ -1,3 +1,6 @@
+import { Task } from "./types";
+import { total_percent } from "./constants";
+
 export function debounce<T extends (...args: string[]) => void>(fn: T, time: number) {
     let timeoutId: NodeJS.Timeout | null;
     return wrapper
@@ -10,4 +13,14 @@ export function debounce<T extends (...args: string[]) => void>(fn: T, time: num
             fn(...args)
         }, time)
     }
+}
+
+export function calcProgress (tasks: Task[]) {
+    let completedCount = 0;
+    tasks.forEach(item => {
+        if (item.checked) {
+            completedCount++;
+        }
+    });
+    return total_percent / tasks.length * completedCount;
 }

src/types.ts

@@ -0,0 +1,5 @@
+export type Task = {
+  description: string;
+  checked: boolean;
+  key: string;
+};