8762f8236f694a1e33e0312460a80d94a271e4e3 to main · TO / cf-online-ui

Some changes are not shown.

For a faster browsing experience, only 77 of 93 files are shown. Download one of the files below to see all changes.

.env

+4 −1

Original line number	Diff line number	Diff line
		REACT_APP_STYLEGUIDE_URL=http://localhost:3001/
		REACT_APP_STYLEGUIDE_URL=https://styleguide.pirati.cz/2.11.0
		REACT_APP_API_BASE_URL=https://cf2024.online/api
		REACT_APP_MATOMO_ID=135
		REACT_APP_SENTRY_DSN=https://aa80453ff4d54b9a9c1b49e79060498a@sentry.pirati.cz/14

.env.development

0 → 100644

+1 −0

Original line number	Diff line number	Diff line
		REACT_APP_STYLEGUIDE_URL=http://localhost:3001

.gitlab-ci.yml

+8 −8

Original line number	Diff line number	Diff line
		image: node:buster
		image: node:18.20.4-bullseye

		variables:
		SITE_NAME: cf2021.pirati.cz
		SITE_NAME: cf2024.online

		ARTIFACTS_PATH: build
		REACT_APP_STYLEGUIDE_URL: https://styleguide.pir-test.eu/latest
		API_URL: https://cf2021.pirati.cz/api
		REACT_APP_API_BASE_URL: /api
		WEBHOOK_URL: https://ha-web.pirati.cz

		before_script:
		@@ -13,11 +13,11 @@ before_script:
		build:
		stage: build
		script:
		- npm install
		- npm install --legacy-peer-deps
		- npm run build
		after_script:
		- echo "{\"job_token\":\"$CI_JOB_TOKEN\", \"name\":\"$SITE_NAME\" }" > request.json
		- "curl -H 'Content-Type: application/json' -X POST -d @request.json $WEBHOOK_URL"
		- echo "{\"name\":\"$SITE_NAME\" }" > request.json
		- "curl -k -H 'Content-Type: application/json' -X POST -d @request.json $WEBHOOK_URL"
		artifacts:
		expire_in: 30 min
		paths:

.nvmrc

+1 −1

Original line number	Diff line number	Diff line
		14.13
		No newline at end of file
		18.20.4

Dockerfile

+7 −6

Original line number	Diff line number	Diff line
		FROM node:14.13-alpine3.12 as build
		FROM node:18.20.4-alpine AS build

		ARG BUILD_REACT_APP_STYLEGUIDE_URL

		ENV REACT_APP_STYLEGUIDE_URL=${BUILD_REACT_APP_STYLEGUIDE_URL}
		ENV REACT_APP_STYLEGUIDE_URL="https://styleguide.pirati.cz/2.12.1"
		ENV REACT_APP_API_BASE_URL=https://cf2024.online/api
		ENV REACT_APP_MATOMO_ID=135
		ENV REACT_APP_SENTRY_DSN=https://aa80453ff4d54b9a9c1b49e79060498a@sentry.pirati.cz/14

		RUN mkdir -p /home/node/cf2021

		@@ -10,7 +11,7 @@ WORKDIR /home/node/cf2021

		COPY package*.json ./

		RUN npm ci
		RUN npm ci --legacy-peer-deps

		COPY . .

		@@ -18,7 +19,7 @@ RUN npm run build

		# ---

		FROM nginx:alpine as production
		FROM nginx:alpine AS production

		COPY --from=build /home/node/cf2021/build /usr/share/nginx/html/
		COPY docker/nginx.conf /etc/nginx/conf.d/default.conf

Dockerfile.development

+12 −12

Original line number	Diff line number	Diff line
		FROM node:14.13-alpine3.12
		FROM node:18.20.4-alpine

		# libs for development -- most of theme needed for canvas support in tests
		RUN apk add --no-cache \
		@@ -17,7 +17,7 @@ WORKDIR /app/cf2021

		COPY package*.json ./

		RUN npm ci
		RUN npm ci --legacy-peer-deps

		COPY . .

compose.yaml

0 → 100644

+6 −0

Original line number	Diff line number	Diff line
		services:
		app:
		image: cf-online
		ports:
		- "3000:80"

eslint.config.mjs

0 → 100644

+67 −0

Original line number	Diff line number	Diff line
		import { fixupConfigRules, fixupPluginRules } from "@eslint/compat";
		import { FlatCompat } from "@eslint/eslintrc";
		import js from "@eslint/js";
		import jestDom from "eslint-plugin-jest-dom";
		import simpleImportSort from "eslint-plugin-simple-import-sort";
		import testingLibrary from "eslint-plugin-testing-library";
		import path from "node:path";
		import { fileURLToPath } from "node:url";

		const __filename = fileURLToPath(import.meta.url);
		const __dirname = path.dirname(__filename);
		const compat = new FlatCompat({
		baseDirectory: __dirname,
		recommendedConfig: js.configs.recommended,
		allConfig: js.configs.all,
		});

		const eslintConfig = [
		...fixupConfigRules(
		compat.extends(
		"react-app",
		"plugin:prettier/recommended",
		"plugin:testing-library/dom",
		"plugin:jest-dom/recommended",
		),
		),
		{
		plugins: {
		"simple-import-sort": simpleImportSort,
		"testing-library": fixupPluginRules(testingLibrary),
		"jest-dom": fixupPluginRules(jestDom),
		},

		rules: {
		"sort-imports": "off",
		"prettier/prettier": "warn",
		"react/no-unknown-property": [1],

		"simple-import-sort/imports": [
		"warn",
		{
		groups: [
		["^react", "^@?\\w"],
		[
		"^(api\|actions\|config\|hooks\|components\|containers\|pages\|utils\|stores\|keycloak\|markdown\|ws)(/.*\|$)",
		],
		["^(test-utils)(/.*\|$)"],
		["^\\u0000"],
		["^\\.\\.(?!/?$)", "^\\.\\./?$"],
		["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
		["^.+\\.s?css$"],
		],
		},
		],

		"testing-library/await-async-queries": "error",
		"testing-library/no-await-sync-queries": "error",
		"testing-library/no-debugging-utils": "warn",
		"jest-dom/prefer-checked": "error",
		"jest-dom/prefer-enabled-disabled": "error",
		"jest-dom/prefer-required": "error",
		"jest-dom/prefer-to-have-attribute": "error",
		},
		},
		];

		export default eslintConfig;

package-lock.json

+19982 −12806

File changed.

Preview size limit exceeded, changes collapsed.

package.json

+51 −89

Original line number	Diff line number	Diff line
		@@ -3,20 +3,35 @@
		"version": "0.1.0",
		"private": true,
		"dependencies": {
		"@react-keycloak/web": "^2.1.4",
		"@sentry/react": "^5.23.0",
		"classnames": "^2.2.6",
		"date-fns": "^2.16.1",
		"immer": "^7.0.15",
		"keycloak-js": "^10.0.2",
		"lodash": "^4.17.20",
		"pullstate": "^1.20.4",
		"react": "^16.13.1",
		"react-device-detect": "^1.13.1",
		"react-dom": "^16.13.1",
		"react-modal": "^3.12.1",
		"react-router-dom": "^5.2.0",
		"react-scripts": "3.4.3"
		"@react-keycloak/web": "^3.4.0",
		"@rooks/use-interval": "^4.11.2",
		"@rooks/use-outside-click": "^4.11.2",
		"@rooks/use-timeout": "^4.11.2",
		"@rooks/use-window-size": "^4.11.2",
		"@sentry/integrations": "^7.119.2",
		"@sentry/react": "^8.34.0",
		"@sentry/tracing": "^7.119.2",
		"ajv": "^8.17.1",
		"classnames": "^2.5.1",
		"crypto-js": "^4.2.0",
		"date-fns": "^4.1.0",
		"keycloak-js": "^26.0.0",
		"lodash": "^4.17.21",
		"pullstate": "^1.25.0",
		"react": "^18.3.1",
		"react-dom": "^18.3.1",
		"react-helmet-async": "^2.0.5",
		"react-hint": "^3.2.1",
		"react-intersection-observer": "^9.13.1",
		"react-joyride": "^2.9.2",
		"react-mde": "^11.5.0",
		"react-modal": "^3.16.1",
		"react-player": "^2.16.0",
		"react-router-dom": "^6.27.0",
		"react-scripts": "^5.0.1",
		"showdown": "^2.1.0",
		"wait-queue": "^1.1.4",
		"xss": "^1.0.15"
		},
		"scripts": {
		"start": "react-scripts start",
		@@ -24,66 +39,8 @@
		"test": "react-scripts test --env=jsdom-fourteen",
		"eject": "react-scripts eject",
		"lint": "eslint --cache 'src/*/.{js,jsx}'",
		"lint:fix": "eslint --cache --fix 'src/*/.{js,jsx}'"
		},
		"eslintConfig": {
		"extends": [
		"react-app",
		"plugin:prettier/recommended",
		"plugin:testing-library/recommended",
		"plugin:jest-dom/recommended"
		],
		"plugins": [
		"simple-import-sort",
		"testing-library",
		"jest-dom"
		],
		"rules": {
		"sort-imports": "off",
		"prettier/prettier": "warn",
		"react/no-unknown-property": [
		1
		],
		"simple-import-sort/sort": [
		"warn",
		{
		"groups": [
		[
		"^react",
		"^@?\\w"
		],
		[
		"^(actions\|components\|containers\|pages\|utils\|stores\|keycloak)(/.*\|$)"
		],
		[
		"^(test-utils)(/.*\|$)"
		],
		[
		"^\\u0000"
		],
		[
		"^\\.\\.(?!/?$)",
		"^\\.\\./?$"
		],
		[
		"^\\./(?=.*/)(?!/?$)",
		"^\\.(?!/?$)",
		"^\\./?$"
		],
		[
		"^.+\\.s?css$"
		]
		]
		}
		],
		"testing-library/await-async-query": "error",
		"testing-library/no-await-sync-query": "error",
		"testing-library/no-debug": "warn",
		"jest-dom/prefer-checked": "error",
		"jest-dom/prefer-enabled-disabled": "error",
		"jest-dom/prefer-required": "error",
		"jest-dom/prefer-to-have-attribute": "error"
		}
		"lint:fix": "eslint --cache --fix 'src/*/.{js,jsx}'",
		"analyze": "source-map-explorer 'build/static/js/*.js'"
		},
		"browserslist": {
		"production": [
		@@ -98,22 +55,27 @@
		]
		},
		"devDependencies": {
		"@testing-library/jest-dom": "^4.0.0",
		"@testing-library/react": "^10.4.4",
		"@testing-library/react-hooks": "^3.4.2",
		"@testing-library/user-event": "^12.1.7",
		"@eslint/compat": "^1.2.0",
		"@eslint/eslintrc": "^3.1.0",
		"@eslint/js": "^9.12.0",
		"@testing-library/jest-dom": "^6.5.0",
		"@testing-library/react": "^16.0.1",
		"@testing-library/react-hooks": "^8.0.1",
		"@testing-library/user-event": "^14.5.2",
		"babel-core": "^6.26.3",
		"babel-eslint": "^10.1.0",
		"eslint": "^6.8.0",
		"eslint-config-airbnb": "^18.2.0",
		"eslint-config-prettier": "^6.11.0",
		"eslint-plugin-import": "^2.22.0",
		"eslint-plugin-jest-dom": "^3.6.3",
		"eslint-plugin-jsx-a11y": "^6.3.1",
		"eslint-plugin-prettier": "^3.1.4",
		"eslint-plugin-react": "^7.20.6",
		"eslint-plugin-simple-import-sort": "^5.0.3",
		"eslint-plugin-testing-library": "^3.8.0",
		"prettier": "^2.1.1"
		"eslint": "^9.12.0",
		"eslint-config-airbnb": "^19.0.4",
		"eslint-config-prettier": "^9.1.0",
		"eslint-plugin-import": "^2.31.0",
		"eslint-plugin-jest-dom": "^5.4.0",
		"eslint-plugin-jsx-a11y": "^6.10.0",
		"eslint-plugin-prettier": "^5.2.1",
		"eslint-plugin-react": "^7.37.1",
		"eslint-plugin-simple-import-sort": "^12.1.1",
		"eslint-plugin-testing-library": "^6.3.0",
		"prettier": "^3.3.3",
		"source-map-explorer": "^2.5.3",
		"typescript": "^5.6.3"
		}
		}

public/favicon.ico

deleted100644 → 0

−3.08 KiB

3.08 KiB | W: 64 | H: 64

public/img/og.afdesign

0 → 100644

+58.2 KiB

File added.

No diff preview for this file type.

View file

public/img/og2021.png

0 → 100644

+124 KiB

124.02 KiB

public/img/og2024.png

0 → 100644

+43.1 KiB

43.08 KiB

public/index.html

+37 −10

Original line number	Diff line number	Diff line
		@@ -2,14 +2,26 @@
		<html lang="en">
		<head>
		<meta charset="utf-8" />
		<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<!-- Favicons -->
		<link rel="apple-touch-icon" href="%REACT_APP_STYLEGUIDE_URL%/images/favicons/favicon-196x196.png">
		<link rel="icon" type="image/png" href="%REACT_APP_STYLEGUIDE_URL%/images/favicons/favicon-196x196.png" sizes="196x196">
		<meta name="application-name" content="CF2023">
		<meta name="msapplication-TileColor" content="#000000">
		<meta name="msapplication-TileImage" content="%REACT_APP_STYLEGUIDE_URL%/images/favicons/mstile-144x144.png">
		<meta name="msapplication-square70x70logo" content="%REACT_APP_STYLEGUIDE_URL%/images/favicons/mstile-70x70.png">
		<meta name="msapplication-square150x150logo" content="%REACT_APP_STYLEGUIDE_URL%/images/favicons/mstile-150x150.png">
		<meta name="msapplication-wide310x150logo" content="%REACT_APP_STYLEGUIDE_URL%/images/favicons/mstile-310x150.png">
		<meta name="msapplication-square310x310logo" content="%REACT_APP_STYLEGUIDE_URL%/images/favicons/mstile-310x310.png">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
		<meta name="theme-color" content="#000000" />
		<meta
		name="description"
		content="Web site created using create-react-app"
		/>
		<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
		<meta property="og:url" content="https://cf2024.online/" />
		<meta property="og:type" content="website" />
		<meta property="og:title" content="CF 2024 \| Pirátská strana" />
		<meta property="og:image" content="https://cf2023.online/img/og2024.png" />
		<meta property="og:description" content="Oficiální stránka letošního ročníku on-line zasedání Celostátního fóra České pirátské strany, 13. 1. 2024." />
		<meta name="description" content="Oficiální stránka letošního ročníku on-line zasedání Celostátního fóra České pirátské strany, 13. 1. 2024." />

		<title>CF 2023 \| Pirátská strana</title>
		<!--
		manifest.json provides metadata used when your web app is installed on a
		user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
		@@ -25,11 +37,11 @@
		Learn how to configure a non-root public URL by running `npm run build`.
		-->
		<link rel="stylesheet" href="%REACT_APP_STYLEGUIDE_URL%/css/styles.css" />
		<title>React App</title>
		<!--<script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script>-->
		</head>
		<body class="h-screen">
		<body>
		<noscript>You need to enable JavaScript to run this app.</noscript>
		<div id="root" class="h-screen h-full w-full"></div>
		<div id="root"></div>
		<!--
		This HTML file is a template.
		If you open it directly in the browser, you will see an empty page.
		@@ -41,4 +53,19 @@
		To create a production bundle, use `npm run build` or `yarn build`.
		-->
		</body>
		<!-- Matomo -->
		<script type="text/javascript">
		var _paq = window._paq = window._paq \|\| [];
		/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
		_paq.push(['trackPageView']);
		_paq.push(['enableLinkTracking']);
		(function() {
		var u="//matomo.pirati.cz/";
		_paq.push(['setTrackerUrl', u+'matomo.php']);
		_paq.push(['setSiteId', '%REACT_APP_MATOMO_ID%']);
		var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
		g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
		})();
		</script>
		<!-- End Matomo Code -->
		</html>

public/logo192.png

deleted100644 → 0

−5.22 KiB

5.22 KiB

public/logo512.png

deleted100644 → 0

−9.44 KiB

9.44 KiB

public/manifest.json

+9 −9

Original line number	Diff line number	Diff line
		{
		"short_name": "React App",
		"name": "Create React App Sample",
		"short_name": "CF2023",
		"name": "Celostátní fórum 2023",
		"icons": [
		{
		"src": "favicon.ico",
		"sizes": "64x64 32x32 24x24 16x16",
		"src": "https://styleguide.pir-test.eu/latest/images/favicons/favicon-32x32.png",
		"sizes": "32x32 24x24 16x16",
		"type": "image/x-icon"
		},
		{
		"src": "logo192.png",
		"type": "image/png",
		"sizes": "192x192"
		"src": "https://styleguide.pir-test.eu/latest/images/favicons/favicon-96x96.png",
		"sizes": "96x96 64x64",
		"type": "image/x-icon"
		},
		{
		"src": "logo512.png",
		"src": "https://styleguide.pir-test.eu/latest/images/favicons/favicon-196x196.png",
		"type": "image/png",
		"sizes": "512x512"
		"sizes": "192x192 196x196"
		}
		],
		"start_url": ".",

src/App.jsx

+104 −25

Original line number	Diff line number	Diff line
		import React, { Suspense } from "react";
		import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
		import { KeycloakProvider } from "@react-keycloak/web";
		import React, { Suspense, useEffect } from "react";
		import { Helmet, HelmetProvider } from "react-helmet-async";
		import ReactHintFactory from "react-hint";
		import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
		import { ReactKeycloakProvider as KeycloakProvider } from "@react-keycloak/web";
		import { extraErrorDataIntegration } from "@sentry/integrations";
		import * as Sentry from "@sentry/react";
		import { browserTracingIntegration } from "@sentry/browser"

		import { loadGroupMappings } from "actions/misc";
		import { loadAnnouncements } from "actions/announcements";
		import { loadConfig } from "actions/global-info";
		import { loadPosts } from "actions/posts";
		import { loadProgram } from "actions/program";
		import { loadMe, refreshAccessToken } from "actions/users";
		import { initializeWSChannel } from "actions/ws";
		import Footer from "components/Footer";
		import Navbar from "components/Navbar";
		import About from "pages/About";
		import Home from "pages/Home";
		import NotFound from "pages/NotFound";
		import Program from "pages/Program";
		import { AuthStore } from "stores";
		import Protocol from "pages/Protocol";
		import { AuthStore, PostStore } from "stores";
		import { updateWindowPosts } from "utils";

		import keycloak from "./keycloak";

		@@ -20,49 +33,114 @@ if (process.env.REACT_APP_SENTRY_DSN) {
		Sentry.init({
		dsn: process.env.REACT_APP_SENTRY_DSN,
		tracesSampleRate: 0.1,
		integrations: [extraErrorDataIntegration(), browserTracingIntegration()],
		});
		}

		const onKeycloakEvent = (event) => {
		const ReactHint = ReactHintFactory(React);

		const onKeycloakEvent = async (event) => {
		if (event === "onTokenExpired") {
		console.warn("[auth] access token expired, attempting refresh");
		refreshAccessToken();
		}

		if (["onAuthRefreshSuccess", "onAuthSuccess"].includes(event)) {
		Sentry.setUser(keycloak.tokenParsed);

		const kcRoles = keycloak.tokenParsed.roles \|\| [];
		let role = null;

		if (kcRoles.includes("chairman")) {
		role = "chairman";
		} else if (kcRoles.includes("member")) {
		role = "member";
		} else {
		role = "regp";
		}

		AuthStore.update((state) => {
		state.isAuthenticated = true;
		state.user = {
		name: keycloak.tokenParsed.name,
		groups: keycloak.tokenParsed.groups,
		username: keycloak.tokenParsed.preferred_username,
		role,
		accessToken: keycloak.token,
		};
		});

		// Once base user details has been stored, load me details from API.
		loadMe.run();

		PostStore.update((state) => {
		// Only display proposals verified by chairman to other users.
		state.filters.showPendingProposals = role === "chairman";
		updateWindowPosts(state);
		});
		}
		};

		const LoadingComponent = (
		<div className="h-screen w-screen flex justify-center items-center">
		<div className="text-center">
		<div className="flex flex-col md:flex-row items-center space-x-4 text-center mb-2">
		<img
		src={`${process.env.REACT_APP_STYLEGUIDE_URL}/images/logo-round-black.svg`}
		className="w-20 mb-2 inline-block"
		className="w-16 mb-2"
		alt="Pirátská strana"
		/>
		<h1 className="head-heavy-base mb-2">Celostátní fórum 2021</h1>
		<p>Načítám aplikaci ...</p>
		<h1 className="head-alt-md md:head-alt-lg">Celostátní fórum 2024</h1>
		</div>
		<p className="text-center head-xs md:head-base">Načítám aplikaci ...</p>
		</div>
		</div>
		);

		const BaseApp = () => {
		loadGroupMappings.read();
		useEffect(() => {
		initializeWSChannel.run();
		}, []);

		return (
		<HelmetProvider>
		<Router>
		<Helmet>
		<title>CF 2024 \| Pirátská strana</title>
		<meta
		name="description"
		content="Oficiální stránka letošního ročníku on-line zasedání Celostátního fóra České pirátské strany, 13. 1. 2024."
		/>
		<meta property="og:title" content="CF 2024 \| Pirátská strana" />
		<meta
		property="og:description"
		content="Oficiální stránka letošního ročníku on-line zasedání Celostátního fóra České pirátské strany, 13. 1. 2024."
		/>
		</Helmet>
		<Navbar />
		<Switch>
		<Route exact path="/" children={<Home />} />
		<Route exact path="/program" children={<Program />} />
		</Switch>
		<Routes>
		<Route exact path="/" element={<Home />} />
		<Route exact path="/program" element={<Program />} />
		<Route exact path="/protocol" element={<Protocol />} />
		<Route exact path="/about" element={<About />} />
		<Route element={NotFound} />
		</Routes>
		<Footer />
		</Router>
		<ReactHint autoPosition events attribute="data-tip" className="tooltip" />
		</HelmetProvider>
		);
		};

		const ConfiguredApp = () => {
		loadConfig.read();
		loadProgram.read();
		loadAnnouncements.read();
		loadPosts.read();

		return (
		<Suspense fallback={LoadingComponent}>
		<BaseApp />
		</Suspense>
		);
		};

		@@ -77,13 +155,14 @@ const AuthenticatedApp = () => {
		return (
		<>
		<KeycloakProvider
		keycloak={keycloak}
		authClient={keycloak}
		initConfig={keycloakInitConfig}
		LoadingComponent={LoadingComponent}
		onEvent={onKeycloakEvent}
		autoRefreshToken={false}
		>
		<Suspense fallback={LoadingComponent}>
		<BaseApp />
		<ConfiguredApp />
		</Suspense>
		</KeycloakProvider>
		</>

src/App.test.js

+3 −3

Original line number	Diff line number	Diff line
		import React from "react";
		import { render } from "@testing-library/react";
		import { render, screen } from "@testing-library/react";

		import App from "./App";

		test("renders learn react link", () => {
		const { getByText } = render(<App />);
		const linkElement = getByText(/learn react/i);
		render(<App />);
		const linkElement = screen.getByText(/learn react/i);
		expect(linkElement).toBeInTheDocument();
		});

src/actions/announcements.js

+110 −18

Original line number	Diff line number	Diff line
		import { createAsyncAction, successResult } from "pullstate";
		import keyBy from "lodash/keyBy";
		import property from "lodash/property";
		import { createAsyncAction, errorResult, successResult } from "pullstate";

		import { fetchApi } from "api";
		import { AnnouncementStore } from "stores";
		import {
		announcementTypeMappingRev,
		createSeenWriter,
		parseRawAnnouncement,
		seenAnnouncementsLSKey,
		syncAnnoucementItemIds,
		} from "utils";

		export const loadAnnouncements = createAsyncAction(
		async () => {
		try {
		const resp = await fetchApi("/announcements");
		const data = await resp.json();
		return successResult(data.data);
		} catch (err) {
		return errorResult([], err.toString());
		}
		},
		{
		postActionHook: ({ result }) => {
		if (!result.error) {
		const announcements = result.payload.map(parseRawAnnouncement);

		AnnouncementStore.update((state) => {
		state.items = keyBy(announcements, property("id"));
		syncAnnoucementItemIds(state);
		});
		}
		},
		},
		);

		/**
		* Add new announcement.
		*/
		export const addAnnouncement = createAsyncAction(
		async ({ content }) => {
		/** @type {CF2021.Announcement} */
		const payload = {
		id: "999",
		datetime: new Date(),
		type: "announcement",
		async ({ content, link, type }) => {
		try {
		const body = JSON.stringify({
		content,
		seen: true,
		};

		return successResult(payload);
		link,
		type: announcementTypeMappingRev[type],
		});
		const resp = await fetchApi("/announcements", {
		method: "POST",
		body,
		expectedStatus: 201,
		});
		const data = await resp.json();
		return successResult(data.data);
		} catch (err) {
		return errorResult([], err.toString());
		}
		},
		{
		postActionHook: ({ result }) => {
		AnnouncementStore.update((state) => {
		state.items.push(result.payload);
		);

		/**
		* Delete existing announcement.
		*/
		export const deleteAnnouncement = createAsyncAction(
		/**
		*
		* @param {CF2021.Announcement} item
		*/
		async (item) => {
		try {
		await fetchApi(`/announcements/${item.id}`, {
		method: "DELETE",
		expectedStatus: 204,
		});
		return successResult({ item });
		} catch (err) {
		return errorResult([], err.toString());
		}
		},
		);

		/**
		* Update an announcement.
		*/
		export const updateAnnouncement = createAsyncAction(
		/**
		*
		* @param {CF2021.Announcement} item
		* @param {Object} payload
		*/
		async ({ item, payload }) => {
		try {
		const body = JSON.stringify(payload);
		await fetchApi(`/announcements/${item.id}`, {
		method: "PUT",
		body,
		expectedStatus: 204,
		});
		return successResult({ item, payload });
		} catch (err) {
		return errorResult([], err.toString());
		}
		},
		);

		const { markSeen: storeSeen } = createSeenWriter(seenAnnouncementsLSKey);

		/**
		* Mark down user saw this post already.
		* @param {CF2021.Post} post
		*/
		export const markSeen = (post) => {
		storeSeen(post.id);

		AnnouncementStore.update((state) => {
		state.items[post.id].seen = true;
		});
		};

src/actions/global-info.js

0 → 100644

+69 −0

Original line number	Diff line number	Diff line
		import isArray from "lodash/isArray";
		import { createAsyncAction, errorResult, successResult } from "pullstate";

		import { fetchApi } from "api";
		import { markdownConverter } from "markdown";
		import { GlobalInfoStore } from "stores";

		export const loadConfig = createAsyncAction(
		async () => {
		try {
		const resp = await fetchApi("/config");
		const payload = await resp.json();

		if (!isArray(payload)) {
		return errorResult([], "Unexpected response format");
		}

		return successResult(payload);
		} catch (err) {
		return errorResult([], err.toString());
		}
		},
		{
		postActionHook: ({ result }) => {
		if (!result.error) {
		GlobalInfoStore.update((state) => {
		result.payload.forEach((rawConfigItem) => {
		if (rawConfigItem.id === "stream_url") {
		state.streamUrl = rawConfigItem.value;
		}
		if (rawConfigItem.id === "websocket_url") {
		state.websocketUrl = rawConfigItem.value;
		}
		if (rawConfigItem.id === "record_url") {
		state.protocolUrl = rawConfigItem.value;
		}
		});
		});
		}
		},
		},
		);

		export const loadProtocol = createAsyncAction(
		async () => {
		const { protocolUrl } = GlobalInfoStore.getRawState();

		try {
		const resp = await fetch(protocolUrl);

		if (resp.status !== 200) {
		return errorResult([], `Unexpected status code ${resp.status}`);
		}

		return successResult(await resp.text());
		} catch (err) {
		return errorResult([], err.toString());
		}
		},
		{
		postActionHook: ({ result }) => {
		if (!result.error) {
		GlobalInfoStore.update((state) => {
		state.protocol = markdownConverter.makeHtml(result.payload);
		});
		}
		},
		},
		);

src/actions/misc.js

deleted100644 → 0

+0 −24

Original line number	Diff line number	Diff line
		import { createAsyncAction, errorResult, successResult } from "pullstate";

		import { AuthStore } from "stores";

		export const loadGroupMappings = createAsyncAction(
		async () => {
		try {
		const resp = await fetch("https://iapi.pirati.cz/v1/groups");
		const mappings = await resp.json();
		return successResult(mappings);
		} catch (err) {
		return errorResult([], err.toString());
		}
		},
		{
		postActionHook: ({ result }) => {
		if (!result.error) {
		AuthStore.update((state) => {
		state.groupMappings = result.payload;
		});
		}
		},
		}
		);

src/actions/posts.js

+300 −93

Original line number	Diff line number	Diff line
		import keyBy from "lodash/keyBy";
		import property from "lodash/property";
		import { createAsyncAction, errorResult, successResult } from "pullstate";

		import { PostStore } from "stores";
		import { updateWindowPosts } from "utils";
		import { fetchApi } from "api";
		import { AuthStore, PostStore } from "stores";
		import {
		createSeenWriter,
		filterPosts,
		parseRawPost,
		postsStateMappingRev,
		postsTypeMappingRev,
		seenPostsLSKey,
		} from "utils";

		export const loadPosts = createAsyncAction(
		async () => {
		try {
		const resp = await fetchApi("/posts", { expectedStatus: 200 });
		const data = await resp.json();
		return successResult(data.data);
		} catch (err) {
		return errorResult([], err.toString());
		}
		},
		{
		postActionHook: ({ result }) => {
		if (!result.error && result.payload) {
		const posts = result.payload.map(parseRawPost);

		PostStore.update((state) => {
		const filteredPosts = filterPosts(state.filters, posts);

		state.items = keyBy(posts, property("id"));
		state.itemCount = state.items.length;
		state.window = {
		items: filteredPosts.map(property("id")),
		itemCount: filteredPosts.length,
		};
		});
		}
		},
		},
		);

		export const like = createAsyncAction(
		/**
		* @param {CF2021.Post} post
		*/
		async (post) => {
		try {
		await fetchApi(`/posts/${post.id}/like`, {
		method: "PATCH",
		expectedStatus: 204,
		});
		return successResult(post);
		} catch (err) {
		return errorResult([], err.toString());
		}
		},
		{
		shortCircuitHook: ({ args }) => {
		if (args.ranking.myVote !== "none") {
		return errorResult();
		postActionHook: ({ result }) => {
		if (!result.error) {
		PostStore.update((state) => {
		state.items[result.payload.id].ranking.myVote =
		state.items[result.payload.id].ranking.myVote !== "like"
		? "like"
		: "none";
		});
		}
		},
		},
		);

		return false;
		export const dislike = createAsyncAction(
		/**
		* @param {CF2021.Post} post
		*/
		async (post) => {
		try {
		await fetchApi(`/posts/${post.id}/dislike`, {
		method: "PATCH",
		expectedStatus: 204,
		});
		return successResult(post);
		} catch (err) {
		return errorResult([], err.toString());
		}
		},
		{
		postActionHook: ({ result }) => {
		if (!result.error) {
		PostStore.update((state) => {
		state.items[result.payload.id].ranking.likes += 1;
		state.items[result.payload.id].ranking.score += 1;
		state.items[result.payload.id].ranking.myVote = "like";
		state.items[result.payload.id].ranking.myVote =
		state.items[result.payload.id].ranking.myVote !== "dislike"
		? "dislike"
		: "none";
		});
		}
		},
		},
		);

		if (state.filters.sort === "byScore") {
		updateWindowPosts(state);
		/**
		* Add new discussion post.
		*/
		export const addPost = createAsyncAction(async ({ content }) => {
		try {
		const body = JSON.stringify({
		content,
		type: postsTypeMappingRev["post"],
		});
		await fetchApi(`/posts`, { method: "POST", body, expectedStatus: 201 });
		return successResult();
		} catch (err) {
		return errorResult([], err.toString());
		}
		});

		/**
		* Add new proposal.
		*/
		export const addProposal = createAsyncAction(async ({ content }) => {
		try {
		const body = JSON.stringify({
		content,
		type: postsTypeMappingRev["procedure-proposal"],
		});
		await fetchApi(`/posts`, { method: "POST", body, expectedStatus: 201 });
		return successResult();
		} catch (err) {
		return errorResult([], err.toString());
		}
		},
		});

		/**
		* Hide existing post.
		*/
		export const hide = createAsyncAction(
		/**
		* @param {CF2021.Post} post
		*/
		async (post) => {
		try {
		await fetchApi(`/posts/${post.id}`, {
		method: "DELETE",
		expectedStatus: 204,
		});
		return successResult();
		} catch (err) {
		return errorResult([], err.toString());
		}
		},
		);

		export const dislike = createAsyncAction(
		/**
		* Edit post content.
		*/
		export const edit = createAsyncAction(
		/**
		* @param {CF2021.Post} post
		*/
		async (post) => {
		return successResult(post);
		async ({ post, newContent }) => {
		try {
		const body = JSON.stringify({
		content: newContent,
		});
		await fetchApi(`/posts/${post.id}`, {
		method: "PUT",
		body,
		expectedStatus: 204,
		});
		return successResult();
		} catch (err) {
		return errorResult([], err.toString());
		}
		},
		{
		shortCircuitHook: ({ args }) => {
		if (args.ranking.myVote !== "none") {
		const { user } = AuthStore.getRawState();

		if (!user) {
		return errorResult();
		}

		if (user && user.isBanned) {
		return errorResult();
		}

		return false;
		},
		postActionHook: ({ result }) => {
		if (!result.error) {
		PostStore.update((state) => {
		state.items[result.payload.id].ranking.dislikes += 1;
		state.items[result.payload.id].ranking.score -= 1;
		state.items[result.payload.id].ranking.myVote = "dislike";
		},
		);

		if (state.filters.sort === "byScore") {
		updateWindowPosts(state);
		}
		/**
		* Archive post.
		*/
		export const archive = createAsyncAction(
		/**
		* @param {CF2021.Post} post
		*/
		async (post) => {
		try {
		const body = JSON.stringify({
		is_archived: true,
		});
		await fetchApi(`/posts/${post.id}`, {
		method: "PUT",
		body,
		expectedStatus: 204,
		});
		return successResult();
		} catch (err) {
		return errorResult([], err.toString());
		}
		},
		}
		);

		/**
		* Add new discussion post.
		*
		* @param {CF2021.ProposalPost} proposal
		* @param {CF2021.ProposalPostState} state
		*/
		export const addPost = createAsyncAction(
		async ({ content }) => {
		/** @type {CF2021.DiscussionPost} */
		const payload = {
		id: "999",
		datetime: new Date(),
		author: {
		name: "John Doe",
		group: "KS Pardubický kraj",
		},
		type: "post",
		content,
		ranking: {
		score: 0,
		likes: 0,
		dislikes: 0,
		myVote: "none",
		},
		historyLog: [],
		archived: false,
		hidden: false,
		seen: true,
		const updateProposalState = async (proposal, state, additionalPayload) => {
		const body = JSON.stringify({
		state: postsStateMappingRev[state],
		...(additionalPayload \|\| {}),
		});
		await fetchApi(`/posts/${proposal.id}`, {
		method: "PUT",
		body,
		expectedStatus: 204,
		});
		return successResult(proposal);
		};
		return successResult(payload);

		/**
		* Announce procedure proposal.
		*/
		export const announceProposal = createAsyncAction(
		/**
		* @param {CF2021.ProposalPost} proposal
		*/
		(proposal) => {
		return updateProposalState(proposal, "announced");
		},
		{
		postActionHook: ({ result }) => {
		PostStore.update((state) => {
		state.items[result.payload.id] = result.payload;
		updateWindowPosts(state);
		});
		},
		shortCircuitHook: ({ args }) => {
		if (args.type !== "procedure-proposal") {
		return errorResult();
		}

		if (args.state !== "pending") {
		return errorResult();
		}

		return false;
		},
		},
		);

		/**
		* Add new proposal.
		* Announce procedure proposal.
		*/
		export const addProposal = createAsyncAction(
		async ({ content }) => {
		/** @type {CF2021.ProposalPost} */
		const payload = {
		id: "999",
		datetime: new Date(),
		author: {
		name: "John Doe",
		group: "KS Pardubický kraj",
		},
		type: "procedure-proposal",
		state: "pending",
		content,
		ranking: {
		score: 0,
		likes: 0,
		dislikes: 0,
		myVote: "none",
		},
		historyLog: [],
		archived: false,
		hidden: false,
		seen: true,
		};
		export const acceptProposal = createAsyncAction(
		/**
		* @param {CF2021.ProposalPost} proposal
		*/
		({ proposal, archive }) => {
		return updateProposalState(proposal, "accepted", { is_archived: archive });
		},
		{
		shortCircuitHook: ({ args }) => {
		if (args.proposal.type !== "procedure-proposal") {
		return errorResult();
		}

		if (args.proposal.state !== "announced") {
		return errorResult();
		}

		return false;
		},
		},
		);

		return successResult(payload);
		/**
		* Reject procedure proposal.
		*/
		export const rejectProposal = createAsyncAction(
		/**
		* @param {CF2021.ProposalPost} proposal
		*/
		({ proposal, archive }) => {
		return updateProposalState(proposal, "rejected", { is_archived: archive });
		},
		{
		postActionHook: ({ result }) => {
		PostStore.update((state) => {
		state.items[result.payload.id] = result.payload;
		updateWindowPosts(state);
		shortCircuitHook: ({ args }) => {
		if (args.proposal.type !== "procedure-proposal") {
		return errorResult();
		}

		if (args.proposal.state !== "announced") {
		return errorResult();
		}

		return false;
		},
		},
		);

		/**
		* Reject procedure proposal.
		*/
		export const rejectProposalByChairman = createAsyncAction(
		/**
		* @param {CF2021.ProposalPost} proposal
		*/
		({ proposal, archive }) => {
		return updateProposalState(proposal, "rejected-by-chairman", {
		is_archived: archive,
		});
		},
		{
		shortCircuitHook: ({ args }) => {
		if (args.proposal.type !== "procedure-proposal") {
		return errorResult();
		}

		if (!["pending", "announced"].includes(args.proposal.state)) {
		return errorResult();
		}

		return false;
		},
		},
		);

		const { markSeen: storeSeen } = createSeenWriter(seenPostsLSKey);

		/**
		* Mark down user saw this post already.
		* @param {CF2021.Post} post
		*/
		export const markSeen = (post) => {
		storeSeen(post.id);

		PostStore.update((state) => {
		state.items[post.id].seen = true;
		});
		};

src/actions/program.js

0 → 100644

+251 −0

Original line number	Diff line number	Diff line
		import { parse } from "date-fns";
		import keyBy from "lodash/keyBy";
		import pick from "lodash/pick";
		import property from "lodash/property";
		import { createAsyncAction, errorResult, successResult } from "pullstate";

		import { fetchApi } from "api";
		import { markdownConverter } from "markdown";
		import { ProgramStore } from "stores";

		import { loadPosts } from "./posts";

		export const loadProgram = createAsyncAction(
		async () => {
		try {
		const resp = await fetchApi("/program");
		const mappings = await resp.json();
		return successResult(mappings);
		} catch (err) {
		return errorResult([], err.toString());
		}
		},
		{
		postActionHook: ({ result }) => {
		if (!result.error) {
		const entries = result.payload
		.map(
		/**
		*
		* @param {any} entry
		* @returns {CF2021.ProgramScheduleEntry}
		*/
		(entry) => {
		return {
		...pick(entry, [
		"id",
		"number",
		"title",
		"description",
		"proposer",
		"speakers",
		]),
		fullTitle:
		entry.number !== ""
		? `${entry.number}. ${entry.title}`
		: entry.title,
		htmlContent: markdownConverter.makeHtml(entry.description),
		discussionOpened: entry.discussion_opened,
		expectedStartAt: parse(
		entry.expected_start_at,
		"yyyy-MM-dd HH:mm:ss",
		new Date(),
		),
		expectedFinishAt: entry.expected_finish_at
		? parse(
		entry.expected_finish_at,
		"yyyy-MM-dd HH:mm:ss",
		new Date(),
		)
		: undefined,
		};
		},
		)
		.sort((a, b) => a.expectedStartAt - b.expectedStartAt);

		const currentEntry = result.payload.find((entry) => entry.is_live);

		ProgramStore.update((state) => {
		state.items = keyBy(entries, property("id"));
		state.scheduleIds = entries.map((entry) => entry.id);

		if (currentEntry) {
		state.currentId = currentEntry.id;
		}
		});
		}
		},
		},
		);

		/**
		* Rename program point.
		*/
		export const renameProgramPoint = createAsyncAction(
		async ({ programEntry, newTitle }) => {
		try {
		const body = JSON.stringify({
		title: newTitle,
		});
		await fetchApi(`/program/${programEntry.id}`, {
		method: "PUT",
		body,
		expectedStatus: 204,
		});
		return successResult({ programEntry, newTitle });
		} catch (err) {
		return errorResult([], err.toString());
		}
		},
		{
		postActionHook: ({ result }) => {
		if (!result.error) {
		ProgramStore.update((state) => {
		if (state.items[result.payload.programEntry.id]) {
		state.items[result.payload.programEntry.id].title =
		result.payload.newTitle;
		}
		});
		}
		},
		},
		);

		/**
		* End program point.
		*/
		export const endProgramPoint = createAsyncAction(
		/**
		*
		* @param {CF2021.ProgramScheduleEntry} programEntry
		*/
		async (programEntry) => {
		try {
		const body = JSON.stringify({
		is_live: false,
		});
		await fetchApi(`/program/${programEntry.id}`, {
		method: "PUT",
		body,
		expectedStatus: 204,
		});
		return successResult(programEntry);
		} catch (err) {
		return errorResult([], err.toString());
		}
		},
		{
		postActionHook: ({ result }) => {
		if (!result.error) {
		ProgramStore.update((state) => {
		state.currentId = null;
		});
		}
		},
		},
		);

		/**
		* Activate program point.
		*/
		export const activateProgramPoint = createAsyncAction(
		/**
		*
		* @param {CF2021.ProgramScheduleEntry} programEntry
		*/
		async (programEntry) => {
		try {
		const body = JSON.stringify({
		is_live: true,
		});
		await fetchApi(`/program/${programEntry.id}`, {
		method: "PUT",
		body,
		expectedStatus: 204,
		});
		return successResult(programEntry);
		} catch (err) {
		return errorResult([], err.toString());
		}
		},
		{
		postActionHook: async ({ result }) => {
		if (!result.error) {
		ProgramStore.update((state) => {
		state.currentId = result.payload.id;
		});

		// Re-load posts - these are bound directly to the program schedule entry.
		loadPosts.run({}, { respectCache: false });
		}
		},
		},
		);

		/**
		* Open discussion.
		*/
		export const openDiscussion = createAsyncAction(
		/**
		*
		* @param {CF2021.ProgramScheduleEntry} programEntry
		*/
		async (programEntry) => {
		try {
		const body = JSON.stringify({
		discussion_opened: true,
		});
		await fetchApi(`/program/${programEntry.id}`, {
		method: "PUT",
		body,
		expectedStatus: 204,
		});
		return successResult(programEntry);
		} catch (err) {
		return errorResult([], err.toString());
		}
		},
		{
		postActionHook: ({ result }) => {
		if (!result.error) {
		ProgramStore.update((state) => {
		if (state.items[result.payload.id]) {
		state.items[result.payload.id].discussionOpened = true;
		}
		});
		}
		},
		},
		);

		/**
		* Close discussion.
		*/
		export const closeDiscussion = createAsyncAction(
		async (programEntry) => {
		try {
		const body = JSON.stringify({
		discussion_opened: false,
		});
		await fetchApi(`/program/${programEntry.id}`, {
		method: "PUT",
		body,
		expectedStatus: 204,
		});
		return successResult(programEntry);
		} catch (err) {
		return errorResult([], err.toString());
		}
		},
		{
		postActionHook: ({ result }) => {
		if (!result.error) {
		ProgramStore.update((state) => {
		if (state.items[result.payload.id]) {
		state.items[result.payload.id].discussionOpened = false;
		}
		});
		}
		},
		},
		);

src/actions/users.js

0 → 100644

+125 −0

Original line number	Diff line number	Diff line
		import * as Sentry from "@sentry/react";
		import { createAsyncAction, errorResult, successResult } from "pullstate";

		import { fetchApi } from "api";
		import keycloak from "keycloak";
		import { AuthStore, PostStore } from "stores";
		import { updateWindowPosts } from "utils";

		export const loadMe = createAsyncAction(
		/**
		* @param {number} userId
		*/
		async () => {
		try {
		const response = await fetchApi(`/users/me`, {
		method: "GET",
		expectedStatus: 200,
		});
		const data = await response.json();
		return successResult(data);
		} catch (err) {
		return errorResult([], err.toString());
		}
		},
		{
		postActionHook: ({ result }) => {
		if (!result.error) {
		AuthStore.update((state) => {
		if (state.user) {
		state.user.id = result.payload.id;
		state.user.group = result.payload.group;
		state.user.isBanned = result.payload.is_banned;
		state.user.secret = result.payload.secret \|\| "";
		}
		});
		}
		},
		},
		);

		export const ban = createAsyncAction(
		/**
		* @param {number} userId
		*/
		async (user) => {
		try {
		await fetchApi(`/users/${user.id}/ban`, {
		method: "PATCH",
		expectedStatus: 204,
		});
		return successResult(user);
		} catch (err) {
		return errorResult([], err.toString());
		}
		},
		);

		export const unban = createAsyncAction(
		/**
		* @param {number} userId
		*/
		async (user) => {
		try {
		await fetchApi(`/users/${user.id}/unban`, {
		method: "PATCH",
		expectedStatus: 204,
		});
		return successResult(user);
		} catch (err) {
		return errorResult([], err.toString());
		}
		},
		);

		export const inviteToJitsi = createAsyncAction(
		/**
		* @param {number} userId
		*/
		async (user) => {
		try {
		const body = JSON.stringify({
		allowed: true,
		});
		await fetchApi(`/users/${user.id}/jitsi`, {
		method: "PATCH",
		body,
		expectedStatus: 204,
		});
		return successResult(user);
		} catch (err) {
		return errorResult([], err.toString());
		}
		},
		);

		export const refreshAccessToken = async () => {
		const { isAuthenticated } = AuthStore.getRawState();

		if (!isAuthenticated) {
		return;
		}

		try {
		await keycloak.updateToken(60);
		console.info("[auth] access token refreshed");
		} catch (exc) {
		console.warn(
		"[auth] could not refresh the access token, refresh token possibly expired, logging out",
		);

		Sentry.setUser(null);

		AuthStore.update((state) => {
		state.isAuthenticated = false;
		state.user = null;
		state.showJitsiInvitePopup = false;
		state.jitsiPopupDimissed = false;
		});

		PostStore.update((state) => {
		state.filters.showPendingProposals = false;
		updateWindowPosts(state);
		});
		}
		};

src/actions/ws.js

0 → 100644

+36 −0

Original line number	Diff line number	Diff line
		import { createAsyncAction, errorResult, successResult } from "pullstate";

		import { GlobalInfoStore } from "stores";
		import { connect } from "ws/connection";

		import { loadAnnouncements } from "./announcements";
		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.
		await Promise.all([
		loadProgram.run({}, { respectCache: false }),
		loadAnnouncements.run({}, { respectCache: false }),
		loadPosts.run({}, { respectCache: false }),
		]);

		// Once loaded, start processing the messages.
		worker.start();

		return true;
		},
		});

		return successResult(wsChannel);
		} catch (err) {
		return errorResult([], err.toString());
		}
		});

src/api.js

0 → 100644

+29 −0

Original line number	Diff line number	Diff line
		import { AuthStore } from "./stores";

		export const fetchApi = async (
		url,
		{ headers = {}, expectedStatus = 200, method = "GET", body = null } = {},
		) => {
		const { isAuthenticated, user } = AuthStore.getRawState();

		if (isAuthenticated) {
		headers.Authorization = "Bearer " + user.accessToken;
		}

		if (!headers["Content-Type"]) {
		headers["Content-Type"] = "application/json";
		}

		const response = await fetch(process.env.REACT_APP_API_BASE_URL + url, {
		body,
		method,
		headers,
		redirect: "follow",
		});

		if (!!expectedStatus && response.status !== expectedStatus) {
		throw new Error(`Unexpected status code ${response.status}`);
		}

		return response;
		};

src/components/Button.jsx

+30 −13

Original line number	Diff line number	Diff line
		import React from "react";
		import { NavLink } from "react-router-dom";
		import classNames from "classnames";

		const Button = ({
		className,
		iconWrapperClassName,
		bodyClassName,
		icon,
		color = "black",
		iconChildren = null,
		hoverActive = true,
		fullwidth = false,
		loading = false,
		children,
		routerTo,
		bodyProps = {},
		...props
		}) => {
		const btnClass = classNames(
		@@ -19,25 +22,39 @@ const Button = ({
		"btn--icon": !!icon,
		"btn--hoveractive": hoverActive,
		"btn--fullwidth md:btn--autowidth": fullwidth,
		"btn--loading": loading,
		},
		className
		);

		const iconWrapperClass = classNames("btn__icon", iconWrapperClassName);
		const bodyClass = classNames("btn__body", bodyClassName);

		return (
		<button className={btnClass} {...props}>
		const inner = (
		<div className="btn__body-wrap">
		<div className="btn__body">{children}</div>
		<div className={bodyClass} {...bodyProps}>
		{children}
		</div>
		{!!icon && (
		<div className={iconWrapperClass}>
		<div className="btn__icon">
		<i className={icon}></i>
		{iconChildren}
		</div>
		)}
		</div>
		);

		if (routerTo) {
		return (
		<NavLink to={routerTo} className={btnClass} {...props}>
		{inner}
		</NavLink>
		);
		}

		return (
		<button className={btnClass} {...props}>
		{inner}
		</button>
		);
		};

		export default Button;
		export default React.memo(Button);

src/components/Chip.jsx

+1 −1

Original line number	Diff line number	Diff line
		@@ -26,4 +26,4 @@ const Chip = ({
		);
		};

		export default Chip;
		export default React.memo(Chip);

src/components/Dropdown.jsx

+1 −1

Original line number	Diff line number	Diff line
		@@ -25,4 +25,4 @@ const Dropdown = ({ value, options, onChange, className }) => {
		);
		};

		export default Dropdown;
		export default React.memo(Dropdown);

src/components/ErrorMessage.jsx

0 → 100644

+12 −0

Original line number	Diff line number	Diff line
		import React from "react";
		import classNames from "classnames";

		const ErrorMessage = ({ className, children }) => {
		return (
		<div className={classNames("text-red-600 font-bold", className)}>
		{children}
		</div>
		);
		};

		export default React.memo(ErrorMessage);

src/components/Footer.jsx

+95 −63

Original line number	Diff line number	Diff line
		import React from "react";
		import React, { useState } from "react";
		import { NavLink } from "react-router-dom";
		import useWindowSize from "@rooks/use-window-size";
		import classNames from "classnames";

		const Footer = () => {
		const { innerWidth } = useWindowSize();
		const [showCfMenu, setShowCfMenu] = useState(false);
		const [showOtherMenu, setShowOtherMenu] = useState(false);
		const isLg = innerWidth >= 1024;

		return (
		<footer className="footer bg-grey-700 text-white">
		<div className="footer__main py-4 lg:py-16 container container--default">
		<section className="footer__brand">
		<img
		src="https://www.va-fighters.com/pirati/krajska-sablona/dist/assets/img/logo.svg"
		src={`${process.env.REACT_APP_STYLEGUIDE_URL}/images/logo-full-white.svg`}
		alt=""
		className="w-32 md:w-40 pb-6"
		/>
		<p className="para hidden md:block md:mb-4 lg:mb-0 text-grey-200">
		Piráti, 2021. Všechna práva vyhlazena. Sdílejte a nechte ostatní
		Piráti, 2024. Všechna práva vyhlazena. Sdílejte a nechte ostatní
		sdílet za stejných podmínek.
		</p>
		</section>
		<section className="footer__main-links bg-grey-700 text-white lg:grid grid-cols-3 gap-4"></section>
		<section className="footer__social lg:text-right">
		<div className="flex flex-col md:flex-row lg:flex-col lg:items-end space-y-2 md:space-y-0 md:space-x-2 lg:space-x-0 lg:space-y-2">
		<button className="btn btn--icon btn--blue-300 btn--hoveractive text-lg btn--fullwidth sm:btn--autowidth">
		<div className="btn__body-wrap">
		<div className="btn__body ">Pomoz nám</div>{" "}
		<div className="btn__icon ">
		<i className="ico--anchor"></i>
		</div>
		</div>
		</button>
		<section className="footer__main-links bg-grey-700 text-white lg:grid grid-cols-2 gap-4">
		<div className="pt-8 pb-4 lg:py-0">
		<div className="footer-collapsible">
		<span
		className={classNames(
		"text-xl uppercase text-white footer-collapsible__toggle",
		{
		"footer-collapsible__toggle--open": showCfMenu,
		}
		)}
		onClick={() => setShowCfMenu(!showCfMenu)}
		>
		CF 2024
		</span>{" "}
		<div className={showCfMenu \|\| isLg ? "" : "hidden"}>
		<ul className="mt-6 space-y-2 text-grey-200">
		<li>
		<NavLink to="/">Přímý přenos</NavLink>
		</li>
		<li>
		<NavLink to="/program">Program</NavLink>
		</li>
		<li>
		<NavLink to="/protocol">Zápis</NavLink>
		</li>
		<li>
		<NavLink to="/about">Co je to celostátní fórum?</NavLink>
		</li>
		</ul>
		</div>
		</section>
		</div>
		<section className="bg-black py-4 lg:py-12">
		<div className="container container--default">
		<div className="grid gap-4 grid-cols-1 md:grid-cols-2">
		<div className="badge w-full">
		<div className="avatar avatar--sm badge__avatar">
		<img src="http://placeimg.com/100/100/people" alt="Avatar" />
		</div>
		<div className="badge__body">
		<span className="head-heavy-2xs badge__title">
		Andrej Ramašeuski
		</span>
		<p className="badge__occupation">Kontakt pro dobrovolníky</p>
		<a
		href="mailto:example@example.com"
		className="contact-line contact-line--responsive icon-link badge__link"
		<div className="py-4 lg:py-0 border-t border-grey-400 lg:border-t-0">
		<div className="footer-collapsible">
		<span
		className={classNames(
		"text-xl uppercase text-white footer-collapsible__toggle",
		{
		"footer-collapsible__toggle--open": showOtherMenu,
		}
		)}
		onClick={() => setShowOtherMenu(!showOtherMenu)}
		>
		<i className="ico--phone"></i>
		<span>+420 777 123 123</span>
		</a>
		<a
		href="mailto:example@example.com"
		className="contact-line contact-line--responsive icon-link badge__link"
		>
		<i className="ico--envelope"></i>
		<span>example@example.com</span>
		Otevřenost
		</span>{" "}
		<div className={showOtherMenu \|\| isLg ? "" : "hidden"}>
		<ul className="mt-6 space-y-2 text-grey-200">
		<li>
		<a href="https://ucet.pirati.cz">Transparentní účet</a>
		</li>{" "}
		<li>
		<a href="https://smlouvy.pirati.cz">Registr smluv</a>
		</li>{" "}
		<li>
		<a href="https://wiki.pirati.cz/fo/otevrene_ucetnictvi">
		Otevřené účetnictví
		</a>
		</li>
		</ul>
		</div>
		</div>
		<div className="badge w-full">
		<div className="avatar avatar--sm badge__avatar">
		<img src="http://placeimg.com/100/100/people" alt="Avatar" />
		</div>
		<div className="badge__body">
		<span className="head-heavy-2xs badge__title">
		Andrea Linhartová
		</span>
		<p className="badge__occupation">Kontakt pro média</p>
		</section>
		<section className="footer__social lg:text-right">
		<div className="flex flex-col md:flex-row lg:flex-col lg:items-end space-y-2 md:space-y-0 md:space-x-2 lg:space-x-0 lg:space-y-2">
		<a
		href="mailto:example@example.com"
		className="contact-line contact-line--responsive icon-link badge__link"
		href="https://dary.pirati.cz"
		rel="noopener noreferrer"
		target="_blank"
		className="btn btn--icon btn--cyan-200 btn--hoveractive text-lg btn--fullwidth sm:btn--autowidth"
		>
		<i className="ico--phone"></i>
		<span>+420 777 123 123</span>
		</a>
		<div className="btn__body-wrap">
		<div className="btn__body ">Přispěj</div>{" "}
		<div className="btn__icon ">
		<i className="ico--pig"></i>
		</div>
		</div>
		</a>{" "}
		<a
		href="mailto:example@example.com"
		className="contact-line contact-line--responsive icon-link badge__link"
		href="https://nalodeni.pirati.cz"
		rel="noopener noreferrer"
		target="_blank"
		className="btn btn--icon btn--blue-300 btn--hoveractive text-lg btn--fullwidth sm:btn--autowidth"
		>
		<i className="ico--envelope"></i>
		<span>example@example.com</span>
		</a>
		</div>
		<div className="btn__body-wrap">
		<div className="btn__body ">Naloď se</div>{" "}
		<div className="btn__icon ">
		<i className="ico--anchor"></i>
		</div>
		</div>
		</a>
		</div>
		</section>
		</div>
		</footer>
		);
		};

src/components/Navbar.jsx

+74 −11

Original line number	Diff line number	Diff line
		import React, { useCallback, useState } from "react";
		import { isBrowser } from "react-device-detect";
		import { NavLink } from "react-router-dom";
		import { useKeycloak } from "@react-keycloak/web";
		import useWindowSize from "@rooks/use-window-size";
		import classNames from "classnames";

		import Button from "components/Button";
		import { AuthStore } from "stores";
		import { AuthStore, GlobalInfoStore } from "stores";

		const Navbar = () => {
		const [showMenu, setShowMenu] = useState(isBrowser);
		const Navbar = ({ onGetHelp }) => {
		const { innerWidth } = useWindowSize();
		const [showMenu, setShowMenu] = useState();
		const { keycloak } = useKeycloak();
		const { isAuthenticated, user } = AuthStore.useState();
		const { connectionState } = GlobalInfoStore.useState();

		const login = useCallback(() => {
		keycloak.login();
		@@ -18,6 +21,47 @@ const Navbar = () => {
		keycloak.logout();
		}, [keycloak]);

		const connectionStateCaption = {
		connected: "Jsi online",
		offline: "Jsi offline",
		connecting: "Probíhá připojování",
		}[connectionState];

		const isLg = innerWidth >= 1024;

		const indicatorClass = {
		"bg-green-400": connectionState === "connected",
		"bg-red-600": connectionState === "offline",
		"bg-yellow-200": connectionState === "connecting",
		};

		const connectionIndicator = (
		<div className="inline-flex items-center">
		<span
		className="relative inline-flex h-4 w-4 mr-4"
		data-tip={connectionStateCaption}
		data-tip-at="left"
		aria-label={connectionStateCaption}
		>
		<span
		className={classNames(
		"animate-ping absolute inline-flex h-full w-full rounded-full opacity-75",
		indicatorClass
		)}
		/>
		<span
		className={classNames(
		"inline-flex rounded-full w-4 h-4",
		indicatorClass
		)}
		/>
		</span>
		<span className="hidden md:block text-grey-200">
		{connectionStateCaption}
		</span>
		</div>
		);

		return (
		<nav className="navbar navbar--simple">
		<div className="container container--wide navbar__content navbar__content--initialized">
		@@ -33,7 +77,7 @@ const Navbar = () => {
		to="/"
		className="pl-4 font-bold text-xl lg:border-r lg:border-grey-300 lg:pr-8 hover:no-underline"
		>
		Celostátní fórum 2021
		Celostátní fórum 2024
		</NavLink>
		</div>
		<div className="navbar__menutoggle my-4 flex justify-end lg:hidden">
		@@ -44,33 +88,52 @@ const Navbar = () => {
		<i className="ico--menu text-3xl"></i>
		</button>
		</div>
		{showMenu && (
		{(showMenu \|\| isLg) && (
		<>
		<div className="navbar__main navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto">
		<ul className="navbar-menu text-white">
		<li className="navbar-menu__item">
		<NavLink className="navbar-menu__link" to="/">
		Přímý přenos
		</NavLink>
		</li>
		<li className="navbar-menu__item">
		<NavLink className="navbar-menu__link" to="/program">
		Program
		</NavLink>
		</li>
		<li className="navbar-menu__item">
		<NavLink className="navbar-menu__link" to="/protocol">
		Zápis
		</NavLink>
		</li>
		</ul>
		</div>
		<div className="navbar__actions navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto self-start flex flex-col sm:flex-row lg:flex-col sm:space-x-4 space-y-2 sm:space-y-0 lg:space-y-2 xl:flex-row xl:space-x-2 xl:space-y-0">
		<div className="navbar__actions navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto self-start flex flex-row items-center justify-between">
		<div className="order-last lg:order-first lg:mr-8">
		{connectionIndicator}
		</div>
		{!isAuthenticated && (
		<Button className="btn--white" onClick={login}>
		<Button className="btn--white joyride-login" onClick={login}>
		Přihlásit se
		</Button>
		)}
		{isAuthenticated && (
		<div className="flex items-center space-x-4">
		<div className="flex items-center space-x-4 joyride-login">
		<span className="head-heavy-2xs">{user.name}</span>
		<div className="avatar avatar--2xs">
		<img
		src="http://placeimg.com/100/100/people"
		src={`https://a.pirati.cz/piratar/200/${user.username}.jpg`}
		alt="Avatar"
		/>
		</div>
		<button onClick={logout}>
		<button
		onClick={logout}
		className="text-grey-200 hover:text-white"
		aria-label="Odhlásit se"
		data-tip="Odhlásit se"
		data-tip-at="bottom"
		>
		<i className="ico--log-out"></i>
		</button>
		</div>

src/components/Thumbs.jsx

+15 −7

Original line number	Diff line number	Diff line
		import React from "react";
		import classNames from "classnames";

		const Thumbs = ({ likes, dislikes, onLike, onDislike, canThumb }) => {
		const Thumbs = ({ likes, dislikes, myVote, onLike, onDislike, readOnly }) => {
		return (
		<div>
		<div className="space-x-2 text-sm flex items-center">
		<button
		className={classNames("text-blue-300 flex items-center space-x-1", {
		"cursor-not-allowed": !canThumb,
		className={classNames("flex items-center space-x-1", {
		"cursor-pointer": !readOnly,
		"cursor-not-allowed": readOnly,
		"text-blue-300": myVote === "like",
		"text-grey-200 ": myVote !== "like",
		"hover:text-blue-300": myVote !== "like" && !readOnly,
		})}
		disabled={!canThumb}
		disabled={readOnly}
		onClick={onLike}
		>
		<span className="font-bold">{likes}</span>
		<i className="ico--thumbs-up"></i>
		</button>
		<button
		className={classNames("text-red-600 flex items-center space-x-1", {
		"cursor-not-allowed": !canThumb,
		className={classNames("flex items-center space-x-1", {
		"cursor-pointer": !readOnly,
		"cursor-not-allowed": readOnly,
		"text-red-600": myVote === "dislike",
		"text-grey-200": myVote !== "dislike",
		"hover:text-red-600": myVote !== "dislike" && !readOnly,
		})}
		disabled={!canThumb}
		disabled={readOnly}
		onClick={onDislike}
		>
		<i className="ico--thumbs-down transform -scale-x-1"></i>

src/components/annoucements/Announcement.jsx

+52 −14

Original line number	Diff line number	Diff line
		import React from "react";
		import React, { useEffect } from "react";
		import { useInView } from "react-intersection-observer";
		import classNames from "classnames";
		import { format } from "date-fns";
		import { format, isToday } from "date-fns";

		import Chip from "components/Chip";
		import { DropdownMenu, DropdownMenuItem } from "components/dropdown-menu";
		@@ -13,12 +14,27 @@ const Announcement = ({
		link,
		relatedPostId,
		seen,
		displayActions = false,
		canRunActions,
		onDelete,
		onEdit,
		onSeen,
		}) => {
		const { ref, inView } = useInView({
		threshold: 0.8,
		trackVisibility: true,
		delay: 1500,
		skip: seen,
		triggerOnce: true,
		});

		useEffect(() => {
		if (!seen && inView && onSeen) {
		onSeen();
		}
		});

		const wrapperClassName = classNames(
		"bg-opacity-50 border-l-2 px-4 py-2 lg:px-8 lg:py-3",
		"bg-opacity-50 border-l-2 px-4 py-2 lg:px-8 lg:py-3 transition duration-500",
		{
		"bg-grey-50": !!seen,
		"bg-yellow-100": !seen,
		@@ -43,7 +59,7 @@ const Announcement = ({

		const chipLabel = {
		"rejected-procedure-proposal": "Zamítnutý návrh postupu",
		"suggested-procedure-proposal": "Přijatelný návrh postupu",
		"suggested-procedure-proposal": "Návrh postupu k hlasování",
		"accepted-procedure-proposal": "Schválený návrh postupu",
		voting: "Rozhodující hlasování",
		announcement: "Oznámení předsedajícího",
		@@ -51,7 +67,7 @@ const Announcement = ({
		}[type];

		const linkLabel =
		type === "voting" ? "Hlasovat v heliosu" : "Zobrazit související příspěvek";
		type === "voting" ? "Hlasovat" : "Zobrazit související příspěvek";

		const showEdit = [
		"suggested-procedure-proposal",
		@@ -59,34 +75,56 @@ const Announcement = ({
		"announcement",
		].includes(type);

		const htmlContent = {
		__html: content,
		};

		return (
		<div className={wrapperClassName}>
		<div className={wrapperClassName} ref={ref}>
		<div className="flex items-center justify-between mb-2">
		<div className="space-x-2 flex items-center">
		<div className="font-bold text-sm">{format(datetime, "H:mm")}</div>
		<div className="font-bold text-sm">
		{format(datetime, isToday(datetime) ? "H:mm" : "dd. MM. H:mm")}
		</div>
		<Chip color={chipColor} condensed>
		{chipLabel}
		</Chip>
		{link && <a href={link}>{linkLabel + "»"}</a>}
		{link && (
		<a
		href={link}
		className={classNames("text-xs font-bold text-" + chipColor)}
		target="_blank"
		rel="noopener noreferrer"
		>
		{linkLabel + " »"}
		</a>
		)}
		</div>
		{displayActions && (
		<DropdownMenu right triggerIconClass="ico--dots-three-horizontal">
		{canRunActions && (
		<DropdownMenu
		right
		className="pl-4"
		triggerIconClass="ico--dots-three-horizontal"
		>
		{showEdit && (
		<DropdownMenuItem
		onClick={onEdit}
		icon="ico--edit-pencil"
		icon="ico--pencil"
		title="Upravit"
		/>
		)}
		<DropdownMenuItem
		onClick={onDelete}
		icon="ico--trashcan"
		icon="ico--bin"
		title="Smazat"
		/>
		</DropdownMenu>
		)}
		</div>
		<span className="leading-tight text-sm lg:text-base">{content}</span>
		<div
		className="leading-tight text-sm lg:text-base content-block"
		dangerouslySetInnerHTML={htmlContent}
		></div>
		</div>
		);
		};

src/components/annoucements/AnnouncementEditModal.jsx

0 → 100644

+154 −0

Original line number	Diff line number	Diff line
		import React, { useState } from "react";
		import classNames from "classnames";

		import Button from "components/Button";
		import { Card, CardActions, CardBody, CardHeadline } from "components/cards";
		import ErrorMessage from "components/ErrorMessage";
		import MarkdownEditor from "components/mde/MarkdownEditor";
		import Modal from "components/modals/Modal";
		import { urlRegex } from "utils";

		const AnnouncementEditModal = ({
		announcement,
		onCancel,
		onConfirm,
		confirming,
		error,
		...props
		}) => {
		const [text, setText] = useState(announcement.content);
		const [link, setLink] = useState(announcement.link);
		const [textError, setTextError] = useState(null);
		const [linkError, setLinkError] = useState(null);

		const onTextInput = (newText) => {
		setText(newText);

		if (newText !== "") {
		if (newText.length > 1024) {
		setTextError("Maximální délka příspěvku je 1024 znaků.");
		} else {
		setTextError(null);
		}
		}
		};

		const onLinkInput = (newLink) => {
		setLink(newLink);

		if (!!newLink) {
		if (newLink.length > 1024) {
		setLinkError("Maximální délka URL je 256 znaků.");
		} else {
		setLinkError(urlRegex.test(newLink) ? null : "Zadejte platnou URL.");
		}
		}
		};

		const confirm = (evt) => {
		evt.preventDefault();

		let preventAction = false;
		const payload = {
		content: text,
		};

		if (!text) {
		setTextError("Před úpravou oznámení nezapomeňte vyplnit jeho obsah.");
		preventAction = true;
		} else if (!!text && text.length > 1024) {
		setTextError("Maximální délka oznámení je 1024 znaků.");
		preventAction = true;
		}

		if (announcement.type === "voting" && !link) {
		setLinkError("Zadejte platnou URL.");
		preventAction = true;
		} else {
		payload.link = link;
		}

		if (preventAction) {
		return;
		}

		onConfirm(payload);
		};

		return (
		<Modal containerClassName="max-w-lg" onRequestClose={onCancel} {...props}>
		<form onSubmit={confirm}>
		<Card className="elevation-21">
		<CardBody>
		<div className="flex items-center justify-between mb-4">
		<CardHeadline>Upravit oznámení</CardHeadline>
		<button onClick={onCancel} type="button">
		<i className="ico--cross"></i>
		</button>
		</div>

Source

Target

Files

Some changes are not shown.