(#60) Added UI for frontend sorting

Frontend/src/components/homepage.js

@@ -25,23 +25,30 @@ class HomePage extends React.Component {
     )
       .then(res => res.json())
       .then(data => {
-        let cardMetadatas = Object.values(data).map(datum => {
-          const { event_info, image_link } = datum;
-          if (event_info) {
-            let { title, date, time, location } = event_info;
+        if (data) {
+          let cardMetadatas = Object.values(data).map(datum => {
+            const { event_info, image_link } = datum;
+            if (event_info) {
+              let { title, date, time, location } = event_info;
+              return {
+                imageLink: image_link,
+                eventTitle: title,
+                eventDate: date,
+                eventTime: time,
+                eventLocation: location
+              };
+            }
             return {
-              imageLink: image_link,
-              eventTitle: title,
-              eventDate: date,
-              eventTime: time,
-              eventLocation: location
+              imageLink: image_link
             };
-          }
-          return {
-            imageLink: image_link
-          };
-        });
-        this.setState({ cardMetadatas, displayedCardMetadatas: cardMetadatas });
+          });
+          this.setState({
+            cardMetadatas,
+            displayedCardMetadatas: cardMetadatas
+          });
+        } else {
+          this.setState({ cardMetadatas: [], displayedCardMetadatas: [] });
+        }
       });
   }
 
@@ -79,6 +86,34 @@ class HomePage extends React.Component {
     }
   };
 
+  sortByEventDate() {
+    try {
+      fetch(process.env.REACT_APP_BACKEND_API + Endpoint.SORT_POSTS, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          sort_type: "eventDate"
+        })
+      });
+    } catch (error) {
+      alert("Sorting failed.");
+    }
+  }
+
+  sortByUploadDate() {
+    try {
+      fetch(process.env.REACT_APP_BACKEND_API + Endpoint.SORT_POSTS, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          sort_type: "uploadDate"
+        })
+      });
+    } catch (error) {
+      alert("Sorting failed.");
+    }
+  }
+
   render() {
     let cards = this.state.displayedCardMetadatas.map(metadata => (
       <HomepageCard {...metadata} />
@@ -99,6 +134,18 @@ class HomePage extends React.Component {
             Search
           </Button>
         </Form>
+        <Form className="mb-2">
+          <Button
+            className="ml-2 mr-2"
+            onClick={this.sortByEventDate}
+            variant="outline-primary"
+          >
+            Sort By Event Date
+          </Button>
+          <Button onClick={this.sortByUploadDate} variant="outline-primary">
+            Sort By Upload Date
+          </Button>
+        </Form>
         <CardColumns>{cards}</CardColumns>
       </div>
     );

Frontend/src/constants/Endpoint.js

@@ -1,3 +1,4 @@
 export const GET_HOMEPAGE_IMAGE_METADATA = "/getHomepageImageMetadata";
 export const UPLOAD_IMAGE_METADATA = "/uploadImageMetadata";
 export const SEARCH_FOR_POSTS = "/searchForPosts";
+export const SORT_POSTS = "/sortPosts";

Frontend/src/firebase/ImageUploader.js

@@ -52,7 +52,12 @@ export default class ImageUploader {
             event_title: this.eventTitle,
             event_date: this.eventDate,
             event_time: this.eventTime,
-            event_location: this.eventLocation
+            event_location: this.eventLocation,
+            event_time_epoch: this.getEventEpochTime(
+              this.eventDate,
+              this.eventTime
+            ),
+            upload_time_epoch: Date.now()
           })
         }
       );
@@ -65,6 +70,18 @@ export default class ImageUploader {
     }
   };
 
+  /**
+   * {@parm event_date} the event time in string
+   * @return an epoch time of eventTime
+   */
+  getEventEpochTime = (eventDay, startTime) => {
+    // get the time of day in milliseconds first
+    let timeArray = startTime.split(":");
+    let timeOfDay =
+      (Number(timeArray[0]) * 3600 + Number(timeArray[1]) * 60) * 1000;
+    // then add it to the epoch time of the event date
+    return new Date(eventDay).getTime() + timeOfDay;
+  };
   /** @return a link to the image on firebase that will be stored in the
    * image metadata.
    */

backend/src/app.ts

@@ -58,5 +58,7 @@ export default class App {
       .get(firebaseController.getHomepageImageMetadata);
 
     this.app.route("/searchForPosts").post(firebaseController.searchForPosts);
+
+    this.app.route("/sortPosts").post(firebaseController.sortPosts);
   }
 }

backend/src/controllers/FirebaseController.ts

@@ -28,6 +28,15 @@ export default class FirebaseController {
     response.status(200).json(filteredPosts);
   };
 
+  public sortPosts = async (
+    request: Request,
+    response: Response,
+    _next: NextFunction
+  ): Promise<void> => {
+    const { sort_type } = request.body;
+    console.log(sort_type);
+  };
+
   public uploadImageMetadata = async (
     request: Request,
     response: Response,
@@ -39,28 +48,38 @@ export default class FirebaseController {
       event_title,
       event_date,
       event_time,
-      event_location
+      event_location,
+      event_time_epoch,
+      upload_time_epoch
     }: {
       image_link: string;
       event_title: string;
       event_date: string;
       event_time: string;
       event_location: string;
+      event_time_epoch: number;
+      upload_time_epoch: number;
     } = request.body;
     const post_id: number = await this.getPostId();
     const currentTimestamp = this.getCurrentTimestamp();
 
+    console.log(
+      `Event Time: ${event_time_epoch}, Upload Time: ${upload_time_epoch}`
+    );
+
     const metadata = {
       event_info: {
         title: event_title,
         date: event_date,
         time: event_time,
         location: event_location
       },
+      EventDate: event_time_epoch,
       image_link: image_link,
       post_id: post_id,
       tags: false,
       timestamp: currentTimestamp,
+      UploadDate: upload_time_epoch,
       uploader_buffalo_id: "",
       uploader_is_anonymous: false,
       upvotes: {