added ability to fetch messages from web-api utilizing custom hook

client/src/components/team/teamOverview/teamOverview.css

-.teamlist-container{
-  background: white;
-  padding: 0 20px 0 20px;
-}
-
-.teamlist-container .content-header {
+ .content-header {
   display: flex;
   padding: 15px 0 0 0;
   justify-content: space-between;
   border-bottom: 1px solid rgb(180, 180, 180);
 }
 
-.teamlist-container .content-header .teamlist-title {
+ .content-header .teamlist-title {
   margin: 3px 0 15px 0;
 }
 
@@ -26,12 +21,12 @@
   text-decoration: none;
 }
 
-.teamlist-container .teamlist ul {
+ .teamlist ul {
   margin: 0;
   padding: 0;
 }
 
-.teamlist-container .teamlist .team-entry {
+ .teamlist .team-entry {
   background: rgb(250, 250, 250);
   display: flex;
   justify-content: space-between;
@@ -39,58 +34,58 @@
   border-bottom: 1px solid lightgrey;
 }
 
-.teamlist-container .teamlist .team-entry .image-team-name {
+ .teamlist .team-entry .image-team-name {
   display: flex;
 }
 
-.teamlist-container .teamlist .team-entry .image-team-name a {
+ .teamlist .team-entry .image-team-name a {
   color: black;
   display: flex;
   margin-right: 20px;
   font-size: 14px;
 }
 
-.teamlist-container .teamlist .team-entry .image-team-name .team-image-container {
+ .teamlist .team-entry .image-team-name .team-image-container {
   border: 1px solid black;
   border-radius: 3px;
   padding: 1px;
   margin-right: 5px;
 }
 
-.teamlist-container .teamlist .team-entry .image-team-name a .icon{
+ .teamlist .team-entry .image-team-name a .icon{
   padding-top: 4px;
 }
 
-.teamlist-container .teamlist .team-entry .image-team-name a:hover {
+ .teamlist .team-entry .image-team-name a:hover {
   cursor: pointer;
   text-decoration: underline;
 }
 
-.teamlist-container .teamlist .team-entry .team-status-info-container {
+ .teamlist .team-entry .team-status-info-container {
   display: flex;
   justify-content: flex-end;
 }
 
-.teamlist-container .teamlist .team-entry .team-status-info-container * {
+ .teamlist .team-entry .team-status-info-container * {
   position: relative;
   display: flex;
   margin: 0 0 0 12px;
   font-size: 14px;
 }
 
-.teamlist-container .teamlist .team-entry .team-status-info-container .last-updated-info {
+ .teamlist .team-entry .team-status-info-container .last-updated-info {
   margin: 0 0 0 45px;
 }
 
-.teamlist-container .teamlist .team-entry .team-status-info-container * p {
+ .teamlist .team-entry .team-status-info-container * p {
   margin-left: 3px;
 }
 
-.teamlist-container .teamlist .team-entry .team-status-info-container * .icon {
+ .teamlist .team-entry .team-status-info-container * .icon {
   padding-top: 3px;
 }
 
-.teamlist-container .teamlist .team-entry .team-status-info-container * .tooltip-text {
+ .teamlist .team-entry .team-status-info-container * .tooltip-text {
   visibility: hidden;
   width: 105px;
   background-color: black;
@@ -107,7 +102,7 @@
   margin-left: -60px;
 }
 
-.teamlist-container .teamlist .team-entry .team-status-info-container * .tooltip-text::after {
+ .teamlist .team-entry .team-status-info-container * .tooltip-text::after {
   content: " ";
   position: absolute;
   bottom: 100%;  /* At the top of the tooltip */
@@ -118,8 +113,8 @@
   border-color: transparent transparent black transparent;
 }
 
-.teamlist-container .teamlist .team-entry .team-status-info-container *:hover .tooltip-text, 
-.teamlist-container .teamlist .team-entry .team-status-info-container * .icon:hover .tooltip-text{
+ .teamlist .team-entry .team-status-info-container *:hover .tooltip-text, 
+ .teamlist .team-entry .team-status-info-container * .icon:hover .tooltip-text{
   visibility: visible;
 }
 

client/src/config.js

@@ -5,5 +5,8 @@ export default {
     redirectUri: window.location.origin + '/login/callback',
     scopes: ['openid', 'profile', 'email'],
     pkce: true
+  },
+  resourceServer: {
+    messagesUrl: 'http://localhost:3030/api/messages',
   }
 };
\ No newline at end of file

client/src/style.css

@@ -17,4 +17,9 @@ h1, h2, h3, h4, h5 {
 
 button {
   font-family: 'Montserrat', sans-serif;
+}
+
+.page-content-container {
+  background: white;
+  padding: 0 20px 0 20px;
 }
\ No newline at end of file

client/src/util/useMessages.jsx

+import { useState, useEffect } from 'react';
+import { useOktaAuth } from '@okta/okta-react';
+
+import config from "../config"
+
+const useMessages = () => {
+  const { authState, oktaAuth } = useOktaAuth();
+  const [messages, setMessages] = useState(null);
+  const [messageFetchFailed, setMessageFetchFailed] = useState(false);
+
+  // fetch messages
+  useEffect(() => {
+    if (authState && authState.isAuthenticated) {
+      const accessToken = oktaAuth.getAccessToken();
+      fetch(config.resourceServer.messagesUrl, {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+      })
+        .then((response) => {
+          if (!response.ok) {
+            return Promise.reject();
+          }
+          return response.json();
+        })
+        .then((data) => {
+          let index = 0;
+          const formattedMessages = data.messages.map((message) => {
+            const date = new Date(message.date);
+            const day = date.toLocaleDateString();
+            const time = date.toLocaleTimeString();
+            index += 1;
+            return {
+              date: `${day} ${time}`,
+              sender: message.sender,
+              text: message.text,
+              id: `message-${index}`,
+            };
+          });
+          setMessages(formattedMessages);
+          setMessageFetchFailed(false);
+        })
+        .catch((err) => {
+          setMessageFetchFailed(true);
+          /* eslint-disable no-console */
+          console.error(err);
+        });
+    }
+  }, [authState]);
+
+  return messages
+}
+
+export default useMessages
\ No newline at end of file

server/main.go

@@ -45,8 +45,8 @@ func ApiMessagesHandler(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	m1 := Message{1522272240, "I am a robot."}
-	m2 := Message{1522268640, "Hello, World!"}
+	m1 := Message{1522272240, "John Doe", "I am a robot."}
+	m2 := Message{1522268640, "Robert Smith", "Hello, World!"}
 	allMessages := []Message{}
 	allMessages = append(allMessages, m1)
 	allMessages = append(allMessages, m2)
@@ -62,6 +62,7 @@ func ApiMessagesHandler(w http.ResponseWriter, r *http.Request) {
 
 type Message struct {
 	Date float64 `json:"date"`
+	Sender string `json:"sender"`
 	Text string  `json:"text"`
 }