Skip to content

Commit

Permalink
Merge pull request #99 from hatchways/IN-Post-Creation/Comment-Creati…
Browse files Browse the repository at this point in the history 
…on-#86

In post creation/comment creation #86
  • Loading branch information
@amha19
amha19 authored Feb 5, 2021
2 parents ba16315 + eaa84b0 commit bf71529
Show file tree
Hide file tree
Showing 12 changed files with 413 additions and 295 deletions.
74 changes: 55 additions & 19 deletions client/src/components/Forum/AddPostDialog.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState, useMemo } from 'react';
import React, { useState, useMemo, useCallback } from 'react';
import {
Grid,
Button,
Expand All @@ -11,10 +11,18 @@ import {
FormHelperText,
} from '@material-ui/core';
import { useDropzone } from 'react-dropzone';
import { baseStyle, activeStyle, acceptStyle, rejectStyle } from './ForumModalStyles';
import {
baseStyle,
activeStyle,
acceptStyle,
rejectStyle,
} from '../DragzonePicture.styles';
import { makeStyles } from '@material-ui/styles';
import CloseIcon from '@material-ui/icons/Close';
import AddIcon from '@material-ui/icons/Add';
import axios from 'axios';
import defaultPostPicture from '../../images/upload_placeholder.png';
import { useGlobalContext } from '../../context/studyappContext';

const useStyles = makeStyles(theme => ({
divider: {
Expand All @@ -30,13 +38,6 @@ const useStyles = makeStyles(theme => ({
title: {
marginBottom: theme.spacing(1),
},
imageContainer: {
flex: 1,
display: 'flex',
flexDirection: 'column',
padding: theme.spacing(1, 0),
},

button: {
width: '100%',
},
Expand All @@ -48,14 +49,49 @@ const useStyles = makeStyles(theme => ({
const AddPostDialog = ({ handleCloseNewPost }) => {
const classes = useStyles();

const [title, setTitle] = useState();
const [description, setDescription] = useState();
const [title, setTitle] = useState('');
const [description, setDescription] = useState('');
const [imageUrl, setImageUrl] = useState('');
const [uploading, setUploading] = useState(false);
const { forumId } = useGlobalContext();

const onDrop = () => {
console.log('Dropped');
};
// const hardCodedForumId = '6012462f4f758023244df285';

const createPost = () => {};
const onDrop = useCallback(async droppedFiles => {
if (droppedFiles.length) {
setUploading(true);

const form = new FormData();
form.append('image', droppedFiles[0]);
const res = await axios
.post('/upload/single', form)
.catch(err => console.log(err));
if (res && res.data) {
setImageUrl(res.data.imageUrl);
setUploading(false);
}
}
}, []);

// const createNewPostData = () => {
// createNewPost(forumId);
// };

const createNewPost = async () => {
try {
const res = await axios.post(`forum/post/${forumId}`, {
text: description,
title: title,
postAvatar: imageUrl,
});
setTitle('');
setDescription('');
setImageUrl('');
handleCloseNewPost(res.data);
} catch (err) {
console.log(err);
}
};

const { getRootProps, isDragActive, isDragAccept, isDragReject } = useDropzone({
onDrop,
Expand Down Expand Up @@ -102,10 +138,10 @@ const AddPostDialog = ({ handleCloseNewPost }) => {
<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.."
value={title}
/>
</Grid>

Expand All @@ -118,10 +154,10 @@ const AddPostDialog = ({ handleCloseNewPost }) => {
id="outlined-multiline-static"
multiline
rows={4}
defaultValue={description}
onChange={e => setDescription(e.target.value)}
className={classes.input}
placeholder="Add a description.."
value={description}
/>
</Grid>
<Grid item>
Expand All @@ -136,7 +172,7 @@ const AddPostDialog = ({ handleCloseNewPost }) => {
>
<Box {...getRootProps({ style })}>
<img
src="https://www.rcdrilling.com/wp-content/uploads/2013/12/default_image_01-1024x1024-570x321.png"
src={imageUrl ? imageUrl : defaultPostPicture}
className={classes.large}
alt="Post"
/>
Expand All @@ -148,7 +184,7 @@ const AddPostDialog = ({ handleCloseNewPost }) => {
<Button
color="primary"
startIcon={<AddIcon />}
onSubmit={createPost}
onClick={createNewPost}
className={classes.button}
>
Create Post
Expand Down
180 changes: 37 additions & 143 deletions client/src/components/Forum/ForumContent.js
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,13 @@
import React, { useEffect, useState } from 'react';
import { Button, Grid, Typography, Divider, Box, IconButton } from '@material-ui/core';
import React, { useCallback, useEffect, useState } from 'react';
import { Button, Grid, Typography, Divider } from '@material-ui/core';
import { makeStyles } from '@material-ui/styles';
import PostCard from './PostCard';
import axios from 'axios';
import { useGlobalContext } from '../../context/studyappContext';
import Comments from '../Posts/Comments';
import TextField from '@material-ui/core/TextField';
import Dialog from '@material-ui/core/Dialog';
import DialogContent from '@material-ui/core/DialogContent';
import CloseIcon from '@material-ui/icons/Close';
import AddIcon from '@material-ui/icons/Add';
import ForwardIcon from '@material-ui/icons/Forward';
import ForwardOutlinedIcon from '@material-ui/icons/ForwardOutlined';
import AddPostDialog from './AddPostDialog';
import ForumDialog from './ForumDialog';

const useStyles = makeStyles(theme => ({
headerContainer: {
Expand All @@ -25,7 +20,6 @@ const useStyles = makeStyles(theme => ({
},
},
divider: {
marginBottom: 10,
margin: theme.spacing(1, 0),
width: '100%',
},
Expand All @@ -52,9 +46,6 @@ const useStyles = makeStyles(theme => ({
marginTop: '75px',
padding: theme.spacing(3),
},
title: {
marginBottom: theme.spacing(2),
},
cardTitle: {
fontWeight: 'bold',
fontSize: '1.375rem',
Expand All @@ -81,26 +72,23 @@ const useStyles = makeStyles(theme => ({
input: {
margin: theme.spacing(2, 0),
},

}));


const ForumContent = ({name, groupId}) => {

const ForumContent = ({ name, groupId }) => {
const classes = useStyles();
const [openPost, setOpenPost] = React.useState(false);
const [openNewPost, setOpenNewPost] = React.useState(false);
const [activePost, setActivePost] = React.useState('');
const [upvoted, setUpvoted] = React.useState(false);

const toggleVote = () => {
setUpvoted(!upvoted);
};
const [activePostId, setActivePostId] = React.useState('');

// Calling will open new post dialog
const handleOpenNewPost = () => {
setOpenNewPost(true);
};
const handleCloseNewPost = () => {
// Calling will close new post dialog
const handleCloseNewPost = newPost => {
if (newPost._id) {
setForumPosts([newPost, ...forumPosts]);
}
setOpenNewPost(false);
};
// Calling will open dialog
Expand All @@ -113,42 +101,38 @@ const ForumContent = ({name, groupId}) => {
};
// Updates setActivePost to the corresponding clicked card and opens dialog.
const updateActivePost = postId => {
setActivePost(postId);
setActivePostId(postId);
handleOpenPost();
};

const [forumPosts, setForumPosts] = useState([]);
const [forumName, setForumName] = useState('');
const { forumId } = useGlobalContext();

const getGroupForum = async (groupId) => {
//const [forumName, setForumName] = useState(name);
// const { forumId } = useGlobalContext();

const getGroupForum = useCallback(async () => {
try {
const response = await axios.get(`/forum/${groupId}`);
setForumPosts(response.data.posts)
setForumName(name)

} catch(err) {
console.log(err)
setForumPosts(response.data.posts);
} catch (err) {
console.log(err);
}
}
}, [groupId]);

useEffect(() => {
getGroupForum(groupId);
}, [groupId]);
const renderPosts = () => {
return (
<Grid item className={classes.postCard}>
{forumPosts.map(post => (
<PostCard key={post._id} post={post} />
))}
</Grid>
)
}
}, [getGroupForum, groupId]);

// const renderPosts = () => {
// return (
// <Grid item className={classes.postCard}>
// {forumPosts.map(post => (
// <PostCard key={post._id} post={post} />
// ))}
// </Grid>
// );
// };

return (

<Grid container direction="column" alignContent="center" item sm={12}>
<Grid
item
Expand All @@ -159,7 +143,7 @@ const ForumContent = ({name, groupId}) => {
>
<Grid item>
<Typography variant="h1" className={classes.headerText}>
{forumName}
{name}
</Typography>
</Grid>

Expand Down Expand Up @@ -201,7 +185,7 @@ const ForumContent = ({name, groupId}) => {
<Grid item className={classes.postCard}>
{forumPosts.map(post => (
<PostCard
key={post.id}
key={post._id}
post={post}
updateActivePost={updateActivePost}
/>
Expand All @@ -216,100 +200,10 @@ const ForumContent = ({name, groupId}) => {
maxWidth="lg"
>
<DialogContent>
<Grid
item
container
direction="column"
justify="center"
alignItems="center"
>
<Grid item container direction="column" alignItems="center">
<Grid
item
xs={12}
container
justify="space-between"
alignItems="baseline"
>
<Grid item>
<Button
onClick={handleClosePost}
color="primary"
className={classes.close}
>
<CloseIcon />
</Button>
</Grid>
<Grid item xs={8}>
<Typography
variant="h1"
align="center"
id="form-dialog-title"
className={classes.title}
>
Post Title
</Typography>
</Grid>
<Grid item>
<IconButton
aria-label="upvote"
onClick={toggleVote}
>
{upvoted ? (
<ForwardIcon
color="secondary"
className={classes.upvote}
/>
) : (
<ForwardOutlinedIcon
color="secondary"
className={classes.upvote}
/>
)}
</IconButton>
</Grid>
</Grid>

<Divider className={classes.divider} />

<Grid item>
<Box className={classes.imageContainer}>
Place image here
</Box>
</Grid>
<Divider className={classes.divider} />
<Grid item>
<Typography>
This is the description of the post. Don't you
wish I would have used Lorem25 and got it working?
This is the description of the post. Don't you
wish I would have used Lorem25 and got it working?
description of the post. Don't you wish I would
have used Lorem25 and got it working?
</Typography>
</Grid>
<Divider className={classes.divider} />
<Grid item container xs={12} alignItems="center">
<Grid item xs={1}></Grid>
<Grid item xs={10}>
<Comments />
<TextField
variant="outlined"
autoFocus
label="Comment on post"
type="text"
multiline
rows={4}
rowsMax={4}
color="secondary"
fullWidth
className={classes.input}
/>
</Grid>
<Grid item xs={1}></Grid>
</Grid>
</Grid>
</Grid>
<ForumDialog
handleClosePost={handleClosePost}
activePostId={activePostId}
/>
</DialogContent>
</Dialog>
</Grid>
Expand Down
Loading

0 comments on commit bf71529

Please sign in to comment.