feat: load WS url from API config, improve program page, improve empty states

.env

 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

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>
     </>

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;
+            }
           });
         });
       }

src/actions/ws.js

 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.

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>
   );
 };

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>

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>

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">

src/pages/Program.jsx

 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">

src/stores.js

@@ -6,6 +6,7 @@ const globalInfoStoreInitial = {
   connectionState: "connecting",
   onlineMembers: 0,
   onlineUsers: 0,
+  websocketUrl: null,
   streamUrl: null,
 };
 

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) => {

typings/cf2021.d.ts

@@ -2,6 +2,7 @@ declare namespace CF2021 {
   export interface GlobalInfoStorePayload {
     connectionState: "connected" | "offline" | "connecting";
     onlineUsers: number;
+    websocketUrl: string;
     streamUrl?: string;
   }