feat: UI to view change details

tiddly-gittly · Dec 1, 2024 · 2ebeaab · 2ebeaab
1 parent 86c846f
commit 2ebeaab
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 15 deletions.
diff --git a/src/components/WikiUpdateList.tsx b/src/components/WikiUpdateList.tsx
@@ -1,24 +1,49 @@
+/* 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';
 
 interface WikiListProps {
   lastSyncDate: Date | undefined;
   onLongPress?: (wiki: ITiddlerChange) => void;
-  onPress?: (wiki: ITiddlerChange) => void;
   wiki: IWikiWorkspace;
 }
 
-export const WikiUpdateList: React.FC<WikiListProps> = ({ 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<WikiListProps> = ({ onLongPress, wiki, lastSyncDate }) => {
   const theme = useTheme();
   const [changesAfterLastSync, setChangesAfterLastSync] = useState<Awaited<ReturnType<typeof backgroundSyncService.getChangeLogsSinceLastSync>>>([]);
+  const [selectedChange, setSelectedChange] = useState<LastArrayElement<typeof changesAfterLastSync> | null>(null);
+  const [modalVisible, setModalVisible] = useState(false);
+
   useEffect(() => {
     void (async () => {
       if (lastSyncDate === undefined) return;
@@ -37,7 +62,8 @@ export const WikiUpdateList: React.FC<WikiListProps> = ({ onPress, onLongPress,
     return (
       <WikiCard
         onPress={() => {
-          onPress?.(item);
+          setSelectedChange(item);
+          setModalVisible(true);
         }}
         onLongPress={() => {
           onLongPress?.(item);
@@ -50,7 +76,7 @@ export const WikiUpdateList: React.FC<WikiListProps> = ({ onPress, onLongPress,
         />
       </WikiCard>
     );
-  }, [onLongPress, onPress, theme]);
+  }, [onLongPress, theme.colors.onSecondaryContainer]);
 
   return (
     <>
@@ -59,11 +85,30 @@ export const WikiUpdateList: React.FC<WikiListProps> = ({ onPress, onLongPress,
         renderItem={renderItem}
         keyExtractor={item => item.id.toString()}
       />
+      <Portal>
+        <Modal visible={modalVisible} onDismiss={() => setModalVisible(false)}>
+          <Card>
+            <Card.Title title={selectedChange?.title} />
+            <Card.Content>
+              {selectedChange
+                ? (
+                  <ScrollableContent>
+                    {Object.entries(selectedChange.fields ?? {}).map(([key, value]) => (
+                      <FieldRow key={key}>
+                        <FieldKey>{key}:</FieldKey>
+                        <Text>{String(value)}</Text>
+                      </FieldRow>
+                    ))}
+                  </ScrollableContent>
+                )
+                : <Text>No details available</Text>}
+            </Card.Content>
+            <Card.Actions>
+              <Button onPress={() => setModalVisible(false)}>{i18n.t('Close')}</Button>
+            </Card.Actions>
+          </Card>
+        </Modal>
+      </Portal>
     </>
   );
 };
-
-const WikiCard = styled(Card)`
-  margin: 2px;
-  padding: 0px;
-`;
diff --git 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 } });