feat: Added login page and wizard also posts

Author: AlexVOiceover

.env.development

@@ -1 +1 @@
-VITE_API_URL=http://localhost:8080/
+VITE_API_URL=http://localhost:8080

data/descriptors.json

@@ -0,0 +1,16 @@
+{
+  "descriptors": [
+    "Family",
+    "Future Plans",
+    "Financial Situation",
+    "Career Goals",
+    "Professional Development",
+    "Work-Life Balance",
+    "Job Satisfaction",
+    "Team Collaboration",
+    "Health & Wellness",
+    "Personal Interests",
+    "Skills & Competencies",
+    "Training & Development"
+  ]
+}

data/preStatements.json

@@ -1,35 +1,32 @@
 [
   {
     "id": "1",
-    "subject": "Eve",
     "verb": "Support",
     "object": "their team",
     "isPublic": true
   },
   {
     "id": "2",
-    "subject": "Eve's coding practice",
+    "descriptor": "coding practice",
     "verb": "Improve",
     "object": "software quality",
     "isPublic": false
   },
   {
     "id": "3",
-    "subject": "Eve",
     "verb": "Create",
     "object": "innovative solutions",
     "isPublic": true
   },
   {
     "id": "4",
-    "subject": "Eve's marketing ideas",
+    "descriptor": "marketing ideas",
     "verb": "Engage",
     "object": "potential customers",
     "isPublic": true
   },
   {
     "id": "5",
-    "subject": "Eve",
     "verb": "Learn",
     "object": "new technologies",
     "isPublic": false

src/App.tsx

@@ -1,28 +1,25 @@
 'use client';
 
-import StatementBuilder from './components/StatementBuilder';
-import StatementWizard from './components/StatementWizard';
-import StatementList from './components/StatementList';
+import React, { useState } from 'react';
 import { StatementsProvider } from './context/StatementsProvider';
+import LoginPage from './components/LoginPage';
+import MainPage from './components/MainPage';
 
-const USERNAME = 'Eve';
+const App: React.FC = () => {
+  // Local state to store the username from the login page.
+  const [username, setUsername] = useState('');
 
-export default function Home() {
   return (
     <StatementsProvider>
-      <main className='min-h-screen bg-gradient-to-b from-gray-50 to-gray-100 py-12'>
-        <div className='container mx-auto px-4 max-w-3xl'>
-          <h1 className='text-3xl font-bold mb-8 text-center'>
-            Statement Builders for {USERNAME}
-          </h1>
-
-          <div className='bg-white rounded-xl shadow-lg p-6  '>
-            <StatementWizard username={USERNAME} />
-            <StatementBuilder username={USERNAME} />
-            <StatementList username={USERNAME} />
-          </div>
-        </div>
-      </main>
+      {username ? (
+        // If username is set, show the main app page.
+        <MainPage username={username} />
+      ) : (
+        // Otherwise, show the login page.
+        <LoginPage onSubmit={setUsername} />
+      )}
     </StatementsProvider>
   );
-}
+};
+
+export default App;

src/components/LoginPage.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+
+interface LoginPageProps {
+  onSubmit: (username: string) => void;
+}
+
+const LoginPage: React.FC<LoginPageProps> = ({ onSubmit }) => {
+  const [name, setName] = useState('');
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (name.trim()) {
+      onSubmit(name.trim());
+    }
+  };
+
+  return (
+    <div className='min-h-screen flex flex-col items-center justify-center p-4'>
+      <h1 className='text-3xl font-bold mb-4'>Welcome!</h1>
+      <p className='mb-4'>Please enter your name to continue:</p>
+      <form onSubmit={handleSubmit} className='w-full max-w-sm'>
+        <Input
+          placeholder='Enter your name'
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+        />
+        <Button type='submit' className='mt-4 w-full'>
+          Continue
+        </Button>
+      </form>
+    </div>
+  );
+};
+
+export default LoginPage;

src/components/MainPage.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import React from 'react';
+import StatementBuilder from './StatementBuilder';
+import StatementWizard from './StatementWizard';
+import StatementList from './StatementList';
+
+interface MainPageProps {
+  username: string;
+}
+
+const MainPage: React.FC<MainPageProps> = ({ username }) => {
+  return (
+    <main className='min-h-screen bg-gradient-to-b from-gray-50 to-gray-100 py-12 '>
+      <div className='container mx-auto px-4'>
+        <h1 className='text-3xl font-bold mb-8 text-center'>
+          Statement Builders for {username}
+        </h1>
+        <div className='flex flex-col justify-center max-w-3xl mx-auto'>
+          <div className='bg-white rounded-xl shadow-lg p-6'>
+            <StatementWizard username={username} />
+            <StatementBuilder username={username} />
+          </div>
+
+          <StatementList username={username} />
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default MainPage;

src/components/StatementBuilder.tsx

@@ -12,23 +12,15 @@ import { Eye, EyeOff } from 'lucide-react';
 import { ConfirmationDialog } from './ui/confirmation-dialog';
 import { useStatements } from '../hooks/useStatements';
 import { postNewStatement } from '../api/statementsApi';
-
-// We reuse the Statement type from your types file; if not, you can define it here:
-interface Statement {
-  id: string;
-  subject: string;
-  verb: string;
-  object: string;
-  isPublic: boolean;
-}
+import type { Statement } from '../../types/types';
 
 interface StatementBuilderProps {
   username: string;
 }
 
 const StatementBuilder: React.FC<StatementBuilderProps> = ({ username }) => {
   // Get the current statements and the dispatch function from context.
-  const { state, dispatch } = useStatements();
+  const { dispatch, state } = useStatements();
   const { statements } = state;
 
   // Local form states.
@@ -42,7 +34,7 @@ const StatementBuilder: React.FC<StatementBuilderProps> = ({ username }) => {
     statement: Statement | null;
   }>({ isOpen: false, statement: null });
 
-  // Callback for creation-mode verb selection.
+  // Callback for verb selection.
   const handleVerbSelect = (selectedVerb: Verb) => {
     const presentTenseVerb = nlp(selectedVerb.name)
       .verbs()

src/components/StatementList.tsx

@@ -50,9 +50,25 @@ const StatementList: React.FC<{ username: string }> = ({ username }) => {
   // If there are no statements, set some defaults.
   useEffect(() => {
     if (statements.length === 0) {
-      dispatch({ type: 'SET_STATEMENTS', payload: preStatements });
+      const newDefaults: Statement[] = (
+        preStatements as Array<
+          Omit<Statement, 'subject'> & { descriptor?: string }
+        >
+      ).map((stmt) => {
+        const subject = stmt.descriptor
+          ? `${username}'s ${stmt.descriptor}`
+          : username;
+        return {
+          ...stmt,
+          subject,
+          // Optionally, regenerate the id:
+          id:
+            Date.now().toString() + Math.random().toString(36).substring(2, 7),
+        };
+      });
+      dispatch({ type: 'SET_STATEMENTS', payload: newDefaults });
     }
-  }, [statements, dispatch]);
+  }, [username, dispatch, statements.length]);
 
   // Handler for editing verb selection in edit mode.
   const handleEditVerbSelect = (selectedVerb: Verb, statementId: string) => {

src/components/StatementWizard.tsx

@@ -11,16 +11,19 @@ import { Button } from './ui/button';
 import { Input } from './ui/input';
 import { Plus, ArrowLeft, Eye, EyeOff } from 'lucide-react';
 import { motion, AnimatePresence } from 'framer-motion';
-import subjectsData from '../../data/subjects.json';
+import descriptorsData from '../../data/descriptors.json';
 import { verbData } from '../../utils/verbUtils';
 import { useStatements } from '../hooks/useStatements';
-import type { SubjectData } from '../../types/types';
-
+import { postNewStatement } from '../api/statementsApi';
 import type React from 'react';
 import type { PreStatement, Statement } from '../../types/types';
 
 type Step = 'closed' | 'who' | 'action' | 'what' | 'privacy';
 
+interface DescriptorsData {
+  descriptors: string[];
+}
+
 const StatementWizard: React.FC<{ username: string }> = ({ username }) => {
   const { dispatch } = useStatements();
 
@@ -36,17 +39,12 @@ const StatementWizard: React.FC<{ username: string }> = ({ username }) => {
 
   // Filter subject tiles based on the provided username.
   const subjectTiles = useMemo(() => {
-    // Cast imported JSON data to an array (ideally typed as SubjectData[])
-    const subjects = subjectsData as SubjectData[];
-    const userSubject = subjects.find(
-      (subject) => subject.subject === username
-    );
-    if (!userSubject) return [];
+    const data = descriptorsData as DescriptorsData;
     return [
-      { label: userSubject.subject, value: userSubject.subject },
-      ...userSubject.descriptors.map((descriptor: string) => ({
-        label: `${userSubject.subject}'s ${descriptor}`,
-        value: `${userSubject.subject}'s ${descriptor}`,
+      { label: username, value: username },
+      ...data.descriptors.map((descriptor: string) => ({
+        label: `${username}'s ${descriptor}`,
+        value: `${username}'s ${descriptor}`,
       })),
     ];
   }, [username]);
@@ -152,13 +150,19 @@ const StatementWizard: React.FC<{ username: string }> = ({ username }) => {
     }
   };
 
-  // Instead of using an onComplete prop, we dispatch a new statement into context.
-  const handleComplete = () => {
+  const handleComplete = async () => {
     const newStatement: Statement = {
       ...selection,
       id: Date.now().toString(),
     };
+
+    // Dispatch the new statement to the context.
     dispatch({ type: 'ADD_STATEMENT', payload: newStatement });
+
+    // Post the new statement to the backend.
+    await postNewStatement(newStatement);
+
+    // Close the wizard.
     handleClose();
   };
 

src/components/ui/subject-selector.tsx

@@ -2,12 +2,19 @@ import React, { useState, useMemo } from 'react';
 import { Check, ChevronsUpDown, Plus } from 'lucide-react';
 import { cn } from '../../../lib/utils';
 import { Button } from './button';
-import { Input } from './input';
 import { Popover, PopoverContent, PopoverTrigger } from './popover';
-import subjectsData from '../../../data/subjects.json';
-import type { SubjectData } from '../../../types/types';
+import { Input } from './input';
+// Import descriptors from the new JSON file.
+import descriptorsData from '../../../data/descriptors.json';
 
-const subjects = subjectsData as SubjectData[];
+interface DescriptorsData {
+  descriptors: string[];
+}
+
+interface SubjectOption {
+  label: string;
+  value: string;
+}
 
 interface SubjectSelectorProps {
   value: string;
@@ -22,36 +29,33 @@ const SubjectSelector: React.FC<SubjectSelectorProps> = ({
   onAddDescriptor,
   username,
 }) => {
-  // Retrieve initial descriptors for the user.
-  const initialDescriptors = useMemo(() => {
-    const subjectData = subjects.find((s) => s.subject === username);
-    return subjectData ? subjectData.descriptors : [];
+  // Build the subject options using the entered name and descriptors from descriptors.json.
+  const subjectTiles: SubjectOption[] = useMemo(() => {
+    const data = descriptorsData as DescriptorsData;
+    const baseOption = { label: username, value: username };
+    const descriptorOptions = data.descriptors.map((descriptor) => ({
+      label: `${username}'s ${descriptor}`,
+      value: `${username}'s ${descriptor}`,
+    }));
+    return [baseOption, ...descriptorOptions];
   }, [username]);
 
-  // Local state for descriptors, search text, popover open state, etc.
-  const [descriptors, setDescriptors] = useState<string[]>(initialDescriptors);
+  // Local state for search, popover open state, and adding a new descriptor.
   const [open, setOpen] = useState(false);
   const [search, setSearch] = useState('');
   const [isAddingNew, setIsAddingNew] = useState(false);
   const [newDescriptor, setNewDescriptor] = useState('');
 
-  // Create the options list: the primary subject and each descriptor option.
+  // Filter the options based on the search text.
   const options = useMemo(() => {
-    const baseOption = { label: username, value: username };
-    const descriptorOptions = descriptors.map((descriptor) => ({
-      label: `${username}'s ${descriptor}`,
-      value: `${username}'s ${descriptor}`,
-    }));
-    // Filter based on search text.
-    return [baseOption, ...descriptorOptions].filter((opt) =>
+    return subjectTiles.filter((opt) =>
       opt.label.toLowerCase().includes(search.toLowerCase())
     );
-  }, [descriptors, search, username]);
+  }, [subjectTiles, search]);
 
   const handleAddNewDescriptor = () => {
     if (newDescriptor.trim()) {
       onAddDescriptor(newDescriptor);
-      setDescriptors((prev) => [...prev, newDescriptor]);
       onChange(`${username}'s ${newDescriptor}`);
       setNewDescriptor('');
       setIsAddingNew(false);