feature: Problem sorting, solution view raw toggle button

client/components/Select.tsx

@@ -1,23 +1,31 @@
 import { StateUpdater } from 'preact/hooks'
 import { JSX } from 'preact/jsx-runtime'
 
-type Props = {
+type Props<K extends string, T extends K> = {
-    options: Record<string, string>
+    options: Record<K, string | JSX.Element>
-    value: string
+    value: T
-    setValue?: StateUpdater<string>
+    setValue?: StateUpdater<K>
 }
 
-export const Select = ({ options, value, setValue }: Props) => (
+export const Select = <K extends string, T extends K>({ options, value, setValue }: Props<K, T>) => {
-    <div class="input-select">
+    const optionValues = new Set(Object.keys(options))
-        <select
+
-            onInput={e => setValue?.(e.target instanceof HTMLSelectElement ? e.target.value : '')}
+    return (
-        >
+        <div class="input-select">
-            {Object.entries(options).map(([k, v]) => (
+            <select
-                <option value={k} selected={value === k}>
+                onInput={e => {
-                    {v}
+                    if (e.target instanceof HTMLSelectElement && optionValues.has(e.target.value)) {
-                </option>
+                        setValue?.(e.target.value as K)
-            ))}
+                    }
-        </select>
+                }}
-        <span class="material-symbols-outlined">expand_more</span>
+            >
-    </div>
+                {Object.entries<string | JSX.Element>(options).map(([k, v]) => (
-)
+                    <option value={k} selected={value === k}>
+                        {v}
+                    </option>
+                ))}
+            </select>
+            <span class="material-symbols-outlined">expand_more</span>
+        </div>
+    )
+}

client/components/Solution.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'preact/hooks'
 import { JSX } from 'preact/jsx-runtime'
 import {
     MetadataProps,
@@ -19,6 +20,7 @@ const STATUS_SELECT_OPTIONS: Record<SolutionStatus, JSX.Element> = {
 
 type Props = {
     id: SolutionId
+    createdAt: string
     sentBy?: UserId
     forProblem: ProblemId
     content: string
@@ -31,6 +33,7 @@ type Props = {
 
 export const Solution = ({
     id,
+    createdAt,
     sentBy,
     forProblem,
     content,
@@ -70,6 +73,14 @@ export const Solution = ({
         refreshSolution?.()
     }
 
+    const [viewRaw, setViewRaw] = useState<boolean>(false)
+
+    const toggleViewRaw = () => {
+        setViewRaw(prev => !prev)
+    }
+
+    const d = new Date(createdAt)
+
     return (
         <div class={['solution', status].join(' ')}>
             <div class="solution-header">
@@ -87,35 +98,38 @@ export const Solution = ({
                             per il <a href={`/problem/${forProblem}`}>Problema {forProblem}</a>
                         </>
                     )}
+                    {!isNaN(d as any) && (
+                        <>
+                            {' del '}
+                            <span title={!isNaN(d as any) ? d.toISOString() : undefined} class="dotted">
+                                {d.getFullYear()}/{d.getMonth().toString().padStart(2, '0')}/
+                                {d.getDate().toString().padStart(2, '0')}{' '}
+                                {d.getHours().toString().padStart(2, '0')}:
+                                {d.getMinutes().toString().padStart(2, '0')}
+                            </span>
+                        </>
+                    )}
                 </div>
             </div>
             <div class="solution-content">
-                <Markdown source={content} />
+                {viewRaw ? (
+                    <pre>
+                        <code>{content}</code>
+                    </pre>
+                ) : (
+                    <Markdown source={content} />
+                )}
             </div>
             {status && (
                 <div class="solution-footer">
-                    {/* <div class="row">
-                        <div class="label">Stato</div>
-                        <Select value={status} options={STATUS_SELECT_OPTIONS} />
-                    </div> */}
                     <div class="row">
                         <div class="status-label">{STATUS_SELECT_OPTIONS[status]}</div>
                         {adminControls && (
                             <>
-                                <button
+                                <button disabled={status === 'correct'} class="icon" onClick={markAsCorrect}>
-                                    disabled={status === 'correct'}
+                                    <span class="material-symbols-outlined correct">check_circle</span>
-                                    class="icon"
-                                    onClick={markAsCorrect}
-                                >
-                                    <span class="material-symbols-outlined correct">
-                                        check_circle
-                                    </span>
                                 </button>
-                                <button
+                                <button disabled={status === 'wrong'} class="icon" onClick={markAsWrong}>
-                                    disabled={status === 'wrong'}
-                                    class="icon"
-                                    onClick={markAsWrong}
-                                >
                                     <span class="material-symbols-outlined wrong">cancel</span>
                                 </button>
                                 {status !== 'pending' && (
@@ -127,6 +141,15 @@ export const Solution = ({
                                 )}
                             </>
                         )}
+                        <button
+                            class="icon"
+                            onClick={toggleViewRaw}
+                            title={!viewRaw ? 'Mostra markdown grezzo' : 'Mostra testo matematicoso'}
+                        >
+                            <span class="material-symbols-outlined">
+                                {!viewRaw ? 'data_object' : 'functions'}
+                            </span>
+                        </button>
                     </div>
                 </div>
             )}

client/hooks.tsx

@@ -44,8 +44,6 @@ type ResourceHookFunction = <T>(
 ) => [T, RefreshFunction, HeuristicStateUpdater<T>]
 
 export const useResource: ResourceHookFunction = (url, initialValue) => {
-    //
-
     const [value, setValue] = useState(initialValue)
 
     function refresh() {

client/pages/Admin.tsx

@@ -1,9 +1,11 @@
 import { route } from 'preact-router'
 import { useState } from 'preact/hooks'
-import { isAdministrator, isStudent, Solution as SolutionModel } from '../../shared/model'
+import { isAdministrator, isStudent, Solution as SolutionModel, SolutionId } from '../../shared/model'
+import { sortByStringKey } from '../../shared/utils'
 import { server } from '../api'
 import { Header } from '../components/Header'
 import { MarkdownEditor } from '../components/MarkdownEditor'
+import { Select } from '../components/Select'
 import { Solution } from '../components/Solution'
 import { useCurrentUser, useListResource, useResource } from '../hooks'
 
@@ -25,6 +27,8 @@ const CreateProblem = ({}) => {
     )
 }
 
+type SortOrder = 'latest' | 'oldest'
+
 export const AdminPage = ({}) => {
     const [user] = useCurrentUser(user => {
         if (!user) {
@@ -37,26 +41,56 @@ export const AdminPage = ({}) => {
     const [solutions, refreshSolutions, setSolutionHeuristic] =
         useListResource<SolutionModel>(`/api/solutions`)
 
+    const [sortOrder, setSortOrder] = useState<SortOrder>('oldest')
+
+    const sortedSolutions = sortByStringKey(solutions, s => s.createdAt, sortOrder === 'oldest')
+
+    const [trackInteracted, setTrackedInteracted] = useState<Set<SolutionId>>(new Set())
+
+    const hasUntrackedPending =
+        sortedSolutions.filter(s => s.status === 'pending' || trackInteracted.has(s.id)).length > 0
+
     return (
         user && (
             <main class="page-admin">
                 <Header {...{ user }} />
                 <div class="subtitle">Nuovo problema</div>
                 <CreateProblem />
-                <div class="subtitle">Soluzioni ancora da approvare/rifiutare</div>
+                <div class="subtitle">Soluzioni da correggere</div>
-                <div class="solution-list">
+                {hasUntrackedPending ? (
-                    {solutions.map(
+                    <div class="solution-list">
-                        (s, index) =>
+                        <div class="controls">
-                            s.status === 'pending' && (
+                            <div class="sort-order">
-                                <Solution
+                                <Select
-                                    adminControls
+                                    value={sortOrder}
-                                    {...s}
+                                    setValue={setSortOrder}
-                                    setSolution={solFn => setSolutionHeuristic(index, solFn)}
+                                    options={{
-                                    refreshSolution={refreshSolutions}
+                                        latest: 'Prima più recenti',
+                                        oldest: 'Prima più antichi',
+                                    }}
                                 />
-                            )
+                            </div>
-                    )}
+                        </div>
-                </div>
+                        {sortedSolutions.map(
+                            (s, index) =>
+                                (s.status === 'pending' || trackInteracted.has(s.id)) && (
+                                    <Solution
+                                        adminControls
+                                        {...s}
+                                        setSolution={solFn => {
+                                            setTrackedInteracted(prev => new Set([...prev, s.id]))
+                                            setSolutionHeuristic(index, solFn)
+                                        }}
+                                        refreshSolution={refreshSolutions}
+                                    />
+                                )
+                        )}
+                    </div>
+                ) : (
+                    <>
+                        <em>Nessuna soluzione ancora da correggere</em>
+                    </>
+                )}
             </main>
         )
     )

client/pages/Home.tsx

@@ -1,17 +1,40 @@
 import { route } from 'preact-router'
 import { useEffect, useState } from 'preact/hooks'
 import { Problem as ProblemModel } from '../../shared/model'
+import { sortByNumericKey, sortByStringKey } from '../../shared/utils'
 import { Header } from '../components/Header'
 
 import { Problem } from '../components/Problem'
 import { Select } from '../components/Select'
 import { useResource, useCurrentUser } from '../hooks'
 
+function byTime(p: ProblemModel): string {
+    return p.createdAt
+}
+
+function bySolvedProblems(p: ProblemModel & { solutionsCount: number }): number {
+    return p.solutionsCount
+}
+
+type SortOrder = 'latest' | 'oldest' | 'top-solved' | 'least-solved'
+
+const SORT_ORDER: Record<SortOrder, boolean> = {
+    'latest': false,
+    'oldest': true,
+    'top-solved': false,
+    'least-solved': true,
+}
+
 export const HomePage = () => {
     const [user] = useCurrentUser()
-    const [problems] = useResource<ProblemModel[]>('/api/problems', [])
+    const [problems] = useResource<(ProblemModel & { solutionsCount: number })[]>('/api/problems', [])
 
-    console.log(problems)
+    const [sortOrder, setSortOrder] = useState<SortOrder>('oldest')
+
+    const sortedProblems =
+        sortOrder === 'latest' || sortOrder === 'oldest'
+            ? sortByStringKey(problems, byTime, SORT_ORDER[sortOrder])
+            : sortByNumericKey(problems, bySolvedProblems, SORT_ORDER[sortOrder])
 
     return (
         <main class="page-home">
@@ -20,7 +43,8 @@ export const HomePage = () => {
                 <div class="fill-row board-controls">
                     <div class="sort-order">
                         <Select
-                            value="oldest"
+                            value={sortOrder}
+                            setValue={setSortOrder}
                             options={{
                                 'latest': 'Prima più recenti',
                                 'oldest': 'Prima più antichi',
@@ -31,7 +55,7 @@ export const HomePage = () => {
                     </div>
                 </div>
 
-                {problems.map(p => (
+                {sortedProblems.map(p => (
                     <Problem {...p} />
                 ))}
             </div>

client/pages/Problem.tsx

@@ -1,9 +1,5 @@
 import { useContext, useState } from 'preact/hooks'
-import {
+import { isAdministrator, Problem as ProblemModel, Solution as SolutionModel } from '../../shared/model'
-    isAdministrator,
-    Problem as ProblemModel,
-    Solution as SolutionModel,
-} from '../../shared/model'
 import { server } from '../api'
 import { Header } from '../components/Header'
 import { MarkdownEditor } from '../components/MarkdownEditor'
@@ -37,6 +33,8 @@ export const ProblemPage = ({ id }: RouteProps) => {
             content: source,
         })
 
+        setSource('')
+
         refreshSolutions()
     }
 

client/styles/main.scss

@@ -35,7 +35,7 @@ textarea {
 
     padding: 1rem;
 
-    box-shadow: -2px 4px 8px 1px #00000010, 0 0 4px 0px #00000010;
+    box-shadow: -2px 4px 6px 1px #00000018, 0 0 4px 0px #00000010;
     border-radius: 0.25rem;
     background: #ffffff;
 }
@@ -162,12 +162,12 @@ button {
     }
 
     &.icon {
-        padding: 0.25rem;
+        padding: 0.125rem;
         display: grid;
         place-content: center;
 
         .material-symbols-outlined {
-            font-size: 20px;
+            font-size: 19px;
         }
     }
 }
@@ -189,6 +189,10 @@ a:visited {
 // Typography
 //
 
+.dotted {
+    text-decoration: underline dotted gray;
+}
+
 .math-inline {
     font-size: 95%;
 }
@@ -324,12 +328,16 @@ details {
 }
 
 .solution-list {
-    width: 100%;
-
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 1rem;
+
+    .controls {
+        display: flex;
+        width: 100%;
+        gap: 1rem;
+    }
 }
 
 header {
@@ -381,7 +389,7 @@ header {
 
     max-width: 80ch;
 
-    box-shadow: -2px 4px 8px 1px #00000010, 0 0 4px 0px #00000010;
+    box-shadow: -2px 4px 6px 1px #00000018, 0 0 4px 0px #00000010;
     border-radius: 0.5rem;
     background: #ffffff;
 
@@ -410,12 +418,12 @@ header {
 }
 
 .solution {
-    padding: 1rem;
+    padding: 1rem 0.5rem 0.5rem 1rem;
 
     width: 100%;
     max-width: 80ch;
 
-    box-shadow: -2px 4px 8px 1px #00000010, 0 0 4px 0px #00000010;
+    box-shadow: -2px 4px 6px 1px #00000018, 0 0 4px 0px #00000010;
     border-radius: 0.5rem;
     background: #ffffff;
 
@@ -438,10 +446,30 @@ header {
         gap: 0.25rem;
 
         font-size: 18px;
+
+        line-height: 1.25;
     }
 
     .solution-content {
         @extend .text-body;
+
+        pre,
+        code {
+            margin: 0;
+            font-family: 'DM Mono', monospace;
+            font-size: 16px;
+
+            background: #f0f0f0;
+        }
+
+        pre {
+            padding: 0.25rem;
+            overflow-x: auto;
+
+            border-radius: 0.25rem;
+        }
+
+        padding-right: 0.5rem;
     }
 
     .solution-footer {
@@ -550,7 +578,7 @@ header {
 
             padding: 1rem;
 
-            box-shadow: -2px 4px 8px 1px #00000010, 0 0 4px 0px #00000010;
+            box-shadow: -2px 4px 6px 1px #00000018, 0 0 4px 0px #00000010;
             border-radius: 0.25rem;
             background: #ffffff;
         }
@@ -622,6 +650,15 @@ header {
     .markdown-editor .preview .preview-content {
         padding: 0.75rem;
     }
+
+    .solution {
+        .solution-content {
+            pre {
+                white-space: pre-line;
+                word-break: break-all;
+            }
+        }
+    }
 }
 
 @media screen and (max-width: $device-m-width), (pointer: coarse) {

shared/utils.ts

@@ -4,3 +4,32 @@ export function validateObjectKeys<K extends string>(obj: any, keys: K[]): boole
     // @ts-ignore
     return Object.keys(obj).every(key => keySet.has(key))
 }
+
+function compareStringKeys(a: string, b: string): number {
+    return a === b ? 0 : a < b ? -1 : 1
+}
+function compareNumberKeys(a: number, b: number): number {
+    return a === b ? 0 : a < b ? -1 : 1
+}
+
+type KeyFn<T, K> = (item: T) => K
+
+export function sortByStringKey<T>(items: T[], keyFn: KeyFn<T, string>, ascending: boolean = true) {
+    return sortByKey(compareStringKeys, items, keyFn, ascending)
+}
+
+export function sortByNumericKey<T>(items: T[], keyFn: KeyFn<T, number>, ascending: boolean = true) {
+    return sortByKey(compareNumberKeys, items, keyFn, ascending)
+}
+
+function sortByKey<T, K>(
+    compareFn: (a: K, b: K) => number,
+    items: T[],
+    keyFn: (item: T) => K,
+    ascending: boolean
+) {
+    const sortedList = [...items]
+    const order = ascending ? 1 : -1
+    sortedList.sort((a, b) => order * compareFn(keyFn(a), keyFn(b)))
+    return sortedList
+}

tsconfig.node.json

@@ -1,6 +1,7 @@
 {
     "compilerOptions": {
         "composite": true,
+        "lib": ["ESNext"],
         "module": "ESNext",
         "moduleResolution": "Node",
         "noImplicitAny": true,