Create statement page, Part 2 (#20)

* Create New Language Select page

* Change Variable Data

* Edit Statement Page

* Created Navbar, erase unnecessary codes

* Create main statement page

* Fix query detecting logic

* Fix errors

* Fix quotation

* Apply mobile-responsive

* Fix sx mobile responsive to direction, and change xs to sm

* Fix lint warnings

Author: kidw0124

src/app/problems/[qid]/statements/EditStatement.tsx

@@ -0,0 +1,68 @@
+import {
+  Button,
+  Paper,
+  Stack,
+  TextField,
+  Typography,
+  ButtonGroup,
+} from '@mui/material';
+
+// As same as Polygon, the page link is same for creating new language and editing existed language
+// It can be divided into two pages if needed
+
+export default function EditStatement({
+  language,
+  languageName,
+}: {
+  language: string;
+  languageName: string;
+}) {
+  // have to fetch the statement and tutorial from the server by the language
+  return (
+    <Paper>
+      <Stack direction='column' px={4} py={2} gap={2}>
+        <Stack direction='column'>
+          <Stack
+            direction={{ sm: 'column', md: 'row' }}
+            gap={2}
+            px={2}
+            justifyContent='space-between'
+          >
+            <Typography variant='h6'>
+              Edit {languageName}({language}) Statement
+            </Typography>
+            <ButtonGroup variant='text' sx={{ justifyContent: 'flex-end' }}>
+              <Button>In LaTex</Button>
+              <Button>In HTML</Button>
+              <Button>In PDF</Button>
+            </ButtonGroup>
+          </Stack>
+          <Typography variant='caption' px={2}>
+            It is recommended to use simple TeX, &ldquo;Preview in HTML&rdquo; feature
+            supports only subset of TeX markup
+          </Typography>
+        </Stack>
+        <TextField id='prob_name' label='Name' fullWidth />
+        <TextField id='legend' label='Legend' rows={10} multiline fullWidth />
+        <TextField
+          id='input_format'
+          label='Input Format'
+          rows={5}
+          multiline
+          fullWidth
+        />
+        <TextField
+          id='output_format'
+          label='Output Format'
+          rows={5}
+          multiline
+          fullWidth
+        />
+        <TextField id='scoring' label='Scoring' rows={10} multiline fullWidth />
+        <TextField id='notes' label='Notes' rows={5} multiline fullWidth />
+        <TextField id='tutorial' label='Tutorial' rows={10} multiline fullWidth />
+        <Button variant='contained'>Save</Button>
+      </Stack>
+    </Paper>
+  );
+}

src/app/problems/[qid]/statements/NewLanguage.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import { Button, Paper, Stack, TextField, Autocomplete, Link } from '@mui/material';
+import { useState } from 'react';
+
+// As same as Polygon, the page link is same for creating new language and editing existed language
+// It can be divided into two pages if needed
+
+export default function NewLanguage({
+  languageList,
+  existedLanguageList,
+}: {
+  languageList: { label: string; value: string }[];
+  existedLanguageList: { label: string; value: string }[];
+}) {
+  // cloneClicked variable is used to show the existedLanguageList when the user wants to clone
+  const [cloneClicked, setCloneClicked] = useState(false);
+  return (
+    <Paper>
+      <Stack direction='column' px={4} py={2} gap={2}>
+        <Autocomplete
+          id='language_setting'
+          options={languageList.filter(
+            (lang) =>
+              !existedLanguageList.find(
+                (existedLang) => existedLang.value === lang.value,
+              ),
+          )}
+          getOptionLabel={(option) => option.label}
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              label='Language'
+              helperText={
+                !cloneClicked && (
+                  <>
+                    If you want to clone statement and tutorial from existing,{' '}
+                    <Link href='#' onClick={() => setCloneClicked(true)}>
+                      click here
+                    </Link>
+                  </>
+                )
+              }
+            />
+          )}
+        />
+        {cloneClicked && (
+          <Autocomplete
+            id='existed_language_setting'
+            options={existedLanguageList}
+            getOptionLabel={(option) => option.label}
+            renderInput={(params) => (
+              <TextField {...params} label='Clone from language' />
+            )}
+          />
+        )}
+        <Button variant='contained'>Create</Button>
+      </Stack>
+    </Paper>
+  );
+}

src/app/problems/[qid]/statements/StatementNavbar.tsx

@@ -0,0 +1,42 @@
+import { Tabs, Tab, Box, Button, Stack, ButtonGroup } from '@mui/material';
+
+export default function StatementNavbar({
+  existedLanguageList,
+  language,
+}: {
+  existedLanguageList: { label: string; value: string }[];
+  language: string;
+}) {
+  return (
+    <Box sx={{ width: '100%' }}>
+      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+        <Stack
+          direction={{ sm: 'column', md: 'row' }}
+          gap={2}
+          p={2}
+          justifyContent='space-between'
+        >
+          <Tabs value={language}>
+            {existedLanguageList.map((lang) => (
+              <Tab
+                label={lang.label}
+                value={lang.value}
+                href={'?language=' + lang.value}
+                key={lang.value}
+              />
+            ))}
+          </Tabs>
+          <ButtonGroup
+            variant='text'
+            sx={{ flexWrap: 'wrap', justifyContent: 'flex-end' }}
+          >
+            <Button>Edit With Preview</Button>
+            <Button>Review</Button>
+            <Button>Delete Current</Button>
+            <Button href='?language='>Create New</Button>
+          </ButtonGroup>
+        </Stack>
+      </Box>
+    </Box>
+  );
+}

src/app/problems/[qid]/statements/page.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { Stack } from '@mui/material';
+import { useSearchParams } from 'next/navigation';
+import { useState } from 'react';
+
+import NewLanguage from './NewLanguage';
+import EditStatement from './EditStatement';
+import StatementNavbar from './StatementNavbar';
+
+// languageList variable is all-supported languages
+// if it needs to be fetched from the server, it should be done in the useEffect hook
+const languageList = [
+  { label: 'Korean', value: 'ko' },
+  { label: 'English', value: 'en' },
+  { label: 'Japanese', value: 'ja' },
+  { label: 'Chinese', value: 'zh' },
+  { label: 'Vietnamese', value: 'vi' },
+  { label: 'Russian', value: 'ru' },
+  { label: 'French', value: 'fr' },
+];
+
+export default function Problem() {
+  // existedLanguageList variable is the list of languages that already have statements and tutorials
+  // it should be fetched from the server in the useEffect hook
+  const [existedLanguageList] = useState([
+    { label: 'English', value: 'en' },
+    { label: 'French', value: 'fr' },
+  ]);
+  // get query parameters
+  const searchParams = useSearchParams();
+  const [language] = useState(searchParams.get('language') || '');
+  return (
+    <Stack mt={2} gap={4}>
+      <StatementNavbar existedLanguageList={existedLanguageList} language={language} />
+      {!existedLanguageList.find((lang) => lang.value === language) && (
+        <NewLanguage
+          languageList={languageList}
+          existedLanguageList={existedLanguageList}
+        />
+      )}
+      {existedLanguageList.find((lang) => lang.value === language) && (
+        <EditStatement
+          language={language}
+          languageName={
+            existedLanguageList.find((lang) => lang.value === language)?.label || ''
+          }
+        />
+      )}
+    </Stack>
+  );
+}