15 create new campaign page

components/CreateNewCampaign/MultipleFileUploadField.tsx

@@ -1,11 +1,10 @@
-import { Grid, Typography } from '@mui/material';
+import { Grid, Button, Typography, Stack } 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;
@@ -23,31 +22,8 @@ export interface UploadableFile {
 
 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() }));
@@ -57,7 +33,6 @@ const MultipleFileUploadField = ({ name }: { name: string }) => {
 
   useEffect(() => {
     helpers.setValue(files);
-    // helpers.setTouched(true);
   }, [files]);
 
   function onUpload(file: File, url: string) {
@@ -89,8 +64,11 @@ const MultipleFileUploadField = ({ name }: { name: string }) => {
         <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>
+            <Stack sx={styledStack}>
+              <Button variant="contained" sx={styledButton}>Click to upload or drag and drop</Button>
+              <Typography sx={styledTypo}>PNG, GIF, JPEG, JPG or SVG files - max 3MB</Typography>
+            </Stack>
+
             </div>
         </Grid>
 
@@ -117,5 +95,22 @@ const MultipleFileUploadField = ({ name }: { name: string }) => {
   );
 }
 
+const styledStack = {
+  display: 'flex',
+  justifyContent: 'center',
+}
+
+const styledTypo = {
+  textAlign: 'center',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  fontSize: '15px',
+  marginTop: '10px'
+}
+
+const styledButton = {
+  padding: '20px',
+}
 
 export default MultipleFileUploadField;

components/CreateNewCampaign/SingleFileUploadWithProgress.tsx

@@ -25,9 +25,9 @@ const SingleFileUploadWithProgress = ({
   }, []);
 
   return (
-    <Grid item>
+    <Grid item sx={styledGrid}>
       <FileHeader file={file} onDelete={onDelete} />
-      <LinearProgress variant="determinate" value={progress} />
+      <LinearProgress variant="determinate" value={progress} sx={styledProgress}/>
     </Grid>
   );
 }
@@ -60,4 +60,14 @@ function uploadFile(file: File, onProgress: (percentage: number) => void) {
   });
 }
 
+const styledProgress = {
+  width: '100%',
+}
+
+const styledGrid = {
+  marginLeft: '20px',
+  marginRight: '20px',
+  marginTop: '10px'
+}
+
 export default SingleFileUploadWithProgress;

components/CreateNewCampaign/UploadError.tsx

@@ -12,14 +12,6 @@ import {
     errors: FileError[];
   }
 
-//   const ErrorLinearProgress = withStyles((theme) =>
-//     createStyles({
-//       bar: {
-//         backgroundColor: theme.palette.error.main,
-//       },
-//     })
-//   )(LinearProgress);
-
   export function UploadError({ file, onDelete, errors }: UploadErrorProps) {
     return (
       <React.Fragment>

components/CreateNewCampaign/UploadMedia.tsx

@@ -1,51 +1,41 @@
-import { Button, Card, CardContent, Grid } from '@mui/material';
+import { Card, 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>
-  );
+    <Formik
+      initialValues={{ files: [] }}
+      validationSchema={object({
+        files: array(
+          object({
+            url: string().required(),
+          })
+        ),
+      })}
+      onSubmit={(values) => {
+        console.log('values', values)
+        return new Promise((res) => setTimeout(res, 2000))
+      }}
+    >
+      {() => (
+        <Form>
+          <Card style={styledCard}>
+            <Grid container spacing={2} direction="column">
+              <MultipleFileUploadField name="files" />
+            </Grid>
+          </Card>
+        </Form>
+      )}
+    </Formik>
+  )
 }
 
-export default UploadMedia;
+const styledCard = {
+  minHeight: '140px',
+  overflow: 'scroll',
+}
 
+export default UploadMedia

pages/_app.tsx

@@ -1,24 +1,11 @@
 import type { AppProps } from 'next/app'
 import Layout from 'components/Layout'
-import CreateNewCampaign from 'components/CreateNewCampaign'
 
-/*
-function MyApp({ Component, pageProps }: AppProps) {
-  return (
-    <Layout>
-      <Component {...pageProps} />
-    </Layout>
-  )
-}
-
-export default MyApp
-*/
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <Layout>
       <Component {...pageProps} />
-      <CreateNewCampaign />
     </Layout>
   )
 }