Merge pull request #181 from bible-technology/Sync-refactor

Sync refactor

renderer/pages/sync.js

@@ -1,7 +1,7 @@
-import Sync from '@/modules/projects/Sync';
+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

@@ -7,17 +7,17 @@ import Link from 'next/link';
 import { SnackBar } from '@/components/SnackBar';
 import menuStyles from '@/layouts/editor/MenuBar.module.css';
 import useAddNotification from '@/components/hooks/useAddNotification';
-import PopUpModal from '@/layouts/Sync/PopUpModal';
 import ConfirmationModal from '@/layouts/editor/ConfirmationModal';
 import { ReferenceContext } from '@/components/context/ReferenceContext';
+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';
-import { getOrPutLastSyncInAgSettings } from '../../Ag/SyncToGiteaUtils';
+import { getOrPutLastSyncInAgSettings } from '../../Scribe/SyncToGiteaUtils';
 
 function EditorSync({ selectedProject }) {
   const [usersList, setUsersList] = useState([]);

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

@@ -2,7 +2,7 @@ import * as localForage from 'localforage';
 import { environment } from '../../../../../environment';
 import * as logger from '../../../../logger';
 import packageInfo from '../../../../../../package.json';
-import { uploadToGitea } from '../../Ag/SyncToGitea';
+import { uploadToGitea } from '../../Scribe/SyncToGitea';
 
 export async function getGiteaUsersList() {
   let usersList = [];

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

@@ -5,7 +5,7 @@ import {
 } from 'gitea-react-toolkit';
 import GiteaFileBrowser from './GiteaFileBrowser';
 import { environment } from '../../../../environment';
-import { createSyncProfile } from '../Ag/SyncToGiteaUtils';
+import { createSyncProfile } from '../Scribe/SyncToGiteaUtils';
 
 const Gitea = ({ setAuth, setRepo }) => {
   const [authentication, setAuthentication] = useState();

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

@@ -3,12 +3,12 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import ConfirmationModal from '@/layouts/editor/ConfirmationModal';
 import PropTypes from 'prop-types';
-import PopUpModal from '@/layouts/Sync/PopUpModal';
 import { SnackBar } from '@/components/SnackBar';
 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/Gitea/ProjectMerge/ProjectMergeUtils.js

@@ -1,4 +1,4 @@
-import { createFiletoServer } from '../../Ag/SyncToGiteaUtils';
+import { createFiletoServer } from '../../Scribe/SyncToGiteaUtils';
 import * as logger from '../../../../logger';
 import packageInfo from '../../../../../../package.json';
 

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/Ag/ProjectFileBrowser.js → 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/modules/projects/Sync.js → renderer/src/components/Sync/Sync.js

@@ -1,25 +1,23 @@
 import { useState, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-
 import ProjectsLayout from '@/layouts/projects/Layout';
-// import Gitea from '@/components/Sync/Gitea/Gitea';
 import AuthenticationContextProvider from '@/components/Login/AuthenticationContextProvider';
 import ProjectContextProvider from '@/components/context/ProjectContext';
 import ReferenceContextProvider from '@/components/context/ReferenceContext';
 import {
   CloudArrowDownIcon,
   CloudArrowUpIcon,
 } from '@heroicons/react/24/outline';
-import ProjectFileBrowser from '@/components/Sync/Ag/ProjectFileBrowser';
-import Gitea from '@/components/Sync/Gitea/Gitea';
-import { SyncContext } from '@/components/Sync/SyncContextProvider';
 import { SnackBar } from '@/components/SnackBar';
-import { uploadToGitea } from '@/components/Sync/Ag/SyncToGitea';
-import { downloadFromGitea } from '@/components/Sync/Gitea/SyncFromGitea';
 import useAddNotification from '@/components/hooks/useAddNotification';
 import ConfirmationModal from '@/layouts/editor/ConfirmationModal';
-import { cloneAndSetProject, updateSettingsFiles } from '@/components/Sync/Gitea/SyncFromGiteaUtils';
-import { checkoutJsonFiles, pullProject } from '@/components/Sync/Isomorphic/utils';
+import { SyncContext } from '../context/SyncContext';
+import { uploadToGitea } from './Scribe/SyncToGitea';
+import { downloadFromGitea } from './Gitea/SyncFromGitea';
+import { cloneAndSetProject, updateSettingsFiles } from './Gitea/SyncFromGiteaUtils';
+import { checkoutJsonFiles, pullProject } from './Isomorphic/utils';
+import Gitea from './Gitea/Gitea';
+import ProjectFileBrowser from './Scribe/ProjectFileBrowser';
 import Door43Logo from '@/icons/door43.svg';
 import * as logger from '../../logger';
 
@@ -81,7 +79,7 @@ export default function Sync() {
         // for pull without conflict
         const checkoutFIles = await checkoutJsonFiles(pullData.fs, pullData.gitprojectDir, pullData.checkoutBranch);
         const pullStatus = checkoutFIles && await pullProject(pullData.fs, pullData.gitprojectDir, pullData.userBranch, auth.token.sha1, pullData.checkoutBranch);
-      pullStatus?.status && await updateSettingsFiles(
+          pullStatus?.status && await updateSettingsFiles(
           pullData.fs,
           pullData.sbDataObject,
           pullData.projectDir,

renderer/src/components/Sync/useSync.js → renderer/src/components/Sync/hooks/useSync.js

@@ -1,8 +1,8 @@
 import { useState, useEffect } from 'react';
 import * as localForage from 'localforage';
-import * as logger from '../../logger';
-import fetchProjectsMeta from '../../core/projects/fetchProjectsMeta';
-import { getOrPutLastSyncInAgSettings } from './Ag/SyncToGiteaUtils';
+import * as logger from '../../../logger';
+import fetchProjectsMeta from '../../../core/projects/fetchProjectsMeta';
+import { getOrPutLastSyncInAgSettings } from '../Scribe/SyncToGiteaUtils';
 
 function useSync() {
   const projectList = [];

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 './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';