Merge pull request #5 from mbianchidev/copilot/add-user-response-feature

Add local storage persistence for user responses to interview questions

Author: mbianchidev

app/practice/page.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect } from 'react';
 import Link from 'next/link';
 import { allQuestions } from '@/lib/questionsData';
+import { getResponse, saveResponse, deleteResponse } from '@/lib/responseStorage';
 
 interface Question {
   id: string;
@@ -17,6 +18,7 @@ export default function PracticePage() {
   const [timer, setTimer] = useState(0);
   const [isActive, setIsActive] = useState(false);
   const [usedQuestions, setUsedQuestions] = useState<Set<string>>(new Set());
+  const [response, setResponse] = useState('');
 
   useEffect(() => {
     let interval: NodeJS.Timeout | null = null;
@@ -43,6 +45,11 @@ export default function PracticePage() {
   const getRandomQuestion = () => {
     if (questions.length === 0) return;
 
+    // Save current response before switching questions (only if not empty)
+    if (currentQuestion && response.trim()) {
+      saveResponse(currentQuestion.id, response);
+    }
+
     // If all questions have been used, reset
     if (usedQuestions.size >= questions.length) {
       setUsedQuestions(new Set());
@@ -58,21 +65,40 @@ export default function PracticePage() {
       const newQuestion = questions[randomIndex];
       setCurrentQuestion(newQuestion);
       setUsedQuestions(new Set([newQuestion.id]));
+      setResponse(''); // Clear the text box for new question
     } else {
       const randomIndex = Math.floor(Math.random() * availableQuestions.length);
       const newQuestion = availableQuestions[randomIndex];
       setCurrentQuestion(newQuestion);
       setUsedQuestions(prev => new Set([...prev, newQuestion.id]));
+      setResponse(''); // Clear the text box for new question
     }
 
     setTimer(0);
     setIsActive(true);
   };
 
   const skipQuestion = () => {
+    // Save current response before skipping (only if not empty)
+    if (currentQuestion && response.trim()) {
+      saveResponse(currentQuestion.id, response);
+    }
     getRandomQuestion();
   };
 
+  const handleSaveResponse = () => {
+    if (currentQuestion) {
+      saveResponse(currentQuestion.id, response);
+    }
+  };
+
+  const handleClearResponse = () => {
+    if (currentQuestion) {
+      deleteResponse(currentQuestion.id);
+      setResponse('');
+    }
+  };
+
   return (
     <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800">
       <div className="container mx-auto px-4 py-8 max-w-4xl">
@@ -131,6 +157,36 @@ export default function PracticePage() {
                   {currentQuestion.text}
                 </p>
               </div>
+
+              <div className="mt-6">
+                <div className="flex justify-between items-center mb-2">
+                  <label 
+                    htmlFor="response" 
+                    className="block text-sm font-medium text-slate-700 dark:text-slate-300"
+                  >
+                    Your Response:
+                  </label>
+                  {response.trim() && (
+                    <button
+                      onClick={handleClearResponse}
+                      className="text-xs px-3 py-1 bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-200 hover:bg-red-200 dark:hover:bg-red-800 rounded transition-colors"
+                    >
+                      Clear Response
+                    </button>
+                  )}
+                </div>
+                <textarea
+                  id="response"
+                  value={response}
+                  onChange={(e) => setResponse(e.target.value)}
+                  onBlur={handleSaveResponse}
+                  placeholder="Type your answer here... (auto-saves)"
+                  className="w-full h-48 px-4 py-3 bg-slate-50 dark:bg-slate-900 border-2 border-slate-200 dark:border-slate-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-slate-900 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-500 resize-y"
+                />
+                <p className="mt-2 text-xs text-slate-500 dark:text-slate-400">
+                  💾 Your response is automatically saved to local storage when you type or switch questions
+                </p>
+              </div>
             </div>
 
             <div className="flex gap-4 justify-center">

app/topics/[categoryId]/QuestionItem.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { getResponse, saveResponse, deleteResponse } from '@/lib/responseStorage';
+
+interface QuestionItemProps {
+  questionId: string;
+  questionText: string;
+  index: number;
+}
+
+export default function QuestionItem({ questionId, questionText, index }: QuestionItemProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [response, setResponse] = useState('');
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+    setResponse(getResponse(questionId));
+  }, [questionId]);
+
+  const hasResponse = isClient && response.length > 0;
+
+  const handleSaveResponse = () => {
+    saveResponse(questionId, response);
+  };
+
+  const handleClearResponse = () => {
+    deleteResponse(questionId);
+    setResponse('');
+  };
+
+  return (
+    <li className="bg-slate-50 dark:bg-slate-700 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-600 transition-colors">
+      <div 
+        className="p-4 cursor-pointer"
+        onClick={() => setIsExpanded(!isExpanded)}
+      >
+        <div className="flex items-start justify-between">
+          <div className="flex-1">
+            <span className="font-medium text-slate-700 dark:text-slate-300 mr-2">
+              {index + 1}.
+            </span>
+            <span className="text-slate-900 dark:text-slate-100">
+              {questionText}
+            </span>
+          </div>
+          <div className="flex items-center gap-2 ml-4">
+            {hasResponse && (
+              <span className="text-xs px-2 py-1 bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded">
+                ✓ Answered
+              </span>
+            )}
+            <span className="text-slate-400 dark:text-slate-500">
+              {isExpanded ? '▲' : '▼'}
+            </span>
+          </div>
+        </div>
+      </div>
+      
+      {isExpanded && (
+        <div className="px-4 pb-4 border-t border-slate-200 dark:border-slate-600 pt-4">
+          <div className="flex justify-between items-center mb-2">
+            <label 
+              htmlFor={`response-${questionId}`}
+              className="block text-sm font-medium text-slate-700 dark:text-slate-300"
+            >
+              Your Response:
+            </label>
+            {response.trim() && (
+              <button
+                onClick={handleClearResponse}
+                className="text-xs px-3 py-1 bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-200 hover:bg-red-200 dark:hover:bg-red-800 rounded transition-colors"
+              >
+                Clear Response
+              </button>
+            )}
+          </div>
+          <textarea
+            id={`response-${questionId}`}
+            value={response}
+            onChange={(e) => setResponse(e.target.value)}
+            onBlur={handleSaveResponse}
+            placeholder="Type your answer here... (auto-saves)"
+            className="w-full h-32 px-3 py-2 bg-white dark:bg-slate-800 border-2 border-slate-200 dark:border-slate-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-slate-900 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-500 resize-y"
+          />
+          <p className="mt-2 text-xs text-slate-500 dark:text-slate-400">
+            💾 Auto-saves when you finish typing
+          </p>
+        </div>
+      )}
+    </li>
+  );
+}

app/topics/[categoryId]/page.tsx

@@ -1,6 +1,7 @@
 import Link from 'next/link';
 import { parseReadme } from '@/lib/parseQuestions';
 import { notFound } from 'next/navigation';
+import QuestionItem from './QuestionItem';
 
 export default async function CategoryPage({ params }: { params: Promise<{ categoryId: string }> }) {
   const { categoryId } = await params;
@@ -35,17 +36,12 @@ export default async function CategoryPage({ params }: { params: Promise<{ categ
               </h2>
               <ul className="space-y-3">
                 {category.questions.map((question, index) => (
-                  <li
+                  <QuestionItem
                     key={question.id}
-                    className="p-4 bg-slate-50 dark:bg-slate-700 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-600 transition-colors"
-                  >
-                    <span className="font-medium text-slate-700 dark:text-slate-300 mr-2">
-                      {index + 1}.
-                    </span>
-                    <span className="text-slate-900 dark:text-slate-100">
-                      {question.text}
-                    </span>
-                  </li>
+                    questionId={question.id}
+                    questionText={question.text}
+                    index={index}
+                  />
                 ))}
               </ul>
             </div>
@@ -61,17 +57,12 @@ export default async function CategoryPage({ params }: { params: Promise<{ categ
               </h2>
               <ul className="space-y-3">
                 {subcategory.questions.map((question, index) => (
-                  <li
+                  <QuestionItem
                     key={question.id}
-                    className="p-4 bg-slate-50 dark:bg-slate-700 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-600 transition-colors"
-                  >
-                    <span className="font-medium text-slate-700 dark:text-slate-300 mr-2">
-                      {index + 1}.
-                    </span>
-                    <span className="text-slate-900 dark:text-slate-100">
-                      {question.text}
-                    </span>
-                  </li>
+                    questionId={question.id}
+                    questionText={question.text}
+                    index={index}
+                  />
                 ))}
               </ul>
             </div>

lib/responseStorage.ts

@@ -0,0 +1,73 @@
+// Utility functions for managing question responses in local storage
+
+const STORAGE_KEY = 'interview-question-responses';
+
+export interface QuestionResponse {
+  questionId: string;
+  response: string;
+  timestamp: number;
+}
+
+export interface ResponseStorage {
+  [questionId: string]: QuestionResponse;
+}
+
+// Get all responses from local storage
+export function getAllResponses(): ResponseStorage {
+  if (typeof window === 'undefined') return {};
+  
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    return stored ? JSON.parse(stored) : {};
+  } catch (error) {
+    console.error('Error reading from local storage:', error);
+    return {};
+  }
+}
+
+// Get response for a specific question
+export function getResponse(questionId: string): string {
+  const responses = getAllResponses();
+  return responses[questionId]?.response || '';
+}
+
+// Save response for a specific question
+export function saveResponse(questionId: string, response: string): void {
+  if (typeof window === 'undefined') return;
+  
+  try {
+    const responses = getAllResponses();
+    responses[questionId] = {
+      questionId,
+      response,
+      timestamp: Date.now(),
+    };
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(responses));
+  } catch (error) {
+    console.error('Error saving to local storage:', error);
+  }
+}
+
+// Delete response for a specific question
+export function deleteResponse(questionId: string): void {
+  if (typeof window === 'undefined') return;
+  
+  try {
+    const responses = getAllResponses();
+    delete responses[questionId];
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(responses));
+  } catch (error) {
+    console.error('Error deleting from local storage:', error);
+  }
+}
+
+// Clear all responses
+export function clearAllResponses(): void {
+  if (typeof window === 'undefined') return;
+  
+  try {
+    localStorage.removeItem(STORAGE_KEY);
+  } catch (error) {
+    console.error('Error clearing local storage:', error);
+  }
+}