Skip to content

Commit

Permalink
Merge pull request #1846 from dev-launchers/development/ideaspace
Browse files Browse the repository at this point in the history
Development/ideaspace
  • Loading branch information
dbradham authored Jun 30, 2024
2 parents 7f830ab + 57b0adf commit 3f076a5
Show file tree
Hide file tree
Showing 6 changed files with 124 additions and 114 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,12 @@ import {
UserComment,
UserImageOne,
CommentBox,
// SubmitButton,
SubmitButton,
} from './StyledComments.js';
import { useUserDataContext } from '@devlaunchers/components/context/UserDataContext';
import SignInButton from '../../../common/SignInButton/SignInButton';
import { agent } from '@devlaunchers/utility';
import { cleanData } from '../../../../utils/StrapiHelper.js';

function CommentForm(props) {
const { userData, isAuthenticated } = useUserDataContext();
Expand All @@ -19,7 +20,7 @@ function CommentForm(props) {
const text = e.target.value;
setTextChange(text);

if (text.trim() == '') {
if (textChange.trim().length === 0) {
setDisabled(true);
} else {
setDisabled(false);
Expand All @@ -28,51 +29,25 @@ function CommentForm(props) {

const handleSubmit = async (e) => {
e.preventDefault();

const trimmedText = textChange.trim();

// Check if the comment is empty after trimming
if (trimmedText === '') {
console.error('Comment cannot be empty');
return;
}

var data = {
author: userData.username,
idea_card: selectedCard,
text: trimmedText,
text: textChange.trim(),
idea_card: selectedCard.id.toString(),
author: userData.name,
user: userData.id.toString(),
};

try {
const res = await agent.Comments.post(data);
setTextChange('');
props.renderNewComment(data);
} catch (error) {
console.error(error);
// render the comment in the comment feed
let commentData = cleanData(res);
commentData.user = userData;
props.renderNewComment(commentData);
} catch (e) {
console.log('error when posting comment', e);
}
};

// e.preventDefault();
// var data = { author: userData.username, idea_card: selectedCard, text: textChange.trim() };

// try {
// const res = await agent.Comments.post(data);
// setTextChange('');
// // render the comment in the comment feed
// props.renderNewComment(data);
// } catch(error) {
// console.error(error)
// }

// Refresh the page so that the new comment is displayed:
// window.location.reload(false);
// this.setState(
// {reload: true},
// () => this.setState({reload: false})
// )

// };

// move to WorkshoppingPage?
return (
<div>
Expand Down Expand Up @@ -105,6 +80,7 @@ function CommentForm(props) {
<button
type="submit"
style={{ color: 'white', backgroundColor: '#3A7CA5' }}
disabled={textChange.trim().length === 0}
>
<i class="fas fa-arrow-right"></i>
</button>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,28 +1,42 @@
import React, { useEffect, useState } from 'react';
import React, { useState } from 'react';
import Comment from './SingleComment';
import { cleanDataList } from '../../../../utils/StrapiHelper';
import axios from 'axios';

//create your forceUpdate hook
function useForceUpdate() {
const [value, setValue] = useState(0); // integer state
return () => setValue(value => value + 1); // update state to force render
// A function that increment 👆🏻 the previous state like here
return () => setValue((value) => value + 1); // update state to force render
// A function that increment 👆🏻 the previous state like here
// is better than directly setting `setValue(value + 1)`
}

function DisplayComments(props) {
const commentNodes = props.comments.map(comment => {
return <Comment author={comment.author} key={comment.id} id={comment.id} createdAt={comment.createdAt} publishedAt={comment.publishedAt} updatedAt={comment.updatedAt} forIdea={props.selectedCard}>
{comment.text}
</Comment>
const commentNodes = props.comments.map((comment) => {
const commentUser = comment.user;
return (
<Comment
user={commentUser}
author={commentUser.profile.displayName}
key={comment.id}
id={comment.id}
createdAt={comment.createdAt}
publishedAt={comment.publishedAt}
updatedAt={comment.updatedAt}
forIdea={props.selectedCard}
>
{comment.text}
</Comment>
);
});

return (
<div>
{props.comments.length ? commentNodes : <div style={{ padding: "2rem" }}>No comments yet!</div>}
{props.comments.length ? (
commentNodes
) : (
<div style={{ padding: '2rem' }}>No comments yet!</div>
)}
</div>
);
};
}

export default DisplayComments;
export default DisplayComments;
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@ import {
SingleComment,
UserImage,
SingleCommentContent,
SingleCommentButtons
SingleCommentButtons,
IdeaOwnerTag,
} from './StyledComments.js';
import { LikeButton } from '@devlaunchers/components/src/components/molecules';
import { useState } from 'react';
Expand All @@ -11,89 +12,56 @@ import { useUserDataContext } from '@devlaunchers/components/src/context/UserDat
// A function to show the date as X hours ago, etc.
// from: https://stackoverflow.com/a/3177838
function timeSince(date) {

var seconds = Math.floor((new Date() - date) / 1000);

var interval = seconds / 31536000;

if (interval > 1) {
if (Math.floor(interval) == 1) {
return "1 year ago";
return '1 year ago';
} else {
return Math.floor(interval) + " years ago";
return Math.floor(interval) + ' years ago';
}
}
interval = seconds / 2592000;
if (interval > 1) {
if (Math.floor(interval) == 1) {
return "1 month ago";
return '1 month ago';
} else {
return Math.floor(interval) + " months ago";
return Math.floor(interval) + ' months ago';
}
}
interval = seconds / 86400;
if (interval > 1) {
if (Math.floor(interval) == 1) {
return "1 day ago";
return '1 day ago';
} else {
return Math.floor(interval) + " days ago";
return Math.floor(interval) + ' days ago';
}
}
interval = seconds / 3600;
if (interval > 1) {
if (Math.floor(interval) == 1) {
return "1 hour ago";
return '1 hour ago';
} else {
return Math.floor(interval) + " hours ago";
return Math.floor(interval) + ' hours ago';
}
}
interval = seconds / 60;
if (interval > 1) {
if (Math.floor(interval) == 1) {
return "1 minute ago";
return '1 minute ago';
} else {
return Math.floor(interval) + " minutes ago";
return Math.floor(interval) + ' minutes ago';
}
}
if (Math.floor(interval) == 1) {
return "1 second ago";
return '1 second ago';
} else {
return Math.floor(seconds) + " seconds ago";
return Math.floor(seconds) + ' seconds ago';
}
}

// Do we need to make a function returning the comment component to keep track of the likes?

// const SingleCommentComponent = props => (
// // const [liked, setLiked] = useState(false);
// <div className="textContent">
// <SingleComment>
// <UserImage alt="user_image" src={`https://picsum.photos/70?random=${props.id}`} />
// <div className="textContent">
// <SingleCommentContent>
// <h3>{props.author}</h3>
// {/* get the idea ID from the URL if possible and determine the idea owner (maybe do this in another file) */}
// </SingleCommentContent>
// <SingleCommentContent>
// {/* date of creation here, i.e. "2 days ago" */}
// <h5>{timeSince(new Date(props.createdAt))}</h5>
// </SingleCommentContent>
// </div>
// </SingleComment>
// <SingleComment>
// <div className="textContent">
// <SingleCommentContent>
// <div source={props.children}><p>{props.children}</p></div>
// </SingleCommentContent>
// <SingleCommentButtons style={{ display: "flex" }}>
// <LikeButton style={{ marginLeft: "auto" }} onClick={handleLikeClick} filled={(false) ? false : true} text={(true) ? "479" : "Like"} />
// </SingleCommentButtons>
// <hr></hr>
// </div>
// </SingleComment>
// </div>
// );

function SingleCommentComponent(props) {
const { userData, isAuthenticated } = useUserDataContext();
const [liked, setLiked] = useState(false);
Expand All @@ -111,21 +79,23 @@ function SingleCommentComponent(props) {
setLiked(false);
} else {
// create a like object using the Like collection from the strapiv4 repo, storing the user ID, the comment ID, and the "Comment" object type
var likeData = { objectId: this.id, objectType: "Comment", users_permission_user: userData.userId };
var likeData = {
objectId: this.id,
objectType: 'Comment',
users_permission_user: userData.userId,
};

try {
const res = agent.Likes.post(likeData);
} catch(error) {
console.error(error)
} catch (error) {
console.error(error);
}

event.preventDefault();


try {

props.setHandleTextChange('');
} catch(error) {
} catch (error) {
console.error(error);
}

Expand All @@ -139,10 +109,20 @@ function SingleCommentComponent(props) {
return (
<div className="textContent">
<SingleComment>
<UserImage alt="user_image" src={`https://picsum.photos/70?random=${props.id}`} />
<UserImage
alt="user_image"
src={`https://picsum.photos/70?random=${props.id}`}
/>
<div className="textContent">
<SingleCommentContent>
<h3>{props.author}</h3><h5>{props.forIdea.author?.username == props.author?.username ? "idea owner" : ""}</h5>
<h3>{props.author}</h3>
<h5>
{props.forIdea.ideaOwner?.id == props.user?.id ? (
<IdeaOwnerTag>idea owner</IdeaOwnerTag>
) : (
''
)}
</h5>
{/* get the idea ID from the URL if possible and determine the idea owner (maybe do this in another file) */}
</SingleCommentContent>
<SingleCommentContent>
Expand All @@ -154,16 +134,23 @@ function SingleCommentComponent(props) {
<SingleComment>
<div className="textContent">
<SingleCommentContent>
<div source={props.children}><p>{props.children}</p></div>
<div source={props.children}>
<p>{props.children}</p>
</div>
</SingleCommentContent>
<SingleCommentButtons style={{ display: "flex" }}>
<LikeButton style={{ marginLeft: "auto" }} onClick={handleLikeClick} filled={liked ? true : false} text={liked ? "479" : "Like"} />
<SingleCommentButtons style={{ display: 'flex' }}>
<LikeButton
style={{ marginLeft: 'auto' }}
onClick={handleLikeClick}
filled={liked ? true : false}
text={liked ? '479' : 'Like'}
/>
</SingleCommentButtons>
<hr></hr>
</div>
</SingleComment>
</div>
)
);
}

export default SingleCommentComponent;
export default SingleCommentComponent;
Original file line number Diff line number Diff line change
Expand Up @@ -339,4 +339,22 @@ export const WorkshopIncomplete = styled.div`
left: 2px;
top: 2px;
margin-bottom: -40px;
`;

export const IdeaOwnerTag = styled.div`
display: inline-flex;
padding: 2px 8px;
align-items: flex-start;
gap: 10px;
border-radius: 16px;
background: var(--Orange-orange-200, #FFBF86);
color: var(--Orange-orange-600, #B3590A);
/* laptop-desktop/p-d-d */
font-family: "Nunito Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
`;
Loading

0 comments on commit 3f076a5

Please sign in to comment.