From de3c4da0d4fb6871a370d46186b91147fd6cac92 Mon Sep 17 00:00:00 2001 From: cv <34649812+cpvalente@users.noreply.github.com> Date: Tue, 23 Mar 2021 17:17:48 +0100 Subject: [PATCH] form state --- package.json | 2 + src/app/sampleData.js | 8 +- src/common/dateConfig.js | 1 + src/features/editors/Editor.jsx | 52 ++++++++---- src/features/editors/Editor.module.css | 8 +- src/features/editors/list/EventList.jsx | 11 +-- src/features/editors/list/EventListItem.jsx | 25 ++++-- src/features/form/EventForm.jsx | 58 +++++++++---- yarn.lock | 92 ++++++++++++++++++++- 9 files changed, 202 insertions(+), 55 deletions(-) create mode 100644 src/common/dateConfig.js diff --git a/package.json b/package.json index 2647697ae..d77d1cdd0 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { + "@chakra-ui/icons": "^1.0.7", "@chakra-ui/react": "^1.4.1", "@emotion/react": "^11", "@emotion/styled": "^11", @@ -13,6 +14,7 @@ "formik": "^2.2.6", "framer-motion": "^4", "react": "^17.0.1", + "react-datepicker": "^3.6.0", "react-dom": "^17.0.1", "react-router": "^5.2.0", "react-scripts": "4.0.3", diff --git a/src/app/sampleData.js b/src/app/sampleData.js index b36146aa6..61b7fc228 100644 --- a/src/app/sampleData.js +++ b/src/app/sampleData.js @@ -7,8 +7,8 @@ export const sampleData = { title: 'Is the internet a fad?', subtitle: 'It is', presenter: 'Carlos Valente', - timeStart: '10:00', - timeEnd: '11:30', + timeStart: dummy, + timeEnd: dummy, clockStarted: dummy, timerDuration: 10, message: { @@ -22,8 +22,8 @@ export const sampleData = { title: 'Is reddit a dictatorship?', subtitle: 'It is', presenter: 'Carlos Valente', - timeStart: '11:40', - timeEnd: '13:00', + timeStart: dummy, + timeEnd: dummy, clockStarted: dummy, timerDuration: 10, message: { diff --git a/src/common/dateConfig.js b/src/common/dateConfig.js new file mode 100644 index 000000000..28a59815c --- /dev/null +++ b/src/common/dateConfig.js @@ -0,0 +1 @@ +export const timeFormat = 'HH:mm'; \ No newline at end of file diff --git a/src/features/editors/Editor.jsx b/src/features/editors/Editor.jsx index bcaae51c4..207e175b2 100644 --- a/src/features/editors/Editor.jsx +++ b/src/features/editors/Editor.jsx @@ -1,5 +1,6 @@ import { Button } from '@chakra-ui/button'; -import { Heading } from '@chakra-ui/layout'; +import { ArrowForwardIcon } from '@chakra-ui/icons'; +import { Flex, Heading } from '@chakra-ui/layout'; import { SimpleGrid } from '@chakra-ui/layout'; import { Box } from '@chakra-ui/layout'; import { useEffect, useState } from 'react'; @@ -14,11 +15,17 @@ export default function Editor() { const [data, setData] = useState(sampleData); const [selectedData, setSelectedData] = useState(null); const [selectedEvent, setSelectedEvent] = useState(null); + const [formMode, setFormMode] = useState(null); useEffect(() => { - const se = data.events.filter((d) => d.id === selectedEvent); - - if (se.length > 0) setSelectedData(se[0]); + if (selectedEvent === null) { + setSelectedData(null); + setFormMode(null); + } else { + const se = data.events.filter((d) => d.id === selectedEvent); + if (se.length > 0) setSelectedData(se[0]); + setFormMode('edit'); + } }, [data, selectedEvent]); return ( @@ -28,31 +35,48 @@ export default function Editor() { className={styles.mainContainer} > - List Events - + List Events +
-
- +
+
- Event Details - + Event Details +
- +
- List Events - + List Events +
diff --git a/src/features/editors/Editor.module.css b/src/features/editors/Editor.module.css index faab89d18..15040d3db 100644 --- a/src/features/editors/Editor.module.css +++ b/src/features/editors/Editor.module.css @@ -16,4 +16,10 @@ .content { padding-top: 2em; -} \ No newline at end of file +} + +.buttonContainer { + padding-top: 2em; + display: flex; + justify-content: flex-end; +} diff --git a/src/features/editors/list/EventList.jsx b/src/features/editors/list/EventList.jsx index 3c491d1a4..fa352902a 100644 --- a/src/features/editors/list/EventList.jsx +++ b/src/features/editors/list/EventList.jsx @@ -1,11 +1,7 @@ import { Table, Thead, Tbody, Tr, Th } from '@chakra-ui/react'; -import { useState } from 'react'; -import { sampleData } from '../../../app/sampleData'; import EventListItem from './EventListItem'; export default function EventList(props) { - const [data, setData] = useState(sampleData); - return ( @@ -18,12 +14,13 @@ export default function EventList(props) { - {data.events.map((e) => ( + {props.data.events.map((e) => ( ))} diff --git a/src/features/editors/list/EventListItem.jsx b/src/features/editors/list/EventListItem.jsx index bf208e9e4..9f498df39 100644 --- a/src/features/editors/list/EventListItem.jsx +++ b/src/features/editors/list/EventListItem.jsx @@ -1,26 +1,33 @@ -import { Button } from '@chakra-ui/button'; +import { IconButton } from '@chakra-ui/button'; import { Td, Tr } from '@chakra-ui/table'; +import { format } from 'date-fns'; +import { timeFormat } from '../../../common/dateConfig'; +import { ChevronRightIcon } from '@chakra-ui/icons'; export default function EventListItem(props) { + const selected = props.selected === props.data.id return ( - - + + ); diff --git a/src/features/form/EventForm.jsx b/src/features/form/EventForm.jsx index 2fcfefdb4..0a5ffb14b 100644 --- a/src/features/form/EventForm.jsx +++ b/src/features/form/EventForm.jsx @@ -1,23 +1,27 @@ import { Button } from '@chakra-ui/button'; import { Form, Formik } from 'formik'; +import { useState } from 'react'; +import ReactDatePicker from 'react-datepicker'; +import DatePicker from 'react-datepicker'; import * as Yup from 'yup'; import ChakraInput from '../../common/input/ChakraInput'; import ChakraNumberInput from '../../common/input/ChakraNumberInput'; +import TimeInput from '../../common/input/TimeInput'; import styles from './EventForm.module.css'; export default function EventForm(props) { + const today = new Date(); const initialValues = props.data ?? { - id: '1', - title: 'Is the internet a fad?', - subtitle: 'It is', - presenter: 'Carlos Valente', - timeStart: '10:00', - timeEnd: '11:30', - timerDuration: 10, + title: '', + subtitle: '', + presenter: '', + timeStart: today, + timeEnd: today, + timerDuration: 30, message: { - text: 'Hurry Up!', - color: '#F00', + text: '', + color: '', active: false, }, }; @@ -26,6 +30,7 @@ export default function EventForm(props) { title: Yup.string().required('An event requires a title'), subtitle: Yup.string(), presenter: Yup.string(), + timeStart: Yup.date().nullable(), timerDuration: Yup.number() .min(1) .max(60) @@ -34,10 +39,18 @@ export default function EventForm(props) { const submitForm = (values) => { console.log('form', values); + props.setFormMode(null); + props.setSelectedEvent(null); + }; + + const cancelForm = () => { + props.setFormMode(null); + props.setSelectedEvent(null); }; if (props.data === null || props.data === undefined) { - return
nothing selected
; + if (props.formMode === null) + return
Replace with nice empty illustration
; } return ( @@ -47,19 +60,32 @@ export default function EventForm(props) { validationSchema={validationSchema} onSubmit={(values, actions) => { setTimeout(() => { - console.log(values); - actions.setSubmitting(false); + submitForm(values); }, 100); }} + onReset={(values) => cancelForm()} > {(props) => ( - - - + + + + {/* */}
{props.data.title} {props.data.presenter}{props.data.timeStart}{props.data.timeEnd}{format(props.data.timeStart, timeFormat)}{format(props.data.timeEnd, timeFormat)} - + variant={selected ? 'solid' : 'outline'} + onClick={() => props.setSelectedEvent(props.data.id)} + disabled={props.formMode !== null} + size='sm' + aria-label='Select Item' + icon={} + />