feat: add recently scanned

Author: nalves599

src/app/(authenticated)/qr/History.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import List from "@/components/List";
+import { UserTile } from "@/components/user/UserTile";
+import { getHistory, getUserFromQRCode } from "@/utils/utils";
+import { useEffect, useState } from "react";
+
+export default function History() {
+  const [history, setHistory] = useState<string[]>([]);
+
+  useEffect(() => {
+    if (window) {
+      setHistory(getHistory());
+    }
+  }, []);
+
+  return !!history.length ? (
+    <List title="Recently Scanned">
+      {history
+        .map(getUserFromQRCode)
+        .map((u) => u && <UserTile key={u.id} user={u} />)}
+    </List>
+  ) : (
+    <></>
+  );
+}

src/app/(authenticated)/qr/page.tsx

@@ -11,6 +11,7 @@ import { convertToAppRole, isCompany } from "@/utils/utils";
 import Link from "next/link";
 import { ScanQrCode } from "lucide-react";
 import BlankPageWithMessage from "@/components/BlankPageMessage";
+import History from "./History";
 
 export default async function QR() {
   const session = await getServerSession(authOptions);
@@ -50,8 +51,8 @@ export default async function QR() {
   })();
 
   return (
-    <div className="container mx-auto flex-1">
-      <div className="flex flex-col h-full justify-center items-center text-center p-4 gap-y-4">
+    <div className="container mx-auto flex flex-col">
+      <div className="flex flex-col h-full justify-center items-center text-center p-4 py-8 gap-y-4">
         <div className="flex flex-col justify-center items-center">
           <QRCode
             className="w-72 h-72 p-4 border-[14px] bg-white rounded-lg"
@@ -85,6 +86,7 @@ export default async function QR() {
           </Link>
         )}
       </div>
+      <History />
     </div>
   );
 }

src/app/(authenticated)/qr/scan/QRScanner.tsx

@@ -9,6 +9,7 @@ import {
   getAchievementFromQRCode,
   getUserFromQRCode,
   isCompany,
+  pushToHistory,
 } from "@/utils/utils";
 import { ReactNode, useCallback, useEffect, useRef, useState } from "react";
 
@@ -50,6 +51,7 @@ export default function QRScanner({ user, cannonToken }: QRScannerProps) {
             );
           }
         }
+        pushToHistory(data);
       } else if (scannedAchievement) {
         const redeemedAchievement =
           await AchievementService.redeemSecretAchievement(

src/components/user/Notes.tsx

@@ -13,7 +13,7 @@ export default function Notes({ notes, onNotesUpdate }: NotesProps) {
   const inputRef = useRef<HTMLTextAreaElement>(null);
 
   return (
-    <List title="Notes">
+    <List title="Notes" description="Notes are only visible to you">
       <textarea
         ref={inputRef}
         className="input resize-y min-h-16 max-h-32"

src/utils/utils.ts

@@ -160,3 +160,19 @@ export function getUserActiveSignatureData(user: User, edition: string) {
     signatures: Object.values(singatureMap),
   };
 }
+
+const HISTORY_KEY = "scan-history";
+
+export function pushToHistory(data: string): string[] {
+  const history = [data, ...getHistory()].slice(0, 20);
+  localStorage.setItem(HISTORY_KEY, JSON.stringify(history));
+  return history;
+}
+
+export function getHistory(): string[] {
+  return JSON.parse(localStorage.getItem(HISTORY_KEY) || "[]");
+}
+
+export function deleteHistory() {
+  localStorage.removeItem(HISTORY_KEY);
+}