Refactoring Sync by structuring the files

renderer/pages/sync.js

@@ -1,7 +1,7 @@
 import Sync from '@/components/Sync/Sync';
 import AuthenticationContextProvider from '@/components/Login/AuthenticationContextProvider';
 import AutographaContextProvider from '@/components/context/AutographaContext';
-import SyncContextProvider from '@/components/Sync/SyncContextProvider';
+import SyncContextProvider from '@/components/context/SyncContext';
 
 const projects = () => (
   <AuthenticationContextProvider>

renderer/src/components/LoadingSpinner/index.js

@@ -0,0 +1 @@
+export { default as LoadingSpinner } from './LoadingSpinner';

renderer/src/components/ProgressCircle/index.js

@@ -0,0 +1 @@
+export { default as ProgressCircle } from './ProgressCircle';

renderer/src/components/Sync/Gitea/EditorSync/EditorSync.js

@@ -13,7 +13,7 @@ import PopUpModal from '../../PopUpModal';
 import * as logger from '../../../../logger';
 import CloudUploadIcon from '@/icons/basil/Outline/Files/Cloud-upload.svg';
 import CloudCheckIcon from '@/icons/basil/Solid/Files/Cloud-check.svg';
-import ProgressCircle from '../../ProgressCircle';
+import { ProgressCircle } from '../../../ProgressCircle';
 import Door43Logo from '@/icons/door43.svg';
 import { getGiteaUsersList, handleEditorSync } from './EditorSyncUtils';
 import useGetCurrentProjectMeta from '../../hooks/useGetCurrentProjectMeta';

renderer/src/components/Sync/Gitea/GiteaFileBrowser.js

@@ -6,15 +6,13 @@ import {
 } from 'gitea-react-toolkit';
 import { ChevronRightIcon } from '@heroicons/react/24/solid';
 import CustomMultiComboBox from '@/components/Resources/ResourceUtils/CustomMultiComboBox';
-import { SyncContext } from '../SyncContextProvider';
+import { SyncContext } from '../../context/SyncContext';
 import * as logger from '../../../logger';
-import LoadingSpinner from '../LoadingSpinner';
+import { LoadingSpinner } from '../../LoadingSpinner';
 import GridRow from '../GridRow';
 import ProjectMergePop from './ProjectMerge/ProjectMergePopUp';
 import { environment } from '../../../../environment';
 
-/* eslint-disable no-console */
-// eslint-disable-next-line react/prop-types
 const GiteaFileBrowser = ({ changeRepo }) => {
   const {
     states: {

renderer/src/components/Sync/Gitea/ProjectMerge/ProjectMergePopUp.js

@@ -8,7 +8,7 @@ import useAddNotification from '@/components/hooks/useAddNotification';
 import PopUpModal from '../../PopUpModal';
 import { VerticalLinearStepper } from '../../VerticalStepperProgress';
 import { mergeProgressSteps } from './ProjectMergeConst';
-import LoadingSpinner from '../../LoadingSpinner';
+import { LoadingSpinner } from '../../../LoadingSpinner';
 import { tryMergeProjects } from './MergeActions';
 import burrito from '../../../../lib/BurritoTemplete.json';
 import { backupLocalProject, deleteCreatedMergeBranch, undoMergeOrDeleteOldBackup } from './ProjectMergeUtils';

renderer/src/components/Sync/GridRow.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { classNames } from '@/util/classNames';
+import moment from 'moment';
+import FolderIcon from '@/icons/folder.svg';
+
+function GridRow({
+  title,
+  lastSync,
+  selected,
+  isUpload,
+  uploadPercentage = 0,
+}) {
+  return (
+    <>
+      <div className="flex gap-2 justify-between items-center px-5 py-4 border-b border-gray-100 cursor-pointer">
+        <span
+          className={classNames(
+            selected ? 'text-primary' : 'text-gray-800',
+            'capitalize w-full flex items-center gap-5',
+          )}
+        >
+          <FolderIcon className="w-4 h-4" />
+          {title}
+        </span>
+
+        <span
+          title={
+            lastSync && lastSync !== null ? lastSync.username : ''
+          }
+          className={classNames(
+            selected ? 'text-primary' : '',
+            'text-xs font-semibold  text-right w-40',
+          )}
+        >
+          {lastSync && lastSync !== null
+            ? moment
+                .utc(lastSync.lastSynced)
+                .local()
+                .startOf('seconds')
+                .fromNow()
+            : '-'}
+        </span>
+      </div>
+      {isUpload && (
+        <div className="w-full bg-gray-200 h-1">
+          <div
+            className="bg-primary h-1"
+            style={{ width: `${uploadPercentage}%` }}
+          />
+        </div>
+      )}
+    </>
+  );
+}
+
+export default GridRow;

renderer/src/components/Sync/Scribe/ProjectFileBrowser.js

@@ -2,7 +2,7 @@ import {
  useContext, useEffect,
 } from 'react';
 import GridRow from '../GridRow';
-import { SyncContext } from '../SyncContextProvider';
+import { SyncContext } from '../../context/SyncContext';
 
 export default function ProjectFileBrowser() {
   const {

renderer/src/components/Sync/Sync.js

@@ -11,7 +11,7 @@ import {
 import { SnackBar } from '@/components/SnackBar';
 import useAddNotification from '@/components/hooks/useAddNotification';
 import ConfirmationModal from '@/layouts/editor/ConfirmationModal';
-import { SyncContext } from './SyncContextProvider';
+import { SyncContext } from '../context/SyncContext';
 import { uploadToGitea } from './Scribe/SyncToGitea';
 import { downloadFromGitea } from './Gitea/SyncFromGitea';
 import { cloneAndSetProject, updateSettingsFiles } from './Gitea/SyncFromGiteaUtils';

renderer/src/components/Sync/SyncContextProvider.js → renderer/src/components/context/SyncContext.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-no-constructed-context-values */
 import React, { createContext } from 'react';
 import PropTypes from 'prop-types';
-import useSync from './hooks/useSync';
+import useSync from '../Sync/hooks/useSync';
 
 export const SyncContext = createContext();
 

renderer/src/layouts/projects/Export/ExportProjectPopUp.js

@@ -16,7 +16,7 @@ import { validate } from '../../../util/validate';
 import * as logger from '../../../logger';
 import burrito from '../../../lib/BurritoTemplete.json';
 import ConfirmationModal from '../../editor/ConfirmationModal';
-import ProgressCircle from '../../../components/Sync/ProgressCircle';
+import { ProgressCircle } from '../../../components/ProgressCircle';
 import { exportDefaultAudio, exportFullAudio } from './ExportUtils';
 import packageInfo from '../../../../../package.json';