refactored summary + flashcards features + better ux

Author: ItzOso

functions/index.js

@@ -36,7 +36,7 @@ export const generateSummary = functions.https.onCall(async (request) => {
     const MAX_DAILY_USAGES = 5;
     const HOURS_24 = 24 * 60 * 60 * 1000;
 
-    if (userData.usagesLeft === 0) {
+    if (userData.usagesLeft <= 0) {
       const lastReset = userData.lastReset?.toMillis?.() ?? 0;
 
       if (Date.now() - lastReset >= HOURS_24) {
@@ -138,7 +138,7 @@ export const generateFlashcards = functions.https.onCall(async (request) => {
     const MAX_DAILY_USAGES = 5;
     const HOURS_24 = 24 * 60 * 60 * 1000;
 
-    if (userData.usagesLeft === 0) {
+    if (userData.usagesLeft <= 0) {
       const lastReset = userData.lastReset?.toMillis?.() ?? 0;
 
       if (Date.now() - lastReset >= HOURS_24) {

package-lock.json

@@ -22,6 +22,7 @@
     "react-icons": "^5.5.0",
     "react-quill-new": "^3.4.6",
     "react-router-dom": "^7.4.0",
+    "react-toastify": "^11.0.5",
     "reactjs-flip-card": "^2.0.3",
     "yup": "^1.6.1"
   },

package.json

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import Navbar from "./components/Navbar";
 import { Navigate, Route, Routes, useLocation } from "react-router-dom";
 import HomePage from "./pages/HomePage";
@@ -17,6 +17,7 @@ function App() {
   const location = useLocation();
   const hideNavbar = ["/signin", "/signup"].includes(location.pathname);
   const { currentUser } = useAuth();
+
   return (
     <div className="container mx-auto px-4 sm:px-6 lg:px-8 ">
       {!hideNavbar && <Navbar />}

src/App.jsx

@@ -4,12 +4,26 @@ import "./index.css";
 import App from "./App.jsx";
 import { AuthProvider } from "./contexts/AuthContext.jsx";
 import { BrowserRouter } from "react-router-dom";
+import { ToastContainer, toast } from "react-toastify";
 
 createRoot(document.getElementById("root")).render(
   <StrictMode>
     <AuthProvider>
       <BrowserRouter>
         <App />
+        <ToastContainer
+          position="top-right"
+          autoClose={5000}
+          hideProgressBar={false}
+          newestOnTop={false}
+          closeOnClick={false}
+          rtl={false}
+          pauseOnFocusLoss
+          draggable
+          pauseOnHover
+          theme="light"
+          className={"text-sm"}
+        />
       </BrowserRouter>
     </AuthProvider>
   </StrictMode>

src/main.jsx

@@ -1,8 +1,14 @@
 import React, { useActionState, useEffect, useState } from "react";
-import { getNote } from "../services/firebaseService";
+import { getNote, updateNote } from "../services/firebaseService";
 import { Link, useNavigate, useParams } from "react-router-dom";
 import ReactFlipCard from "reactjs-flip-card";
 import { GoArrowLeft } from "react-icons/go";
+import { httpsCallable } from "firebase/functions";
+import { db, functions } from "../config/firebase";
+import { doc, getDoc } from "firebase/firestore";
+import { useAuth } from "../contexts/AuthContext";
+import { getPlainText } from "../utils/textHelper";
+import { toast } from "react-toastify";
 
 function FlashcardsViewer() {
   const navigate = useNavigate();
@@ -12,20 +18,50 @@ function FlashcardsViewer() {
   const [flashcards, setFlashcards] = useState([]);
   const [currentIndex, setCurrentIndex] = useState(0);
   const [showAnswer, setShowAnswer] = useState(false);
+  const { currentUser } = useAuth();
 
+  let hasGenerated = false;
   useEffect(() => {
     const fetchNote = async () => {
       setLoading(true);
       try {
         const noteData = await getNote(id);
-        if (noteData) {
+        if (!noteData) {
+          navigate("/");
+        }
+
+        if (noteData.flashcards.length > 0) {
+          // flashcards exist, load them
           setTitle(noteData.title);
           setFlashcards(noteData.flashcards);
-        } else {
-          navigate("/");
+        } else if (!hasGenerated) {
+          // no flashcards, generate them
+          hasGenerated = true;
+
+          const generateFlashcards = httpsCallable(
+            functions,
+            "generateFlashcards"
+          );
+          const results = await generateFlashcards({
+            content: getPlainText(noteData.content),
+          });
+          const flashcards = results.data.flashcards;
+
+          await updateNote(id, { flashcards }); // Save them to the note
+
+          setFlashcards(flashcards);
+
+          // show many credits left
+          const userRef = doc(db, "users", currentUser.uid);
+          const userDoc = await getDoc(userRef);
+          const userData = userDoc.data();
+
+          toast.success(
+            `Flashcards generated! You have ${userData.usagesLeft} credits left.`
+          );
         }
       } catch (error) {
-        console.log(error);
+        console.log("Error in flashcards viwer:", error);
         navigate("/");
       }
       setLoading(false);
@@ -47,7 +83,7 @@ function FlashcardsViewer() {
     }
   };
 
-  if (loading) {
+  if (loading || flashcards.length === 0) {
     return (
       <div className="flex items-center justify-center h-full">
         <div
@@ -63,7 +99,7 @@ function FlashcardsViewer() {
     <div className="mx-auto max-w-3xl text-center mt-16 px-4">
       {/* Title Section */}
       <h2 className="text-xl sm:text-2xl md:text-3xl font-bold text-text mb-8">
-        {`${title} Flashcards`}
+        {`${title || "Untitled Note"} Flashcards`}
       </h2>
 
       {/* Flashcard Display Section */}