Fix the Thread Page to get all Threads from the Database and map

[Harrylever]

Thread Page Not Working Fixes

Page is expected to

• Display all threads associated with member_id of a particular organisation
• Collect and organize threads based on the last edited/last created
  

Before

After

Solution

Frontend

We edited the threads/index.jsx for the threads page. We created component elements in the components folder, for mapping through the thread's data to display each of them with similar visualisations.

created

• frontend/zc_messaging/src/pages/threads/threads.css
• frontend/zc_messaging/src/component/ThreadList/index.jsx
• frontend/zc_messaging/src/component/ThreadList/threadList.css
• frontend/zc_messaging/src/component/ThreadList/ThreadItem/index.jsx
• frontend/zc_messaging/src/component/ThreadList/ThreadItem/threadItem.css
• frontend/zc_messaging/src/pages/threads/threads.utils.js

  edited

• frontend/zc_messaging/src/pages/threads/index.jsx
• frontend/zc_messaging/src/pages/index.js
• frontend/zc_messaging/src/component/index.js

1. Create the Mapping Function For the Loaded Array of Threads between the Pages and Component: pages/threads/index.jsx - component/ThreadList/index.jsx - component/ThreadList/ThreadItem/index.jsx and style the components Linear board Task: https://linear.app/team-powerdrill/issue/FRO-35/create-and-implement-design-to-display-the-thread-page-for-zuri-chat Linear Board Task: https://linear.app/team-powerdrill/issue/FRO-36/create-the-mapping-function-for-the-loaded-array-of-threads-between

2. Create the function to fetch the Threads Data from the Backend using Axios and modify the created_at to display properly using momentjs - Include functions to handle the loading of the Data while Page is loading. Create the Asynchronous function to fetch data in threads.utils.js in a separate file Linear Board Task: https://linear.app/team-powerdrill/issue/FRO-37/create-the-function-to-fetch-the-threads-data-from-the-backend-using Linear Board Task: https://linear.app/team-powerdrill/issue/FRO-38/create-the-asynchronous-function-to-fetch-data-in-threadsutilsjs

3. Create an elaborate Pull Request Description Linear Board Task: https://linear.app/team-powerdrill/issue/FRO-39/create-an-elaborate-pull-request-description

Note:

The zc_messaging plugin imported from packages/root-config/src/assets/plugin.importmap.json was changed to from "@zuri/zuri-plugin-messaging": "https://chat.zuri.chat/zuri-messaging.js" to "@zuri/zuri-plugin-messaging": "http://localhost:5013/zuri-messaging.js" for the changes in zc_messaging running on our local machine to be passed forward