From d4a2409e322cde408f370bae35c02cf30fcfc89d Mon Sep 17 00:00:00 2001
From: Francesco Minnocci <ad17fmin@uwcad.it>
Date: Wed, 11 Jan 2023 17:21:24 +0100
Subject: [PATCH] chore: make title modifiable, fix inital db value

---
 README.md                    |  2 +-
 client/pages/AdminPage.tsx   | 17 +++++++++++++++--
 client/pages/ProblemPage.tsx | 11 +++++++++++
 client/styles/main.scss      | 24 +++++++++++++++++-------
 server/db/database.ts        |  9 ++++-----
 server/db/example-data.ts    | 11 +----------
 6 files changed, 49 insertions(+), 25 deletions(-)

diff --git a/README.md b/README.md
index 32b23bd..b5bae0d 100644
--- a/README.md
+++ b/README.md
@@ -34,4 +34,4 @@ $ prettier -w '**/*.ts' '**/*.tsx'
 
 # TODO
 
-- [ ] Autenticazione vera magari con OAuth dell'ateneo o Google
\ No newline at end of file
+- [x] Autenticazione vera magari con OAuth dell'ateneo o Google
\ No newline at end of file
diff --git a/client/pages/AdminPage.tsx b/client/pages/AdminPage.tsx
index 434a02b..274a290 100644
--- a/client/pages/AdminPage.tsx
+++ b/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>
diff --git a/client/pages/ProblemPage.tsx b/client/pages/ProblemPage.tsx
index d47db6a..c2ad184 100644
--- a/client/pages/ProblemPage.tsx
+++ b/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}
diff --git a/client/styles/main.scss b/client/styles/main.scss
index 8ba32bf..92f934b 100644
--- a/client/styles/main.scss
+++ b/client/styles/main.scss
@@ -281,6 +281,18 @@ $heading-scale: 1.25;
 // Components
 //
 
+.row {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+
+    @media screen and (max-width: $device-s-width), (pointer: coarse) {
+        flex-direction: column;
+        width: 100%;
+    }
+
+}
+
 .text-body {
     font-family: 'EB Garamond', serif;
     font-weight: 400;
@@ -362,7 +374,7 @@ main.page-home {
         // min-width: 0;
 
         display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(auto, 70ch));
+        grid-template-columns: repeat(auto-fit, minmax(auto, 71ch));
         gap: 2rem;
 
         justify-content: center;
@@ -699,12 +711,6 @@ header {
             font-weight: 400;
         }
 
-        .row {
-            display: flex;
-            gap: 0.5rem;
-            align-items: center;
-        }
-
         .pending {
             color: #1653a3;
             font-style: italic;
@@ -810,6 +816,10 @@ header {
 //
 
 main.page-admin {
+    .problem-title {
+        @extend .row;
+    }
+
     .users-table {
         @extend .table;
 
diff --git a/server/db/database.ts b/server/db/database.ts
index e06499a..2221bf2 100644
--- a/server/db/database.ts
+++ b/server/db/database.ts
@@ -121,11 +121,10 @@ export const createUser: (db: DatabaseConnection, user: User) => Promise<void> =
 
 export const createProblem = (db: DatabaseConnection, { title, content, createdBy }: Omit<Problem, MetaProps>): Promise<ProblemId> =>
     withDatabase(db, state => {
-        const problemIds = Object.keys(state.problems)
-        const nextId = (problemIds.length > 0 ? String(parseInt(problemIds.at(-1)!) + 1) : '1') as ProblemId
+        const id = crypto.randomBytes(4).toString('hex') as ProblemId
 
-        state.problems[nextId] = {
-            id: nextId,
+        state.problems[id] = {
+            id,
             createdAt: new Date().toJSON(),
             deleted: false,
 
@@ -134,7 +133,7 @@ export const createProblem = (db: DatabaseConnection, { title, content, createdB
             createdBy,
         }
 
-        return nextId
+        return id
     })
 
 export const getProblem = (db: DatabaseConnection, id: string): Promise<Problem | null> =>
diff --git a/server/db/example-data.ts b/server/db/example-data.ts
index a34ce07..0da67bd 100644
--- a/server/db/example-data.ts
+++ b/server/db/example-data.ts
@@ -2,16 +2,7 @@ import { UserId } from '../../shared/model'
 import { Database } from './database'
 
 export const initialDatabaseValue: Database = {
-    users: {
-        ['BachoSeven']: {
-            id: 'BachoSeven' as UserId,
-            role: 'admin',
-        },
-        ['aziis98']: {
-            id: 'aziis98' as UserId,
-            role: 'admin',
-        },
-    },
+    users: {},
     problems: {},
     solutions: {},
 }