chore: make title modifiable, fix inital db value

client/pages/AdminPage.tsx

@@ -14,13 +14,14 @@ import { useCurrentUser } from '../hooks/useCurrentUser'
 
 const CreateProblem = ({}) => {
     const [source, setSource] = useState('')
+    const [title, setTitle] = useState('')
 
     type ProblemFields = {
         title?: string
         content: string
     }
 
-    const createProblem = async () => {
+    const handleCreateProblem = async () => {
         if (source.trim().length === 0) {
             alert('Il campo di testo è vuoto!')
             return
@@ -28,6 +29,7 @@ const CreateProblem = ({}) => {
 
         const id = await server.post<ProblemFields>('/api/problem', {
             content: source,
+            title,
         })
 
         route(prependBaseUrl(`/problem/${id}`))
@@ -35,8 +37,17 @@ const CreateProblem = ({}) => {
 
     return (
         <>
+            <div class="problem-title">
+                <label>Titolo</label>
+                <input
+                    type="text"
+                    value={title}
+                    onInput={e => setTitle(e.target instanceof HTMLInputElement ? e.target.value : '')}
+                    placeholder="Problema..."
+                />
+            </div>
             <MarkdownEditor placeholder="Scrivi un nuovo problema..." {...{ source, setSource }} />
-            <button onClick={createProblem}>Aggiungi Problema</button>
+            <button onClick={handleCreateProblem}>Aggiungi Problema</button>
         </>
     )
 }
@@ -123,6 +134,8 @@ export const AdminPage = ({}) => {
                     <>
                         <hr />
                         <div class="subtitle">Controlli speciali solo per Admin</div>
+                        
+                        {/* TODO: make this work */}
                         <div class="scrollable">
                             <div class="users-table" style={{ '--cols': 4 }}>
                                 <div class="cell header">Username Ateneo</div>

client/pages/ProblemPage.tsx

@@ -53,6 +53,7 @@ export const ProblemPage = ({ id }: RouteProps) => {
 
     const [editing, setEditing] = useState<boolean>(false)
     const [modifiedProblemSource, setModifiedProblemSource] = useState<string>('')
+    const [modifiedProblemTitle, setModifiedProblemTitle] = useState<string>(problem?.title ?? '')
 
     useEffect(() => {
         if (problem) {
@@ -63,6 +64,7 @@ export const ProblemPage = ({ id }: RouteProps) => {
     const updateProblem = async () => {
         await server.patch(`/api/problem/${id}`, {
             content: modifiedProblemSource,
+            title: modifiedProblemTitle,
         })
         refreshProblem()
         setEditing(false)
@@ -92,6 +94,15 @@ export const ProblemPage = ({ id }: RouteProps) => {
                     </>
                 ) : (
                     <>
+                        <div class="problem-title">
+                            <label>Titolo</label>
+                            <input
+                                type="text"
+                                value={modifiedProblemTitle}
+                                onInput={e => setModifiedProblemTitle(e.target instanceof HTMLInputElement ? e.target.value : '')}
+                                placeholder="Problema..."
+                            />
+                        </div>
                         <MarkdownEditor
                             placeholder="Modifica testo del problema..."
                             source={modifiedProblemSource}