React Admin: Problems administration

package.json

@@ -33,7 +33,7 @@
     "mathjax-react": "^2.0.1",
     "next": "^13.4.12",
     "react": "^18.2.0",
-    "react-admin": "^4.10.2",
+    "react-admin": "^4.16.15",
     "react-cookie": "^4.1.1",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",

src/components/Admin/Admin.tsx

@@ -18,6 +18,10 @@ import {EventCreate} from './resources/competition/event/EventCreate'
 import {EventEdit} from './resources/competition/event/EventEdit'
 import {EventList} from './resources/competition/event/EventList'
 import {EventShow} from './resources/competition/event/EventShow'
+import {ProblemCreate} from './resources/competition/problems/ProblemCreate'
+import {ProblemEdit} from './resources/competition/problems/ProblemEdit'
+import {ProblemList} from './resources/competition/problems/ProblemList'
+import {ProblemShow} from './resources/competition/problems/ProblemShow'
 import {SemesterCreate} from './resources/competition/semester/SemesterCreate'
 import {SemesterEdit} from './resources/competition/semester/SemesterEdit'
 import {SemesterList} from './resources/competition/semester/SemesterList'
@@ -63,6 +67,13 @@ export const Admin: FC = () => {
         create={SemesterCreate}
       />
       <Resource name="competition/series" list={SeriesList} edit={SeriesEdit} show={SeriesShow} create={SeriesCreate} />
+      <Resource
+        name="competition/problem"
+        list={ProblemList}
+        edit={ProblemEdit}
+        show={ProblemShow}
+        create={ProblemCreate}
+      />
     </ReactAdmin>
   )
 }

src/components/Admin/custom/LatexPreview.tsx

@@ -0,0 +1,21 @@
+import {FC} from 'react'
+import {FieldProps, FormDataConsumer, Labeled} from 'react-admin'
+
+import {Latex} from '@/components/Latex/Latex'
+
+export const LatexPreview: FC<FieldProps> = ({source}) => {
+  if (!source) return null
+
+  return (
+    <Labeled label="Preview">
+      <FormDataConsumer>
+        {({formData}) => {
+          const data = formData[source]
+          if (!data) return null
+
+          return <Latex>{data}</Latex>
+        }}
+      </FormDataConsumer>
+    </Labeled>
+  )
+}

src/components/Admin/custom/MyEditActions.tsx

@@ -18,6 +18,10 @@ export const MyEditActions: FC = () => {
 
   return (
     <TopToolbar>
+      {/* the `to` prop was omitted from ShowButton in recent RA version, but it's still working
+            and RA doesn't provide better way to do this
+          eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          @ts-ignore */}
       <ShowButton to={to} />
       <ListButton label="Back to list" />
     </TopToolbar>

src/components/Admin/custom/MyFileField.tsx

@@ -0,0 +1,14 @@
+import {FC} from 'react'
+import {FileField, RecordContextProvider, useRecordContext} from 'react-admin'
+
+export const MyFileField: FC = () => {
+  const record = useRecordContext()
+
+  const myRecord = typeof record === 'string' ? {src: record, title: 'Vzorák'} : record
+
+  return (
+    <RecordContextProvider value={myRecord}>
+      <FileField source="src" title={myRecord.title} />
+    </RecordContextProvider>
+  )
+}

src/components/Admin/custom/MyImageField.tsx

@@ -0,0 +1,14 @@
+import {FC} from 'react'
+import {ImageField, RecordContextProvider, useRecordContext} from 'react-admin'
+
+export const MyImageField: FC = () => {
+  const record = useRecordContext()
+
+  const myRecord = typeof record === 'string' ? {src: record} : record
+
+  return (
+    <RecordContextProvider value={myRecord}>
+      <ImageField source="src" />
+    </RecordContextProvider>
+  )
+}

src/components/Admin/dataProvider.ts

@@ -79,8 +79,13 @@ export const dataProvider: DataProvider = {
     }
   },
   update: async (resource, params) => {
-    const {id, ...input} = params.data
-    const {data} = await axios.patch(`${apiUrl}/${resource}/${id}`, input)
+    const {id, formData, ...input} = params.data
+
+    // create/update problemu moze obsahovat obrazok a tym padom to musime poslat ako form data.
+    // ked existuju formData, ktore sme do recordu pridali v `transform` v `MyEdit`, pouzijeme tie
+    const body = formData ?? input
+
+    const {data} = await axios.patch(`${apiUrl}/${resource}/${id}`, body)
 
     return {data}
   },
@@ -90,7 +95,11 @@ export const dataProvider: DataProvider = {
     return {data: data.map(({data}) => data)}
   },
   create: async (resource, params) => {
-    const {data} = await axios.post(`${apiUrl}/${resource}`, params.data)
+    const {formData, ...input} = params.data
+
+    const body = formData ?? input
+
+    const {data} = await axios.post(`${apiUrl}/${resource}`, body)
 
     return {data}
   },

src/components/Admin/resources/competition/problems/ProblemCreate.tsx

@@ -0,0 +1,35 @@
+import {FC} from 'react'
+import {FileInput, FormTab, ImageInput, ReferenceInput, required, SelectInput, TabbedForm, TextInput} from 'react-admin'
+
+import {LatexPreview} from '@/components/Admin/custom/LatexPreview'
+import {MyCreate} from '@/components/Admin/custom/MyCreate'
+import {MyFileField} from '@/components/Admin/custom/MyFileField'
+import {MyImageField} from '@/components/Admin/custom/MyImageField'
+
+import {createProblemFormData} from './createProblemFormData'
+
+export const ProblemCreate: FC = () => (
+  <MyCreate
+    transform={(record) => {
+      record.formData = createProblemFormData(record)
+      return record
+    }}
+  >
+    <TabbedForm>
+      <FormTab label="general">
+        <ReferenceInput source="series" reference="competition/series">
+          <SelectInput fullWidth validate={required()} />
+        </ReferenceInput>
+        <TextInput source="text" multiline fullWidth validate={required()} />
+        <LatexPreview source="text" />
+        <TextInput source="order" fullWidth validate={required()} />
+        <ImageInput source="image" accept="image/*">
+          <MyImageField />
+        </ImageInput>
+        <FileInput source="solution_pdf" accept="application/pdf">
+          <MyFileField />
+        </FileInput>
+      </FormTab>
+    </TabbedForm>
+  </MyCreate>
+)

src/components/Admin/resources/competition/problems/ProblemEdit.tsx

@@ -0,0 +1,35 @@
+import {FC} from 'react'
+import {FileInput, FormTab, ImageInput, ReferenceInput, required, SelectInput, TabbedForm, TextInput} from 'react-admin'
+
+import {LatexPreview} from '@/components/Admin/custom/LatexPreview'
+import {MyEdit} from '@/components/Admin/custom/MyEdit'
+import {MyFileField} from '@/components/Admin/custom/MyFileField'
+import {MyImageField} from '@/components/Admin/custom/MyImageField'
+
+import {createProblemFormData} from './createProblemFormData'
+
+export const ProblemEdit: FC = () => (
+  <MyEdit
+    transform={(record) => {
+      record.formData = createProblemFormData(record)
+      return record
+    }}
+  >
+    <TabbedForm>
+      <FormTab label="general">
+        <ReferenceInput source="series" reference="competition/series">
+          <SelectInput fullWidth validate={required()} />
+        </ReferenceInput>
+        <TextInput source="text" multiline fullWidth validate={required()} />
+        <LatexPreview source="text" />
+        <TextInput source="order" fullWidth validate={required()} />
+        <ImageInput source="image" accept="image/*">
+          <MyImageField />
+        </ImageInput>
+        <FileInput source="solution_pdf" accept="application/pdf">
+          <MyFileField />
+        </FileInput>
+      </FormTab>
+    </TabbedForm>
+  </MyEdit>
+)

src/components/Admin/resources/competition/problems/ProblemList.tsx

@@ -0,0 +1,29 @@
+import {FC} from 'react'
+import {
+  BooleanField,
+  Datagrid,
+  FunctionField,
+  ImageField,
+  List,
+  NumberField,
+  RaRecord,
+  ReferenceField,
+} from 'react-admin'
+
+import {TruncatedTextField} from '@/components/Admin/custom/TruncatedTextField'
+
+export const ProblemList: FC = () => (
+  <List>
+    <Datagrid rowClick="show">
+      <ReferenceField source="series" reference="competition/series" link={false} />
+      <NumberField source="order" />
+      <TruncatedTextField source="text" maxTextWidth={50} />
+      <ImageField source="image" sx={{'& .RaImageField-image': {width: 100, height: 75}}} />
+      <FunctionField<RaRecord>
+        label="Má vzorák"
+        render={(record) => record && <BooleanField record={{xxx: !!record['solution_pdf']}} source="xxx" />}
+      />
+      <NumberField source="num_comments" />
+    </Datagrid>
+  </List>
+)

src/components/Admin/resources/competition/problems/ProblemShow.tsx

@@ -0,0 +1,26 @@
+import {FC} from 'react'
+import {
+  FileField,
+  ImageField,
+  NumberField,
+  RecordRepresentation,
+  ReferenceField,
+  Show,
+  SimpleShowLayout,
+} from 'react-admin'
+
+import {MyShowActions} from '@/components/Admin/custom/MyShowActions'
+import {TruncatedTextField} from '@/components/Admin/custom/TruncatedTextField'
+
+export const ProblemShow: FC = () => (
+  <Show actions={<MyShowActions />} title={<RecordRepresentation />}>
+    <SimpleShowLayout>
+      <ReferenceField source="series" reference="competition/series" link="show" />
+      <NumberField source="order" />
+      <TruncatedTextField source="text" maxTextWidth={100} expandable />
+      <ImageField source="image" sx={{'& .RaImageField-image': {width: 400, height: 300}}} />
+      <FileField source="solution_pdf" title="Vzorák" />
+      <NumberField source="num_comments" />
+    </SimpleShowLayout>
+  </Show>
+)

src/components/Admin/resources/competition/problems/createProblemFormData.ts

@@ -0,0 +1,23 @@
+// approach based on: https://marmelab.com/react-admin/DataProviders.html#handling-file-uploads
+
+import {Problem} from '@/types/api/competition'
+
+// takisto urobene zmeny v RA dataProvideri
+export const createProblemFormData = ({
+  image,
+  solution_pdf,
+  ...data
+}: Omit<Problem, 'image' | 'solution'> & {
+  image?: {rawFile: File}
+  solution_pdf?: {rawFile: File}
+}) => {
+  const formData = new FormData()
+  // vzdy appendneme kazdy kluc, aj tieto fily, len null sa tu neda pouzit. null znamena, ze file odstranujeme
+  formData.append('image', image?.rawFile ?? '')
+  formData.append('solution_pdf', solution_pdf?.rawFile ?? '')
+  Object.entries(data).forEach(([key, value]) => {
+    if (value) formData.append(key, value.toString())
+  })
+
+  return formData
+}