diff --git a/src/components/EditFieldForm/EditFieldForm.tsx b/src/components/EditFieldForm/EditFieldForm.tsx index 2a92398..5877cc1 100644 --- a/src/components/EditFieldForm/EditFieldForm.tsx +++ b/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); + }); } } } diff --git a/src/containers/Edit/Edit.tsx b/src/containers/Edit/Edit.tsx index f7274a0..8de7f2f 100644 --- a/src/containers/Edit/Edit.tsx +++ b/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 => { 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 = ({ 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 = ({ setToast }): ReactElement => { onDeleteClick={( e: React.MouseEvent, fieldId: string - ) => onDeleteField(log, fieldId)} + ) => onDeleteField({ log, fieldId, authenticated, dataSyncState })} onEditClick={onEditField} setToast={setToast} /> diff --git a/src/containers/Log/Log.tsx b/src/containers/Log/Log.tsx index 24f10f6..a334b56 100644 --- a/src/containers/Log/Log.tsx +++ b/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 = ({ 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 = ({ setToast }): ReactElement => { { - onDeleteEntry(log, entry.id); + onDeleteEntry({ + log, + entryId: entry.id, + authenticated, + dataSyncState, + }); setToast({ show: true, context: REMOVE_LOG_ENTRY_ACTION, diff --git a/src/containers/LogEntry/LogEntry.tsx b/src/containers/LogEntry/LogEntry.tsx index 2563cde..4164cef 100644 --- a/src/containers/LogEntry/LogEntry.tsx +++ b/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 diff --git a/src/store/Log/index.ts b/src/store/Log/index.ts index acf62b6..e3c06fc 100644 --- a/src/store/Log/index.ts +++ b/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"; diff --git a/src/store/Log/reducer.ts b/src/store/Log/reducer.ts index 58d9648..6a4a2f4 100644 --- a/src/store/Log/reducer.ts +++ b/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]; +}