histories and bookmark done

2024-07-22 22:54:57 +08:00
parent 220fa2dfd4
commit 12873b1fa8
6 changed files with 158 additions and 77 deletions
--- a/actions/qrCodeActions.ts
+++ b/actions/qrCodeActions.ts
@@ -1,6 +0,0 @@
-import { createAction } from '@reduxjs/toolkit';
-import { QRCode } from '../types';
-
-export const addQRCode = createAction<QRCode>('qrCodes/addQRCode');
-export const toggleBookmark = createAction<number>('qrCodes/toggleBookmark');
-export const deleteQRCode = createAction<number | null>('qrCodes/deleteQRCode');
--- a/api/qrCodeAPI.tsx
+++ b/api/qrCodeAPI.tsx
@@ -8,6 +8,10 @@ const API_URL_VERIFY_URL = "/v1/qrcodetypes/verifyURL"
 const API_URL_VIRUS_TOTAL_CHECK = "/v1/qrcodetypes/virusTotalCheck"
 const API_URL_CHECK_REDIRECTS = "/v1/qrcodetypes/checkRedirects"
 const API_URL_GET_HISTORIES = "/v1/user/getScannedHistories"
+const API_URL_DELETE_SCANNED_HISTORY = "/v1/user/deleteScannedHistories"
+const API_URL_GET_BOOKMARKS = "/v1/user/getBookmarks"
+const API_URL_SET_BOOKMARK = "/v1/user/setBookmark"
+const API_URL_DELETE_BOOKMARK = "/v1/user/deleteBookmark"

 // Define a generic function to handle all types of requests
 export const apiRequest = async (config) => {
@@ -64,11 +68,49 @@ export const checkRedirects = async (data) => {
    data: { data }
  });
 };
-
-export const getScannedHistories = async (userId: String) => {
+// GET User's Scanned Histories
+export const getScannedHistories = async (userId: string) => {
  return apiRequest({
    method: 'get',
    url: `${API_BASE_URL}${API_URL_GET_HISTORIES}`,
    headers: { "X-USER-ID": userId },
  });
 };
+// GET All User's Bookmark
+export const getAllUserBookmarks = async (userId: string) => {
+  return apiRequest({
+    method: 'get',
+    url: `${API_BASE_URL}${API_URL_GET_BOOKMARKS}`,
+    headers: { "X-USER-ID": userId },
+  });
+};
+
+// Create Bookmark on QR Code
+export const setBookmark = async (userId: string, qrCodeId: string) => {
+  return apiRequest({
+    method: 'post',
+    url: `${API_BASE_URL}${API_URL_SET_BOOKMARK}`,
+    headers: { "X-USER-ID": userId},
+    data: { "qrCodeId": qrCodeId }
+  });
+};
+
+// Delete single bookmark
+export const deleteBookmark = async (userId: string, qrCodeId: string) => {
+  return apiRequest({
+    method: 'put',
+    url: `${API_BASE_URL}${API_URL_DELETE_BOOKMARK}`,
+    headers: { "X-USER-ID": userId},
+    data: { "qrCodeId": qrCodeId }
+  });
+};
+
+// Delete Single Scanned History
+export const deleteScannedHistory = async (userId: string, qrCodeId: string) => {
+  return apiRequest({
+    method: 'put',
+    url: `${API_BASE_URL}${API_URL_DELETE_SCANNED_HISTORY}`,
+    headers: { "X-USER-ID": userId},
+    data: { "qrCodeId": qrCodeId }
+  });
+};
--- a/reducers/qrCodesReducer.ts
+++ b/reducers/qrCodesReducer.ts
@@ -1,39 +1,86 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { QRCode, UserAttributes } from '../types';
+import { createAsyncThunk, createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { QRCode, QRCodeType, UserAttributes } from "../types";
+import { deleteBookmark, deleteScannedHistory, setBookmark } from "../api/qrCodeAPI";
+import { RootState } from '../store';

+interface QRCodeState {
+    qrCodes: QRCode[];
+    histories: QRCodeType[] | null;
+    bookmarks: QRCodeType[] | null;
+    userAttributes: UserAttributes;
+}
 const initialState: QRCodeState = {
-  qrCodes: [],
-  userAttributes: null,
+    qrCodes: [],
+    histories: [],
+    bookmarks: [],
+    userAttributes: null,
 };

+export const toggleBookmark = createAsyncThunk(
+  'qrCodes/toggleBookmark',
+  async ({ userId, qrCode }: { userId: string, qrCode: QRCodeType }, { dispatch, rejectWithValue }) => {
+    try {
+      await (qrCode.bookmarked ? deleteBookmark(userId, qrCode.data.id) : setBookmark(userId, qrCode.data.id));
+      // Dispatch the action to update local state
+      dispatch(toggleBookmarkInState(qrCode));
+      return qrCode;
+
+    } catch (error) {
+      return rejectWithValue((error as Error).message);
+    }
+  }
+);
+
+export const deleteQRCode = createAsyncThunk(
+  'qrCodes/deleteQRCode',
+  async ({ userId, qrCodeId }: { userId: string, qrCodeId: string }, { dispatch, rejectWithValue }) => {
+    try {
+      await deleteScannedHistory(userId, qrCodeId);
+      dispatch(deleteQRCodeInState(qrCodeId));
+      return qrCodeId;
+    } catch (error) {
+      return rejectWithValue((error as Error).message);
+    }
+  }
+);
+
 const qrCodesSlice = createSlice({
-  name: 'qrCodes',
-  initialState,
-  reducers: {
-    addQRCode(state, action: PayloadAction<QRCode>) {
-      state.qrCodes.push(action.payload);
-      console.log('Added QR code to state:', action.payload);
-    },
-    toggleBookmark(state, action: PayloadAction<number>) {
-      const index = state.qrCodes.length - 1 - action.payload;
-      if (state.qrCodes[index]) {
-        state.qrCodes[index].bookmarked = !state.qrCodes[index].bookmarked;
-        console.log('Toggled bookmark for QR code at index:', index);
-      }
-    },
-    deleteQRCode(state, action: PayloadAction<number | null>) {
-      const index = state.qrCodes.length - 1 - (action.payload as number);
-      if (state.qrCodes[index]) {
-        console.log('Deleting QR code at index:', index);
-        state.qrCodes.splice(index, 1);
-      }
-    },
-    setUserAttributes(state, action: PayloadAction<UserAttributes>) {
-      state.userAttributes = action.payload;
-      console.log('(Store)Set user attributes:', action.payload);
-    },
-  },
+    name: "qrCodes",
+    initialState,
+    reducers: {
+        addQRCode(state, action: PayloadAction<QRCode>) {
+            console.log("add qrcode action payload:", action.payload);
+
+            state.qrCodes.push(action.payload);
+            console.log("Added QR code to state:", action.payload);
+        },
+        toggleBookmarkInState(state, action: PayloadAction<QRCodeType>) {
+          const qrCode = action.payload;
+         
+          state.histories = state.histories!.map(b => b.data.id === qrCode.data.id ? { ...b, bookmarked: !qrCode.bookmarked } : b);
+        },
+        deleteQRCodeInState(state, action: PayloadAction<string | null>) {
+          state.histories = state.histories!.filter(qr => qr.data.id !== action.payload);
+        },
+        setUserAttributes(state, action: PayloadAction<UserAttributes>) {
+            state.userAttributes = action.payload;
+            console.log("(Store)Set user attributes:", action.payload);
+        },
+        setScannedHistories(state, action: PayloadAction<QRCodeType[]>) {
+            state.histories = action.payload;
+        },
+        setBookmarks(state, action: PayloadAction<QRCodeType[]>) {
+            state.bookmarks = action.payload;
+        },
+    }
 });

-export const { addQRCode, toggleBookmark, deleteQRCode, setUserAttributes } = qrCodesSlice.actions;
+export const {
+    addQRCode,
+    toggleBookmarkInState,
+    deleteQRCodeInState,
+    setUserAttributes,
+    setScannedHistories,
+} = qrCodesSlice.actions;
+
 export default qrCodesSlice.reducer;
--- a/screens/HistoryScreen.tsx
+++ b/screens/HistoryScreen.tsx
@@ -1,21 +1,22 @@
-import React, { useCallback, useState, useEffect } from 'react';
+import React, { useCallback, useState, useEffect, useRef } from 'react';
 import { View, Text, StyleSheet, FlatList, TouchableOpacity, Image, BackHandler, Modal } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
 import ScannedDataBox from '../components/ScannedDataBox';
 import { Ionicons } from '@expo/vector-icons';
-import { RootState } from '../store';
-import { QRCode, QRCodeType } from '../types';
-import { toggleBookmark, deleteQRCode } from '../actions/qrCodeActions';
+import { RootState, AppDispatch } from '../store';
+import { QRCodeType } from '../types';
+import { toggleBookmark, deleteQRCode, setScannedHistories } from '../reducers/qrCodesReducer';
+
 import useFetchUserAttributes from '../hooks/useFetchUserAttributes';
-import useFetchScannedHistories from '../hooks/useFetchScannedHistories';
 import { getScannedHistories } from '../api/qrCodeAPI';

 const HistoryScreen: React.FC = () => {
-  const dispatch = useDispatch();
-  const qrCodes = useSelector((state: RootState) => state.qrCodes.qrCodes);
+  const dispatch = useDispatch<AppDispatch>();
+  const histories = useSelector((state: RootState) => state.qrCodes.histories);
  const { userAttributes } = useFetchUserAttributes();
-  console.log("sub: ", userAttributes?.sub);
-  const [scannedHistories, setScannedHistories] = useState<QRCodeType []| null>(null);
+  const [showBookmarks, setShowBookmarks] = useState<boolean>(false);
+  const [qrCodeToDelete, setQrCodeToDelete] = useState<string | null>(null);
+  const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
  const [historiesLoading, setHistoriesLoading] = useState(false);
  const [historiesError, setHistoriesError] = useState<string | null>(null);

@@ -23,30 +24,35 @@ const HistoryScreen: React.FC = () => {
    if (!userAttributes?.sub) return;

    try {
-      const data = await getScannedHistories(userAttributes.sub);
-      setScannedHistories(data as unknown as QRCodeType[]);
+      setHistoriesLoading(true);
+      const historiesData = await getScannedHistories(userAttributes.sub);
+      dispatch(setScannedHistories(historiesData));
+
+      setHistoriesLoading(false);
    } catch (error: any) {
      setHistoriesError(error.message);
    } finally {
      setHistoriesLoading(false);
    }
-  }, [userAttributes?.sub]);
+  }, [userAttributes?.sub, dispatch]);

  useEffect(() => {
    if (userAttributes?.sub) {
      fetchHistories();
    }
  }, [userAttributes?.sub, fetchHistories]);
-  console.log("scanned history: ", scannedHistories);
-  
-  
+
+  const handleDelete = useCallback((qrCodeId: string) => {
+    if (userAttributes?.sub) {
+      dispatch(deleteQRCode({ userId: userAttributes.sub, qrCodeId }));
+      setIsModalVisible(false);
+    }
+  }, [dispatch, userAttributes]);
+

  const [selectedData, setSelectedData] = useState<string | null>(null);
  const [selectedScanResult, setSelectedScanResult] = useState<any | null>(null);
  const [selectedType, setSelectedType] = useState<string | null>(null);
-  const [showBookmarks, setShowBookmarks] = useState<boolean>(false);
-  const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
-  const [indexToDelete, setIndexToDelete] = useState<number | null>(null);

  useEffect(() => {
    const backAction = () => {
@@ -64,13 +70,7 @@ const HistoryScreen: React.FC = () => {
    return () => backHandler.remove();
  }, [selectedData]);

-  //const filteredQrCodes = showBookmarks ? qrCodes.filter(qr => qr.bookmarked) : qrCodes.slice().reverse();
-  const filteredQrCodes = showBookmarks ? scannedHistories.filter(qr => {
-    return qr.bookmarked
-  }) : scannedHistories;
-
-  console.log("filtered", filteredQrCodes);
-  console.log("slice", qrCodes.slice().reverse());
+  const filteredQrCodes = showBookmarks ? histories.filter(qr => qr.bookmarked) : histories;

  const handleItemPress = (item: QRCodeType) => {
    // setSelectedData(item.data);
@@ -82,12 +82,6 @@ const HistoryScreen: React.FC = () => {
    // console.log('Selected QR code type:', item.type);
  };

-  const confirmDelete = (index: number) => {
-    setIndexToDelete(index);
-    setIsModalVisible(true);
-    console.log('Confirm delete for QR code at index:', index);
-  };
-
  const clearSelectedData = () => {
    setSelectedData(null);
    setSelectedScanResult(null);
@@ -114,8 +108,8 @@ const HistoryScreen: React.FC = () => {
      {/* List of QR codes */}
      <FlatList
        data={filteredQrCodes}
-        renderItem={({ item, index }) => {
-          console.log('Rendering QR code item:', item);
+        renderItem={({ item }) => {
+        //  console.log('Rendering QR code item:', item);
          return (
            <View style={styles.itemContainer}>
              <View style={styles.itemLeft}>
@@ -130,10 +124,13 @@ const HistoryScreen: React.FC = () => {
                </Text>
              </View>
              <View style={styles.itemRight}>
-                <TouchableOpacity onPress={() => dispatch(toggleBookmark(index))}>
+                <TouchableOpacity onPress={() => dispatch(toggleBookmark({ userId: userAttributes.sub, qrCode: item}))}>
                  <Ionicons name={item.bookmarked ? "bookmark" : "bookmark-outline"} size={24} color={item.bookmarked ? "#2196F3" : "#ff69b4"} />
                </TouchableOpacity>
-                <TouchableOpacity onPress={() => confirmDelete(index)}>
+                <TouchableOpacity onPress={() => {
+                  setQrCodeToDelete(item.data.id);
+                  setIsModalVisible(true);
+                  }}>
                  <Ionicons name="close-circle-outline" size={24} color="#ff69b4" />
                </TouchableOpacity>
              </View>
@@ -159,7 +156,7 @@ const HistoryScreen: React.FC = () => {
            <Text style={styles.modalTitle}>Are you sure?</Text>
            <Text style={styles.modalText}>If bookmarked, this will be removed from both History and Bookmarks.</Text>
            <View style={styles.modalButtons}>
-              <TouchableOpacity style={styles.modalButton} onPress={() => dispatch(deleteQRCode(indexToDelete))}>
+              <TouchableOpacity style={styles.modalButton} onPress={() => handleDelete(qrCodeToDelete!)}>
                <Text style={styles.modalButtonText}>Yes, Delete</Text>
              </TouchableOpacity>
              <TouchableOpacity style={styles.modalButton} onPress={() => setIsModalVisible(false)}>
--- a/screens/QRScannerScreen.tsx
+++ b/screens/QRScannerScreen.tsx
@@ -8,7 +8,7 @@ import { useFocusEffect, useNavigation } from '@react-navigation/native';
 import * as ImagePicker from 'expo-image-picker';
 import ScannedDataBox from '../components/ScannedDataBox';
 import { useDispatch } from 'react-redux';
-import { addQRCode } from '../actions/qrCodeActions'; // Assuming you have actions defined for Redux
+import { addQRCode } from '../reducers/qrCodesReducer'; // Assuming you have actions defined for Redux
 import { detectQRCodeType, verifyURL, checkRedirects } from '../api/qrCodeAPI'; // Import utility functions

 // Main Function
--- a/store.ts
+++ b/store.ts
@@ -8,4 +8,5 @@ const store = configureStore({
 });

 export type RootState = ReturnType<typeof store.getState>;
-export default store;
+export default store;
+export type AppDispatch = typeof store.dispatch;