Merge pull request #2 from foundersandcoders/style_questions_counter

Style questions counter

Author: JasonWarrenUK

src/components/Header.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useStatements } from '../hooks/useStatements';
-// import { useQuestions } from '@/hooks/useQuestions';
+
 import {
   Dialog,
   DialogTrigger,
@@ -10,10 +10,12 @@ import {
 } from './ui/dialog';
 import { Button } from './ui/button';
 import { Input } from './ui/input';
-import { User, Edit2, Save, X } from 'lucide-react';
+import { Edit2, Save, X } from 'lucide-react';
 import { Tooltip, TooltipTrigger, TooltipContent } from './ui/tooltip';
 import { validateEmail } from '../../utils/validateEmail';
-import QuestionCounter from './ui/QuestionCounter';
+import QuestionCounter from './ui/questionCounter/QuestionCounter';
+import SmallCircularQuestionCounter from './ui/questionCounter/smallCircularQuestionCounter';
+import LargeCircularQuestionCounter from './ui/questionCounter/LargeCircularQuestionCounter';
 
 const Header: React.FC = () => {
   // const { questions, setQuestions } = useQuestions();
@@ -50,9 +52,9 @@ const Header: React.FC = () => {
               {data.username ? (
                 <span className='mr-2'>Logged as: {data.username}</span>
               ) : (
-                <span>Not logged</span>
+                <span className='mr-2'>Not logged</span>
               )}
-              <User size={24} />
+              <SmallCircularQuestionCounter />
             </div>
           </DialogTrigger>
           <DialogContent headerTitle="User's Data" className='sm:max-w-md p-0'>
@@ -142,6 +144,7 @@ const Header: React.FC = () => {
                 </div>
                 <div className='text-sm text-gray-800'>
                   <QuestionCounter />
+                  <LargeCircularQuestionCounter />
                 </div>
               </div>
             </div>

src/components/MainPage.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import React from 'react';
-// import StatementBuilder from './StatementBuilder';
 import StatementList from './statements/StatementList';
 import { useStatements } from '../hooks/useStatements';
 
@@ -15,12 +14,6 @@ const MainPage: React.FC = () => {
       </h1>
       <div className='container mx-auto px-4'>
         <StatementList username={username} />
-
-        {/* <div className='flex flex-col justify-center max-w-3xl mx-auto'>
-          <div className='bg-white rounded-xl shadow-lg p-6'>
-            <StatementBuilder username={username} />
-          </div>
-        </div> */}
       </div>
     </main>
   );

src/components/StatementBuilder.tsx

@@ -21,7 +21,7 @@ import type { Statement, DescriptorsData } from '../../types/types';
 type Step = 'closed' | 'who' | 'action' | 'object' | 'privacy';
 
 const StatementWizard: React.FC<{ username: string }> = ({ username }) => {
-  const { dispatch } = useStatements();
+  const { setData } = useStatements();
 
   const [isOpen, setIsOpen] = useState(false);
   const [step, setStep] = useState<Step>('closed');
@@ -31,6 +31,7 @@ const StatementWizard: React.FC<{ username: string }> = ({ username }) => {
     verb: '',
     object: '',
     isPublic: false,
+    category: '',
   });
   const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
 
@@ -124,6 +125,7 @@ const StatementWizard: React.FC<{ username: string }> = ({ username }) => {
       verb: '',
       object: '',
       isPublic: false,
+      category: '',
     });
   };
 
@@ -157,7 +159,7 @@ const StatementWizard: React.FC<{ username: string }> = ({ username }) => {
     };
 
     // Dispatch the new statement to the context.
-    dispatch({ type: 'ADD_STATEMENT', payload: newStatement });
+    setData({ type: 'ADD_STATEMENT', payload: newStatement });
 
     // Post the new statement to the backend.
     await postNewStatement(newStatement);

src/components/StatementWizardOld.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { useAnsweredCount } from '../../../hooks/useAnsweredCount';
+
+interface LargeCircularQuestionCounterProps {
+  size?: number; // default 100px
+  strokeWidth?: number; // default 6px
+}
+
+const LargeCircularQuestionCounter: React.FC<
+  LargeCircularQuestionCounterProps
+> = ({ size = 100, strokeWidth = 6 }) => {
+  const { answered, total } = useAnsweredCount();
+  const progress = total > 0 ? Math.round((answered / total) * 100) : 0;
+
+  const radius = (size - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const dashOffset = circumference * (1 - progress / 100);
+
+  return (
+    <div className='relative w-fit'>
+      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+        {/* Background circle */}
+        <circle
+          className='text-gray-200'
+          stroke='currentColor'
+          strokeWidth={strokeWidth}
+          fill='transparent'
+          r={radius}
+          cx={size / 2}
+          cy={size / 2}
+        />
+        {/* Progress circle */}
+        <circle
+          className='text-brand-pink'
+          stroke='currentColor'
+          strokeWidth={strokeWidth}
+          fill='transparent'
+          r={radius}
+          cx={size / 2}
+          cy={size / 2}
+          strokeDasharray={circumference}
+          strokeDashoffset={dashOffset}
+          transform={`rotate(-90 ${size / 2} ${size / 2})`} // ✅ Start from the top
+          style={{ transition: 'stroke-dashoffset 0.35s ease-out' }}
+        />
+      </svg>
+      {/* Percentage Text in Center */}
+      <span className='absolute inset-0 flex items-center justify-center text-lg font-semibold'>
+        {progress}%
+      </span>
+    </div>
+  );
+};
+
+export default LargeCircularQuestionCounter;

src/components/ui/QuestionCounter.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { useAnsweredCount } from '../../../hooks/useAnsweredCount';
+
+const QuestionCounter: React.FC = () => {
+  const { answered, total } = useAnsweredCount(); // Extract values
+
+  return (
+    <div className='text-sm text-gray-700'>
+      {answered} / {total} questions answered
+    </div>
+  );
+};
+
+export default QuestionCounter;