From e1b1fb87754275c115f12bfd930324f8a345538b Mon Sep 17 00:00:00 2001
From: xaralis <filip.varecha@fragaria.cz>
Date: Sun, 27 Dec 2020 22:06:33 +0100
Subject: [PATCH] feat: do not allow jitsi popup to be fully dimissed
---
src/containers/JitsiInviteCard.jsx | 62 ++++++++++++++++++++++++++----
src/pages/Home.jsx | 7 +---
src/ws/handlers/index.js | 7 +++-
src/ws/handlers/users.js | 10 +++++
typings/cf2021.d.ts | 2 +-
5 files changed, 72 insertions(+), 16 deletions(-)
diff --git a/src/containers/JitsiInviteCard.jsx b/src/containers/JitsiInviteCard.jsx
index 5f480dd..2261334 100644
--- a/src/containers/JitsiInviteCard.jsx
+++ b/src/containers/JitsiInviteCard.jsx
@@ -1,37 +1,83 @@
import React from "react";
+import { loadMe } from "actions/users";
import Button from "components/Button";
-import { Card, CardBody } from "components/cards";
+import { CardBody } from "components/cards";
+import ErrorMessage from "components/ErrorMessage";
+import { useActionState } from "hooks";
import { AuthStore } from "stores";
const JitsiInviteCard = () => {
- const { showJitsiInvitePopup } = AuthStore.useState();
+ const { showJitsiInvitePopup, jitsiPopupDimissed } = AuthStore.useState();
+ const [loading, errorMessage] = useActionState(loadMe);
+
+ const openJitsiWindow = async () => {
+ const result = await loadMe.run();
+
+ if (!result.error) {
+ window.open(result.payload.jitsi_url);
+ }
+
+ AuthStore.update((state) => {
+ state.jitsiPopupDimissed = true;
+ });
+ };
+
+ const dismissPopup = () => {
+ AuthStore.update((state) => {
+ state.jitsiPopupDimissed = true;
+ });
+ };
if (!showJitsiInvitePopup) {
return null;
}
+ if (jitsiPopupDimissed) {
+ return (
+ <Button
+ color="violet-500"
+ className="btn--fullwidth"
+ onClick={openJitsiWindow}
+ loading={loading}
+ icon="ico--jitsi"
+ >
+ Připojit se k Jitsi
+ </Button>
+ );
+ }
+
return (
- <Card className="lg:card bg-violet-300 relative" elevation={16}>
+ <div className="lg:card lg:elevation-16 bg-violet-300 relative container-padding--zero md:container-padding--auto">
<i className="ico--jitsi text-9xl mr-2 text-violet-500 absolute right-0 top-0 opacity-25 z-0" />
- <CardBody className="text-white relative z-10">
+ <CardBody className="p-4 lg:p-8 text-white relative z-10">
<div className="flex items-center justify-between mb-4">
<h2 className="head-heavy-xs">
<span>Pozvánka do Jitsi</span>
</h2>
- <button type="button">
+ <button type="button" onClick={dismissPopup}>
<i className="ico--cross"></i>
</button>
</div>
+ {errorMessage && (
+ <ErrorMessage>
+ Při načítání URL Jitsi kanálu došlo k problému: {errorMessage}.
+ </ErrorMessage>
+ )}
<p className="leading-snug text-sm mb-4">
Někdo tě pozval do <strong>chráněného Jitsi kanálu</strong>{" "}
celeostátního fóra. Ke kanálu se připojíš kliknutím na tlačítko níže.
</p>
- <Button color="violet-500" className="btn--fullwidth">
- Otevřít Jitsi kanál
+ <Button
+ color="violet-500"
+ className="btn--fullwidth"
+ onClick={openJitsiWindow}
+ loading={loading}
+ >
+ Připojit se k Jitsi
</Button>
</CardBody>
- </Card>
+ </div>
);
};
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 9c0607f..82e9af3 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -160,11 +160,7 @@ const Home = () => {
Bod č. {programEntry.number}: {programEntry.title}
</h1>
{displayActions && (
- <DropdownMenu
- right
- triggerSize="lg"
- className="pl-4 pt-1 lg:pt-5"
- >
+ <DropdownMenu right triggerSize="lg" className="pl-4 pt-1 lg:pt-5">
<DropdownMenuItem
onClick={() => setShowProgramEditModal(true)}
icon="ico--pencil"
@@ -201,7 +197,6 @@ const Home = () => {
)}
</div>
<section className="cf2021__video">
-
<div className="container-padding--zero md:container-padding--auto">
{streamUrl && (
<div className="iframe-container">
diff --git a/src/ws/handlers/index.js b/src/ws/handlers/index.js
index fb68618..485b053 100644
--- a/src/ws/handlers/index.js
+++ b/src/ws/handlers/index.js
@@ -11,7 +11,11 @@ import {
handlePostRanked,
} from "./posts";
import { handleProgramEntryChanged } from "./program";
-import { handleUserBanned, handleUserUnbanned } from "./users";
+import {
+ handleUserBanned,
+ handleUserStatus,
+ handleUserUnbanned,
+} from "./users";
export const handlers = {
announcement_changed: handleAnnouncementChanged,
@@ -24,5 +28,6 @@ export const handlers = {
program_entry_changed: handleProgramEntryChanged,
user_banned: handleUserBanned,
user_unbanned: handleUserUnbanned,
+ user_status: handleUserStatus,
online_users_updated: handleOnlineUsersUpdated,
};
diff --git a/src/ws/handlers/users.js b/src/ws/handlers/users.js
index 85d8ca2..5864a73 100644
--- a/src/ws/handlers/users.js
+++ b/src/ws/handlers/users.js
@@ -1,3 +1,5 @@
+import has from "lodash/has";
+
import { AuthStore, PostStore } from "stores";
export const handleUserBanned = (payload) => {
@@ -31,3 +33,11 @@ export const handleUserUnbanned = (payload) => {
});
});
};
+
+export const handleUserStatus = (payload) => {
+ AuthStore.update((state) => {
+ if (has(payload, "jitsi_allowed")) {
+ state.showJitsiInvitePopup = payload.jitsi_allowed;
+ }
+ });
+};
diff --git a/typings/cf2021.d.ts b/typings/cf2021.d.ts
index 4572332..135e0bc 100644
--- a/typings/cf2021.d.ts
+++ b/typings/cf2021.d.ts
@@ -50,7 +50,7 @@ declare namespace CF2021 {
secret?: string;
};
showJitsiInvitePopup: boolean;
- jitsiInviteToken?: string;
+ jitsiPopupDimissed: boolean;
}
export type AuthStorePayload =
--
GitLab