feat: Implemented Add Actions

AlexVOiceover · AlexVOiceover · commit 862dd2c4b863 · 2025-02-16T19:41:41.000Z
diff --git a/src/api/statementsApi.ts b/src/api/statementsApi.ts
@@ -30,3 +30,22 @@ export async function postNewStatement(statement: Statement): Promise<void> {
     console.error('Error posting new statement:', error);
   }
 }
+
+export async function updateStatement(statement: Statement): Promise<void> {
+  try {
+    const response = await fetch(`${API_URL}/updateEntry`, {
+      method: 'PUT', // or PATCH, depending on the backend
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(statement),
+    });
+    if (!response.ok) {
+      throw new Error(`HTTP error on update! status: ${response.status}`);
+    }
+    const data = await response.json();
+    console.log('Successfully updated statement:', data);
+  } catch (error) {
+    console.error('Error updating statement:', error);
+  }
+}
diff --git a/src/components/statements/ActionPreview.tsx b/src/components/statements/ActionPreview.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { format } from 'date-fns';
 import { MoreVertical, Edit2, Trash2, Plus } from 'lucide-react';
 import { Button } from '../ui/button';
+import { Input } from '../ui/input';
 import {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -14,7 +15,7 @@ export interface ActionPreviewProps {
   actions: Action[];
   onEditAction: (actionId: string) => void;
   onDeleteAction: (actionId: string) => void;
-  onAddAction: () => void;
+  onAddAction: (newAction: { text: string; dueDate: string }) => void;
 }
 
 const ActionPreview: React.FC<ActionPreviewProps> = ({
@@ -23,6 +24,21 @@ const ActionPreview: React.FC<ActionPreviewProps> = ({
   onDeleteAction,
   onAddAction,
 }) => {
+  const [newAction, setNewAction] = React.useState<{
+    text: string;
+    dueDate: string;
+  }>({
+    text: '',
+    dueDate: '',
+  });
+
+  const handleAddAction = () => {
+    if (newAction.text && newAction.dueDate) {
+      onAddAction(newAction);
+      setNewAction({ text: '', dueDate: '' });
+    }
+  };
+
   return (
     <div className='space-y-2 mt-4'>
       {actions.map((action) => (
@@ -58,12 +74,23 @@ const ActionPreview: React.FC<ActionPreviewProps> = ({
           </DropdownMenu>
         </div>
       ))}
-      <div
-        className='bg-gray-50 p-3 rounded-lg flex items-center justify-center cursor-pointer hover:bg-gray-100'
-        onClick={onAddAction}
-      >
-        <Plus className='w-4 h-4 mr-2' />
-        <span>Add Action</span>
+      <div className='space-y-2 pt-4 border-t'>
+        <Input
+          placeholder='New action'
+          value={newAction.text}
+          onChange={(e) => setNewAction({ ...newAction, text: e.target.value })}
+        />
+        <Input
+          type='date'
+          value={newAction.dueDate}
+          onChange={(e) =>
+            setNewAction({ ...newAction, dueDate: e.target.value })
+          }
+        />
+        <Button onClick={handleAddAction} className='w-full'>
+          <Plus className='w-4 h-4 mr-2' />
+          Add Action
+        </Button>
       </div>
     </div>
   );
diff --git a/src/components/statements/ActionsCounter.tsx b/src/components/statements/ActionsCounter.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+
+/**
+ * Props:
+ * - count: The total number of actions.
+ * - expanded?: whether the actions are expanded (to style differently).
+ *
+ * Behavior:
+ * - Displays a small pill with "no actions" if count is 0,
+ *   or "1 action" if count is 1, or "X actions" otherwise.
+ */
+interface ActionsCounterProps {
+  count: number;
+  expanded?: boolean;
+}
+
+const ActionsCounter: React.FC<ActionsCounterProps> = ({
+  count,
+  expanded = false,
+}) => {
+  const baseClasses =
+    'inline-flex items-center rounded-full px-3 py-1 text-sm transition-colors cursor-pointer';
+  const normalClasses = 'bg-gray-100 text-gray-600';
+  const expandedClasses = 'bg-blue-100 text-blue-600';
+
+  const displayText =
+    count === 0
+      ? 'no actions'
+      : `${count} ${count === 1 ? 'action' : 'actions'}`;
+
+  return (
+    <span
+      className={`${baseClasses} ${expanded ? expandedClasses : normalClasses}`}
+    >
+      {displayText}
+    </span>
+  );
+};
+
+export default ActionsCounter;
diff --git a/src/components/statements/StatementItem.tsx b/src/components/statements/StatementItem.tsx
@@ -11,6 +11,8 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
 } from '../ui/dropdown-menu';
+import ActionsCounter from './ActionsCounter';
+import ActionPreview from './ActionPreview';
 
 export interface StatementItemProps {
   statement: Statement;
@@ -29,6 +31,14 @@ export interface StatementItemProps {
   onDelete: (statementId: string) => void;
   onTogglePublic: (statementId: string) => void;
   onEditClick: (statementId: string) => void;
+  // Optional callbacks for action preview functionality
+  onEditAction?: (actionId: string) => void;
+  onDeleteAction?: (actionId: string) => void;
+  // Optional callback: receives the statement id and new action details.
+  onAddAction?: (
+    statementId: string,
+    newAction: { text: string; dueDate: string }
+  ) => void;
 }
 
 const StatementItem: React.FC<StatementItemProps> = ({
@@ -41,7 +51,11 @@ const StatementItem: React.FC<StatementItemProps> = ({
   onDelete,
   onTogglePublic,
   onEditClick,
+  onEditAction = () => {},
+  onDeleteAction = () => {},
+  onAddAction = () => {},
 }) => {
+  const [isActionsExpanded, setIsActionsExpanded] = React.useState(false);
   const objectInputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
@@ -145,37 +159,69 @@ const StatementItem: React.FC<StatementItemProps> = ({
 
   // Static view when not in editing mode with grouped Edit and Delete
   return (
-    <div className='flex justify-between items-center bg-gray-100 p-2 rounded'>
-      <span
-        className={`inline-flex items-center justify-center px-3 py-2 ${
-          statement.isPublic ? 'text-green-500' : 'text-gray-400'
-        }`}
-      >
-        {statement.isPublic ? <Eye size={16} /> : <EyeOff size={16} />}
-      </span>
-      <span className='flex-1'>{`${statement.subject} ${statement.verb} ${statement.object}`}</span>
-      <div className='flex items-center space-x-2 ml-auto'>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <button onClick={(e) => e.stopPropagation()}>
-              <MoreVertical size={18} className='text-gray-500' />
-            </button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align='end'>
-            <DropdownMenuItem onClick={() => onEditClick(statement.id)}>
-              <Edit2 className='mr-2 h-4 w-4' />
-              Edit
-            </DropdownMenuItem>
-            <DropdownMenuItem
-              onClick={() => onDelete(statement.id)}
-              className='text-red-600'
-            >
-              <Trash2 className='mr-2 h-4 w-4' />
-              Delete
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
+    <div className='bg-white border rounded-md p-3 space-y-2 shadow-sm'>
+      {/* Top row: statement, actions counter, etc. */}
+      <div className='flex items-center justify-between'>
+        {/* Left side: privacy icon + statement text */}
+        <div className='flex items-center space-x-2'>
+          <span
+            className={`inline-flex items-center justify-center ${
+              statement.isPublic ? 'text-green-500' : 'text-gray-400'
+            }`}
+          >
+            {statement.isPublic ? <Eye size={16} /> : <EyeOff size={16} />}
+          </span>
+          <span>{`${statement.subject} ${statement.verb} ${statement.object}`}</span>
+        </div>
+
+        {/* Right side: actions counter + dropdown */}
+        <div className='flex items-center space-x-4'>
+          {/* Actions counter - click to expand/collapse */}
+          <div
+            onClick={() => setIsActionsExpanded((prev) => !prev)}
+            className='cursor-pointer'
+          >
+            <ActionsCounter
+              count={statement.actions?.length ?? 0}
+              expanded={isActionsExpanded}
+            />
+          </div>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <button onClick={(e) => e.stopPropagation()}>
+                <MoreVertical size={18} className='text-gray-500' />
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align='end'>
+              <DropdownMenuItem onClick={() => onEditClick(statement.id)}>
+                <Edit2 className='mr-2 h-4 w-4' />
+                Edit
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={() => onDelete(statement.id)}
+                className='text-red-600'
+              >
+                <Trash2 className='mr-2 h-4 w-4' />
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
       </div>
+
+      {/* Inline actions preview if expanded */}
+      {isActionsExpanded && (
+        <div className='mt-2'>
+          <ActionPreview
+            actions={statement.actions ?? []}
+            onEditAction={onEditAction}
+            onDeleteAction={onDeleteAction}
+            onAddAction={(newAction) =>
+              onAddAction && onAddAction(statement.id, newAction)
+            }
+          />
+        </div>
+      )}
     </div>
   );
 };
diff --git a/src/components/statements/StatementList.tsx b/src/components/statements/StatementList.tsx
@@ -7,6 +7,7 @@ import { ConfirmationDialog } from '../ui/confirmation-dialog';
 import type { Statement } from '../../../types/types';
 import preStatements from '../../../data/preStatements.json';
 import StatementItem from './StatementItem';
+import { updateStatement } from '../../api/statementsApi';
 
 const StatementList: React.FC<{ username: string }> = ({ username }) => {
   const { state, dispatch } = useStatements();
@@ -128,6 +129,34 @@ const StatementList: React.FC<{ username: string }> = ({ username }) => {
     }
   };
 
+  // NEW: handleAddAction callback for adding a new action to a statement.
+  const handleAddAction = (
+    statementId: string,
+    newAction: { text: string; dueDate: string }
+  ) => {
+    const actionObj = {
+      id: Date.now().toString(),
+      creationDate: new Date().toISOString(),
+      text: newAction.text,
+      dueDate: newAction.dueDate,
+    };
+
+    const statementToUpdate = statements.find((s) => s.id === statementId);
+    if (!statementToUpdate) return;
+
+    const updatedActions = statementToUpdate.actions
+      ? [...statementToUpdate.actions, actionObj]
+      : [actionObj];
+
+    const updatedStatement: Statement = {
+      ...statementToUpdate,
+      actions: updatedActions,
+    };
+
+    dispatch({ type: 'UPDATE_STATEMENT', payload: updatedStatement });
+    updateStatement(updatedStatement);
+  };
+
   return (
     <div className='mt-8 bg-white rounded-xl shadow-lg p-6 w-full'>
       <h2 className='text-xl font-semibold mb-4'>Created Statements</h2>
@@ -146,6 +175,7 @@ const StatementList: React.FC<{ username: string }> = ({ username }) => {
               onDelete={handleDeleteClick}
               onTogglePublic={handleTogglePublic}
               onEditClick={handleEditClick}
+              onAddAction={handleAddAction}
             />
           </li>
         ))}
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
@@ -5,7 +5,6 @@ import type { DialogProps } from '@radix-ui/react-dialog';
 import { DialogTitle } from '@radix-ui/react-dialog';
 import { Command as CommandPrimitive } from 'cmdk';
 import { Search } from 'lucide-react';
-
 import { cn } from '../../../lib/utils';
 import { Dialog, DialogContent, DialogDescription } from './dialog';
 
