From db9019717560bf27ded3263c77c136c8158fc42f Mon Sep 17 00:00:00 2001
From: xaralis <filip.varecha@fragaria.cz>
Date: Sat, 26 Dec 2020 09:04:06 +0100
Subject: [PATCH] feat: load WS url from API config, improve program page,
improve empty states
---
.env | 3 +--
src/App.jsx | 13 +++++++++++--
src/actions/global-info.js | 3 +++
src/actions/ws.js | 4 ++++
src/components/annoucements/AnnouncementList.jsx | 5 +++++
src/components/posts/PostList.jsx | 2 +-
src/containers/GlobalStats.jsx | 2 +-
src/pages/Home.jsx | 2 +-
src/pages/Program.jsx | 9 +--------
src/stores.js | 1 +
src/ws/connection.js | 6 +++---
typings/cf2021.d.ts | 1 +
12 files changed, 33 insertions(+), 18 deletions(-)
diff --git a/.env b/.env
index e76d849..3cfd9e6 100644
--- a/.env
+++ b/.env
@@ -1,5 +1,4 @@
REACT_APP_STYLEGUIDE_URL=https://styleguide.pir-test.eu
-REACT_APP_API_BASE_URL=https://cf2021.pirati.cz/api
-REACT_APP_WS_BASE_URL=wss://cf2021.pirati.cz/ws
+REACT_APP_API_BASE_URL=https://cf2021.pir-test.eu/api
REACT_APP_MATOMO_ID=135
REACT_APP_SENTRY_DSN=https://aa80453ff4d54b9a9c1b49e79060498a@sentry.pir-test.eu/14
diff --git a/src/App.jsx b/src/App.jsx
index 3b7de1a..904e3fb 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -80,7 +80,6 @@ const LoadingComponent = (
const BaseApp = () => {
initializeWSChannel.read();
- loadConfig.read();
return (
<Router>
@@ -94,6 +93,16 @@ const BaseApp = () => {
);
};
+const ConfiguredApp = () => {
+ loadConfig.read();
+
+ return (
+ <Suspense fallback={LoadingComponent}>
+ <BaseApp />
+ </Suspense>
+ );
+};
+
const AuthenticatedApp = () => {
const keycloakInitConfig = {
onLoad: "check-sso",
@@ -111,7 +120,7 @@ const AuthenticatedApp = () => {
onEvent={onKeycloakEvent}
>
<Suspense fallback={LoadingComponent}>
- <BaseApp />
+ <ConfiguredApp />
</Suspense>
</KeycloakProvider>
</>
diff --git a/src/actions/global-info.js b/src/actions/global-info.js
index 6e8c268..342d31c 100644
--- a/src/actions/global-info.js
+++ b/src/actions/global-info.js
@@ -27,6 +27,9 @@ export const loadConfig = createAsyncAction(
if (rawConfigItem.id === "stream_url") {
state.streamUrl = rawConfigItem.value;
}
+ if (rawConfigItem.id === "websocket_url") {
+ state.websocketUrl = rawConfigItem.value;
+ }
});
});
}
diff --git a/src/actions/ws.js b/src/actions/ws.js
index 59150d3..6de984d 100644
--- a/src/actions/ws.js
+++ b/src/actions/ws.js
@@ -1,5 +1,6 @@
import { createAsyncAction, errorResult, successResult } from "pullstate";
+import { GlobalInfoStore } from "stores";
import { connect } from "ws/connection";
import { loadAnnouncements } from "./announcements";
@@ -7,8 +8,11 @@ import { loadPosts } from "./posts";
import { loadProgram } from "./program";
export const initializeWSChannel = createAsyncAction(async () => {
+ const { websocketUrl } = GlobalInfoStore.getRawState();
+
try {
const wsChannel = await connect({
+ url: websocketUrl,
onConnect: async ({ worker }) => {
// Re-load initial data once connected, this will ensure we won't lose
// any intermediate state.
diff --git a/src/components/annoucements/AnnouncementList.jsx b/src/components/annoucements/AnnouncementList.jsx
index 898d2f9..7df00e6 100644
--- a/src/components/annoucements/AnnouncementList.jsx
+++ b/src/components/annoucements/AnnouncementList.jsx
@@ -39,6 +39,11 @@ const AnnouncementList = ({
onSeen={onAnnouncementSeen(item)}
/>
))}
+ {!items.length && (
+ <p className="px-8 py-4 leading-snug text-sm md:text-base">
+ Zatím žádná oznámení.
+ </p>
+ )}
</div>
);
};
diff --git a/src/components/posts/PostList.jsx b/src/components/posts/PostList.jsx
index ccfa721..170a958 100644
--- a/src/components/posts/PostList.jsx
+++ b/src/components/posts/PostList.jsx
@@ -84,7 +84,7 @@ const PostList = ({
/>
))}
{!items.length && (
- <p className="p-4 lg:p-0 lg:py-3">
+ <p className="p-4 lg:p-0 lg:py-3 leading-snug text-sm md:text-base">
Nikdo zatím žádný odpovídající příspěvek do rozpravy nepřidal. Budeš
první?
</p>
diff --git a/src/containers/GlobalStats.jsx b/src/containers/GlobalStats.jsx
index 8b3632d..d425afb 100644
--- a/src/containers/GlobalStats.jsx
+++ b/src/containers/GlobalStats.jsx
@@ -23,7 +23,7 @@ const GlobalStats = () => {
<span>
{onlineMembers === 1 && "člen online"}
{onlineMembers > 1 && onlineMembers < 4 && "členové online"}
- {onlineMembers > 4 && "členovů online"}
+ {(onlineMembers === 0 || onlineMembers > 4) && "členů online"}
</span>
</div>
<div>
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index a8794ff..06ebfcf 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -153,7 +153,7 @@ const Home = () => {
return (
<>
- <article className="container container--wide pt-8 lg:py-24 cf2021">
+ <article className="container container--wide py-8 lg:py-24 cf2021">
<section className="cf2021__video">
<div className="flex justify-between mb-4 lg:mb-8">
<h1 className="head-alt-base lg:head-alt-lg">
diff --git a/src/pages/Program.jsx b/src/pages/Program.jsx
index 8cceb31..4817280 100644
--- a/src/pages/Program.jsx
+++ b/src/pages/Program.jsx
@@ -1,6 +1,5 @@
import React from "react";
import { Link } from "react-router-dom";
-import classNames from "classnames";
import { format } from "date-fns";
import { activateProgramPoint } from "actions/program";
@@ -34,13 +33,7 @@ const Schedule = () => {
const entry = items[id];
return (
<div
- className={classNames(
- "flex flex-col md:flex-row my-4 hover:opacity-100 transition duration-300",
- {
- "text-black": isCurrent,
- "text-black opacity-50": !isCurrent,
- }
- )}
+ className="flex flex-col md:flex-row my-4 duration-300 text-black"
key={entry.id}
>
<div className="w-28 md:text-right">
diff --git a/src/stores.js b/src/stores.js
index 9f21118..38a0dfa 100644
--- a/src/stores.js
+++ b/src/stores.js
@@ -6,6 +6,7 @@ const globalInfoStoreInitial = {
connectionState: "connecting",
onlineMembers: 0,
onlineUsers: 0,
+ websocketUrl: null,
streamUrl: null,
};
diff --git a/src/ws/connection.js b/src/ws/connection.js
index 04f2743..43bab6d 100644
--- a/src/ws/connection.js
+++ b/src/ws/connection.js
@@ -59,14 +59,14 @@ const buildKeepalivePayload = async () => {
};
};
-export const connect = ({ onConnect }) => {
+export const connect = ({ url, onConnect }) => {
return new Promise((resolve, reject) => {
const worker = Worker();
GlobalInfoStore.update((state) => {
state.connectionState = "connecting";
});
- const ws = new WebSocket(process.env.REACT_APP_WS_BASE_URL);
+ const ws = new WebSocket(url);
let keepAliveInterval;
console.log("[ws] Connecting ...");
@@ -107,7 +107,7 @@ export const connect = ({ onConnect }) => {
);
clearInterval(keepAliveInterval);
- setTimeout(() => connect({ onConnect }), 1000);
+ setTimeout(() => connect({ url, onConnect }), 1000);
};
ws.onerror = (err) => {
diff --git a/typings/cf2021.d.ts b/typings/cf2021.d.ts
index 4b9d628..154eab9 100644
--- a/typings/cf2021.d.ts
+++ b/typings/cf2021.d.ts
@@ -2,6 +2,7 @@ declare namespace CF2021 {
export interface GlobalInfoStorePayload {
connectionState: "connected" | "offline" | "connecting";
onlineUsers: number;
+ websocketUrl: string;
streamUrl?: string;
}
--
GitLab