separating storage of problems

javydevx · javydevx · commit da43f2afc15a · 2025-12-05T08:47:51.000+01:00
diff --git a/README.md b/README.md
@@ -9,23 +9,27 @@ A modern, interactive web application to track your progress through the famous
 ## ✨ Features
 
 ### 📊 Progress Tracking
+
 - **Complete Problem Tracking**: Mark problems as solved with automatic date tracking
 - **Visual Progress Stats**: See your progress across Easy, Medium, and Hard difficulties
 - **Category Filtering**: Filter by problem categories (Arrays & Hashing, Two Pointers, etc.)
 - **Difficulty Filtering**: Filter by Easy, Medium, or Hard problems
 
 ### 🔄 Spaced Repetition System
+
 - **Scientifically-Based Intervals**: Review problems at optimal intervals (1, 3, 7, 14, 30 days)
 - **Smart Review Scheduling**: Automatic calculation of review due dates
 - **Due Today Filter**: Quickly see which problems need review today
 - **Visual Review Status**: Color-coded review buttons showing completion status
 
 ### 💾 Data Persistence
+
 - **Local Storage**: All progress automatically saved to browser's local storage
 - **Export/Import**: Backup your progress with JSON export/import functionality
 - **Cross-Session Persistence**: Progress survives browser restarts and refreshes
 
 ### 🎨 Modern UI/UX
+
 - **Responsive Design**: Works perfectly on desktop, tablet, and mobile devices
 - **Clean Interface**: Modern, distraction-free design using Tailwind CSS
 - **Interactive Elements**: Hover effects, color-coded status indicators
@@ -38,22 +42,27 @@ A modern, interactive web application to track your progress through the famous
 ## 🛠️ Installation
 
 ### Prerequisites
+
 - Node.js
 - npm or yarn
 
 ### Setup
+
 1. **Clone the repository**
+
    ```bash
    git clone https://github.com/javydevx/leetcode-tracker.git
    cd leetcode-tracker
    ```
 
 2. **Install dependencies**
+
    ```bash
    npm install
    ```
 
 3. **Start development server**
+
    ```bash
    npm run dev
    ```
@@ -72,25 +81,29 @@ The built files will be in the `dist/` directory, ready for deployment.
 ## 🎯 How to Use
 
 ### Getting Started
+
 1. **Mark Problems as Solved**: Click the circle icon next to any problem when you complete it
 2. **Review Schedule Appears**: Once solved, you'll see 5 review buttons (R1-R5) with due dates
 3. **Complete Reviews**: Click review buttons when you successfully review the problem
 4. **Track Progress**: Use filters and stats to monitor your overall progress
 
 ### Spaced Repetition Schedule
+
 - **R1**: Review after 1 day
 - **R2**: Review after 3 days  
 - **R3**: Review after 7 days (1 week)
 - **R4**: Review after 14 days (2 weeks)
 - **R5**: Review after 30 days (1 month)
 
 ### Color Coding
+
 - 🟢 **Green**: Review completed
 - 🟡 **Yellow**: Due today
 - 🔴 **Red**: Overdue
 - ⚪ **Gray**: Future review
 
 ### Data Management
+
 - **Export**: Download your progress as a JSON file for backup
 - **Import**: Restore progress from a previously exported file
 - **Clear All**: Reset all progress (with confirmation dialog)
@@ -114,7 +127,7 @@ The built files will be in the `dist/` directory, ready for deployment.
 
 ## 📋 Roadmap
 
-- [ ] Dark mode support
+- [x] Dark mode support
 - [ ] Custom problem sets
 - [ ] Study streaks tracking
 - [ ] Performance analytics
diff --git a/src/components/ProblemTable.jsx b/src/components/ProblemTable.jsx
@@ -118,31 +118,38 @@ const ProblemTable = ({
                   >
                     {problem.difficulty}
                   </td>
-                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100 flex gap-2 flex-wrap">
-                    {problem.companies?.map((company, idx) => (
-                      <div
-                        key={idx}
-                        className="flex items-center gap-1 relative group"
-                      >
-                        {company.logo ? (
-                          <img
-                            src={company.logo}
-                            alt={company.name}
-                            className="h-5 w-5 object-contain cursor-pointer"
-                            title={company.name}
-                          />
-                        ) : (
-                          <div className="h-5 w-5 bg-gray-300 dark:bg-gray-700 rounded flex items-center justify-center text-xs font-semibold text-gray-800 dark:text-gray-100 cursor-pointer group-hover:block relative">
-                            {company.name[0]}
-                            <span className="absolute bottom-full mb-1 hidden group-hover:block bg-gray-700 text-white text-xs px-2 py-1 rounded whitespace-nowrap">
-                              {company.name}
-                            </span>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
+                    <div className="flex items-center gap-2 flex-wrap h-full">
+                      {problem.companies && problem.companies.length > 0 ? (
+                        problem.companies.map((company, idx) => (
+                          <div
+                            key={idx}
+                            className="flex items-center gap-1 relative group"
+                          >
+                            {company.logo ? (
+                              <img
+                                src={company.logo}
+                                alt={company.name}
+                                className="h-5 w-5 object-contain cursor-pointer"
+                                title={company.name}
+                              />
+                            ) : (
+                              <div className="h-5 w-5 bg-gray-300 dark:bg-gray-700 rounded flex items-center justify-center text-xs font-semibold text-gray-800 dark:text-gray-100 cursor-pointer group-hover:block relative">
+                                {company.name[0]}
+                                <span className="absolute bottom-full mb-1 hidden group-hover:block bg-gray-700 text-white text-xs px-2 py-1 rounded whitespace-nowrap">
+                                  {company.name}
+                                </span>
+                              </div>
+                            )}
                           </div>
-                        )}
-                      </div>
-                    ))}
+                        ))
+                      ) : (
+                        <span className="text-sm text-red-500 dark:text-red-400">
+                          No companies data yet
+                        </span>
+                      )}
+                    </div>
                   </td>
-
                   <td className="px-6 py-4 whitespace-nowrap">
                     <button
                       onClick={() => toggleComplete(problem.id)}
diff --git a/src/data/blind75.json b/src/data/blind75.json
@@ -1,10 +1,10 @@
 [
   {
     "id": 1,
-    "name": "Contains Duplicate",
+    "name": "Longest Consecutive Sequence",
     "category": "Arrays & Hashing",
     "difficulty": "Easy",
     "day": 1,
-    "url": "https://neetcode.io/problems/duplicate-integer"
+    "url": "https://leetcode.com/problems/longest-consecutive-sequence/description/?envType=problem-list-v2&envId=oizxjoit"
   }
 ]
diff --git a/src/pages/NeetCodeTracker.jsx b/src/pages/NeetCodeTracker.jsx
@@ -27,15 +27,25 @@ const intervals = [1, 3, 7, 14, 30];
 
 const NeetCodeTracker = () => {
   // --- Local state with localStorage ---
-  const [progress, setProgress] = useState(() => {
-    try {
-      const savedProgress = localStorage.getItem("leetcode-progress");
-      return savedProgress ? JSON.parse(savedProgress) : {};
-    } catch (error) {
-      console.error("Error loading progress from localStorage:", error);
-      return {};
-    }
-  });
+    const [progress, setProgress] = useState(() => {
+      try {
+        const savedProgress = localStorage.getItem("leetcode-progress-v2");
+        return savedProgress
+          ? JSON.parse(savedProgress)
+          : {
+              "Blind 75": {},
+              "LeetCode 75": {},
+              "NeetCode 150": {},
+            };
+      } catch (error) {
+        console.error("Error loading progress from localStorage:", error);
+        return {
+          "Blind 75": {},
+          "LeetCode 75": {},
+          "NeetCode 150": {},
+        };
+      }
+    });
 
   const [filterCategory, setFilterCategory] = useState("All");
   const [filterDifficulty, setFilterDifficulty] = useState("All");
@@ -44,15 +54,16 @@ const NeetCodeTracker = () => {
   const [selectedList, setSelectedList] = useState("NeetCode 150");
 
 
-  // Save progress to localStorage whenever it changes
+// Save progress to localStorage whenever it changes
   useEffect(() => {
     try {
-      localStorage.setItem("leetcode-progress", JSON.stringify(progress));
+      localStorage.setItem("leetcode-progress-v2", JSON.stringify(progress));
     } catch (error) {
       console.error("Error saving progress to localStorage:", error);
     }
   }, [progress]);
 
+
   // --- Helpers ---
   const today = new Date().toISOString().split("T")[0];
 
@@ -70,7 +81,8 @@ const NeetCodeTracker = () => {
   const toggleComplete = (problemId, reviewIndex = null) => {
     const todayStr = new Date().toISOString().split("T")[0];
     setProgress((prev) => {
-      const current = prev[problemId] || {
+      const listProgress = prev[selectedList] || {};
+      const current = listProgress[problemId] || {
         solved: false,
         reviews: Array(5).fill(false),
         dates: {},
@@ -80,12 +92,15 @@ const NeetCodeTracker = () => {
         const newSolved = !current.solved;
         return {
           ...prev,
-          [problemId]: {
-            ...current,
-            solved: newSolved,
-            solvedDate: newSolved ? todayStr : null,
-            reviews: newSolved ? current.reviews : Array(5).fill(false),
-            dates: newSolved ? { ...current.dates, initial: todayStr } : {},
+          [selectedList]: {
+            ...listProgress,
+            [problemId]: {
+              ...current,
+              solved: newSolved,
+              solvedDate: newSolved ? todayStr : null,
+              reviews: newSolved ? current.reviews : Array(5).fill(false),
+              dates: newSolved ? { ...current.dates, initial: todayStr } : {},
+            },
           },
         };
       } else {
@@ -99,36 +114,41 @@ const NeetCodeTracker = () => {
         }
         return {
           ...prev,
-          [problemId]: { ...current, reviews: newReviews, dates: newDates },
+          [selectedList]: {
+            ...listProgress,
+            [problemId]: { ...current, reviews: newReviews, dates: newDates },
+          },
         };
       }
     });
   };
 
   const problems = problemLists[selectedList];
+  const currentProgress = progress[selectedList] || {};
+
   const categories = [
     "All",
     ...Array.from(new Set(problems.map((p) => p.category))),
   ];
   const difficulties = ["All", "Easy", "Medium", "Hard"];
 
-  const stats = {
-    total: problems.length,
-    solved: Object.values(progress).filter((p) => p.solved).length,
-    easy: problems.filter(
-      (p) => p.difficulty === "Easy" && progress[p.id]?.solved
-    ).length,
-    medium: problems.filter(
-      (p) => p.difficulty === "Medium" && progress[p.id]?.solved
-    ).length,
-    hard: problems.filter(
-      (p) => p.difficulty === "Hard" && progress[p.id]?.solved
-    ).length,
-  };
+   const stats = {
+     total: problems.length,
+     solved: problems.filter((p) => currentProgress[p.id]?.solved).length,
+     easy: problems.filter(
+       (p) => p.difficulty === "Easy" && currentProgress[p.id]?.solved
+     ).length,
+     medium: problems.filter(
+       (p) => p.difficulty === "Medium" && currentProgress[p.id]?.solved
+     ).length,
+     hard: problems.filter(
+       (p) => p.difficulty === "Hard" && currentProgress[p.id]?.solved
+     ).length,
+   };
 
   const getDueProblems = () => {
     return problems.filter((problem) => {
-      const prob = progress[problem.id];
+      const prob = currentProgress[problem.id];
       if (!prob || !prob.solved) return false;
       const nextReviews = calculateNextReviews(prob.solvedDate);
       return nextReviews.some(
@@ -282,7 +302,7 @@ const NeetCodeTracker = () => {
         {/* Problems Table */}
         <ProblemTable
           problems={problems}
-          progress={progress}
+          progress={currentProgress}
           toggleComplete={toggleComplete}
           calculateNextReviews={calculateNextReviews}
           filterCategory={filterCategory}

Original file line number	Diff line number	Diff line change
`@@ -1,10 +1,10 @@`
`1`	`1`	`[`
`2`	`2`	`{`
`3`	`3`	`"id": 1,`
`4`		`- "name": "Contains Duplicate",`
	`4`	`+ "name": "Longest Consecutive Sequence",`
`5`	`5`	`"category": "Arrays & Hashing",`
`6`	`6`	`"difficulty": "Easy",`
`7`	`7`	`"day": 1,`
`8`		`- "url": "https://neetcode.io/problems/duplicate-integer"`
	`8`	`+ "url": "https://leetcode.com/problems/longest-consecutive-sequence/description/?envType=problem-list-v2&envId=oizxjoit"`
`9`	`9`	`}`
`10`	`10`	`]`