Fix: Dates of updates reflect the API's response (#1220)

* Updates in notifications are now displayed datewise.
* Updated notification panel for zero updates

src/components/updates.js

@@ -5,6 +5,7 @@ import axios from 'axios';
 function Updates(props) {
   const [updates, setUpdates] = useState([]);
   const [fetched, setFetched] = useState(false);
+  let currentDate = new Date();
 
   useEffect(() => {
     if (fetched === false) {
@@ -23,29 +24,51 @@ function Updates(props) {
   return (
     <React.Fragment>
       <div className="updates-header">
-        <h2>{format(new Date(), 'd MMM')}</h2>
+        <h2>{format(currentDate, 'd MMM')}</h2>
       </div>
-
       <div className="updates">
         {updates
           .slice(-5)
           .reverse()
           .map(function (activity, index) {
             activity.update = activity.update.replace('\n', '<br/>');
+            const activityDate = new Date(activity.timestamp * 1000);
+            const addHeader = () => {
+              currentDate = activityDate;
+              return (
+                <>
+                  {index === 0 ? (
+                    <div className="update">
+                      <h4>No updates yet!</h4>
+                    </div>
+                  ) : (
+                    ''
+                  )}
+                  <div className="updates-header">
+                    <h2>{format(activityDate, 'd MMM')}</h2>
+                  </div>
+                </>
+              );
+            };
             return (
-              <div key={index} className="update">
-                <h5>
-                  {formatDistance(
-                    new Date(activity.timestamp * 1000),
-                    new Date()
-                  ) + ' ago'}
-                </h5>
-                <h4
-                  dangerouslySetInnerHTML={{
-                    __html: activity.update,
-                  }}
-                ></h4>
-              </div>
+              <>
+                {activityDate.getDate() !== currentDate.getDate()
+                  ? addHeader()
+                  : ' '}
+                <div key={index} className="update">
+                  <h5>
+                    {formatDistance(
+                      new Date(activity.timestamp * 1000),
+                      new Date()
+                    ) + ' ago'}
+                  </h5>
+                  <h4
+                    dangerouslySetInnerHTML={{
+                      __html: activity.update,
+                    }}
+                  ></h4>
+                </div>
+              </>
             );
           })}
       </div>