Skip to content

Commit

Permalink
Merge pull request #97 from Soliloquiy/feature/post_refresh
Browse files Browse the repository at this point in the history 
Add feature/post_refresh
  • Loading branch information
@Soliloquiy
Soliloquiy authored Aug 8, 2021
2 parents 23b5daf + ea254f6 commit 6dab7a7
Show file tree
Hide file tree
Showing 6 changed files with 186 additions and 32 deletions.
Binary file added client/src/components/forum/.Forum.js.swp
View file
Binary file not shown.
85 changes: 72 additions & 13 deletions client/src/components/forum/Form.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,69 @@
import React, { useState } from "react";
import React, { useState, useEffect } from "react";
import axios from "axios";

export default function Form(props) {


localStorage.setItem("genre", JSON.stringify(props.genre));
localStorage.setItem("subgenre", JSON.stringify(props.subGenre));

const [state, setState] = useState({
// post:"",
comment: "",
})








// useEffect(() => {
// console.log("here1")


// Promise.all([
// axios.get("/api/genres"),
// axios.get("/api/forum"),
// ]).then((all) => {

// console.log(all[1].data)

// setState((prev) => ({
// ...prev,
// genres: all[0].data,
// forumGenres: all[1].data,
// }));
// // props.setForumGenre("blues")
// // props.setForumSubGenre("roots")

// // props.setForumSubGenre(JSON.parse(localStorage.getItem("subgenre")))

// console.log("here")

// // console.log(state.forumGenre)
// // console.log(state.forumSubGenre)
// // console.log(state.post)
// });
// }, [state.post]);










// const setPost = (post) => setState({ ...state, post });


function sendPost(user_id, subgenre_id, comment) {

let count = 1

const data =
{"post": {
user_id,
Expand All @@ -14,24 +72,24 @@ export default function Form(props) {
}

};

console.log("data: ", data)
console.log(JSON.parse(localStorage.getItem("genre")))
console.log(localStorage)

return axios
.post(`/api/posts.json`, data)
.then(() => {
console.log("post create sent to rails")
props.setPost(state.comment)
// window.location.reload(false);
setState((prev) => ({
...prev,
post: state.comment
}));

console.log(state.post)
})
}



const [state, setState] = useState({
comment: "",
})



function handleChange(event) {
const value = event.target.value;
setState({
Expand All @@ -41,8 +99,9 @@ export default function Form(props) {
}

function save(event) {
event.preventDefault();
// event.preventDefault();
sendPost(props.userId, props.subgenreId, state.comment)

};


Expand All @@ -60,7 +119,7 @@ export default function Form(props) {
onChange={handleChange}/>
</form>
<button className="post-button" type="submit" onClick={(event) => save(event)}>
<span class="btn__content">
<span className="btn__content">
Post
</span>
</button>
Expand Down
100 changes: 98 additions & 2 deletions client/src/components/forum/Forum.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,10 @@ export default function Forum(props) {
forumSubGenre: "",
forumSubGenres: [],
forumPostsForGenre: [],
post:""
})

console.log(state.post)

useEffect(() => {
Promise.all([
axios.get("/api/genres"),
Expand All @@ -28,9 +30,101 @@ export default function Forum(props) {
});
}, []);












const setPost = (post) => setState({ ...state, post });
const setForumGenre = (forumGenre) => setState({ ...state, forumGenre });
const setForumSubGenre = (forumSubGenre) => setState({ ...state, forumSubGenre });

useEffect(() => {
console.log("here1")



Promise.all([
axios.get("/api/genres"),
axios.get("/api/forum"),
]).then((all) => {

console.log(all[1].data)

setState((prev) => ({
...prev,
genres: all[0].data,
forumGenres: all[1].data,
}));

console.log(all[1].data)

if (state.post) {
// console.log(currentForumPosts)
// console.log(state.forumSubGenres)
// console.log(state.forumGenres)


// setState((prev) => ({
// ...prev,
// forumPostsForGenre: currentForumPosts
// }))

}

// setForumGenre("roots")
// setForumSubGenre("roots")

// props.setForumSubGenre(JSON.parse(localStorage.getItem("subgenre")))

console.log("here")

// console.log(state.forumGenre)
// console.log(state.forumSubGenre)
// console.log(state.post)
})
}, [state.post]);

useEffect(() => {


if(state.forumSubGenre) {
const currentForumSubGenres = getForumSubGenresWithGenre(state, state.forumGenre)
setState((prev) => ({
...prev,
forumSubGenres: currentForumSubGenres.subgenres
}))
// console.log(state.forumGenres)
}

}, [state.forumGenres]);

useEffect(() => {


if(state.forumSubGenre) {
const currentForumPosts = getForumPostsForSubGenre(state, state.forumSubGenre)


setState((prev) => ({
...prev,
forumPostsForGenre: currentForumPosts
}))
console.log(state.forumSubGenres)
}

}, [state.forumSubGenres]);





function getForumSubGenresWithGenre(state, genreName) {
const foundGenre = state.forumGenres.filter((genre) => genre.name === genreName)[0];

Expand Down Expand Up @@ -59,6 +153,7 @@ export default function Forum(props) {

const currentForumSubGenres = getForumSubGenresWithGenre(state, state.forumGenre)


useEffect(() => {

setState((prev) => ({
Expand All @@ -70,6 +165,7 @@ export default function Forum(props) {

useEffect(() => {
const currentForumPosts = getForumPostsForSubGenre(state, state.forumSubGenre)
console.log(currentForumPosts)


setState((prev) => ({
Expand All @@ -85,7 +181,7 @@ export default function Forum(props) {
<div className="forum-index-page">
<ForumGenreList setGenre={setForumGenre} genres={state.forumGenres} />
<ForumSubGenreList userId={props.currentUserId} setSubGenre={setForumSubGenre} genre={state.forumGenre} genres={[currentForumSubGenres]} />
<ForumPostsList currentUserAvatar={props.currentUserAvatar} userId={props.currentUserId} subGenre={state.ForumSubGenre} posts={[state.forumPostsForGenre]} />
<ForumPostsList setPost={setPost} setForumSubGenre={setForumSubGenre} setForumGenre={setForumGenre} genre={state.forumGenre} currentUserAvatar={props.currentUserAvatar} userId={props.currentUserId} subGenre={state.forumSubGenre} posts={[state.forumPostsForGenre]} />
</div>

)
Expand Down
7 changes: 3 additions & 4 deletions client/src/components/forum/ForumGenreList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,14 @@ export default function ForumGenreList(props) {
<ul >
{props.genres.map((item) => {
return (
<div className="forum-genre">
<div key={item.id} className="forum-genre">
<li
key={item.id}
key={item.id+1}
className="genre-list__item"
// selected={item.name === state.genre}
onClick={() => props.setGenre(item.name)}
>
{console.log(item.name)}
<span class="text--regular">{item.name}</span>
<span key={item.id+2} className="text--regular">{item.name}</span>
</li>
</div>
);
Expand Down
24 changes: 12 additions & 12 deletions client/src/components/forum/ForumPostsList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ import LikeCount from "./LikeCount";

export default function ForumPostsList(props) {

console.log(props.posts)
console.log(props.posts[0].posts)
console.log(props.userId)




if(props.posts[0].posts === undefined) {
return []
Expand All @@ -24,7 +24,7 @@ export default function ForumPostsList(props) {
<div className="forum-post-board">
<h1>This board is currently Empty. Write a post!</h1>
{props.userId ? (
<Form currentUserAvatar={props.currentUserAvatar} userId={props.userId} subgenreId={props.posts[0].id}/>
<Form setPost={props.setPost} setForumSubGenre={props.setForumSubGenre} setForumGenre={props.setForumGenre} genre={props.genre} subGenre={props.subGenre} currentUserAvatar={props.currentUserAvatar} userId={props.userId} subgenreId={props.posts[0].id}/>
) : (
<div> </div>
)}
Expand All @@ -38,7 +38,7 @@ export default function ForumPostsList(props) {

<div className="forum-post-board">
{props.userId ? (
<Form currentUserAvatar={props.currentUserAvatar} userId={props.userId} subgenreId={props.posts[0].id}/>
<Form setPost={props.setPost} setForumSubGenre={props.setForumSubGenre} setForumGenre={props.setForumGenre} genre={props.genre} subGenre={props.subGenre} currentUserAvatar={props.currentUserAvatar} userId={props.userId} subgenreId={props.posts[0].id}/>
) : (
<div> </div>
)}
Expand All @@ -49,15 +49,15 @@ export default function ForumPostsList(props) {

return (

<article className="each-article dotted">
<div className="post-user-profile">
<span>{item.user.username}</span>
<img className="post-user-avatar" src={item.user.avatar} />
<article className="each-article dotted" key={item.id}>
<div key={item.id+1} className="post-user-profile">
<span key={item.id+2} >{item.user.username}</span>
<img key={item.id+3} className="post-user-avatar" src={item.user.avatar} />
</div>
<div className="post-content">
<p>{item.comment}</p>
<div key={item.id+4} className="post-content">
<p key={item.id+5} >{item.comment}</p>
{props.userId ? (
<LikeCount post={item} />
<LikeCount key={item.id+6} post={item} />
) : (
<div> </div>
)}
Expand Down
2 changes: 1 addition & 1 deletion client/src/components/forum/ForumSubGenreList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default function ForumSubGenreList(props) {
<ul>
{props.genres.map((item) => {
return (
<div className="forum-sub-genre">
<div key={item.id} className="forum-sub-genre">
<br></br>
{ item.subgenres.map((subgenre) => <div>
<li
Expand Down

0 comments on commit 6dab7a7

Please sign in to comment.