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{
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;
}
......@@ -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
......@@ -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
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) {
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"`
}
......
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