15 create new campaign page

components/CreateNewCampaign/FileHeader.tsx

@@ -0,0 +1,26 @@
+import { Button, Grid } from '@mui/material';
+import React from 'react';
+
+export interface FileHeaderProps {
+  file: File;
+  onDelete: (file: File) => void;
+}
+
+export function FileHeader({ file, onDelete }: FileHeaderProps) {
+  return (
+    <Grid container sx={styledGrid}>
+      <Grid item>{file.name}</Grid>
+      <Grid item>
+        <Button size="small" onClick={() => onDelete(file)}>
+          Delete
+        </Button>
+      </Grid>
+    </Grid>
+  );
+}
+
+const styledGrid = {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center'
+}

components/CreateNewCampaign/MultipleFileUploadField.tsx

@@ -0,0 +1,121 @@
+import { Grid, Typography } from '@mui/material';
+import { useField } from 'formik';
+import React, { useCallback, useEffect, useState } from 'react';
+import { FileError, FileRejection, useDropzone } from 'react-dropzone';
+import SingleFileUploadWithProgress from './SingleFileUploadWithProgress';
+import { UploadError } from './UploadError';
+
+// import { makeStyles } from '@mui/styles';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+
+let currentId = 0;
+
+function getNewId() {
+  return ++currentId;
+}
+
+export interface UploadableFile {
+  id: number;
+  file: File;
+  errors: FileError[];
+  url?: string;
+}
+
+const theme = createTheme();
+
+// const useStyles = makeStyles((theme) => ({
+//   dropzone: {
+//     border: `2px dashed ${theme.palette.primary.main}`,
+//     borderRadius: theme.shape.borderRadius,
+//     display: 'flex',
+//     alignItems: 'center',
+//     justifyContent: 'center',
+//     background: theme.palette.background.default,
+//     height: theme.spacing(10),
+//     outline: 'none',
+//   },
+// }));
+
+const styledTypo = {
+  textAlign: 'center',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+}
+
+
+const MultipleFileUploadField = ({ name }: { name: string }) => {
+  const [_, __, helpers] = useField(name);
+//   const classes = useStyles();
+
+  const [files, setFiles] = useState<UploadableFile[]>([]);
+  const onDrop = useCallback((accFiles: File[], rejFiles: FileRejection[]) => {
+    const mappedAcc = accFiles.map((file) => ({ file, errors: [], id: getNewId() }));
+    const mappedRej = rejFiles.map((r) => ({ ...r, id: getNewId() }));
+    setFiles((curr) => [...curr, ...mappedAcc, ...mappedRej]);
+  }, []);
+
+  useEffect(() => {
+    helpers.setValue(files);
+    // helpers.setTouched(true);
+  }, [files]);
+
+  function onUpload(file: File, url: string) {
+    setFiles((curr) =>
+      curr.map((fw) => {
+        if (fw.file === file) {
+          return { ...fw, url };
+        }
+        return fw;
+      })
+    );
+  }
+
+  function onDelete(file: File) {
+    setFiles((curr) => curr.filter((fw) => fw.file !== file));
+  }
+
+  const { getRootProps, getInputProps } = useDropzone({
+    onDrop,
+    accept: {
+        'image/*': ['.png','.gif', '.jpeg', '.jpg', '.svg']
+    },
+    maxSize: 3000 * 1024, // 3MB
+  });
+
+  return (
+    <ThemeProvider theme={theme}>
+        <React.Fragment>
+        <Grid item>
+            <div {...getRootProps()}>
+            <input {...getInputProps()} />
+            <Typography sx={styledTypo}>Click to upload or drag and drop</Typography>
+            <Typography sx={styledTypo}>PNG, GIF, JPEG, JPG or SVG files - max 3MB</Typography>
+            </div>
+        </Grid>
+
+        {files.map((fileWrapper) => (
+            <Grid item key={fileWrapper.id}>
+            {fileWrapper.errors.length ? (
+                <UploadError
+                file={fileWrapper.file}
+                errors={fileWrapper.errors}
+                onDelete={onDelete}
+                />
+            ) : (
+                <SingleFileUploadWithProgress
+                onDelete={onDelete}
+                onUpload={onUpload}
+                file={fileWrapper.file}
+                />
+            )}
+            </Grid>
+        ))}
+        </React.Fragment>
+    </ThemeProvider>
+
+  );
+}
+
+
+export default MultipleFileUploadField;

components/CreateNewCampaign/SingleFileUploadWithProgress.tsx

@@ -0,0 +1,63 @@
+import { Grid, LinearProgress } from '@mui/material';
+import React, { useEffect, useState } from 'react';
+import { FileHeader } from './FileHeader';
+
+export interface SingleFileUploadWithProgressProps {
+  file: File;
+  onDelete: (file: File) => void;
+  onUpload: (file: File, url: string) => void;
+}
+
+const SingleFileUploadWithProgress = ({
+  file,
+  onDelete,
+  onUpload,
+}: SingleFileUploadWithProgressProps) => {
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    async function upload() {
+      const url = await uploadFile(file, setProgress);
+      onUpload(file, url);
+    }
+
+    upload();
+  }, []);
+
+  return (
+    <Grid item>
+      <FileHeader file={file} onDelete={onDelete} />
+      <LinearProgress variant="determinate" value={progress} />
+    </Grid>
+  );
+}
+
+function uploadFile(file: File, onProgress: (percentage: number) => void) {
+  const url = 'https://api.cloudinary.com/v1_1/demo/image/upload';
+  const key = 'docs_upload_example_us_preset';
+
+  return new Promise<string>((res, rej) => {
+    const xhr = new XMLHttpRequest();
+    xhr.open('POST', url);
+
+    xhr.onload = () => {
+      const resp = JSON.parse(xhr.responseText);
+      res(resp.secure_url);
+    };
+    xhr.onerror = (evt) => rej(evt);
+    xhr.upload.onprogress = (event) => {
+      if (event.lengthComputable) {
+        const percentage = (event.loaded / event.total) * 100;
+        onProgress(Math.round(percentage));
+      }
+    };
+
+    const formData = new FormData();
+    formData.append('file', file);
+    formData.append('upload_preset', key);
+
+    xhr.send(formData);
+  });
+}
+
+export default SingleFileUploadWithProgress;

components/CreateNewCampaign/UploadError.tsx

@@ -0,0 +1,35 @@
+import {
+    LinearProgress,
+    Typography,
+  } from '@mui/material';
+  import React from 'react';
+  import { FileError } from 'react-dropzone';
+  import { FileHeader } from './FileHeader';
+
+  export interface UploadErrorProps {
+    file: File;
+    onDelete: (file: File) => void;
+    errors: FileError[];
+  }
+
+//   const ErrorLinearProgress = withStyles((theme) =>
+//     createStyles({
+//       bar: {
+//         backgroundColor: theme.palette.error.main,
+//       },
+//     })
+//   )(LinearProgress);
+
+  export function UploadError({ file, onDelete, errors }: UploadErrorProps) {
+    return (
+      <React.Fragment>
+        <FileHeader file={file} onDelete={onDelete} />
+        <LinearProgress variant="buffer" value={100} color="error" />
+        {errors.map((error) => (
+          <div key={error.code}>
+            <Typography color="error">{error.message}</Typography>
+          </div>
+        ))}
+      </React.Fragment>
+    );
+  }

components/CreateNewCampaign/UploadMedia.tsx

@@ -0,0 +1,51 @@
+import { Button, Card, CardContent, Grid } from '@mui/material';
+import { Form, Formik } from 'formik';
+import React from 'react';
+import { array, object, string } from 'yup';
+import MultipleFileUploadField from './MultipleFileUploadField';
+
+const UploadMedia = () => {
+  return (
+    <Card>
+      <CardContent>
+        <Formik
+          initialValues={{ files: [] }}
+          validationSchema={object({
+            files: array(
+              object({
+                url: string().required(),
+              })
+            ),
+          })}
+          onSubmit={(values) => {
+            console.log('values', values);
+            return new Promise((res) => setTimeout(res, 2000));
+          }}
+        >
+          {({isValid, isSubmitting }) => (
+            <Form>
+              <Grid container spacing={2} direction="column" sx={{height: '100%'}}>
+                <MultipleFileUploadField name="files" />
+
+                <Grid item>
+                  <Button
+                    variant="contained"
+                    color="primary"
+                    disabled={!isValid || isSubmitting}
+                    type="submit"
+                    sx={{marginTop: '10px'}}
+                  >
+                    Submit
+                  </Button>
+                </Grid>
+              </Grid>
+            </Form>
+          )}
+        </Formik>
+      </CardContent>
+    </Card>
+  );
+}
+
+export default UploadMedia;
+

components/CreateNewCampaign/index.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import { TextField } from "@mui/material";
+import { Typography } from "@mui/material";
+import { Box } from "@mui/system";
+import { LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { DateTimePicker } from '@mui/x-date-pickers';
+import { useState } from "react";
+import UploadMedia from './UploadMedia';
+
+const CreateNewCampaign = () => {
+    // const[value, setValue] = useState<DateRange<Date>>([null, null]);
+    const[startDate, setStartDate] = useState(null);
+    const[endDate, setEndDate] = useState(null);
+
+    return (
+        <Box sx={styledMainBox}>
+            <Typography variant="h3" gutterBottom sx={styledCreateNewCampaign}>Create New Campaign</Typography>
+            <Typography variant="h4" gutterBottom sx={styledNameOfCampaign}>Name of campaign</Typography>
+            <TextField id="outlined-basic"  variant="outlined" placeholder="Enter name" />
+            <Typography variant="h4" gutterBottom sx={styledh4}>Message</Typography>
+            <TextField id="outlined-basic" variant="outlined" placeholder="Enter message" multiline rows={10}/>
+            <Typography variant="h4" gutterBottom sx={styledh4}>Duration</Typography>
+            <LocalizationProvider
+            dateAdapter={AdapterDateFns}
+            localeText={{ start: 'Start date', end: 'End date' }}
+            >
+            <Box sx={styledDateBox}>
+                <DateTimePicker
+                    renderInput={(props) => <TextField {...props} />}
+                    label="Start date"
+                    disablePast
+                    value={startDate}
+                    onChange={(newValue) => {
+                    setStartDate(newValue);
+                    }}
+                />
+                <DateTimePicker
+                    renderInput={(props) => <TextField {...props} />}
+                    label="End date"
+                    disablePast
+                    value={endDate}
+                    onChange={(newValue) => {
+                    setEndDate(newValue);
+                    }}
+                />
+            </Box>
+            <Typography variant="h4" gutterBottom sx={styledh4}>Upload Media</Typography>
+            </LocalizationProvider>
+            <UploadMedia />          
+        </Box>
+    )
+}
+export default CreateNewCampaign;
+
+const styledMainBox = {
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+    height: '100%',
+    padding: '10px',
+    backgroundColor: '',
+}
+
+const styledCreateNewCampaign = {
+    display: 'flex',
+    alignItems: 'center',
+    textAlign: 'center',
+    fontWeight: '700',
+    fontSize: '28px',
+    lineHeight: '40px',
+}
+
+const styledNameOfCampaign = {
+    fontWeight: '700',
+    fontSize: '21px',
+    lineHeight: '40px',
+}
+
+
+const styledh4 = {
+    fontWeight: '700',
+    fontSize: '21px',
+    lineHeight: '40px',
+    marginTop: '1rem'
+}
+
+const styledDateBox = {
+    display: 'flex',
+    gap: '30px',
+}
+