diff --git a/src/components/WikiUpdateList.tsx b/src/components/WikiUpdateList.tsx index 63da566..c26d549 100644 --- a/src/components/WikiUpdateList.tsx +++ b/src/components/WikiUpdateList.tsx @@ -1,10 +1,14 @@ +/* eslint-disable react-native/no-raw-text */ +/* eslint-disable @typescript-eslint/no-confusing-void-expression */ +/* eslint-disable @typescript-eslint/strict-boolean-expressions */ import Ionicons from '@expo/vector-icons/Ionicons'; import { compact } from 'lodash'; import React, { useCallback, useEffect, useState } from 'react'; -import { FlatList } from 'react-native'; -import { Card, useTheme } from 'react-native-paper'; +import { FlatList, View, ScrollView } from 'react-native'; +import { Button, Card, Modal, Portal, Text, useTheme } from 'react-native-paper'; import { styled } from 'styled-components/native'; import type { LastArrayElement } from 'type-fest'; +import i18n from '../i18n'; import { backgroundSyncService } from '../services/BackgroundSyncService'; import { ITiddlerChange, TiddlersLogOperation } from '../services/WikiStorageService/types'; import { IWikiWorkspace } from '../store/workspace'; @@ -12,13 +16,34 @@ import { IWikiWorkspace } from '../store/workspace'; interface WikiListProps { lastSyncDate: Date | undefined; onLongPress?: (wiki: ITiddlerChange) => void; - onPress?: (wiki: ITiddlerChange) => void; wiki: IWikiWorkspace; } -export const WikiUpdateList: React.FC = ({ onPress, onLongPress, wiki, lastSyncDate }) => { +const WikiCard = styled(Card)` + margin: 2px; + padding: 0px; +`; + +const FieldRow = styled(View)` + flex-direction: row; + margin-bottom: 4px; +`; + +const FieldKey = styled(Text)` + font-weight: bold; + margin-right: 8px; +`; + +const ScrollableContent = styled(ScrollView)` + max-height: 400px; +`; + +export const WikiUpdateList: React.FC = ({ onLongPress, wiki, lastSyncDate }) => { const theme = useTheme(); const [changesAfterLastSync, setChangesAfterLastSync] = useState>>([]); + const [selectedChange, setSelectedChange] = useState | null>(null); + const [modalVisible, setModalVisible] = useState(false); + useEffect(() => { void (async () => { if (lastSyncDate === undefined) return; @@ -37,7 +62,8 @@ export const WikiUpdateList: React.FC = ({ onPress, onLongPress, return ( { - onPress?.(item); + setSelectedChange(item); + setModalVisible(true); }} onLongPress={() => { onLongPress?.(item); @@ -50,7 +76,7 @@ export const WikiUpdateList: React.FC = ({ onPress, onLongPress, /> ); - }, [onLongPress, onPress, theme]); + }, [onLongPress, theme.colors.onSecondaryContainer]); return ( <> @@ -59,11 +85,30 @@ export const WikiUpdateList: React.FC = ({ onPress, onLongPress, renderItem={renderItem} keyExtractor={item => item.id.toString()} /> + + setModalVisible(false)}> + + + + {selectedChange + ? ( + + {Object.entries(selectedChange.fields ?? {}).map(([key, value]) => ( + + {key}: + {String(value)} + + ))} + + ) + : No details available} + + + + + + + ); }; - -const WikiCard = styled(Card)` - margin: 2px; - padding: 0px; -`; diff --git a/src/services/BackgroundSyncService/index.ts b/src/services/BackgroundSyncService/index.ts index e1ace22..edb3d86 100644 --- a/src/services/BackgroundSyncService/index.ts +++ b/src/services/BackgroundSyncService/index.ts @@ -55,9 +55,9 @@ export async function unregisterBackgroundSyncAsync() { } export class BackgroundSyncService { - #serverStore = useServerStore; - #configStore = useConfigStore; - #workspacestore = useWorkspaceStore; + readonly #serverStore = useServerStore; + readonly #configStore = useConfigStore; + readonly #workspacestore = useWorkspaceStore; public startBackgroundSync() { const syncInterval = this.#configStore.getState().syncInterval; @@ -141,7 +141,7 @@ export class BackgroundSyncService { operation: change.operation as TiddlersLogOperation, timestamp: new Date(change.timestamp).toISOString(), // Convert Date to string }; - if (change.operation === TiddlersLogOperation.DELETE) return result; + if (change.operation as TiddlersLogOperation === TiddlersLogOperation.DELETE) return result; // for update and insert, add text and fields to it const title = change.title; // const skinnyTiddlerWithText = await tiddlerRepo.findOne({ where: { title } });