From 4b021ecafac5a21f1bbe5d2cee22c903a7091213 Mon Sep 17 00:00:00 2001 From: Puyodead1 Date: Mon, 1 Apr 2024 15:13:49 -0400 Subject: [PATCH] house keeping --- src/App.tsx | 25 +++--- src/components/Banner.tsx | 76 +++++++++---------- .../banners/VeryImportantBanner.tsx | 39 ++++++++++ src/components/modals/VeryImportantModal.tsx | 36 +++++++++ src/controllers/modals/ModalController.tsx | 2 + src/controllers/modals/types.ts | 2 +- 6 files changed, 132 insertions(+), 48 deletions(-) create mode 100644 src/components/banners/VeryImportantBanner.tsx create mode 100644 src/components/modals/VeryImportantModal.tsx diff --git a/src/App.tsx b/src/App.tsx index 6ac0e08..fb5bc5c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -11,7 +11,6 @@ import { arch, locale, platform, version } from "@tauri-apps/plugin-os"; import { reaction } from "mobx"; import ErrorBoundary from "./components/ErrorBoundary"; import Loader from "./components/Loader"; -import OfflineBanner from "./components/banners/OfflineBanner"; import { UnauthenticatedGuard } from "./components/guards/UnauthenticatedGuard"; import { BannerContext } from "./contexts/BannerContext"; import useLogger from "./hooks/useLogger"; @@ -22,6 +21,7 @@ import { useAppStore } from "./stores/AppStore"; import { Globals } from "./utils/Globals"; // @ts-expect-error no types import FPSStats from "react-fps-stats"; +import VeryImportantBanner from "./components/banners/VeryImportantBanner"; import { isTauri } from "./utils/Utils"; function App() { @@ -69,6 +69,13 @@ function App() { }; }; + const hasVeryImportantBannerShown = localStorage.getItem("very_important_banner_dismissed"); + if (!hasVeryImportantBannerShown) { + bannerContext.setContent({ + element: , + }); + } + isTauri && loadAsyncGlobals(); Globals.load(); app.loadSettings(); @@ -79,14 +86,14 @@ function App() { return dispose; }, []); - React.useEffect(() => { - if (!app.isNetworkConnected) - bannerContext.setContent({ - forced: true, - element: , - }); - else bannerContext.close(); - }, [app.isNetworkConnected, bannerContext]); + // React.useEffect(() => { + // if (!app.isNetworkConnected) + // bannerContext.setContent({ + // forced: true, + // element: , + // }); + // else bannerContext.close(); + // }, [app.isNetworkConnected, bannerContext]); return ( diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx index d47b6f7..5c29253 100644 --- a/src/components/Banner.tsx +++ b/src/components/Banner.tsx @@ -21,48 +21,48 @@ function Banner() { const logger = useLogger("Banner"); const bannerContext = React.useContext(BannerContext); + if (!bannerContext.content) return null; + return ( - {bannerContext.content && ( - { - logger.debug("animation complete"); - }} - style={bannerContext.content.style} - > - {bannerContext.content.element} - {!bannerContext.content.forced && ( - { - bannerContext.close(); - }} - > - - - )} - - )} + }, + }} + initial="hide" + animate="show" + exit="hide" + onAnimationComplete={() => { + logger.debug("animation complete"); + }} + style={bannerContext.content.style} + > + {bannerContext.content.element} + {!bannerContext.content.forced && ( + { + bannerContext.close(); + }} + > + + + )} + ); } diff --git a/src/components/banners/VeryImportantBanner.tsx b/src/components/banners/VeryImportantBanner.tsx new file mode 100644 index 0000000..159df92 --- /dev/null +++ b/src/components/banners/VeryImportantBanner.tsx @@ -0,0 +1,39 @@ +import styled from "styled-components"; +import { modalController } from "../../controllers/modals"; +import Button from "../Button"; + +const Wrapper = styled.div` + display: flex; + flex-direction: row; + background-color: var(--primary); + flex: 1; + justify-content: center; + align-items: center; +`; + +const Text = styled.span` + padding: 10px; +`; + +function VeryImportantBanner() { + return ( + + We have a suprise for you! + + + ); +} + +export default VeryImportantBanner; diff --git a/src/components/modals/VeryImportantModal.tsx b/src/components/modals/VeryImportantModal.tsx new file mode 100644 index 0000000..9bf43ae --- /dev/null +++ b/src/components/modals/VeryImportantModal.tsx @@ -0,0 +1,36 @@ +import { useContext } from "react"; +import styled from "styled-components"; +import { BannerContext } from "../../contexts/BannerContext"; +import { ModalProps } from "../../controllers/modals/types"; +import { Modal } from "./ModalComponents"; + +const Text = styled.span` + padding: 10px; + justify-content: center; + align-items: center; + display: flex; + flex: 1; +`; + +export function VeryImportantModal({ ...props }: ModalProps<"very_important">) { + const bannerContext = useContext(BannerContext); + return ( + { + localStorage.setItem("very_important_banner_dismissed", "true"); + bannerContext.close(); + return true; + }, + confirmation: true, + children: I've been clowned, + palette: "primary", + }, + ]} + > + April fools! 🤡 + + ); +} diff --git a/src/controllers/modals/ModalController.tsx b/src/controllers/modals/ModalController.tsx index 871eade..33c99f7 100644 --- a/src/controllers/modals/ModalController.tsx +++ b/src/controllers/modals/ModalController.tsx @@ -15,6 +15,7 @@ import { LeaveServerModal, SettingsModal, } from "../../components/modals"; +import { VeryImportantModal } from "../../components/modals/VeryImportantModal"; import { Modal } from "./types"; function randomUUID() { @@ -187,4 +188,5 @@ export const modalController = new ModalControllerExtended({ // modify_displayname: ModifyDisplayname, // changelog_usernames: ChangelogUsernames, settings: SettingsModal, + very_important: VeryImportantModal, }); diff --git a/src/controllers/modals/types.ts b/src/controllers/modals/types.ts index 5abb0f3..844b65f 100644 --- a/src/controllers/modals/types.ts +++ b/src/controllers/modals/types.ts @@ -10,7 +10,7 @@ export type Modal = { key?: string; } & ( | { - type: "add_server" | "create_server" | "join_server" | "settings"; + type: "add_server" | "create_server" | "join_server" | "settings" | "very_important"; } | { type: "error";