From 03849a5d1b82e1417e89819db47feea0ec78ad33 Mon Sep 17 00:00:00 2001 From: Caleb Date: Sun, 6 Sep 2020 09:21:40 -0700 Subject: [PATCH 1/4] can now add algsets --- client/src/pages/Admin/Algsets.tsx | 94 ++++++++++++++++++++++++++++-- 1 file changed, 90 insertions(+), 4 deletions(-) diff --git a/client/src/pages/Admin/Algsets.tsx b/client/src/pages/Admin/Algsets.tsx index 9e4baa9..158342d 100644 --- a/client/src/pages/Admin/Algsets.tsx +++ b/client/src/pages/Admin/Algsets.tsx @@ -1,7 +1,80 @@ -import React, { ReactElement } from 'react' -import { Flex, Heading, Spinner } from '@chakra-ui/core' +import React, { ReactElement, useState, ChangeEvent, MouseEvent, FormEvent } from 'react' +import { Flex, Heading, Spinner, Input, Button, Select } from '@chakra-ui/core' import useJqlQuery from '../../hooks/useJqlQuery' -import { AlgsetPaginator } from '../../generated/jql' +import useJqlMutation from '../../hooks/useJqlMutation' +import { Maybe, Algset, AlgsetPaginator, Puzzle, PuzzlePaginator } from '../../generated/jql' + +type AddAlgsetProps = { + onAdd: () => void + puzzles: Array> +} + +type AddAlgsetMutationArgs = { + name: string + puzzle: string +} + +function AddAlgset({ onAdd, puzzles }: AddAlgsetProps): ReactElement { + const [algsetName, setAlgsetName] = useState('') + const [selectedPuzzle, setSelectedPuzzle] = useState('0') + + const [mutate, { isLoading, error }] = useJqlMutation< + Maybe, + Error, + AddAlgsetMutationArgs +>('createAlgset', { + id: null, + name: null, + }) + + const onClick = async (e: MouseEvent | FormEvent) => { + e.preventDefault(); + if (algsetName) { + try { + await mutate({ + name: algsetName, + puzzle: selectedPuzzle, + }) + onAdd() + setAlgsetName('') + } catch (err) { + console.error(err) + } + } + } + + const handleChange = (event: ChangeEvent) => { + setAlgsetName(event.target.value) + } + + const handleChangePuzzle = (event: ChangeEvent) => { + setSelectedPuzzle(event.target.value) + } + + if (error) { + console.error(error); + } + + return ( + + + + + + + + + + + + + ) +} const getAlgsetsQuery = { paginatorInfo: { @@ -19,12 +92,24 @@ const getAlgsetsQuery = { } export default function Algsets(): ReactElement { - const { isLoading, data, error } = useJqlQuery( + const { isLoading, data, refetch, error } = useJqlQuery( 'getMultipleAlgset', 'getMultipleAlgset', getAlgsetsQuery, ) + const puzzleQuery = useJqlQuery( + 'getMultiplePuzzle', + 'getMultiplePuzzle', + { + data: { + name: null + } + } + ) + + const puzzles = puzzleQuery?.data?.data || []; + const algsets = data?.data || []; if (isLoading) { @@ -60,6 +145,7 @@ export default function Algsets(): ReactElement { {new Date(algset.created_at * 1000).toLocaleString()} ) : false)} + From 66d6d1c4e7afc8463a6d023210d9cc3683077b09 Mon Sep 17 00:00:00 2001 From: Caleb Date: Mon, 7 Sep 2020 15:08:05 -0700 Subject: [PATCH 2/4] exposing more algset options to change --- client/src/pages/Admin/Algsets.tsx | 90 ++++++++++++++++++++++-------- 1 file changed, 67 insertions(+), 23 deletions(-) diff --git a/client/src/pages/Admin/Algsets.tsx b/client/src/pages/Admin/Algsets.tsx index c192887..f67158d 100644 --- a/client/src/pages/Admin/Algsets.tsx +++ b/client/src/pages/Admin/Algsets.tsx @@ -7,6 +7,7 @@ import { Button, Select, FormLabel, + Checkbox, Stack, Box, Drawer, @@ -31,8 +32,9 @@ type AlgsetMutationArgs = { id?: string name?: string puzzle?: string - mask?: string + mask?: Maybe | null visualization?: string + is_public?: boolean, } function AddAlgset({ onAdd, puzzles }: AddAlgsetProps): ReactElement { @@ -72,10 +74,6 @@ function AddAlgset({ onAdd, puzzles }: AddAlgsetProps): ReactElement { setSelectedPuzzle(event.target.value) } - if (error) { - console.error(error); - } - return ( @@ -90,6 +88,8 @@ function AddAlgset({ onAdd, puzzles }: AddAlgsetProps): ReactElement { ))} + + @@ -97,36 +97,53 @@ function AddAlgset({ onAdd, puzzles }: AddAlgsetProps): ReactElement { ) } -const getAlgsetsQuery = { - paginatorInfo: { - count: null, - total: null, - }, - data: { - id: null, - name: null, - puzzle: { - id: null, - name: null, +const getAlgsetsQuery = (puzzle?: string) => { + const query = { + paginatorInfo: { + count: null, + total: null, }, - mask: null, - visualization: { + data: { + id: null, name: null, + puzzle: { + id: null, + name: null, + }, + mask: null, + visualization: { + name: null, + }, + is_public: null, + created_at: null, }, - created_at: null, - }, + __args: { + + } + } + + if (puzzle) { + // eslint-disable-next-line no-underscore-dangle + query.__args = { + 'puzzle.code': puzzle, + } + } + + return query; } export default function Algsets(): ReactElement { const [ editingAlgsetId, setEditingAlgsetId ] = useState(); const [ editingAlgsetName, setEditingAlgsetName ] = useState(); const [ editingAlgsetVisualization, setEditingAlgsetVisualization ] = useState(); + const [ editingAlgsetPublic, setEditingAlgsetPublic ] = useState(); + const [ editingAlgsetMask, setEditingAlgsetMask ] = useState | null>(); const { isOpen, onOpen, onClose } = useDisclosure() const { isLoading, data, refetch, error } = useJqlQuery( 'getMultipleAlgset', 'getMultipleAlgset', - getAlgsetsQuery, + getAlgsetsQuery(), ) const puzzleQuery = useJqlQuery( @@ -154,6 +171,8 @@ export default function Algsets(): ReactElement { onOpen(); setEditingAlgsetName(algset.name) setEditingAlgsetVisualization(algset.visualization.name) + setEditingAlgsetPublic(algset.is_public) + setEditingAlgsetMask(algset.mask) setEditingAlgsetId(algset.id) } @@ -162,6 +181,8 @@ export default function Algsets(): ReactElement { id: editingAlgsetId, name: editingAlgsetName, visualization: editingAlgsetVisualization, + is_public: editingAlgsetPublic, + mask: editingAlgsetMask, }) refetch() onClose() @@ -188,7 +209,7 @@ export default function Algsets(): ReactElement { ID Name Puzzle - Visualization + Visible Created {' '} @@ -199,7 +220,7 @@ export default function Algsets(): ReactElement { {algset.id} {algset.name} {algset.puzzle?.name} - {algset?.visualization?.name} + {algset.is_public ? 'true' : 'false'} {new Date(algset.created_at * 1000).toLocaleString()} @@ -250,6 +271,29 @@ export default function Algsets(): ReactElement { + + Mask + ) => { + setEditingAlgsetMask(event.target.value) + }} + id="editingAlgsetMask" + placeholder={editingAlgsetMask || ''} + /> + + + + { + setEditingAlgsetPublic(event.target.checked) + }} +> + Visible + + + From ddd1dc2b2ed68273c7c2411b9e4e31195ee4feed Mon Sep 17 00:00:00 2001 From: Caleb Date: Tue, 8 Sep 2020 11:30:06 -0700 Subject: [PATCH 3/4] general cleanup in /admin, added breadcrumbs --- client/src/pages/Admin/Admin.tsx | 56 +++++++---- client/src/pages/Admin/Algset.tsx | 8 ++ client/src/pages/Admin/Algsets/AddAlgset.tsx | 78 +++++++++++++++ .../src/pages/Admin/{ => Algsets}/Algsets.tsx | 95 +++---------------- client/src/pages/Admin/Algsets/index.tsx | 3 + client/src/pages/Admin/Puzzles.tsx | 5 + 6 files changed, 144 insertions(+), 101 deletions(-) create mode 100644 client/src/pages/Admin/Algset.tsx create mode 100644 client/src/pages/Admin/Algsets/AddAlgset.tsx rename client/src/pages/Admin/{ => Algsets}/Algsets.tsx (75%) create mode 100644 client/src/pages/Admin/Algsets/index.tsx diff --git a/client/src/pages/Admin/Admin.tsx b/client/src/pages/Admin/Admin.tsx index 69e3659..3775940 100644 --- a/client/src/pages/Admin/Admin.tsx +++ b/client/src/pages/Admin/Admin.tsx @@ -1,13 +1,14 @@ import React, { ReactElement } from 'react' -import { Switch, Route, useRouteMatch, Link, Redirect } from 'react-router-dom' -import { Flex, Menu, MenuList, MenuItem, MenuButton } from '@chakra-ui/core' +import { Switch, Route, useRouteMatch, useLocation, Link, Redirect } from 'react-router-dom' +import { Flex, Menu, MenuItem, Breadcrumb, BreadcrumbItem, BreadcrumbLink } from '@chakra-ui/core' import UsersPage from './Users' import AlgsetsPage from './Algsets' import PuzzlesPage from './Puzzles' export default function Landing(): ReactElement { const match = useRouteMatch() - console.log(match.path) + const location = useLocation() + console.log(location.pathname.split('/')); return ( @@ -19,21 +20,40 @@ export default function Landing(): ReactElement { - - - - - - - - - - - - Home - - - + + + + Home + + + {location.pathname.split('/').slice(1).map((path, index, array) => ( + + {path} + + ))} + + + + + + + + + + + + + + + Home + + + + ) diff --git a/client/src/pages/Admin/Algset.tsx b/client/src/pages/Admin/Algset.tsx new file mode 100644 index 0000000..bd3605f --- /dev/null +++ b/client/src/pages/Admin/Algset.tsx @@ -0,0 +1,8 @@ +import React, { ReactElement } from 'react' +import { Flex } from '@chakra-ui/core' + +export default function Algset(): ReactElement { + return ( + + ) +} \ No newline at end of file diff --git a/client/src/pages/Admin/Algsets/AddAlgset.tsx b/client/src/pages/Admin/Algsets/AddAlgset.tsx new file mode 100644 index 0000000..744eb7e --- /dev/null +++ b/client/src/pages/Admin/Algsets/AddAlgset.tsx @@ -0,0 +1,78 @@ +import React, { ReactElement, useState, ChangeEvent, MouseEvent, FormEvent } from 'react' +import { Input, Select, Button } from '@chakra-ui/core' +import useJqlMutation from '../../../hooks/useJqlMutation' +import { Maybe, Algset, Puzzle } from '../../../generated/jql' + +export type AlgsetMutationArgs = { + id?: string + name?: string + puzzle?: string + mask?: Maybe | null + visualization?: string + is_public?: boolean, +} + +type Props = { + onAdd: () => void + puzzles: Array> +} + +export default function AddAlgset({ onAdd, puzzles }: Props): ReactElement { + const [algsetName, setAlgsetName] = useState('') + const [selectedPuzzle, setSelectedPuzzle] = useState('0') + + const [mutate, { isLoading }] = useJqlMutation< + Maybe, + Error, + AlgsetMutationArgs +>('createAlgset', { + id: null, + name: null, + }) + + const onClick = async (e: MouseEvent | FormEvent) => { + e.preventDefault(); + if (algsetName) { + try { + await mutate({ + name: algsetName, + puzzle: selectedPuzzle, + }) + onAdd() + setAlgsetName('') + } catch (err) { + console.error(err) + } + } + } + + const handleChange = (event: ChangeEvent) => { + setAlgsetName(event.target.value) + } + + const handleChangePuzzle = (event: ChangeEvent) => { + setSelectedPuzzle(event.target.value) + } + + return ( + + + + + + + + + + + + + + + ) +} \ No newline at end of file diff --git a/client/src/pages/Admin/Algsets.tsx b/client/src/pages/Admin/Algsets/Algsets.tsx similarity index 75% rename from client/src/pages/Admin/Algsets.tsx rename to client/src/pages/Admin/Algsets/Algsets.tsx index f67158d..df0060b 100644 --- a/client/src/pages/Admin/Algsets.tsx +++ b/client/src/pages/Admin/Algsets/Algsets.tsx @@ -1,4 +1,5 @@ -import React, { ReactElement, useState, ChangeEvent, MouseEvent, FormEvent } from 'react' +import React, { ReactElement, useState, ChangeEvent, MouseEvent } from 'react' +import { Link, useParams } from 'react-router-dom' import { Flex, Heading, @@ -19,83 +20,10 @@ import { DrawerFooter, useDisclosure, } from '@chakra-ui/core' -import useJqlQuery from '../../hooks/useJqlQuery' -import useJqlMutation from '../../hooks/useJqlMutation' -import { Maybe, Algset, AlgsetPaginator, Puzzle, PuzzlePaginator } from '../../generated/jql' - -type AddAlgsetProps = { - onAdd: () => void - puzzles: Array> -} - -type AlgsetMutationArgs = { - id?: string - name?: string - puzzle?: string - mask?: Maybe | null - visualization?: string - is_public?: boolean, -} - -function AddAlgset({ onAdd, puzzles }: AddAlgsetProps): ReactElement { - const [algsetName, setAlgsetName] = useState('') - const [selectedPuzzle, setSelectedPuzzle] = useState('0') - - const [mutate, { isLoading, error }] = useJqlMutation< - Maybe, - Error, - AlgsetMutationArgs ->('createAlgset', { - id: null, - name: null, - }) - - const onClick = async (e: MouseEvent | FormEvent) => { - e.preventDefault(); - if (algsetName) { - try { - await mutate({ - name: algsetName, - puzzle: selectedPuzzle, - }) - onAdd() - setAlgsetName('') - } catch (err) { - console.error(err) - } - } - } - - const handleChange = (event: ChangeEvent) => { - setAlgsetName(event.target.value) - } - - const handleChangePuzzle = (event: ChangeEvent) => { - setSelectedPuzzle(event.target.value) - } - - return ( - - - - - - - - - - - - - - - ) -} +import AddAlgset, { AlgsetMutationArgs } from './AddAlgset' +import useJqlQuery from '../../../hooks/useJqlQuery' +import useJqlMutation from '../../../hooks/useJqlMutation' +import { Maybe, Algset, AlgsetPaginator, PuzzlePaginator } from '../../../generated/jql' const getAlgsetsQuery = (puzzle?: string) => { const query = { @@ -125,7 +53,7 @@ const getAlgsetsQuery = (puzzle?: string) => { if (puzzle) { // eslint-disable-next-line no-underscore-dangle query.__args = { - 'puzzle.code': puzzle, + puzzle, } } @@ -139,11 +67,12 @@ export default function Algsets(): ReactElement { const [ editingAlgsetPublic, setEditingAlgsetPublic ] = useState(); const [ editingAlgsetMask, setEditingAlgsetMask ] = useState | null>(); + const { puzzleId } = useParams() const { isOpen, onOpen, onClose } = useDisclosure() const { isLoading, data, refetch, error } = useJqlQuery( 'getMultipleAlgset', 'getMultipleAlgset', - getAlgsetsQuery(), + getAlgsetsQuery(puzzleId), ) const puzzleQuery = useJqlQuery( @@ -193,8 +122,7 @@ export default function Algsets(): ReactElement { } if (error) { - console.error(error) - return error + return {error.message} } return ( @@ -211,7 +139,7 @@ export default function Algsets(): ReactElement { Puzzle Visible Created - {' '} + Edit @@ -223,6 +151,7 @@ export default function Algsets(): ReactElement { {algset.is_public ? 'true' : 'false'} {new Date(algset.created_at * 1000).toLocaleString()} + Manage ) : false)} diff --git a/client/src/pages/Admin/Algsets/index.tsx b/client/src/pages/Admin/Algsets/index.tsx new file mode 100644 index 0000000..7399143 --- /dev/null +++ b/client/src/pages/Admin/Algsets/index.tsx @@ -0,0 +1,3 @@ +import Algsets from './Algsets' + +export default Algsets diff --git a/client/src/pages/Admin/Puzzles.tsx b/client/src/pages/Admin/Puzzles.tsx index bade506..49e178c 100644 --- a/client/src/pages/Admin/Puzzles.tsx +++ b/client/src/pages/Admin/Puzzles.tsx @@ -1,4 +1,5 @@ import React, { ReactElement, useState, ChangeEvent } from 'react' +import { Link, useRouteMatch } from 'react-router-dom' import { Flex, Heading, Spinner, Input, Button } from '@chakra-ui/core' import useJqlQuery from '../../hooks/useJqlQuery' import useJqlMutation from '../../hooks/useJqlMutation' @@ -72,6 +73,8 @@ const getPuzzlesQuery = { } export default function Puzzles(): ReactElement { + const match = useRouteMatch() + const { isLoading, data, refetch, error } = useJqlQuery( 'getMultiplePuzzle', 'getMultiplePuzzle', @@ -101,6 +104,7 @@ export default function Puzzles(): ReactElement { ID Name Created + {' '} @@ -109,6 +113,7 @@ export default function Puzzles(): ReactElement { {puzzle.id} {puzzle.name} {new Date(puzzle.created_at * 1000).toLocaleString()} + Algsets ) : false)} From 3a1bd8a85178eb9ea1fa33820a5bacd7b69b4171 Mon Sep 17 00:00:00 2001 From: Caleb Date: Tue, 8 Sep 2020 17:06:55 -0700 Subject: [PATCH 4/4] basic algset page --- client/src/pages/Admin/Admin.tsx | 8 +- client/src/pages/Admin/Algset.tsx | 102 ++++++++++++++++++++- client/src/pages/Admin/Algsets/Algsets.tsx | 13 ++- client/src/pages/Admin/Puzzles.tsx | 5 +- 4 files changed, 117 insertions(+), 11 deletions(-) diff --git a/client/src/pages/Admin/Admin.tsx b/client/src/pages/Admin/Admin.tsx index 3775940..4a85c47 100644 --- a/client/src/pages/Admin/Admin.tsx +++ b/client/src/pages/Admin/Admin.tsx @@ -2,13 +2,13 @@ import React, { ReactElement } from 'react' import { Switch, Route, useRouteMatch, useLocation, Link, Redirect } from 'react-router-dom' import { Flex, Menu, MenuItem, Breadcrumb, BreadcrumbItem, BreadcrumbLink } from '@chakra-ui/core' import UsersPage from './Users' +import AlgsetPage from './Algset' import AlgsetsPage from './Algsets' import PuzzlesPage from './Puzzles' export default function Landing(): ReactElement { const match = useRouteMatch() const location = useLocation() - console.log(location.pathname.split('/')); return ( @@ -38,6 +38,12 @@ export default function Landing(): ReactElement { + + + ({ + id: null, + name: null, + code: null, + algcases: { + data: { + id: null, + name: null, + } + }, + subsets: { + data: { + id: null, + code: null, + name: null, + } + }, + __args: { + id: algsetId + } +}) + +export default function AlgsetPage(): ReactElement { + const { algsetCode } = useParams() + + const { isLoading, data, error } = useJqlQuery, Error>( + 'getAlgset', + 'getAlgset', + query(parseInt(algsetCode, 10)), + ) + + if (isLoading) { + return () + } + + if (error) { + return ({error.message}) + } + + const algCases = data?.algcases?.data || []; + const subsets = data?.subsets?.data || []; -export default function Algset(): ReactElement { return ( - + + + {data?.name} + + + + Subsets + Cases + + + + + + + + + + + + + + {subsets.map((subset) => subset ? ( + + + + + + ) : false)} + +
IDCodeName
{subset.id}{subset.code}{subset.name}
+ + + + + + + + + + + {algCases.map((algCase) => algCase ? ( + + + + + ) : false)} + +
IDName
{algCase.id}{algCase.name}
+ + + + ) } \ No newline at end of file diff --git a/client/src/pages/Admin/Algsets/Algsets.tsx b/client/src/pages/Admin/Algsets/Algsets.tsx index df0060b..0b5acd7 100644 --- a/client/src/pages/Admin/Algsets/Algsets.tsx +++ b/client/src/pages/Admin/Algsets/Algsets.tsx @@ -1,5 +1,5 @@ import React, { ReactElement, useState, ChangeEvent, MouseEvent } from 'react' -import { Link, useParams } from 'react-router-dom' +import { Link, useParams, useRouteMatch } from 'react-router-dom' import { Flex, Heading, @@ -37,7 +37,9 @@ const getAlgsetsQuery = (puzzle?: string) => { puzzle: { id: null, name: null, + code: null }, + code: null, mask: null, visualization: { name: null, @@ -46,14 +48,13 @@ const getAlgsetsQuery = (puzzle?: string) => { created_at: null, }, __args: { - } } if (puzzle) { // eslint-disable-next-line no-underscore-dangle query.__args = { - puzzle, + puzzle: parseInt(puzzle, 10), } } @@ -68,6 +69,7 @@ export default function Algsets(): ReactElement { const [ editingAlgsetMask, setEditingAlgsetMask ] = useState | null>(); const { puzzleId } = useParams() + const match = useRouteMatch() const { isOpen, onOpen, onClose } = useDisclosure() const { isLoading, data, refetch, error } = useJqlQuery( 'getMultipleAlgset', @@ -80,7 +82,8 @@ export default function Algsets(): ReactElement { 'getMultiplePuzzle', { data: { - name: null + name: null, + code: null } } ) @@ -151,7 +154,7 @@ export default function Algsets(): ReactElement { {algset.is_public ? 'true' : 'false'} {new Date(algset.created_at * 1000).toLocaleString()} - Manage + Manage ) : false)} diff --git a/client/src/pages/Admin/Puzzles.tsx b/client/src/pages/Admin/Puzzles.tsx index 49e178c..da75fab 100644 --- a/client/src/pages/Admin/Puzzles.tsx +++ b/client/src/pages/Admin/Puzzles.tsx @@ -66,7 +66,7 @@ const getPuzzlesQuery = { total: null, }, data: { - id: null, + code: null, name: null, created_at: null, }, @@ -101,7 +101,7 @@ export default function Puzzles(): ReactElement { - + @@ -111,6 +111,7 @@ export default function Puzzles(): ReactElement { {puzzles.map((puzzle) => puzzle ? ( +

AltStyle によって変換されたページ (->オリジナル) /

IDCode Name Created {' '}
{puzzle.id}{puzzle.code} {puzzle.name} {new Date(puzzle.created_at * 1000).toLocaleString()} Algsets