Commit d8a97120 authored by Mathias Engelbrecht Pilegård's avatar Mathias Engelbrecht Pilegård
Browse files

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

parent c04cf67d
.teamlist-container{ .content-header {
background: white;
padding: 0 20px 0 20px;
}
.teamlist-container .content-header {
display: flex; display: flex;
padding: 15px 0 0 0; padding: 15px 0 0 0;
justify-content: space-between; justify-content: space-between;
border-bottom: 1px solid rgb(180, 180, 180); border-bottom: 1px solid rgb(180, 180, 180);
} }
.teamlist-container .content-header .teamlist-title { .content-header .teamlist-title {
margin: 3px 0 15px 0; margin: 3px 0 15px 0;
} }
...@@ -26,12 +21,12 @@ ...@@ -26,12 +21,12 @@
text-decoration: none; text-decoration: none;
} }
.teamlist-container .teamlist ul { .teamlist ul {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.teamlist-container .teamlist .team-entry { .teamlist .team-entry {
background: rgb(250, 250, 250); background: rgb(250, 250, 250);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -39,58 +34,58 @@ ...@@ -39,58 +34,58 @@
border-bottom: 1px solid lightgrey; border-bottom: 1px solid lightgrey;
} }
.teamlist-container .teamlist .team-entry .image-team-name { .teamlist .team-entry .image-team-name {
display: flex; display: flex;
} }
.teamlist-container .teamlist .team-entry .image-team-name a { .teamlist .team-entry .image-team-name a {
color: black; color: black;
display: flex; display: flex;
margin-right: 20px; margin-right: 20px;
font-size: 14px; 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: 1px solid black;
border-radius: 3px; border-radius: 3px;
padding: 1px; padding: 1px;
margin-right: 5px; margin-right: 5px;
} }
.teamlist-container .teamlist .team-entry .image-team-name a .icon{ .teamlist .team-entry .image-team-name a .icon{
padding-top: 4px; padding-top: 4px;
} }
.teamlist-container .teamlist .team-entry .image-team-name a:hover { .teamlist .team-entry .image-team-name a:hover {
cursor: pointer; cursor: pointer;
text-decoration: underline; text-decoration: underline;
} }
.teamlist-container .teamlist .team-entry .team-status-info-container { .teamlist .team-entry .team-status-info-container {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
} }
.teamlist-container .teamlist .team-entry .team-status-info-container * { .teamlist .team-entry .team-status-info-container * {
position: relative; position: relative;
display: flex; display: flex;
margin: 0 0 0 12px; margin: 0 0 0 12px;
font-size: 14px; 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; 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; margin-left: 3px;
} }
.teamlist-container .teamlist .team-entry .team-status-info-container * .icon { .teamlist .team-entry .team-status-info-container * .icon {
padding-top: 3px; 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; visibility: hidden;
width: 105px; width: 105px;
background-color: black; background-color: black;
...@@ -107,7 +102,7 @@ ...@@ -107,7 +102,7 @@
margin-left: -60px; 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: " "; content: " ";
position: absolute; position: absolute;
bottom: 100%; /* At the top of the tooltip */ bottom: 100%; /* At the top of the tooltip */
...@@ -118,8 +113,8 @@ ...@@ -118,8 +113,8 @@
border-color: transparent transparent black transparent; border-color: transparent transparent black transparent;
} }
.teamlist-container .teamlist .team-entry .team-status-info-container *:hover .tooltip-text, .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 * .icon:hover .tooltip-text{
visibility: visible; visibility: visible;
} }
...@@ -5,5 +5,8 @@ export default { ...@@ -5,5 +5,8 @@ export default {
redirectUri: window.location.origin + '/login/callback', redirectUri: window.location.origin + '/login/callback',
scopes: ['openid', 'profile', 'email'], scopes: ['openid', 'profile', 'email'],
pkce: true pkce: true
},
resourceServer: {
messagesUrl: 'http://localhost:3030/api/messages',
} }
}; };
\ No newline at end of file
...@@ -17,4 +17,9 @@ h1, h2, h3, h4, h5 { ...@@ -17,4 +17,9 @@ h1, h2, h3, h4, h5 {
button { button {
font-family: 'Montserrat', sans-serif; font-family: 'Montserrat', sans-serif;
}
.page-content-container {
background: white;
padding: 0 20px 0 20px;
} }
\ No newline at end of file
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
...@@ -45,8 +45,8 @@ func ApiMessagesHandler(w http.ResponseWriter, r *http.Request) { ...@@ -45,8 +45,8 @@ func ApiMessagesHandler(w http.ResponseWriter, r *http.Request) {
return return
} }
m1 := Message{1522272240, "I am a robot."} m1 := Message{1522272240, "John Doe", "I am a robot."}
m2 := Message{1522268640, "Hello, World!"} m2 := Message{1522268640, "Robert Smith", "Hello, World!"}
allMessages := []Message{} allMessages := []Message{}
allMessages = append(allMessages, m1) allMessages = append(allMessages, m1)
allMessages = append(allMessages, m2) allMessages = append(allMessages, m2)
...@@ -62,6 +62,7 @@ func ApiMessagesHandler(w http.ResponseWriter, r *http.Request) { ...@@ -62,6 +62,7 @@ func ApiMessagesHandler(w http.ResponseWriter, r *http.Request) {
type Message struct { type Message struct {
Date float64 `json:"date"` Date float64 `json:"date"`
Sender string `json:"sender"`
Text string `json:"text"` Text string `json:"text"`
} }
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment