Skip to content
Snippets Groups Projects
Commit db901971 authored by xaralis's avatar xaralis
Browse files

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

parent ab0cd0a2
Branches
No related tags found
No related merge requests found
Pipeline #1913 passed
REACT_APP_STYLEGUIDE_URL=https://styleguide.pir-test.eu REACT_APP_STYLEGUIDE_URL=https://styleguide.pir-test.eu
REACT_APP_API_BASE_URL=https://cf2021.pirati.cz/api REACT_APP_API_BASE_URL=https://cf2021.pir-test.eu/api
REACT_APP_WS_BASE_URL=wss://cf2021.pirati.cz/ws
REACT_APP_MATOMO_ID=135 REACT_APP_MATOMO_ID=135
REACT_APP_SENTRY_DSN=https://aa80453ff4d54b9a9c1b49e79060498a@sentry.pir-test.eu/14 REACT_APP_SENTRY_DSN=https://aa80453ff4d54b9a9c1b49e79060498a@sentry.pir-test.eu/14
...@@ -80,7 +80,6 @@ const LoadingComponent = ( ...@@ -80,7 +80,6 @@ const LoadingComponent = (
const BaseApp = () => { const BaseApp = () => {
initializeWSChannel.read(); initializeWSChannel.read();
loadConfig.read();
return ( return (
<Router> <Router>
...@@ -94,6 +93,16 @@ const BaseApp = () => { ...@@ -94,6 +93,16 @@ const BaseApp = () => {
); );
}; };
const ConfiguredApp = () => {
loadConfig.read();
return (
<Suspense fallback={LoadingComponent}>
<BaseApp />
</Suspense>
);
};
const AuthenticatedApp = () => { const AuthenticatedApp = () => {
const keycloakInitConfig = { const keycloakInitConfig = {
onLoad: "check-sso", onLoad: "check-sso",
...@@ -111,7 +120,7 @@ const AuthenticatedApp = () => { ...@@ -111,7 +120,7 @@ const AuthenticatedApp = () => {
onEvent={onKeycloakEvent} onEvent={onKeycloakEvent}
> >
<Suspense fallback={LoadingComponent}> <Suspense fallback={LoadingComponent}>
<BaseApp /> <ConfiguredApp />
</Suspense> </Suspense>
</KeycloakProvider> </KeycloakProvider>
</> </>
......
...@@ -27,6 +27,9 @@ export const loadConfig = createAsyncAction( ...@@ -27,6 +27,9 @@ export const loadConfig = createAsyncAction(
if (rawConfigItem.id === "stream_url") { if (rawConfigItem.id === "stream_url") {
state.streamUrl = rawConfigItem.value; state.streamUrl = rawConfigItem.value;
} }
if (rawConfigItem.id === "websocket_url") {
state.websocketUrl = rawConfigItem.value;
}
}); });
}); });
} }
......
import { createAsyncAction, errorResult, successResult } from "pullstate"; import { createAsyncAction, errorResult, successResult } from "pullstate";
import { GlobalInfoStore } from "stores";
import { connect } from "ws/connection"; import { connect } from "ws/connection";
import { loadAnnouncements } from "./announcements"; import { loadAnnouncements } from "./announcements";
...@@ -7,8 +8,11 @@ import { loadPosts } from "./posts"; ...@@ -7,8 +8,11 @@ import { loadPosts } from "./posts";
import { loadProgram } from "./program"; import { loadProgram } from "./program";
export const initializeWSChannel = createAsyncAction(async () => { export const initializeWSChannel = createAsyncAction(async () => {
const { websocketUrl } = GlobalInfoStore.getRawState();
try { try {
const wsChannel = await connect({ const wsChannel = await connect({
url: websocketUrl,
onConnect: async ({ worker }) => { onConnect: async ({ worker }) => {
// Re-load initial data once connected, this will ensure we won't lose // Re-load initial data once connected, this will ensure we won't lose
// any intermediate state. // any intermediate state.
......
...@@ -39,6 +39,11 @@ const AnnouncementList = ({ ...@@ -39,6 +39,11 @@ const AnnouncementList = ({
onSeen={onAnnouncementSeen(item)} 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> </div>
); );
}; };
......
...@@ -84,7 +84,7 @@ const PostList = ({ ...@@ -84,7 +84,7 @@ const PostList = ({
/> />
))} ))}
{!items.length && ( {!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š Nikdo zatím žádný odpovídající příspěvek do rozpravy nepřidal. Budeš
první? první?
</p> </p>
......
...@@ -23,7 +23,7 @@ const GlobalStats = () => { ...@@ -23,7 +23,7 @@ const GlobalStats = () => {
<span> <span>
{onlineMembers === 1 && "člen online"} {onlineMembers === 1 && "člen online"}
{onlineMembers > 1 && onlineMembers < 4 && "členové online"} {onlineMembers > 1 && onlineMembers < 4 && "členové online"}
{onlineMembers > 4 && "členovů online"} {(onlineMembers === 0 || onlineMembers > 4) && "členů online"}
</span> </span>
</div> </div>
<div> <div>
......
...@@ -153,7 +153,7 @@ const Home = () => { ...@@ -153,7 +153,7 @@ const Home = () => {
return ( 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"> <section className="cf2021__video">
<div className="flex justify-between mb-4 lg:mb-8"> <div className="flex justify-between mb-4 lg:mb-8">
<h1 className="head-alt-base lg:head-alt-lg"> <h1 className="head-alt-base lg:head-alt-lg">
......
import React from "react"; import React from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import classNames from "classnames";
import { format } from "date-fns"; import { format } from "date-fns";
import { activateProgramPoint } from "actions/program"; import { activateProgramPoint } from "actions/program";
...@@ -34,13 +33,7 @@ const Schedule = () => { ...@@ -34,13 +33,7 @@ const Schedule = () => {
const entry = items[id]; const entry = items[id];
return ( return (
<div <div
className={classNames( className="flex flex-col md:flex-row my-4 duration-300 text-black"
"flex flex-col md:flex-row my-4 hover:opacity-100 transition duration-300",
{
"text-black": isCurrent,
"text-black opacity-50": !isCurrent,
}
)}
key={entry.id} key={entry.id}
> >
<div className="w-28 md:text-right"> <div className="w-28 md:text-right">
......
...@@ -6,6 +6,7 @@ const globalInfoStoreInitial = { ...@@ -6,6 +6,7 @@ const globalInfoStoreInitial = {
connectionState: "connecting", connectionState: "connecting",
onlineMembers: 0, onlineMembers: 0,
onlineUsers: 0, onlineUsers: 0,
websocketUrl: null,
streamUrl: null, streamUrl: null,
}; };
......
...@@ -59,14 +59,14 @@ const buildKeepalivePayload = async () => { ...@@ -59,14 +59,14 @@ const buildKeepalivePayload = async () => {
}; };
}; };
export const connect = ({ onConnect }) => { export const connect = ({ url, onConnect }) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const worker = Worker(); const worker = Worker();
GlobalInfoStore.update((state) => { GlobalInfoStore.update((state) => {
state.connectionState = "connecting"; state.connectionState = "connecting";
}); });
const ws = new WebSocket(process.env.REACT_APP_WS_BASE_URL); const ws = new WebSocket(url);
let keepAliveInterval; let keepAliveInterval;
console.log("[ws] Connecting ..."); console.log("[ws] Connecting ...");
...@@ -107,7 +107,7 @@ export const connect = ({ onConnect }) => { ...@@ -107,7 +107,7 @@ export const connect = ({ onConnect }) => {
); );
clearInterval(keepAliveInterval); clearInterval(keepAliveInterval);
setTimeout(() => connect({ onConnect }), 1000); setTimeout(() => connect({ url, onConnect }), 1000);
}; };
ws.onerror = (err) => { ws.onerror = (err) => {
......
...@@ -2,6 +2,7 @@ declare namespace CF2021 { ...@@ -2,6 +2,7 @@ declare namespace CF2021 {
export interface GlobalInfoStorePayload { export interface GlobalInfoStorePayload {
connectionState: "connected" | "offline" | "connecting"; connectionState: "connected" | "offline" | "connecting";
onlineUsers: number; onlineUsers: number;
websocketUrl: string;
streamUrl?: string; streamUrl?: string;
} }
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment