New Feature Added

example/package.json

@@ -14,11 +14,12 @@
     "@testing-library/react": "file:../node_modules/@testing-library/react",
     "@testing-library/user-event": "file:../node_modules/@testing-library/user-event",
     "@types/jest": "file:../node_modules/@types/jest",
+    "@types/lodash": "^4.14.74",
     "@types/node": "file:../node_modules/@types/node",
     "@types/react": "file:../node_modules/@types/react",
     "@types/react-dom": "file:../node_modules/@types/react-dom",
     "react": "file:../node_modules/react",
-    "react-comments-section": "file:..",
+    "react-comments-section": "git+https://github.com/Noor-infoarc/react-comments-section.git#dev-n",
     "react-dom": "file:../node_modules/react-dom",
     "react-scripts": "file:../node_modules/react-scripts",
     "typescript": "file:../node_modules/typescript"

example/src/App.tsx

@@ -1,23 +1,23 @@
 import React from 'react'
 import AdvancedComponent from './components/AdvancedComponent'
-import ClassComponent from './components/ClassComponent'
-import CustomComponent from './components/CustomComponent'
-import DefaultComponent from './components/DefaultComponent'
-import LogInComponent from './components/LogInComponent'
+// import ClassComponent from './components/ClassComponent'
+// import CustomComponent from './components/CustomComponent'
+// import DefaultComponent from './components/DefaultComponent'
+// import LogInComponent from './components/LogInComponent'
 
 const App = () => {
   return (
     <div className='example-div'>
       <div className='head-title'>Demo Examples</div>
       <hr style={{ borderTop: '1px solid', width: '100%' }} />
-      <div className='example-row'>
+      {/* <div className='example-row'>
         <DefaultComponent />
         <ClassComponent />
       </div>
       <div className='example-row'>
         <CustomComponent />
         <LogInComponent />
-      </div>
+      </div> */}
       <div className='example-row'>
         <AdvancedComponent />
       </div>

example/src/components/AdvancedComponent.tsx

@@ -1,56 +1,21 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { CommentSection } from 'react-comments-section'
 import 'react-comments-section/dist/index.css'
 import { useState } from 'react'
+import moment from 'moment'
 
 const AdvancedComponent = () => {
-  const [data] = useState([
-    {
-      userId: '01a',
-      comId: '012',
-      fullName: 'Riya 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>`,
-      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',
-          text: `<p>Yeah sure try adding this line to your code. You need to pass <span style="color: rgb(147,101,184);">event</span><span style="color: rgb(26,188,156);"> </span><span style="color: rgb(0,0,0);">as a param. </span></p>
-          <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>`
-        },
-        {
-          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>'
-        }
-      ]
-    },
-    {
-      userId: '02b',
-      comId: '017',
-      fullName: 'Lily',
-      userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',
-      text: `<blockquote><strong>DRY </strong>- is the right of passage to good coding</blockquote>
-      <p>True story brother!! <em>Amen to that!  </em>For anyone wondering DRY is&nbsp;</p>
-      <ol>
-      <li>Don't</li>
-      <li>Repeat</li>
-      <li>Yoursef</li>
-      </ol>`,
-      avatarUrl: 'https://ui-avatars.com/api/name=Lily&background=random',
-      replies: []
-    }
-  ])
+  const [updatedDate, setUpdatedDate] = useState("");
+  const [data] = useState([]);
+
+  useEffect(() =>
+  {
+    setInterval(function () {
+      setUpdatedDate(moment().format("YYYY-MM-DD, HH:mm:ss"));
+    }, 1000);
+
+
+  }, [updatedDate]);
 
   return (
     <div style={{ width: '100%' }}>
@@ -69,7 +34,9 @@ const AdvancedComponent = () => {
             'https://ui-avatars.com/api/name=Riya&background=random',
           currentUserProfile:
             'https://www.linkedin.com/in/riya-negi-8879631a9/',
-          currentUserFullName: 'Riya Negi'
+          currentUserFullName: 'Riya Negi',
+          currentUserCreatedAt: moment().format("YYYY-MM-DD HH:mm:ss"),
+          currentUserUpdatedAt: updatedDate
         }}
         hrStyle={{ border: '0.5px solid #ff0072' }}
         commentData={data}

example/src/components/ClassComponent.tsx

@@ -9,6 +9,8 @@ class ClassComponent extends PureComponent {
         userId: '01a',
         comId: '012',
         fullName: 'Riya Negi',
+        createdAt: "2023-04-23",
+        updatedAt: "",
         avatarUrl: 'https://ui-avatars.com/api/name=Riya&background=random',
         userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',
         text: 'Hey, Loved your blog! ',
@@ -18,6 +20,8 @@ class ClassComponent extends PureComponent {
             comId: '013',
             userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',
             fullName: 'Adam Scott',
+            createdAt: "2023-04-23",
+            updatedAt: "",
             avatarUrl: 'https://ui-avatars.com/api/name=Adam&background=random',
             text: 'Thanks! It took me 1 month to finish this project but I am glad it helped out someone!🥰'
           },
@@ -26,6 +30,8 @@ class ClassComponent extends PureComponent {
             comId: '014',
             userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',
             fullName: 'Riya Negi',
+            createdAt: "2023-04-23",
+            updatedAt: "",
             avatarUrl: 'https://ui-avatars.com/api/name=Riya&background=random',
             text: 'thanks!😊'
           }
@@ -35,6 +41,8 @@ class ClassComponent extends PureComponent {
         userId: '02b',
         comId: '017',
         fullName: 'Lily',
+        createdAt: "2023-04-23",
+        updatedAt: "",
         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',
@@ -64,7 +72,9 @@ class ClassComponent extends PureComponent {
               'https://ui-avatars.com/api/name=Riya&background=random',
             currentUserProfile:
               'https://www.linkedin.com/in/riya-negi-8879631a9/',
-            currentUserFullName: 'Riya Negi'
+            currentUserFullName: 'Riya Negi',
+            currentUserCreatedAt: "2023-04-23",
+            currentUserUpdatedAt: "",
           }}
           commentData={this.state.data}
           onSubmitAction={(data: any) => this.onSubmitAction(data)}

example/src/components/CustomComponent.tsx

@@ -9,6 +9,8 @@ const CustomComponent = () => {
       userId: '01a',
       comId: '012',
       fullName: 'Riya Negi',
+      createdAt: "2023-04-23",
+      updatedAt: "",
       avatarUrl: 'https://ui-avatars.com/api/name=Riya&background=random',
       userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',
       text: 'Hey, Loved your blog! ',
@@ -18,12 +20,16 @@ const CustomComponent = () => {
           comId: '013',
           userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',
           fullName: 'Adam Scott',
+          createdAt: "2023-04-23",
+          updatedAt: "",
           avatarUrl: 'https://ui-avatars.com/api/name=Adam&background=random',
           text: 'Thanks! It took me 1 month to finish this project but I am glad it helped out someone!🥰'
         },
         {
           userId: '01a',
           comId: '014',
+          createdAt: "2023-04-23",
+          updatedAt: "",
           userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',
           fullName: 'Riya Negi',
           avatarUrl: 'https://ui-avatars.com/api/name=Riya&background=random',
@@ -35,6 +41,8 @@ const CustomComponent = () => {
       userId: '02b',
       comId: '017',
       fullName: 'Lily',
+      createdAt: "2023-04-23",
+      updatedAt: "",
       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',
@@ -62,7 +70,9 @@ const CustomComponent = () => {
             'https://ui-avatars.com/api/name=Riya&background=random',
           currentUserProfile:
             'https://www.linkedin.com/in/riya-negi-8879631a9/',
-          currentUserFullName: 'Riya Negi'
+          currentUserFullName: 'Riya Negi',
+          currentUserCreatedAt: "2023-04-23",
+          currentUserUpdatedAt: "",
         }}
         hrStyle={{ border: '0.5px solid #ff0072' }}
         titleStyle={{ color: '#f2f2f2' }}

example/src/components/DefaultComponent.tsx

@@ -8,13 +8,17 @@ const DefaultComponent = () => {
       userId: '01a',
       comId: '012',
       fullName: 'Riya Negi',
+      createdAt: "2023-04-23",
+      updatedAt: "",
       avatarUrl: 'https://ui-avatars.com/api/name=Riya&background=random',
       userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',
       text: 'Hey, Loved your blog! ',
       replies: [
         {
           userId: '02a',
           comId: '013',
+          createdAt: "2023-04-23",
+          updatedAt: "",
           userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',
           fullName: 'Adam Scott',
           avatarUrl: 'https://ui-avatars.com/api/name=Adam&background=random',
@@ -23,6 +27,8 @@ const DefaultComponent = () => {
         {
           userId: '01a',
           comId: '014',
+          createdAt: "2023-04-23",
+          updatedAt: "",
           userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',
           fullName: 'Riya Negi',
           avatarUrl: 'https://ui-avatars.com/api/name=Riya&background=random',
@@ -34,6 +40,8 @@ const DefaultComponent = () => {
       userId: '02b',
       comId: '017',
       fullName: 'Lily',
+      createdAt: "2023-04-23",
+      updatedAt: "",
       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',
@@ -57,7 +65,9 @@ const DefaultComponent = () => {
             'https://ui-avatars.com/api/name=Riya&background=random',
           currentUserProfile:
             'https://www.linkedin.com/in/riya-negi-8879631a9/',
-          currentUserFullName: 'Riya Negi'
+          currentUserFullName: 'Riya Negi',
+          currentUserCreatedAt: "2023-04-23",
+          currentUserUpdatedAt: ""
         }}
         commentData={data}
         logIn={{

example/src/components/LogInComponent.tsx

@@ -8,13 +8,17 @@ const LogInComponent = () => {
       userId: '01a',
       comId: '012',
       fullName: 'Riya Negi',
+      createdAt: "2023-04-23",
+      updatedAt: "",
       avatarUrl: 'https://ui-avatars.com/api/name=Riya&background=random',
       userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',
       text: 'Hey, Loved your blog! ',
       replies: [
         {
           userId: '02a',
           comId: '013',
+          createdAt: "2023-04-23",
+          updatedAt: "",
           userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',
           fullName: 'Adam Scott',
           avatarUrl: 'https://ui-avatars.com/api/name=Adam&background=random',
@@ -25,6 +29,8 @@ const LogInComponent = () => {
           comId: '014',
           userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',
           fullName: 'Riya Negi',
+          createdAt: "2023-04-23",
+          updatedAt: "",
           avatarUrl: 'https://ui-avatars.com/api/name=Riya&background=random',
           text: 'thanks!😊'
         }
@@ -34,6 +40,8 @@ const LogInComponent = () => {
       userId: '02b',
       comId: '017',
       fullName: 'Lily',
+      createdAt: "2023-04-23",
+      updatedAt: "",
       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',

example/tsconfig.json

@@ -12,7 +12,6 @@
     "noImplicitThis": true,
     "noImplicitAny": true,
     "strictNullChecks": true,
-    "suppressImplicitAnyIndexErrors": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "allowSyntheticDefaultImports": true,

package.json

@@ -75,6 +75,7 @@
     "emoji-picker-react": "^3.5.1",
     "html-to-draftjs": "^1.5.0",
     "microbundle-crl-with-assets": "^0.13.12",
+    "moment": "^2.29.4",
     "react-draft-wysiwyg": "^1.14.7",
     "react-responsive-modal": "^6.2.0",
     "sass": "^1.51.0"

src/components/CommentSectionComponent/CommentSection.css

@@ -6,6 +6,19 @@
   padding: 20px;
   font-family: 'Noto Sans', sans-serif;
 }
+
+.css-1ynyhby {
+  margin: 0 8px 10px !important;
+}
+
+.overlay .header {
+  position: sticky;
+  top: -1px;
+  background: white;
+  z-index: 1;
+  padding-top: 0.5em;
+}
+
 .replySection {
   border-left: 1px solid rgb(235, 235, 235);
   margin-left: 25px;

src/components/CommentSectionComponent/Index.tsx

@@ -47,11 +47,13 @@ const CommentSection = ({
 
   return (
     <div className='overlay' style={overlayStyle}>
-      <span className='comment-title' style={titleStyle}>
-        {globalStore.commentsCount || totalComments()}{' '}
-        {totalComments() === 1 ? 'Comment' : 'Comments'}
-      </span>
-      <hr className='hr-style' style={hrStyle} />
+      <div className='header'>
+        <span className='comment-title' style={titleStyle}>
+          {globalStore.commentsCount || totalComments()}{' '}
+          {totalComments() === 1 ? 'Comment' : 'Comments'}
+        </span>
+        <hr className='hr-style' style={hrStyle} />
+      </div>
       {globalStore.currentUserData === null ? (
         loginMode()
       ) : (
@@ -66,6 +68,8 @@ const CommentSection = ({
             fullName: string
             avatarUrl: string
             text: string
+            createdAt: string
+            updatedAt: string
             userProfile?: string
             replies: Array<any> | undefined
           }) => {