feat: sync remote sources through celery periodic tasks

frontend/src/settings/Documents.tsx

@@ -1,7 +1,14 @@
-import { DocumentsProps } from '../models/misc';
-import Trash from '../assets/trash.svg';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
+
+import userService from '../api/services/userService';
+import SyncIcon from '../assets/sync.svg';
+import Trash from '../assets/trash.svg';
+import DropdownMenu from '../components/DropdownMenu';
+import { Doc, DocumentsProps } from '../models/misc';
+import { getDocs } from '../preferences/preferenceApi';
+import { setSourceDocs } from '../preferences/preferenceSlice';
 
 // Utility function to format numbers
 const formatTokens = (tokens: number): string => {
@@ -25,10 +32,29 @@ const Documents: React.FC<DocumentsProps> = ({
   handleDeleteDocument,
 }) => {
   const { t } = useTranslation();
+  const dispatch = useDispatch();
+  const syncOptions = [
+    { label: 'Never', value: 'never' },
+    { label: 'Daily', value: 'daily' },
+    { label: 'Weekly', value: 'weekly' },
+    { label: 'Monthly', value: 'monthly' },
+  ];
+
+  const handleManageSync = (doc: Doc, sync_frequency: string) => {
+    userService
+      .manageSync({ source_id: doc.id, sync_frequency })
+      .then(() => {
+        return getDocs();
+      })
+      .then((data) => {
+        dispatch(setSourceDocs(data));
+      })
+      .catch((error) => console.error(error));
+  };
   return (
     <div className="mt-8">
-      <div className="flex flex-col">
-        <div className="w-full overflow-x-auto">
+      <div className="flex flex-col relative">
+        <div className="z-10 w-full overflow-x-auto">
           <table className="block w-max table-auto content-center justify-center rounded-xl border text-center dark:border-chinese-silver dark:text-bright-gray">
             <thead>
               <tr>
@@ -64,18 +90,33 @@ const Documents: React.FC<DocumentsProps> = ({
                       {document.type === 'remote' ? 'Pre-loaded' : 'Private'}
                     </td>
                     <td className="border-t px-4 py-2">
-                      {document.type !== 'remote' && (
-                        <img
-                          src={Trash}
-                          alt="Delete"
-                          className="h-4 w-4 cursor-pointer hover:opacity-50"
-                          id={`img-${index}`}
-                          onClick={(event) => {
-                            event.stopPropagation();
-                            handleDeleteDocument(index, document);
-                          }}
-                        />
-                      )}
+                      <div className="flex flex-row items-center">
+                        {document.type !== 'remote' && (
+                          <img
+                            src={Trash}
+                            alt="Delete"
+                            className="h-4 w-4 cursor-pointer hover:opacity-50"
+                            id={`img-${index}`}
+                            onClick={(event) => {
+                              event.stopPropagation();
+                              handleDeleteDocument(index, document);
+                            }}
+                          />
+                        )}
+                        {document.syncFrequency && (
+                          <div className="ml-2">
+                            <DropdownMenu
+                              name="Sync"
+                              options={syncOptions}
+                              onSelect={(value: string) => {
+                                handleManageSync(document, value);
+                              }}
+                              defaultValue={document.syncFrequency}
+                              icon={SyncIcon}
+                            />
+                          </div>
+                        )}
+                      </div>
                     </td>
                   </tr>
                 ))}