Data sync Wrap-Up

src/components/EditFieldForm/EditFieldForm.tsx

@@ -14,6 +14,7 @@ import {
   LogFields,
   ADD_LOG_FIELD_ACTION,
   UPDATE_LOG_FIELD_ACTION,
+  getLog,
 } from "../../store/Log";
 import { useAuthenticated } from "../../store/Session";
 
@@ -74,7 +75,7 @@ export interface HandleFieldsParams {
   authenticated?: boolean;
   dataSyncState?: DataSyncState;
 }
-export const onHandleField = ({
+export const onHandleField = async ({
   values,
   log,
   field,
@@ -107,31 +108,16 @@ export const onHandleField = ({
     if (sync?.logSheets && sync?.logSheets[log.id]) {
       const { syncSettings } = dataSyncState;
       if (syncSettings?.onAddField || syncSettings?.onEditField) {
-        const nextField = {
-          ...newField,
-          updatedAt: new Date().toISOString(),
-        };
-        if (!id) {
-          nextField.createdAt = nextField.updatedAt;
-        }
-        const nextLog = {
-          ...log,
-          fields: {
-            ...log.fields,
-            [nextField.id]: nextField,
-          },
-        };
+        const newLog = getLog(store.getState(), log.id);
         syncLogSheet({
-          log: nextLog,
+          log: newLog,
           logSheetId: sync.logSheets[log.id].id,
           onError: handleError,
-        })
-          .then((updates: SyncLogSheetResponse) =>
-            updateLocalLog({ log: nextLog, updates, store })
-          )
-          .catch((error) => {
-            console.error("Error syncing onEditField: ", error);
-          });
+        }).then((updates: SyncLogSheetResponse) => {
+          updateLocalLog({ log: newLog, updates, store });
+        }).catch((error) => {
+          console.error("Error syncing onEditField: ", error);
+        });
       }
     }
   }

src/containers/Edit/Edit.tsx

@@ -12,8 +12,9 @@ import {
   Log,
   LogFields,
   REMOVE_LOG_ACTION,
+  getLog,
 } from "../../store/Log";
-import { DataSyncState } from "../../store/DataSync";
+import { DataSyncState, useDataSync } from "../../store/DataSync";
 
 import { syncLogSheet } from "../../services/DataSync";
 import { SyncLogSheetResponse } from "../../services/DataSync";
@@ -53,6 +54,7 @@ import {
   SUBMIT,
   VIEW_LOG,
 } from "../../strings";
+import { useAuthenticated } from "../../store/Session";
 
 export const EDIT_HEADER = "Edit: ";
 export const LOG_FIELDS = "Log Fields";
@@ -76,25 +78,26 @@ export interface OnUpdateLogParams {
  * @param {boolean} authenticated - optional authenticated state
  * @param {DataSyncState} dataSyncState - optional data sync state
  */
-export const onUpdateLog = ({
+export const onUpdateLog = async ({
   log,
   values,
   authenticated,
   dataSyncState,
-}: OnUpdateLogParams): void => {
+}: OnUpdateLogParams): Promise<void> => {
   const updatedLog: Log = {
     ...log,
     ...values,
   };
-  store.dispatch(updateLog({ logId: log.id, log: updatedLog }));
+  await store.dispatch(updateLog({ logId: log.id, log: updatedLog }));
   if (authenticated && dataSyncState?.syncEnabled) {
     const { syncSettings } = dataSyncState;
     if (syncSettings?.onEditLog) {
       const sync = dataSyncState[dataSyncState.syncMethod];
       if (sync?.logSheets && sync?.logSheets[log.id]) {
+        const newLog = getLog(store.getState(), log.id)
         // todo: only sync log metadata on update log
         syncLogSheet({
-          log,
+          log: newLog,
           logSheetId: sync.logSheets[log.id].id,
           onError: handleError,
         })
@@ -119,14 +122,37 @@ export const onDeleteLog = (log: Log) => {
   store.dispatch(removeLog({ logId: log.id }));
 };
 
-/**
- * Delete log field callback
- * @param {Log} log - log to delete field from
- * @param {string} fieldId - id of field to delete
- */
-export const onDeleteField = (log: Log, fieldId: string) => {
-  // todo: updated deleted fields in log sheet metadata; sync log fields
-  store.dispatch(removeLogField({ logId: log.id, fieldId }));
+export interface onDeleteFieldParams {
+  log: Log;
+  fieldId: string;
+  authenticated?: boolean;
+  dataSyncState?: DataSyncState;
+}
+export const onDeleteField = async ({
+  log,
+  fieldId,
+  authenticated,
+  dataSyncState,
+}:onDeleteFieldParams) => {
+  await store.dispatch(removeLogField({ logId: log.id, fieldId }));
+  if (authenticated && dataSyncState?.syncEnabled) {
+    const { syncSettings } = dataSyncState;
+    if (syncSettings?.onEditLog) {
+      const sync = dataSyncState[dataSyncState.syncMethod];
+      if (sync?.logSheets && sync?.logSheets[log.id]) {
+        const newLog = getLog(store.getState(), log.id)
+        syncLogSheet({
+          log: newLog,
+          logSheetId: sync.logSheets[log.id].id,
+          onError: handleError,
+        }).then((updates: SyncLogSheetResponse) => {
+          updateLocalLog({ log, updates, store });
+        }).catch((error) => {
+          console.error("Error syncing onDeleteField: ", error);
+        });
+      }
+    }
+  }
 };
 
 /**
@@ -141,6 +167,8 @@ export interface EditProps {
 
 export const Edit: FC<EditProps> = ({ setToast }): ReactElement => {
   const navigate = useNavigate();
+  const authenticated = useAuthenticated();
+  const dataSyncState = useDataSync();
 
   // Get Log and Field ids from URL
   const { id, field: fid } = useParams() as { id: string; field: string };
@@ -227,7 +255,7 @@ export const Edit: FC<EditProps> = ({ setToast }): ReactElement => {
                   onDeleteClick={(
                     e: React.MouseEvent<HTMLElement, MouseEvent>,
                     fieldId: string
-                  ) => onDeleteField(log, fieldId)}
+                  ) => onDeleteField({ log, fieldId, authenticated, dataSyncState })}
                   onEditClick={onEditField}
                   setToast={setToast}
                 />

src/containers/Log/Log.tsx

@@ -20,6 +20,7 @@ import {
   Log as LogType,
   LogEntry,
   REMOVE_LOG_ENTRY_ACTION,
+  getLog,
 } from "../../store/Log";
 import "./log.scss";
 import {
@@ -50,6 +51,10 @@ import {
 } from "../../strings";
 import { SetToast } from "../../components/Toaster";
 import { entryFilter, LogEntryFilter } from "../../components/LogEntryFilter";
+import { syncLogSheet, SyncLogSheetResponse } from "../../services/DataSync";
+import { DataSyncState, useDataSync } from "../../store/DataSync";
+import { handleError, updateLocalLog } from "../../components/DataSync";
+import { useAuthenticated } from "../../store/Session";
 
 // Display strings
 export const ENTRIES_HEADER = "Entries ";
@@ -58,14 +63,37 @@ export const SORT_BY = "Sort by";
 export const DATE_CREATED = "Date Created";
 export const REVERSED = "Reversed";
 
-/**
- * Delete Entry Callback
- * @param {LogType} entry - entry to delete
- * @param {string} logId - id of log to delete entry from
- */
-export const onDeleteEntry = (log: LogType, entryId: string) => {
-  store.dispatch(removeLogEntry({ logId: log.id, entryId }));
-  // todo: sync log sheet
+export interface onDeleteEntryParams {
+  log: LogType;
+  entryId: string;
+  authenticated?: boolean;
+  dataSyncState?: DataSyncState;
+}
+
+export const onDeleteEntry = async ({
+  log, 
+  entryId,
+  authenticated,
+  dataSyncState,
+}: onDeleteEntryParams) => {
+  await store.dispatch(removeLogEntry({ logId: log.id, entryId }));
+
+  if (authenticated && dataSyncState?.syncSettings) {
+    const sync = dataSyncState[dataSyncState.syncMethod];
+    if (sync?.logSheets && sync.logSheets[log.id] && dataSyncState.syncSettings.onEditEntry) {
+      const state = store.getState();
+      const newLog = getLog(state, log.id);
+      syncLogSheet({
+        log: newLog,
+        logSheetId: sync.logSheets[log.id].id,
+        onError: handleError,
+      }).then((updates: SyncLogSheetResponse) => {
+        updateLocalLog({ log: newLog, updates, store });
+      }).catch((error) => {
+        console.error(`Error syncing onEntryDelete: ${error}`)
+      });
+    }
+  }
 };
 
 /**
@@ -79,6 +107,8 @@ export interface LogProps {
 
 export const Log: FC<LogProps> = ({ setToast }): ReactElement => {
   const navigate = useNavigate();
+  const authenticated = useAuthenticated();
+  const dataSyncState = useDataSync();
 
   // Get log from store
   const { id } = useParams() as { id: string };
@@ -276,7 +306,12 @@ export const Log: FC<LogProps> = ({ setToast }): ReactElement => {
                         </Dropdown.Item>
                         <Dropdown.Item
                           onClick={() => {
-                            onDeleteEntry(log, entry.id);
+                            onDeleteEntry({
+                              log,
+                              entryId: entry.id,
+                              authenticated,
+                              dataSyncState,
+                            });
                             setToast({
                               show: true,
                               context: REMOVE_LOG_ENTRY_ACTION,

src/containers/LogEntry/LogEntry.tsx

@@ -9,10 +9,10 @@ import {
   addLogEntry,
   ADD_LOG_ENTRY_ACTION,
   FieldValue,
+  getLog,
   Log,
   LogEntry as LogEntryType,
   LogFields,
-  removeLogEntry,
   updateLogEntry,
   UPDATE_LOG_ENTRY_ACTION,
   useGetLog,
@@ -74,7 +74,7 @@ export interface OnLogEntrySubmitParams {
   authenticated?: boolean;
   dataSyncState?: DataSyncState;
 }
-export const onLogEntrySubmit = ({
+export const onLogEntrySubmit = async ({
   values,
   log,
   entry,
@@ -92,7 +92,7 @@ export const onLogEntrySubmit = ({
     values: newValues,
   };
 
-  store.dispatch(
+  await store.dispatch(
     (entry ? updateLogEntry : addLogEntry)({
       logId: log.id,
       entryId,
@@ -105,23 +105,7 @@ export const onLogEntrySubmit = ({
     if (sync?.logSheets && sync.logSheets[log.id]) {
       const { onAddEntry, onEditEntry } = dataSyncState.syncSettings;
       if (onAddEntry || onEditEntry) {
-        const nextEntry = {
-          ...(log.entries[entryId] || {}),
-          ...newEntry,
-          updatedAt: new Date().toISOString(),
-        };
-        if (!entry) {
-          nextEntry.createdAt = nextEntry.updatedAt;
-        }
-
-        const newLog = {
-          ...log,
-          entries: {
-            ...log.entries,
-            [entryId]: nextEntry,
-          },
-        };
-        console.log('nextEntry: ', newLog.entries[entryId])
+        const newLog = getLog(store.getState(), log.id)
         syncLogSheet({
           log: newLog,
           logSheetId: sync.logSheets[log.id].id,
@@ -137,15 +121,6 @@ export const onLogEntrySubmit = ({
   }
 };
 
-/**
- * Delete Log Entry Callback
- * @param {LogEntryType} entry - entry to delete
- * @param {Log} log - log to delete entry from
- */
-export const onLogEntryDelete = (entry: LogEntryType, log: Log) => {
-  store.dispatch(removeLogEntry({ logId: log.id, entryId: entry.id }));
-  // todo: sync log sheet
-};
 
 /**
  * Log Entry Page

src/store/Log/index.ts

@@ -24,6 +24,13 @@ export {
   ADD_LOG_FIELD_ACTION,
   REMOVE_LOG_FIELD_ACTION,
   UPDATE_LOG_FIELD_ACTION,
+
+  // Getters
+  getLog,
+  getLogEntries,
+  getLogFields,
+  getLogEntry,
+  getLogField,
 } from "./reducer";
 
 export type { LogState } from "./reducer";

src/store/Log/reducer.ts

@@ -101,3 +101,25 @@ export const updateLogEntry = logSlice.actions[UPDATE_LOG_ENTRY_ACTION];
 export const addLogField = logSlice.actions[ADD_LOG_FIELD_ACTION];
 export const removeLogField = logSlice.actions[REMOVE_LOG_FIELD_ACTION];
 export const updateLogField = logSlice.actions[UPDATE_LOG_FIELD_ACTION];
+
+export const getLog = (state: any, logId: string) => state[logSliceName][logId];
+
+export const getLogEntries = (state: any, logId: string) => {
+  const log = getLog(state, logId);
+  return log?.entries;
+}
+
+export const getLogEntry = (state: any, logId: string, entryId: string) => {
+  const entries = getLogEntries(state, logId);
+  return entries?.[entryId];
+}
+
+export const getLogFields = (state: any, logId: string) => {
+  const log = getLog(state, logId);
+  return log?.fields;
+}
+
+export const getLogField = (state: any, logId: string, fieldId: string) => {
+  const fields = getLogFields(state, logId);
+  return fields?.[fieldId];
+}