1.1.0 Create the Notification Feature

0. Learning Materials

• Video: Week 1 - Create the notification feature (Backend and Front)

• Andrew's repo: week-1-react-flask-coding

• My branch repo: 01-01-create-notification-feature

  • My commits

    • #3 Created openapi.yaml and added Notification to it

    • #3 Created a new backend endpoint for Notificaitons

    • #3 Implemented frontend skeleton for Notifications

Task List

• Create openapi-3.0.yml and add Notification

• backend-flask/app.py: create a new endpoint for Notifications

• Implement the frontend skeleton for Notifications

---

1. Workflow

In this episode, we are creating a new endpoint in the backend and the corresponding page in the frontend. We configure both the backend and frontend accordingly so that the frontend page displays the data grabbed from the backend when the corresponding backend API is called.

1.1 OpenAPI

• Add the OpenAPI extension in VS code.

• An openapi.yml file will be automatically generated. This file should be at the root of our Cruddur project.

  • The complete code is found here.

1.2 Backend: Create Notifications endpoint

app.py

from services.home_activities import *
+ from services.notifications_activities import *  
...

+ @app.route("/api/activities/notifications", method=['GET'])
+ def data_notifications():
+      data = NotificationsActivities.run()
+    return data, 200

• Line 2: add the import statement so the flask server app.py knows where to grab the Notifications data when user requests hit the endpoint (/api/activites/notifications). At this stage, our data are hard-coded mock data.

  • Block 5-8: the function defines the process of fetching Notifications data.

    • The NotificationsActivities class defined in the Python file services.notifications_activities will actually fetch and handle the data.

• Create notifications_activities.py file in the services folder.

  • At the moment, we copy everything from home_activities.py. The complete code is found here:

1.3 Frontend

Now, let's create a skeleton of the Notifications page in the frontend.

As we created the endpoint for Notifications in the backend, we have to create the frontend page for it. Create a path for notifications and map it to a new page called NotificationsFeedPage.

App.js

import HomeFeedPage from './pages/HomeFeedPage';
+ import HomeFeedPage from './pages/NotificationsFeedPage';

const router = createBrowserRouter([
   {
     path: "/",
     element: <HomeFeedPage />
   },
+  {
+    path: "/notifications",
+    element: <NotificationsFeedPage />
+  },
  ...

Then create the following files at frontend-react-js/src/pages:

• NotificationsFeedPage.js

• NotificationsFeedPage.css

Copy everything from HomeFeedPage js and css files respectively. Replace home with notifications (the code is here).

HomeFeedPage.js

+ diiimport './NotificationsFeedPage.css';

+ export default function NotificationsFeedPage() {
...

  const loadData = async () => {
    try {
+     const backend_url = `${process.env.REACT_APP_BACKEND_URL}/api/activities/notifications`
      const res = await fetch(backend_url, {
        method: "GET"
      });
    ...
  };

 ...

  return (
    <article>
+     <DesktopNavigation user={user} active={'notifications'} setPopped={setPopped} />
      <div className='content'>
        ...
        <ActivityFeed 
+         title="Notifications" 
          ...
        />
      </div>
    </article>
  );
}

Both the frontend and backend is ready. Run docker compose and see if the Notifications page works.

See the endpoint.

Test your backend endpoint too. See how each object's attributes are mapped to the elements in the page in the frontend.