chore: refactor wip

src/components/common/job-selector/job-selector.tsx

@@ -1,17 +1,17 @@
-import React, { useState, Dispatch, useEffect } from "react";
-import { Job } from "../../types";
-import Box from "@mui/material/Box";
-import InputLabel from "@mui/material/InputLabel";
-import FormControl from "@mui/material/FormControl";
-import Select from "@mui/material/Select";
-import Popover from "@mui/material/Popover";
+import { Job } from "@/types";
 import {
-  Typography,
-  MenuItem,
-  useTheme,
   ClickAwayListener,
+  MenuItem,
+  SxProps,
+  Typography,
+  useTheme,
 } from "@mui/material";
-import { SxProps } from "@mui/material";
+import Box from "@mui/material/Box";
+import FormControl from "@mui/material/FormControl";
+import InputLabel from "@mui/material/InputLabel";
+import Popover from "@mui/material/Popover";
+import Select from "@mui/material/Select";
+import React, { Dispatch, useEffect, useState } from "react";
 
 interface Props {
   sxProps?: SxProps;
@@ -19,7 +19,6 @@ interface Props {
     | Dispatch<React.SetStateAction<Job | null>>
     | ((job: Job) => void);
   selectedJob: Job | null;
-  setJobs: Dispatch<React.SetStateAction<Job[]>>;
   jobs: Job[];
 }
 
@@ -27,7 +26,6 @@ export const JobSelector = ({
   sxProps,
   selectedJob,
   setSelectedJob,
-  setJobs,
   jobs,
 }: Props) => {
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);

src/components/jobs/job-table.tsx

@@ -1,43 +1,32 @@
-import React, { SetStateAction, useState } from "react";
-import {
-  IconButton,
-  Box,
-  Typography,
-  Tooltip,
-  TextField,
-  FormControl,
-  InputLabel,
-  Select,
-  MenuItem,
-  SelectChangeEvent,
-} from "@mui/material";
+import { JobDownloadDialog } from "@/components/common/job-download-dialog";
+import { ApiService } from "@/services";
+import { COLOR_MAP, Job } from "@/types";
 import DeleteIcon from "@mui/icons-material/Delete";
-import SelectAllIcon from "@mui/icons-material/SelectAll";
 import DownloadIcon from "@mui/icons-material/Download";
+import SelectAllIcon from "@mui/icons-material/SelectAll";
 import StarIcon from "@mui/icons-material/Star";
-import { useRouter } from "next/router";
-import { Favorites, JobQueue } from ".";
-import { Job } from "../../types";
-import Cookies from "js-cookie";
+import {
+  Box,
+  FormControl,
+  IconButton,
+  InputLabel,
+  MenuItem,
+  Select,
+  SelectChangeEvent,
+  TextField,
+  Tooltip,
+  Typography,
+} from "@mui/material";
 import { useSearchParams } from "next/navigation";
-import { JobDownloadDialog } from "../common/job-download-dialog";
+import { useRouter } from "next/router";
+import React, { SetStateAction, useState } from "react";
+import { Favorites, JobQueue } from ".";
 
 interface JobTableProps {
   jobs: Job[];
   setJobs: React.Dispatch<SetStateAction<Job[]>>;
 }
 
-interface ColorMap {
-  [key: string]: string;
-}
-
-const COLOR_MAP: ColorMap = {
-  Queued: "rgba(255,201,5,0.25)",
-  Scraping: "rgba(3,104,255,0.25)",
-  Completed: "rgba(5,255,51,0.25)",
-  Failed: "rgba(214,0,25,0.25)",
-};
-
 export const JobTable: React.FC<JobTableProps> = ({ jobs, setJobs }) => {
   const searchParams = useSearchParams();
   const search = searchParams.get("search");
@@ -51,7 +40,6 @@ export const JobTable: React.FC<JobTableProps> = ({ jobs, setJobs }) => {
   const [jobDownloadDialogOpen, setJobDownloadDialogOpen] =
     useState<boolean>(false);
 
-  const token = Cookies.get("token");
   const router = useRouter();
 
   const handleDownload = (ids: string[]) => {
@@ -78,6 +66,7 @@ export const JobTable: React.FC<JobTableProps> = ({ jobs, setJobs }) => {
       } else {
         newSelected.add(id);
       }
+
       return newSelected;
     });
   };
@@ -89,14 +78,13 @@ export const JobTable: React.FC<JobTableProps> = ({ jobs, setJobs }) => {
       const allJobIds = new Set(jobs.map((job) => job.id));
       setSelectedJobs(allJobIds);
     }
+
     setAllSelected(!allSelected);
   };
 
   const handleDeleteSelected = async () => {
-    const response = await fetch("/api/delete", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ data: { ids: Array.from(selectedJobs) } }),
+    const response = await ApiService.deleteJob({
+      ids: Array.from(selectedJobs),
     });
 
     if (response.ok) {
@@ -115,6 +103,7 @@ export const JobTable: React.FC<JobTableProps> = ({ jobs, setJobs }) => {
     } else if (searchMode === "status") {
       return job.status.toLowerCase().includes(searchQuery.toLowerCase());
     }
+
     return true;
   });
 
@@ -125,19 +114,10 @@ export const JobTable: React.FC<JobTableProps> = ({ jobs, setJobs }) => {
       )
     );
 
-    const postBody = {
+    await ApiService.updateJob({
       ids: ids,
       field: field,
       value: value,
-    };
-
-    await fetch("/api/update", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${token}`,
-      },
-      body: JSON.stringify({ data: postBody }),
     });
   };
 

src/components/pages/chat/chat.tsx

@@ -1,20 +1,20 @@
-import React, { useEffect, useState } from "react";
+import { JobSelector } from "@/components/common/job-selector";
+import { useGetCurrentJobs } from "@/hooks/use-get-current-jobs";
+import { checkAI, fetchJob, updateJob } from "@/lib";
+import { Job, Message } from "@/types";
+import EditNoteIcon from "@mui/icons-material/EditNote";
+import SendIcon from "@mui/icons-material/Send";
 import {
   Box,
-  TextField,
-  Typography,
-  Paper,
-  useTheme,
   IconButton,
+  Paper,
+  TextField,
   Tooltip,
+  Typography,
+  useTheme,
 } from "@mui/material";
-import { Job, Message } from "@/types";
 import { useSearchParams } from "next/navigation";
-import { fetchJob, updateJob, checkAI } from "@/lib";
-import SendIcon from "@mui/icons-material/Send";
-import EditNoteIcon from "@mui/icons-material/EditNote";
-import { JobSelector } from "@/components/ai";
-import { useGetCurrentJobs } from "@/hooks/use-get-current-jobs";
+import React, { useEffect, useState } from "react";
 
 export const AI: React.FC = () => {
   const theme = useTheme();
@@ -184,7 +184,6 @@ export const AI: React.FC = () => {
               <JobSelector
                 selectedJob={selectedJob}
                 setSelectedJob={setSelectedJob}
-                setJobs={setJobs}
                 jobs={jobs}
                 sxProps={{
                   position: "absolute",

src/components/pages/cron-jobs/cron-jobs.tsx

@@ -1,18 +1,18 @@
-import { Job, CronJob } from "@/types/job";
-import { useState, useEffect } from "react";
-import { CreateCronJobs } from "./create-cron-jobs";
+import { CronJob, Job } from "@/types/job";
 import {
+  Box,
+  Button,
   Table,
+  TableBody,
+  TableCell,
   TableHead,
   TableRow,
-  TableCell,
-  TableBody,
-  Button,
-  Box,
   useTheme,
 } from "@mui/material";
-import Cookies from "js-cookie";
+import { useEffect, useState } from "react";
+import { CreateCronJobs } from "./create-cron-jobs";
 
+import { ApiService } from "@/services/api-service";
 export type CronJobsProps = {
   initialJobs: Job[];
   initialCronJobs: CronJob[];
@@ -36,14 +36,9 @@ export const CronJobs = ({
   }, [initialJobs, initialCronJobs, initialUser]);
 
   const handleDeleteCronJob = async (id: string) => {
-    const token = Cookies.get("token");
-    const response = await fetch("/api/delete-cron-job", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${token}`,
-      },
-      body: JSON.stringify({ data: { id, user_email: user.email } }),
+    const response = await ApiService.deleteCronJobs({
+      id,
+      user_email: user.email,
     });
 
     if (response.ok) {

src/components/pages/media/id/id.tsx

@@ -1,20 +1,20 @@
-import { JobSelector } from "@/components/ai";
+import { JobSelector } from "@/components/common/job-selector";
+import { MediaViewer } from "@/components/common/media-viewer";
+import { TileGridView } from "@/components/common/media-viewer/tile-grid-view";
+import { useGetCurrentJobs } from "@/hooks/use-get-current-jobs";
 import { Job } from "@/types";
 import {
-  Box,
-  useTheme,
-  Typography,
-  CircularProgress,
   Alert,
+  Box,
+  CircularProgress,
   Paper,
-  Tabs,
   Tab,
+  Tabs,
+  Typography,
+  useTheme,
 } from "@mui/material";
 import { useRouter, useSearchParams } from "next/navigation";
-import { useState, useEffect } from "react";
-import { TileGridView } from "@/components/common/media-viewer/tile-grid-view";
-import { MediaViewer } from "@/components/common/media-viewer";
-import { useGetCurrentJobs } from "@/hooks/use-get-current-jobs";
+import { useEffect, useState } from "react";
 
 export interface MediaFiles {
   audio: string[];
@@ -196,7 +196,6 @@ export const MediaId = () => {
           <JobSelector
             setSelectedJob={handleSelectJob}
             selectedJob={selectedJob}
-            setJobs={setJobs}
             jobs={jobs}
           />
         </Box>

src/components/pages/recordings/id/id.tsx

@@ -1,17 +1,17 @@
-import { JobSelector } from "@/components/ai";
+import { JobSelector } from "@/components/common/job-selector";
 import { useGetCurrentJobs } from "@/hooks/use-get-current-jobs";
 import { useUserSettings } from "@/store/hooks";
 import { Job } from "@/types";
 import {
-  Box,
-  useTheme,
-  Typography,
-  CircularProgress,
   Alert,
+  Box,
+  CircularProgress,
   Paper,
+  Typography,
+  useTheme,
 } from "@mui/material";
 import { useRouter, useSearchParams } from "next/navigation";
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 
 export const RecordingId = () => {
   const searchParams = useSearchParams();
@@ -106,7 +106,6 @@ export const RecordingId = () => {
           <JobSelector
             setSelectedJob={handleSelectJob}
             selectedJob={selectedJob}
-            setJobs={setJobs}
             jobs={jobs}
             sxProps={{}}
           />

src/services/api-service/functions/delete-cron-jobs.ts

@@ -0,0 +1,21 @@
+import Cookies from "js-cookie";
+
+export type DeleteCronJobsParams = {
+  id: string;
+  user_email: string;
+};
+
+export const deleteCronJobs = async (params: DeleteCronJobsParams) => {
+  const token = Cookies.get("token");
+
+  const response = await fetch("/api/delete-cron-jobs", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${token}`,
+    },
+    body: JSON.stringify({ data: params }),
+  });
+
+  return response;
+};

src/services/api-service/functions/delete-job.ts

@@ -0,0 +1,24 @@
+import Cookies from "js-cookie";
+
+export type DeleteJobParams = {
+  ids: string[];
+};
+
+export const deleteJob = async (params: DeleteJobParams) => {
+  const token = Cookies.get("token");
+
+  const response = await fetch("/api/delete", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${token}`,
+    },
+    body: JSON.stringify({ data: params }),
+  });
+
+  if (!response.ok) {
+    throw new Error("Failed to delete job");
+  }
+
+  return response;
+};

src/services/api-service/functions/index.ts

@@ -1,3 +1,6 @@
-export * from "./submit-job";
+export * from "./delete-cron-jobs";
+export * from "./delete-job";
 export * from "./login";
 export * from "./register";
+export * from "./submit-job";
+export * from "./update-job";

src/services/api-service/functions/update-job.ts

@@ -0,0 +1,26 @@
+import Cookies from "js-cookie";
+
+export type UpdateJobParams = {
+  ids: string[];
+  field: string;
+  value: any;
+};
+
+export const updateJob = async (params: UpdateJobParams) => {
+  const token = Cookies.get("token");
+
+  const response = await fetch("/api/update", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${token}`,
+    },
+    body: JSON.stringify({ data: params }),
+  });
+
+  if (!response.ok) {
+    throw new Error("Failed to update job");
+  }
+
+  return response.json();
+};

src/types/job.ts

@@ -59,3 +59,10 @@ export const initialJobOptions: RawJobOptions = {
   collect_media: false,
   custom_cookies: null,
 };
+
+export const COLOR_MAP: Record<string, string> = {
+  Queued: "rgba(255,201,5,0.25)",
+  Scraping: "rgba(3,104,255,0.25)",
+  Completed: "rgba(5,255,51,0.25)",
+  Failed: "rgba(214,0,25,0.25)",
+};