From 412eb7795e49c5481299bfacd61588332e3d0db9 Mon Sep 17 00:00:00 2001 From: Romain Rousseau Date: Wed, 5 Aug 2020 10:28:04 +0200 Subject: [PATCH 01/15] updating readme --- README.md | 48 ++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 46 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 4d4d6d0..79e6370 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,46 @@ -# astroplant-platform -Repository of the astroplant community platform front-end +# AstroPlant Community Platform + +Repository of the astroplant community platform. For more information about the platform and it's purpose, go to [astroplant.io](https://www.astroplant.io/). + +## Structure + +```bash + +│ .storybook // storybook related files +│ api // the strapi project +│ components // the react components +| | +| └─── cards +| └─── forms +| └─── grids +| └─── inputs +| └─── layouts +| └─── stories // storybook's stories +| └─── ... +│ hocs // higher order components +│ pages // next.js pages +| providers // providers & context definitions +| public // public assets for the next.js front-end +| services // tools to access api's data +| styles // styling related files +| utils // helper function & hooks + +``` + +## Technology Stack & Dependencies + +The platform uses [Next.js](https://nextjs.org/) as a front-end framework and [Strapi](https://strapi.io/) as a back-end. It uses data & control endpoints from [astroplant's API](https://github.com/AstroPlant/astroplant-api) to control kits and display their data. + +## Tools used + +- [Storybook](https://storybook.js.org/) : for documentation, design system publication, extreme use case testing. +- [Formik](https://formik.org/) & [Yup](https://github.com/jquense/yup) : for forms creation & validation +- [Styled-Components](https://styled-components.com/) : for styling. +- [Leaflet](https://leafletjs.com/) : for map creation & interactions. +- [React-Markdown](https://github.com/rexxars/react-markdown) : for markdown to html rendering. +- [Chart.js](https://www.chartjs.org/): for charts creation & edition. + > /!\ May change in favor of [D3.js](https://d3js.org/). + +## Contributors + +- [RmnRss](https://github.com/rmnrss) From f8254227f2551e7553fd82da74c7ef147bfe7a6a Mon Sep 17 00:00:00 2001 From: Romain Rousseau Date: Mon, 10 Aug 2020 15:46:49 +0200 Subject: [PATCH 02/15] adding drozone to file inputs --- components/Chip.js | 30 +++++-- components/forms/MediaCreationForm.js | 49 ++++++----- components/forms/UploadForm.js | 63 ++++++--------- components/grids/SettingsGrid.js | 30 +------ components/inputs/FileInput.js | 112 +++++++++++++++++++++++--- package-lock.json | 23 ++++++ package.json | 1 + 7 files changed, 203 insertions(+), 105 deletions(-) diff --git a/components/Chip.js b/components/Chip.js index 4bf03d5..044bc6d 100644 --- a/components/Chip.js +++ b/components/Chip.js @@ -7,16 +7,26 @@ const Container = styled.div` justify-content: center; align-items: center; - padding: 0.5rem 1rem; - margin-right: 1rem; + width: auto; - border-radius: 50px; + padding: 0.25rem 0.5rem; + margin: 0 1rem 0 0; - background-color: ${(props) => props.theme.secondaryDark}; + border-radius: 4px; + + background-color: ${(props) => props.theme[props.color]}; + + text-transform: uppercase; + font-size: 14px; + font-weight: 300; `; -export default function Chip({ label, ...props }) { - return {label}; +export default function Chip({ label, color, ...props }) { + return ( + + {label} + + ); } Chip.propTypes = { @@ -24,4 +34,12 @@ Chip.propTypes = { * label of the chip */ label: PropTypes.string.isRequired, + /** + * color of the chip + */ + color: PropTypes.string, +}; + +Chip.defaultProps = { + color: "secondaryDark", }; diff --git a/components/forms/MediaCreationForm.js b/components/forms/MediaCreationForm.js index 52e5b2b..a14fe51 100644 --- a/components/forms/MediaCreationForm.js +++ b/components/forms/MediaCreationForm.js @@ -149,20 +149,18 @@ export default function MediaCreationForm(props) { placeholder="A Plant in Space" /> - - { - setFieldValue( - "articleCover", - event.currentTarget.files[0] - ); - }} - /> - + { + setFieldValue("articleCover", files[0]); + }} + /> - { - setFieldValue("file", event.currentTarget.files[0]); - }} - /> - + { + setFieldValue("file", files[0]); + }} + /> )} {values.type === "Link" && ( diff --git a/components/forms/UploadForm.js b/components/forms/UploadForm.js index 7f5bd83..20782ba 100644 --- a/components/forms/UploadForm.js +++ b/components/forms/UploadForm.js @@ -7,11 +7,6 @@ import ErrorMessage from "../inputs/ErrorMessage"; import FileInput from "../inputs/FileInput"; import LoadingAnimation from "../LoadingAnimation"; -const CustomForm = styled.form` - display: flex; - flex-direction: column; -`; - const FormTitle = styled.h3` margin-bottom: 1.5rem; `; @@ -42,30 +37,23 @@ const FilePreview = styled.img` export default function UploadForm(props) { const [previews, setPreviews] = useState([]); const [fileList, setFileList] = useState({}); - const [error, setError] = useState(""); + const [status, setStatus] = useState({ success: null, error: null }); const [valid, setValid] = useState(false); const [loading, setLoading] = useState(false); - function handleChange(event) { - const list = event.target.files; - - props.validationSchema - .validate({ files: list }) - .then(async () => { - let temp = []; - for (let i = 0; i < list.length; i++) { - temp.push(URL.createObjectURL(list[i])); - } - - setFileList(list); - setPreviews(temp); - setValid(true); - setError(""); - }) - .catch((err) => { - setValid(false); - setError(err.errors[0]); - }); + function handleChange(files) { + if (files.length != 0) { + let temp = []; + for (let i = 0; i < files.length; i++) { + temp.push(URL.createObjectURL(files[i])); + } + + setFileList(files); + setPreviews(temp); + setValid(true); + } else { + setValid(false); + } } async function handleSubmit(event) { @@ -74,12 +62,15 @@ export default function UploadForm(props) { const res = await upload(fileList, props.uploadParameters); - if (res.status === 200) { + if (!res.error) { setLoading(false); - props.callback(); - reset(); + setStatus({ success: "File successfully uploaded !", error: null }); + setTimeout(() => { + reset(); + }, 2000); } else { setLoading(false); + setStatus({ success: null, error: res.message[0].messages[0].message }); } } @@ -88,7 +79,7 @@ export default function UploadForm(props) { setPreviews([]); setValid(false); setLoading(false); - setError(""); + setStatus({ success: null, error: null }); props.closeForm(); } @@ -115,15 +106,15 @@ export default function UploadForm(props) { name={"files"} accept="image/*" multiple={props.multiple} - onChange={handleChange} + maxSize={8000000} + onDrop={handleChange} /> -