histories and bookmark done

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');

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 }
   });
 };
-
+// GET User's Scanned Histories
-export const getScannedHistories = async (userId: String) => {
+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 }
+  });
+};

reducers/qrCodesReducer.ts

@@ -1,39 +1,86 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { createAsyncThunk, createSlice, PayloadAction } from "@reduxjs/toolkit";
-import { QRCode, UserAttributes } from '../types';
+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: [],
+    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',
+    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);
+            console.log("Added QR code to state:", action.payload);
         },
-    toggleBookmark(state, action: PayloadAction<number>) {
+        toggleBookmarkInState(state, action: PayloadAction<QRCodeType>) {
-      const index = state.qrCodes.length - 1 - action.payload;
+          const qrCode = action.payload;
-      if (state.qrCodes[index]) {
+         
-        state.qrCodes[index].bookmarked = !state.qrCodes[index].bookmarked;
+          state.histories = state.histories!.map(b => b.data.id === qrCode.data.id ? { ...b, bookmarked: !qrCode.bookmarked } : b);
-        console.log('Toggled bookmark for QR code at index:', index);
-      }
         },
-    deleteQRCode(state, action: PayloadAction<number | null>) {
+        deleteQRCodeInState(state, action: PayloadAction<string | null>) {
-      const index = state.qrCodes.length - 1 - (action.payload as number);
+          state.histories = state.histories!.filter(qr => qr.data.id !== action.payload);
-      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);
+            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;

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 { RootState, AppDispatch } from '../store';
-import { QRCode, QRCodeType } from '../types';
+import { QRCodeType } from '../types';
-import { toggleBookmark, deleteQRCode } from '../actions/qrCodeActions';
+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 dispatch = useDispatch<AppDispatch>();
-  const qrCodes = useSelector((state: RootState) => state.qrCodes.qrCodes);
+  const histories = useSelector((state: RootState) => state.qrCodes.histories);
   const { userAttributes } = useFetchUserAttributes();
-  console.log("sub: ", userAttributes?.sub);
+  const [showBookmarks, setShowBookmarks] = useState<boolean>(false);
-  const [scannedHistories, setScannedHistories] = useState<QRCodeType []| null>(null);
+  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);
+      setHistoriesLoading(true);
-      setScannedHistories(data as unknown as QRCodeType[]);
+      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 ? histories.filter(qr => qr.bookmarked) : histories;
-  const filteredQrCodes = showBookmarks ? scannedHistories.filter(qr => {
-    return qr.bookmarked
-  }) : scannedHistories;
-
-  console.log("filtered", filteredQrCodes);
-  console.log("slice", qrCodes.slice().reverse());
 
   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 }) => {
+        renderItem={({ item }) => {
-          console.log('Rendering QR code item:', 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)}>

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

store.ts

@@ -9,3 +9,4 @@ const store = configureStore({
 
 export type RootState = ReturnType<typeof store.getState>;
 export default store;
+export type AppDispatch = typeof store.dispatch;