Skip to content

Added comment date feature #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Added comment date feature #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dbc6e44
added date on comments post
edrissa7 Apr 21, 2023
823cc4c
changed timeSince function into an arrow function
edrissa7 Apr 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
197 changes: 82 additions & 115 deletions example/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

12 changes: 8 additions & 4 deletions example/src/components/AdvancedComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,11 @@ const AdvancedComponent = () => {
{
userId: '01a',
comId: '012',
fullName: 'Riya Negi',
fullName: 'Ri Negi',
avatarUrl: 'https://ui-avatars.com/api/name=Riya&background=random',
userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',
text: `<p>Hey <strong>loved</strong> your blog! Can you show me some other ways to <del><em>fix</em></del> solve this?🤔<br>Here's my <a href="https://www.linkedin.com/in/riya-negi-8879631a9/" target="_blank">Linkedin Profile</a> to reach out.</p>`,
text: `<p>Hey <strong>loved</strong> your blog! Cans you show me some other ways to <del><em>fix</em></del> solve this?🤔<br>Here's my <a href="https://www.linkedin.com/in/riya-negi-8879631a9/" target="_blank">Linkedin Profile</a> to reach out.</p>`,
datePosted:'2023-04-21 17:15:57.050735',
replies: [
{
userId: '02a',
Expand All @@ -23,15 +24,17 @@ const AdvancedComponent = () => {
<pre>event.preventDefault()</pre>
<p>Best of luck with your project! <br></p>
<img src="https://c.tenor.com/4cR1jMpsrEgAAAAC/snoopy-cheerleader.gif" alt="undefined" style="height: auto;width: auto"/>
<p></p>`
<p></p>`,
datePosted:'2023-04-21 17:15:57.050735'
},
{
userId: '01a',
comId: '014',
userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',
fullName: 'Riya Negi',
avatarUrl: 'https://ui-avatars.com/api/name=Riya&background=random',
text: '<p><strong>OMG!</strong> it worked! <span style="color: rgb(209,72,65);">DO NOT stop this blog series!!!!</span> 💃</p>'
text: '<p><strong>OMG!</strong> it worked! <span style="color: rgb(209,72,65);">DO NOT stop this blog series!!!!</span> 💃</p>',
datePosted:'2023-04-21 17:15:57.050735'
}
]
},
Expand All @@ -47,6 +50,7 @@ const AdvancedComponent = () => {
<li>Repeat</li>
<li>Yoursef</li>
</ol>`,
datePosted:'2023-04-21 17:15:57.050735',
avatarUrl: 'https://ui-avatars.com/api/name=Lily&background=random',
replies: []
}
Expand Down
6 changes: 5 additions & 1 deletion example/src/components/ClassComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,15 @@ class ClassComponent extends PureComponent {
avatarUrl: 'https://ui-avatars.com/api/name=Riya&background=random',
userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',
text: 'Hey, Loved your blog! ',
datePosted:'2023-04-21 17:15:57.050735',
replies: [
{
userId: '02a',
comId: '013',
userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',
fullName: 'Adam Scott',
avatarUrl: 'https://ui-avatars.com/api/name=Adam&background=random',
datePosted:'2023-04-21 17:15:57.050735',
text: 'Thanks! It took me 1 month to finish this project but I am glad it helped out someone!🥰'
},
{
Expand All @@ -27,7 +29,8 @@ class ClassComponent extends PureComponent {
userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',
fullName: 'Riya Negi',
avatarUrl: 'https://ui-avatars.com/api/name=Riya&background=random',
text: 'thanks!😊'
text: 'thanks!😊',
datePosted:'2023-04-21 17:15:57.050735'
}
]
},
Expand All @@ -38,6 +41,7 @@ class ClassComponent extends PureComponent {
userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',
text: 'I have a doubt about the 4th point🤔',
avatarUrl: 'https://ui-avatars.com/api/name=Lily&background=random',
datePosted:'2023-04-21 17:15:57.050735',
replies: []
}
]
Expand Down
4 changes: 4 additions & 0 deletions example/src/components/CustomComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ const CustomComponent = () => {
fullName: 'Riya Negi',
avatarUrl: 'https://ui-avatars.com/api/name=Riya&background=random',
userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',
datePosted:'2023-04-21 17:15:57.050735',
text: 'Hey, Loved your blog! ',
replies: [
{
Expand All @@ -19,6 +20,7 @@ const CustomComponent = () => {
userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',
fullName: 'Adam Scott',
avatarUrl: 'https://ui-avatars.com/api/name=Adam&background=random',
datePosted:'2023-04-21 17:15:57.050735',
text: 'Thanks! It took me 1 month to finish this project but I am glad it helped out someone!🥰'
},
{
Expand All @@ -27,6 +29,7 @@ const CustomComponent = () => {
userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',
fullName: 'Riya Negi',
avatarUrl: 'https://ui-avatars.com/api/name=Riya&background=random',
datePosted:'2023-04-21 17:15:57.050735',
text: 'thanks!😊'
}
]
Expand All @@ -38,6 +41,7 @@ const CustomComponent = () => {
userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',
text: 'I have a doubt about the 4th point🤔',
avatarUrl: 'https://ui-avatars.com/api/name=Lily&background=random',
datePosted:'2023-04-21 17:15:57.050735',
replies: []
}
])
Expand Down
4 changes: 4 additions & 0 deletions example/src/components/DefaultComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ const DefaultComponent = () => {
fullName: 'Riya Negi',
avatarUrl: 'https://ui-avatars.com/api/name=Riya&background=random',
userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',
datePosted:'2023-04-21 17:15:57.050735',
text: 'Hey, Loved your blog! ',
replies: [
{
Expand All @@ -18,6 +19,7 @@ const DefaultComponent = () => {
userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',
fullName: 'Adam Scott',
avatarUrl: 'https://ui-avatars.com/api/name=Adam&background=random',
datePosted:'2023-04-21 17:15:57.050735',
text: 'Thanks! It took me 1 month to finish this project but I am glad it helped out someone!🥰'
},
{
Expand All @@ -26,6 +28,7 @@ const DefaultComponent = () => {
userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',
fullName: 'Riya Negi',
avatarUrl: 'https://ui-avatars.com/api/name=Riya&background=random',
datePosted:'2023-04-21 17:15:57.050735',
text: 'thanks!😊'
}
]
Expand All @@ -37,6 +40,7 @@ const DefaultComponent = () => {
userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',
text: 'I have a doubt about the 4th point🤔',
avatarUrl: 'https://ui-avatars.com/api/name=Lily&background=random',
datePosted:'2023-04-21 17:15:57.050735',
replies: []
}
]
Expand Down
4 changes: 4 additions & 0 deletions example/src/components/LogInComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,15 @@ const LogInComponent = () => {
avatarUrl: 'https://ui-avatars.com/api/name=Riya&background=random',
userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',
text: 'Hey, Loved your blog! ',
datePosted:'2023-04-21 17:15:57.050735',
replies: [
{
userId: '02a',
comId: '013',
userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',
fullName: 'Adam Scott',
avatarUrl: 'https://ui-avatars.com/api/name=Adam&background=random',
datePosted:'2023-04-21 17:15:57.050735',
text: 'Thanks! It took me 1 month to finish this project but I am glad it helped out someone!🥰'
},
{
Expand All @@ -26,6 +28,7 @@ const LogInComponent = () => {
userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',
fullName: 'Riya Negi',
avatarUrl: 'https://ui-avatars.com/api/name=Riya&background=random',
datePosted:'2023-04-21 17:15:57.050735',
text: 'thanks!😊'
}
]
Expand All @@ -37,6 +40,7 @@ const LogInComponent = () => {
userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',
text: 'I have a doubt about the 4th point🤔',
avatarUrl: 'https://ui-avatars.com/api/name=Lily&background=random',
datePosted:'2023-04-21 17:15:57.050735',
replies: []
}
]
Expand Down
2 changes: 1 addition & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions src/components/CommentSectionComponent/Index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ const CommentSection = ({
avatarUrl: string
text: string
userProfile?: string
datePosted:string
replies: Array<any> | undefined
}) => {
return (
Expand Down
7 changes: 7 additions & 0 deletions src/components/CommentStructure.tsx/CommentStructure.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,14 @@
margin-left: 10px;
font-size: 16px;
font-weight: 600;

.commentDate{
margin:2px 0 0 5px;
font-size: small;
color:#b0b0b0;
}
}

}
}
.halfDiv {
Expand Down
50 changes: 47 additions & 3 deletions src/components/CommentStructure.tsx/Index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ interface CommentStructureProps {
avatarUrl: string
text: string
userProfile?: string
datePosted:string
replies?: Array<object> | undefined
}
editMode: boolean
Expand All @@ -35,6 +36,7 @@ const CommentStructure = ({
const globalStore: any = useContext(GlobalContext)
const currentUser = globalStore.currentUserData


const optionsMenu = () => {
return (
<div className='userActions'>
Expand All @@ -61,6 +63,47 @@ const CommentStructure = ({
)
}

/* This function format the date string into a user friendly
text */
const timeSince = (date:string):string => {
let actualDate:Date = new Date(date);
let dateNow:Date = new Date()
const seconds:number = Math.floor((dateNow.getTime() - actualDate.getTime()) / 1000);

if (seconds < 60) {
return `${seconds} seconds ago`;
}

const minutes:number = Math.floor(seconds / 60);

if (minutes < 60) {
return `${minutes} minutes ago`;
}

const hours:number = Math.floor(minutes / 60);

if (hours < 24) {
return `${hours} hours ago`;
}

const days:number = Math.floor(hours / 24);

if (days < 30) {
return `${days} days ago`;
}

const months:number = Math.floor(days / 30);

if (months < 12) {
return `${months} months ago`;
}

const years:number = Math.floor(months / 12);

return `${years} years ago`;
}


const userInfo = () => {
return (
<div className='commentsTwo'>
Expand All @@ -77,9 +120,10 @@ const CommentStructure = ({
: null)
}
/>
</div>
<div className='fullName'>{info.fullName} </div>
</a>
</div>
<div className='fullName'>{info.fullName}<span className='commentDate'>
{timeSince(info.datePosted)}</span></div>
</a>
</div>
)
}
Expand Down
4 changes: 4 additions & 0 deletions src/components/data.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"userProfile": "https://www.linkedin.com/in/riya-negi-8879631a9/",
"text": "I have a doubt about the 4th point🤔",
"avatarUrl": "https://ui-avatars.com/api/name=Lily&background=random",
"datePosted":"2023-04-21 17:15:57.050735",
"replies": []
},
{
Expand All @@ -15,6 +16,7 @@
"text": "Follow my page for more such interesting blogs!😇",
"avatarUrl": "https://ui-avatars.com/api/name=Adam&background=random",
"userProfile": "https://www.linkedin.com/in/riya-negi-8879631a9/",
"datePosted":"2023-04-21 17:15:57.050735",
"replies": []
},
{
Expand All @@ -23,6 +25,7 @@
"fullName": "Robert Jae",
"avatarUrl": "https://ui-avatars.com/api/name=Robert&background=random",
"text": "Woah pretty helpful! how did you solve for x?",
"datePosted":"2023-04-21 17:15:57.050735",
"replies": [
{
"userId": "01b",
Expand All @@ -41,6 +44,7 @@
"userProfile": "https://www.linkedin.com/in/riya-negi-8879631a9/",
"text": "Aaaah! got it got it. Pretty cool",
"avatarUrl": "https://ui-avatars.com/api/name=Robin&background=random",
"datePosted":"2023-04-21 17:15:57.050735",
"replies": []
}
]
16 changes: 12 additions & 4 deletions src/context/Provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ export const GlobalProvider = ({
avatarUrl: string
text: string
userProfile?: string
datePosted: string
replies?:
| Array<{
userId: string
Expand All @@ -57,6 +58,7 @@ export const GlobalProvider = ({
avatarUrl: string
text: string
userProfile?: string
datePosted:string
}>
| undefined
}>
Expand All @@ -76,6 +78,7 @@ export const GlobalProvider = ({
avatarUrl: string
text: string
userProfile?: string
datePosted:string
replies?:
| Array<{
userId: string
Expand All @@ -84,6 +87,7 @@ export const GlobalProvider = ({
avatarUrl: string
text: string
userProfile?: string
datePosted:string|undefined
}>
| undefined
}>
Expand Down Expand Up @@ -127,7 +131,7 @@ export const GlobalProvider = ({
}
}

const onSubmit = (text: string, uuid: string) => {
const onSubmit = (text: string, uuid: string,) => {
let copyData = [...data]
copyData.push({
userId: currentUserData!.currentUserId,
Expand All @@ -137,7 +141,8 @@ export const GlobalProvider = ({
? currentUserData!.currentUserProfile
: undefined,
fullName: currentUserData!.currentUserFullName,
text: text,
text: text,
datePosted:new Date().toLocaleString(),
replies: []
})
setData(copyData)
Expand Down Expand Up @@ -178,7 +183,9 @@ export const GlobalProvider = ({
? currentUserData!.currentUserProfile
: undefined,
fullName: currentUserData!.currentUserFullName,
text: text
text: text,
datePosted:new Date().toLocaleString()

})
setData(copyData)
handleAction(comId, false)
Expand All @@ -194,7 +201,8 @@ export const GlobalProvider = ({
? currentUserData!.currentUserProfile
: undefined,
fullName: currentUserData!.currentUserFullName,
text: text
text: text,
datePosted:new Date().toLocaleString()
})
setData(copyData)
handleAction(comId, false)
Expand Down
Loading