Skip to content

Commit 876fbf2

Browse files
AlexVOiceoverAlexVOiceover
committed
refactor: removed type preStatement
1 parent 718594f commit 876fbf2

File tree

6 files changed

+193
-24
lines changed

6 files changed

+193
-24
lines changed

‎src/components/MainPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import React from 'react';
44
import StatementBuilder from './StatementBuilder';
55
import StatementWizard from './StatementWizard';
6-
import StatementList from './StatementList';
6+
import StatementList from './statements/StatementList';
77

88
interface MainPageProps {
99
username: string;

‎src/components/StatementWizard.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,7 @@ import { verbData } from '../../utils/verbUtils';
1616
import { useStatements } from '../hooks/useStatements';
1717
import { postNewStatement } from '../api/statementsApi';
1818
import type React from 'react';
19-
import type {
20-
PreStatement,
21-
Statement,
22-
SetQuestion,
23-
Step,
24-
} from '../../types/types';
19+
import type { Statement, SetQuestion, Step } from '../../types/types';
2520

2621
//preset questions JSON
2722
import setQuestionsData from '../../data/setQuestions.json';
@@ -47,7 +42,8 @@ const StatementWizard: React.FC<StatementWizardProps> = ({
4742

4843
const [isOpen, setIsOpen] = useState(false);
4944
const [step, setStep] = useState<Step>('closed');
50-
const [selection, setSelection] = useState<PreStatement>({
45+
const [selection, setSelection] = useState<Statement>({
46+
id: '',
5147
subject: '',
5248
verb: '',
5349
object: '',
@@ -103,6 +99,7 @@ const StatementWizard: React.FC<StatementWizardProps> = ({
10399
setSelection((prev) => ({ ...prev, subject: username }));
104100
} else {
105101
setSelection({
102+
id: '',
106103
subject: '',
107104
verb: '',
108105
object: '',

‎src/components/StatementWizardOld.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import { verbData } from '../../utils/verbUtils';
1616
import { useStatements } from '../hooks/useStatements';
1717
import { postNewStatement } from '../api/statementsApi';
1818
import type React from 'react';
19-
import type { PreStatement, Statement } from '../../types/types';
19+
import type { Statement } from '../../types/types';
2020

2121
type Step = 'closed' | 'who' | 'action' | 'what' | 'privacy';
2222

@@ -29,7 +29,8 @@ const StatementWizard: React.FC<{ username: string }> = ({ username }) => {
2929

3030
const [isOpen, setIsOpen] = useState(false);
3131
const [step, setStep] = useState<Step>('closed');
32-
const [selection, setSelection] = useState<PreStatement>({
32+
const [selection, setSelection] = useState<Statement>({
33+
id: '',
3334
subject: '',
3435
verb: '',
3536
object: '',
@@ -120,6 +121,7 @@ const StatementWizard: React.FC<{ username: string }> = ({ username }) => {
120121
setIsOpen(true);
121122
setStep('who');
122123
setSelection({
124+
id: '',
123125
subject: '',
124126
verb: '',
125127
object: '',

‎src/components/statements/StatementItem.tsx‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
import React, { useRef, useEffect } from 'react';
2+
import { Input } from '../ui/input';
3+
import { Button } from '../ui/button';
4+
import SubjectSelector from '../ui/subject-selector';
5+
import VerbSelector from '../ui/VerbSelector';
6+
import { Trash2, Edit2, Save, Eye, EyeOff } from 'lucide-react';
7+
import type { Statement } from '../../../types/types';
8+
9+
export interface StatementItemProps {
10+
statement: Statement;
11+
isEditing: boolean;
12+
editingPart: 'subject' | 'verb' | 'object' | null;
13+
onPartClick: (
14+
part: 'subject' | 'verb' | 'object',
15+
statementId: string
16+
) => void;
17+
onPartUpdate: (
18+
statementId: string,
19+
part: 'subject' | 'verb' | 'object',
20+
value: string
21+
) => void;
22+
onSave: (statementId: string) => void;
23+
onDelete: (statementId: string) => void;
24+
onTogglePublic: (statementId: string) => void;
25+
onEditClick: (statementId: string) => void;
26+
}
27+
28+
const StatementItem: React.FC<StatementItemProps> = ({
29+
statement,
30+
isEditing,
31+
editingPart,
32+
onPartClick,
33+
onPartUpdate,
34+
onSave,
35+
onDelete,
36+
onTogglePublic,
37+
onEditClick,
38+
}) => {
39+
const objectInputRef = useRef<HTMLInputElement>(null);
40+
41+
useEffect(() => {
42+
if (editingPart === 'object' && objectInputRef.current) {
43+
objectInputRef.current.focus();
44+
}
45+
}, [editingPart]);
46+
47+
if (isEditing) {
48+
return (
49+
<div className='flex items-center space-x-2 bg-gray-100 p-2 rounded'>
50+
<div className='flex flex-1 items-center space-x-2'>
51+
{/* Subject */}
52+
<div
53+
onClick={() => onPartClick('subject', statement.id)}
54+
className='cursor-pointer px-2 py-1 rounded bg-blue-100 hover:bg-blue-200'
55+
>
56+
{editingPart === 'subject' ? (
57+
<SubjectSelector
58+
value={statement.subject}
59+
onChange={(value) =>
60+
onPartUpdate(statement.id, 'subject', value)
61+
}
62+
onAddDescriptor={() => {}}
63+
// Here we assume the username is derived from the subject string.
64+
username={statement.subject.split("'s")[0] || statement.subject}
65+
/>
66+
) : (
67+
statement.subject
68+
)}
69+
</div>
70+
{/* Verb */}
71+
<div
72+
className='cursor-pointer px-2 py-1 rounded bg-green-100 hover:bg-green-200'
73+
onClick={() => onPartClick('verb', statement.id)}
74+
>
75+
{editingPart === 'verb' ? (
76+
<VerbSelector
77+
onVerbSelect={(verb) =>
78+
onPartUpdate(statement.id, 'verb', verb.name)
79+
}
80+
onClose={() => onPartClick('verb', '')}
81+
/>
82+
) : (
83+
<span>{statement.verb}</span>
84+
)}
85+
</div>
86+
{/* Object */}
87+
<div
88+
onClick={() => onPartClick('object', statement.id)}
89+
className='cursor-pointer px-2 py-1 rounded bg-yellow-100 hover:bg-yellow-200'
90+
>
91+
{editingPart === 'object' ? (
92+
<Input
93+
ref={objectInputRef}
94+
value={statement.object}
95+
onChange={(e) =>
96+
onPartUpdate(statement.id, 'object', e.target.value)
97+
}
98+
className='w-full'
99+
/>
100+
) : (
101+
statement.object
102+
)}
103+
</div>
104+
</div>
105+
<div className='flex items-center space-x-2 ml-auto'>
106+
<Button
107+
variant='ghost'
108+
size='sm'
109+
onClick={() => onTogglePublic(statement.id)}
110+
className={`${
111+
statement.isPublic
112+
? 'bg-green-50 text-green-500'
113+
: 'bg-gray-50 text-gray-500'
114+
} hover:bg-opacity-75 rounded-md px-3 py-2`}
115+
>
116+
{statement.isPublic ? <Eye size={16} /> : <EyeOff size={16} />}
117+
</Button>
118+
<Button
119+
variant='ghost'
120+
size='sm'
121+
onClick={() => onSave(statement.id)}
122+
className='text-green-500 hover:text-green-700'
123+
>
124+
<Save size={16} />
125+
</Button>
126+
<Button
127+
variant='ghost'
128+
size='sm'
129+
onClick={() => onDelete(statement.id)}
130+
className='text-red-500 hover:text-red-700'
131+
>
132+
<Trash2 size={16} />
133+
</Button>
134+
</div>
135+
</div>
136+
);
137+
}
138+
139+
// Static view when not in editing mode
140+
return (
141+
<div className='flex justify-between items-center bg-gray-100 p-2 rounded'>
142+
<span className='flex-1'>{`${statement.subject} ${statement.verb} ${statement.object}`}</span>
143+
<div className='flex items-center space-x-2 ml-auto'>
144+
<span
145+
className={`inline-flex items-center justify-center px-3 py-2 ${
146+
statement.isPublic ? 'text-green-500' : 'text-gray-400'
147+
}`}
148+
>
149+
{statement.isPublic ? <Eye size={16} /> : <EyeOff size={16} />}
150+
</span>
151+
<Button
152+
variant='ghost'
153+
size='sm'
154+
onClick={() => onEditClick(statement.id)}
155+
className='text-blue-500 hover:text-blue-700'
156+
>
157+
<Edit2 size={16} />
158+
</Button>
159+
<Button
160+
variant='ghost'
161+
size='sm'
162+
onClick={() => onDelete(statement.id)}
163+
className='text-red-500 hover:text-red-700'
164+
>
165+
<Trash2 size={16} />
166+
</Button>
167+
</div>
168+
</div>
169+
);
170+
};
171+
172+
export default StatementItem;

src/components/StatementList.tsx renamed to src/components/statements/StatementList.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
'use client';
22

33
import React, { useState, useRef, useEffect } from 'react';
4-
import { useStatements } from '../hooks/useStatements';
5-
import SubjectSelector from './ui/subject-selector';
6-
import VerbSelector from './ui/VerbSelector';
4+
import { useStatements } from '../../hooks/useStatements';
5+
import SubjectSelector from '../ui/subject-selector';
6+
import VerbSelector from '../ui/VerbSelector';
77
// import { Label } from '../components/ui/input';
8-
import { Input } from '../components/ui/input';
9-
import { Button } from './ui/button';
8+
import { Input } from '../ui/input';
9+
import { Button } from '../ui/button';
1010
import nlp from 'compromise';
1111
import { Trash2, Edit2, Save, Eye, EyeOff } from 'lucide-react';
12-
import { ConfirmationDialog } from './ui/confirmation-dialog';
13-
import type { Statement, Verb } from '../../types/types';
14-
import preStatements from '../../data/preStatements.json';
12+
import { ConfirmationDialog } from '../ui/confirmation-dialog';
13+
import type { Statement, Verb, Action } from '../../../types/types';
14+
import preStatements from '../../../data/preStatements.json';
1515

1616
const StatementList: React.FC<{ username: string }> = ({ username }) => {
1717
const { state, dispatch } = useStatements();

‎types/types.ts‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,16 @@
11
export interface Action {
2+
id: string;
23
creationDate: string;
3-
byDate: string;
4+
dueDate: string;
45
action: string;
56
}
6-
7-
export interface PreStatement {
7+
export interface Statement {
8+
id: string;
89
subject: string;
910
verb: string;
1011
object: string;
1112
adverbial?: string;
1213
isPublic: boolean;
13-
}
14-
export interface Statement extends PreStatement {
15-
id: string;
1614
actions?: Action[];
1715
}
1816

0 commit comments

Comments
 (0)