go/microservices
1
0
Fork 0
mirror of https://github.com/ebosas/microservices.git synced 2025-08-24 20:08:55 +02:00
Code Issues Releases Activity

Finish messages page

Browse Source
This commit is contained in:
ebosas
2021-10-08 13:25:43 +03:00
parent 866aff9f75
commit 89536de358
8 changed files with 98 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
cmd/server/api.go
View File

@@ -9,7 +9,7 @@ import (
"github.com/go-redis/redis/v8"
)
// handleAPICache handles an API call for cached messages
// handleAPICache handles API calls for cached messages
func handleAPICache(cr *redis.Client) func(w http.ResponseWriter, r *http.Request) {
return func(w http.ResponseWriter, r *http.Request) {
data, err := cache.GetCacheJSON(cr)

22
cmd/server/server.go
View File

@@ -3,6 +3,7 @@ package main
import (
"context"
"embed"
"encoding/json"
"fmt"
"html/template"
"log"
@@ -72,12 +73,31 @@ func handleHome(w http.ResponseWriter, r *http.Request) {
// handleMessages handles the messages page.
func handleMessages(cr *redis.Client) func(w http.ResponseWriter, r *http.Request) {
return func(w http.ResponseWriter, r *http.Request) {
data, err := cache.GetCache(cr)
cacheJSON, err := cache.GetCacheJSON(cr)
if err != nil {
log.Printf("get cache: %s", err)
return
}
var cached cache.Cache
err = json.Unmarshal([]byte(cacheJSON), &cached)
if err != nil {
log.Printf("unmarshal cache: %s", err)
return
}
data := map[string]interface{}{
"Data": cached,
"Json": cacheJSON,
}
// data := struct {
// Data cache.Cache
// Json string
// }{cached, "Hello"}
// fmt.Println(data.Json)
funcMap := template.FuncMap{"fdate": formatTime}
t := template.Must(template.New("").Funcs(funcMap).ParseFS(filesTempl, "template/template.html", "template/navbar.html", "template/messages.html"))
t.ExecuteTemplate(w, "layout", data)

4
cmd/server/template/messages.html
View File

@@ -1,6 +1,6 @@
{{ define "content" }}
<div class="container">
<h3 class="my-4 ps-2">Recent messages ({{ .Count }}/{{ .Total }})</h3>
<h3 class="my-4 ps-2">Recent messages ({{ .Data.Count }}/{{ .Data.Total }})</h3>
<table class="table">
<thead>
<tr>
@@ -10,7 +10,7 @@
</tr>
</thead>
<tbody>
{{ range .Messages }}
{{ range .Data.Messages }}
<tr>
<td>{{ .Time | fdate }}</td>
<td>{{ .Text }}</td>

8
cmd/server/template/template.html
View File

@@ -5,13 +5,15 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="static/build/style.css">
{{ if and . .Json }}<script>window.__DATA="{{ .Json }}"</script>{{ end }}
</head>
<body>
<div id="root" class="vh-100">
{{ template "navbar" . }}
{{ template "content" . }}
</div>
<script src="http://127.0.0.1:8000/index.js"></script>
<!-- <script src="static/build/index.js"></script> -->
</div>
<script src="http://127.0.0.1:8000/index.js"></script>
<!-- <script src="static/build/index.js"></script> -->
</body>
</html>{{ end }}

5
web/react/package-lock.json generated
View File

@@ -12,6 +12,11 @@
"regenerator-runtime": "^0.13.4"
}
},
"date-fns": {
"version": "2.25.0",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.25.0.tgz",
"integrity": "sha512-ovYRFnTrbGPD4nqaEqescPEv1mNwvt+UTqI3Ay9SzNtey9NZnYu6E2qCcBBgJ6/2VF1zGGygpyTDITqpQQ5e+w=="
},
"esbuild": {
"version": "0.12.5",
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.12.5.tgz",

1
web/react/package.json
View File

@@ -11,6 +11,7 @@
"author": "",
"license": "ISC",
"dependencies": {
"date-fns": "^2.25.0",
"esbuild": "^0.12.5",
"react": "^17.0.2",
"react-dom": "^17.0.2",

1
web/react/src/index.jsx
View File

@@ -2,6 +2,7 @@ import * as React from 'react'
import * as ReactDOM from 'react-dom'
import App from './app';
// ReactDOM.hydrate(
ReactDOM.render(
<App />,
document.getElementById('root')

110
web/react/src/messages.jsx
View File

@@ -1,57 +1,71 @@
import React from "react";
import { format } from 'date-fns'
let data = window.__DATA || null;
data = data ? JSON.parse(data) : null;
window.__DATA = null;
function Messages() {
const [error, setError] = React.useState(null);
const [isLoaded, setIsLoaded] = React.useState(false);
const [items, setItems] = React.useState([]);
const [error, setError] = React.useState(data ? false : null);
const [isLoaded, setIsLoaded] = React.useState(data ? true : false);
const [messages, setMessages] = React.useState(data ? data.messages : []);
const [counts, setCounts] = React.useState(data ? {count: data.count, total: data.total} : {});
data = null;
React.useEffect(() => {
fetch("/api/cache")
.then(res => res.json())
.then(
(result) => {
setIsLoaded(true);
setItems(result);
console.log(result);
},
(error) => {
setIsLoaded(true);
setError(error);
}
)
}, [])
if (isLoaded) return;
return (
<div className="container">
<h3 className="my-4 ps-2">Recent messages (3/67)</h3>
<table className="table">
<thead>
<tr>
<th scope="col">Time</th>
<th scope="col">Message</th>
<th scope="col">Source</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mar 3, 2021</td>
<td>Hello there from the frontend</td>
<td>Front end</td>
</tr>
<tr>
<td>Mar 3, 2021</td>
<td>Hello there from the back end</td>
<td>Back end</td>
</tr>
<tr>
<td>Mar 3, 2021</td>
<td>This is good!</td>
<td>Front end</td>
</tr>
</tbody>
</table>
</div>
)
fetch("/api/cache")
.then(res => res.json())
.then(
(result) => {
setIsLoaded(true);
setMessages(result.messages);
setCounts({count: result.count, total: result.total});
},
(error) => {
setIsLoaded(true);
setError(error);
}
)
}, []);
if (error){
return <div className="container">Something went wrong</div>;
} else if (!isLoaded){
return <div className="container">Loading...</div>;
} else {
return (
<div className="container">
<h3 className="my-4 ps-2">Recent messages ({counts.count}/{counts.total})</h3>
<table className="table">
<thead>
<tr>
<th scope="col">Time</th>
<th scope="col">Message</th>
<th scope="col">Source</th>
</tr>
</thead>
<tbody>
{messages.map(msg => (
<tr key={msg.time}>
<td>{formatTime(msg.time)}</td>
<td>{msg.text}</td>
<td>{msg.source}</td>
</tr>
))}
</tbody>
</table>
</div>
);
}
}
function formatTime(timestamp) {
const t = new Date(timestamp);
const fmt = (t.getDate() == new Date().getDate()) ? "h:mmaaa" : "h:mmaaa, MMM d";
return format(t, fmt);
}
export default Messages;