Merge pull request #83 from hatchways/FE-Forum-Page-Create-Post-dialo…

…g-#54 Fe forum page create post dialog #54
hatchways · Feb 3, 2021 · 8a126ac · 8a126ac
2 parents 4f7e883 + 9101552
commit 8a126ac
Show file tree

Hide file tree

Showing 5 changed files with 247 additions and 7 deletions.
diff --git a/client/src/components/Forum/ForumContent.js b/client/src/components/Forum/ForumContent.js
@@ -3,6 +3,9 @@ import { Button, Grid, Typography, Divider } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
 import { posts } from '../../data/mockData';
 import PostCard from './PostCard';
+import Dialog from '@material-ui/core/Dialog';
+import DialogContent from '@material-ui/core/DialogContent';
+import ForumModal from './ForumModal';
 
 const useStyles = makeStyles(theme => ({
     headerContainer: {
@@ -36,12 +39,18 @@ const useStyles = makeStyles(theme => ({
     },
 }));
 
-const addPost = () => {
-    console.log('Add post clicked');
-};
-
 const ForumContent = () => {
     const classes = useStyles();
+    const [open, setOpen] = React.useState(false);
+
+    // Calling will open modal
+    const handleOpen = () => {
+        setOpen(true);
+    };
+    // Calling will close modal
+    const handleClose = () => {
+        setOpen(false);
+    };
 
     return (
         <Grid container direction="column" alignContent="center" item sm={12}>
@@ -58,10 +67,27 @@ const ForumContent = () => {
                     </Typography>
                 </Grid>
 
-                <Grid item>
-                    <Button className={classes.button} onClick={addPost} color="primary">
+                <Grid item container sm={3}>
+                    <Button
+                        className={classes.button}
+                        onClick={handleOpen}
+                        variant="text"
+                        color="primary"
+                        type="button"
+                    >
                         Add Post
                     </Button>
+                    <Dialog
+                        open={open}
+                        onClose={handleClose}
+                        aria-labelledby="form-dialog-title"
+                        className={classes.dialog}
+                        maxWidth="md"
+                    >
+                        <DialogContent>
+                            <ForumModal handleClose={handleClose} />
+                        </DialogContent>
+                    </Dialog>
                 </Grid>
             </Grid>
             <Divider className={classes.divider} />

diff --git a/client/src/components/Forum/ForumModal.js b/client/src/components/Forum/ForumModal.js
@@ -0,0 +1,159 @@
+import React, { useState, useMemo } from 'react';
+import {
+    Grid,
+    Button,
+    InputLabel,
+    TextField,
+    Divider,
+    Typography,
+    Box,
+    Tooltip,
+    FormHelperText,
+} from '@material-ui/core';
+import { useDropzone } from 'react-dropzone';
+import { baseStyle, activeStyle, acceptStyle, rejectStyle } from './ForumModalStyles';
+import { makeStyles } from '@material-ui/styles';
+import CloseIcon from '@material-ui/icons/Close';
+import AddIcon from '@material-ui/icons/Add';
+
+const useStyles = makeStyles(theme => ({
+    divider: {
+        margin: theme.spacing(2, 0),
+    },
+    input: {
+        width: '100%',
+        paddingBottom: theme.spacing(2),
+    },
+    label: {
+        paddingBottom: theme.spacing(1),
+    },
+    title: {
+        marginBottom: theme.spacing(1),
+    },
+    imageContainer: {
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+        padding: theme.spacing(1, 0),
+    },
+
+    button: {
+        width: '100%',
+    },
+    close: {
+        height: 2.5,
+    },
+}));
+
+const ForumModal = ({ handleClose }) => {
+    const classes = useStyles();
+
+    const [title, setTitle] = useState();
+    const [description, setDescription] = useState();
+
+    const onDrop = () => {
+        console.log('Dropped');
+    };
+
+    const createPost = () => {};
+
+    const { getRootProps, isDragActive, isDragAccept, isDragReject } = useDropzone({
+        onDrop,
+        maxFiles: 1,
+        accept: 'image/*',
+    });
+    const style = useMemo(
+        () => ({
+            ...baseStyle,
+            ...(isDragActive ? activeStyle : {}),
+            ...(isDragAccept ? acceptStyle : {}),
+            ...(isDragReject ? rejectStyle : {}),
+        }),
+        [isDragActive, isDragReject, isDragAccept]
+    );
+
+    return (
+        <div>
+            <Grid item>
+                <Button onClick={handleClose} color="primary" className={classes.close}>
+                    <CloseIcon />
+                </Button>
+                <Typography
+                    variant="h2"
+                    id="modal-title"
+                    align="center"
+                    className={classes.title}
+                >
+                    Add Forum Post
+                </Typography>
+                <Typography variant="h4" id="modal-description" align="center">
+                    Create a post for students in your course!
+                </Typography>
+                <Divider className={classes.divider} />
+            </Grid>
+
+            <Grid item container justify="center">
+                <form>
+                    <Grid item>
+                        <InputLabel className={classes.label}>Post Title</InputLabel>
+                        <TextField
+                            variant="outlined"
+                            defaultValue={title}
+                            onChange={e => setTitle(e.target.value)}
+                            className={classes.input}
+                            placeholder="Add a title.."
+                        />
+                    </Grid>
+
+                    <Grid item>
+                        <InputLabel className={classes.label}>
+                            Post Description
+                        </InputLabel>
+                        <TextField
+                            variant="outlined"
+                            id="outlined-multiline-static"
+                            multiline
+                            rows={4}
+                            defaultValue={description}
+                            onChange={e => setDescription(e.target.value)}
+                            className={classes.input}
+                            placeholder="Add a description.."
+                        />
+                    </Grid>
+                    <Grid item>
+                        <Box className={classes.imageContainer}>
+                            <FormHelperText className={classes.label}>
+                                Drag and drop post picture{' '}
+                            </FormHelperText>
+                            <Tooltip
+                                title="Drag and drop post picture"
+                                arrow
+                                placement="right"
+                            >
+                                <Box {...getRootProps({ style })}>
+                                    <img
+                                        src="https://www.rcdrilling.com/wp-content/uploads/2013/12/default_image_01-1024x1024-570x321.png"
+                                        className={classes.large}
+                                        alt="Post"
+                                    />
+                                </Box>
+                            </Tooltip>
+                        </Box>
+                    </Grid>
+                    <Grid item>
+                        <Button
+                            color="primary"
+                            startIcon={<AddIcon />}
+                            onSubmit={createPost}
+                            className={classes.button}
+                        >
+                            Create Post
+                        </Button>
+                    </Grid>
+                </form>
+            </Grid>
+        </div>
+    );
+};
+
+export default ForumModal;
diff --git a/client/src/components/Forum/ForumModalStyles.js b/client/src/components/Forum/ForumModalStyles.js
@@ -0,0 +1,21 @@
+export const baseStyle = {
+    borderWidth: 3,
+    borderRadius: 5,
+    borderColor: '#eeeeee',
+    borderStyle: 'solid',
+    backgroundColor: '#d8d8d8',
+    outline: 'none',
+    transition: 'border .24s ease-in-out',
+};
+
+export const activeStyle = {
+    borderColor: '#2196f3',
+};
+
+export const acceptStyle = {
+    borderColor: '#00e676',
+};
+
+export const rejectStyle = {
+    borderColor: '#ff1744',
+};
diff --git a/client/src/components/Forum/PostCard.js b/client/src/components/Forum/PostCard.js
@@ -12,7 +12,7 @@ const useStyles = makeStyles(theme => ({
         marginTop: theme.spacing(2),
         backgroundColor: theme.palette.background.paper,
         boxShadow: theme.shadows[5],
-        borderRadius: 10,
+        borderRadius: 15,
     },
     actionArea: {
         height: 120,

diff --git a/client/src/themes/theme.js b/client/src/themes/theme.js
@@ -7,6 +7,14 @@ export const theme = createMuiTheme({
         h1: {
             fontSize: '2.25rem',
         },
+        h2: {
+            fontSize: 22,
+            fontWeight: 'bold',
+        },
+        h4: {
+            fontSize: 16,
+            opacity: '50%',
+        },
 
         h5: {
             fontSize: '1.25rem',
@@ -60,4 +68,30 @@ export const theme = createMuiTheme({
             },
         },
     },
+    overrides: {
+        MuiButton: {
+            textPrimary: {
+                color: '#FFF',
+                background: 'linear-gradient(45deg, #2574FF, #4B00FF)',
+                textTransform: 'none',
+                fontSize: 14,
+                padding: 20,
+                height: '3rem',
+            },
+            outlinedPrimary: {
+                color: '#FFF',
+                textTransform: 'none',
+                fontSize: 14,
+                padding: 20,
+                height: '3rem',
+            },
+            outlinedSecondary: {
+                color: '#2968FF',
+                textTransform: 'none',
+                fontSize: 14,
+                padding: 20,
+                height: '3rem',
+            },
+        },
+    },
 });