From 6ada0ff5fc8ceb99360685f0192bf312bf82aa84 Mon Sep 17 00:00:00 2001 From: MattIPv4 Date: Fri, 6 Oct 2023 22:44:24 +0100 Subject: [PATCH 1/2] Reorganize global hooks + components --- .../ambassadorButton/AmbassadorButton.tsx | 6 +-- .../ambassadorButton.module.scss | 2 +- .../ambassadorCard/AmbassadorCard.tsx | 13 +++--- .../ambassadorCard/ambassadorCard.module.scss | 4 +- .../global => components}/tooltip/Tooltip.tsx | 0 .../tooltip/tooltip.module.scss | 2 +- .../useChatCommand.ts} | 8 ++-- .../twitch-api.ts => hooks/useTwitchAuth.ts} | 41 ++----------------- .../overlay/components/buttons/Buttons.tsx | 2 +- .../overlay/components/overlay/Overlay.tsx | 2 +- .../overlay/ambassadors/Ambassadors.tsx | 4 +- src/pages/overlay/index.tsx | 3 +- .../AmbassadorCardOverlay.tsx | 2 +- .../ambassadorPanel/AmbassadorPanel.tsx | 4 +- src/pages/panel/index.tsx | 3 +- src/utils/twitchApi.ts | 32 +++++++++++++++ 16 files changed, 66 insertions(+), 62 deletions(-) rename src/{utils/global => components}/ambassadorButton/AmbassadorButton.tsx (88%) rename src/{utils/global => components}/ambassadorButton/ambassadorButton.module.scss (96%) rename src/{utils/global => components}/ambassadorCard/AmbassadorCard.tsx (92%) rename src/{utils/global => components}/ambassadorCard/ambassadorCard.module.scss (96%) rename src/{utils/global => components}/tooltip/Tooltip.tsx (100%) rename src/{utils/global => components}/tooltip/tooltip.module.scss (93%) rename src/{utils/chatCommand.ts => hooks/useChatCommand.ts} (95%) rename src/{utils/twitch-api.ts => hooks/useTwitchAuth.ts} (54%) create mode 100644 src/utils/twitchApi.ts diff --git a/src/utils/global/ambassadorButton/AmbassadorButton.tsx b/src/components/ambassadorButton/AmbassadorButton.tsx similarity index 88% rename from src/utils/global/ambassadorButton/AmbassadorButton.tsx rename to src/components/ambassadorButton/AmbassadorButton.tsx index 38bfe757..7420b2cc 100644 --- a/src/utils/global/ambassadorButton/AmbassadorButton.tsx +++ b/src/components/ambassadorButton/AmbassadorButton.tsx @@ -1,11 +1,11 @@ -import React, { type MouseEventHandler } from "react"; +import { type MouseEventHandler } from "react"; import { getAmbassadorImages, type AmbassadorKey, type Ambassador as AmbassadorType, -} from "../../ambassadors"; -import { classes } from "../../classes"; +} from "../../utils/ambassadors"; +import { classes } from "../../utils/classes"; import styles from "./ambassadorButton.module.scss"; diff --git a/src/utils/global/ambassadorButton/ambassadorButton.module.scss b/src/components/ambassadorButton/ambassadorButton.module.scss similarity index 96% rename from src/utils/global/ambassadorButton/ambassadorButton.module.scss rename to src/components/ambassadorButton/ambassadorButton.module.scss index 0463fbdc..88372947 100644 --- a/src/utils/global/ambassadorButton/ambassadorButton.module.scss +++ b/src/components/ambassadorButton/ambassadorButton.module.scss @@ -1,4 +1,4 @@ -@import "../../../variables.scss"; +@import "../../variables.scss"; .ambassador { display: flex; diff --git a/src/utils/global/ambassadorCard/AmbassadorCard.tsx b/src/components/ambassadorCard/AmbassadorCard.tsx similarity index 92% rename from src/utils/global/ambassadorCard/AmbassadorCard.tsx rename to src/components/ambassadorCard/AmbassadorCard.tsx index 35bc15bc..858f74ad 100644 --- a/src/utils/global/ambassadorCard/AmbassadorCard.tsx +++ b/src/components/ambassadorCard/AmbassadorCard.tsx @@ -1,18 +1,19 @@ -import { calculateAge, formatDate, isBirthday } from "../../dateManager"; +import { calculateAge, formatDate, isBirthday } from "../../utils/dateManager"; import { getClassification, getAmbassadorImages, getIUCNStatus, type AmbassadorKey, type Ambassador as AmbassadorType, -} from "../../ambassadors"; -import { normalizeAmbassadorName } from "../../chatCommand"; -import { camelToKebab } from "../../helpers"; -import { classes } from "../../classes"; +} from "../../utils/ambassadors"; +import { camelToKebab } from "../../utils/helpers"; +import { classes } from "../../utils/classes"; +import { normalizeAmbassadorName } from "../../hooks/useChatCommand"; +import moderatorBadge from "../../assets/mod.png"; + import Tooltip from "../tooltip/Tooltip"; import styles from "./ambassadorCard.module.scss"; -import moderatorBadge from "../../../assets/mod.png"; export interface AmbassadorCardProps { ambassadorKey: AmbassadorKey; diff --git a/src/utils/global/ambassadorCard/ambassadorCard.module.scss b/src/components/ambassadorCard/ambassadorCard.module.scss similarity index 96% rename from src/utils/global/ambassadorCard/ambassadorCard.module.scss rename to src/components/ambassadorCard/ambassadorCard.module.scss index 6d123e33..58ddd8b4 100644 --- a/src/utils/global/ambassadorCard/ambassadorCard.module.scss +++ b/src/components/ambassadorCard/ambassadorCard.module.scss @@ -1,4 +1,4 @@ -@import "../../../variables.scss"; +@import "../../variables.scss"; .ambassadorCard { width: 18.5rem; @@ -136,7 +136,7 @@ } .birthday::after { - content: url("../../../assets/partyHat.png"); + content: url("../../assets/partyHat.png"); width: 4rem; height: auto; position: absolute; diff --git a/src/utils/global/tooltip/Tooltip.tsx b/src/components/tooltip/Tooltip.tsx similarity index 100% rename from src/utils/global/tooltip/Tooltip.tsx rename to src/components/tooltip/Tooltip.tsx diff --git a/src/utils/global/tooltip/tooltip.module.scss b/src/components/tooltip/tooltip.module.scss similarity index 93% rename from src/utils/global/tooltip/tooltip.module.scss rename to src/components/tooltip/tooltip.module.scss index f4d75674..2e2fc645 100644 --- a/src/utils/global/tooltip/tooltip.module.scss +++ b/src/components/tooltip/tooltip.module.scss @@ -1,4 +1,4 @@ -@import "../../../variables.scss"; +@import "../../variables.scss"; .tooltip { background-color: $tooltip-background-color; diff --git a/src/utils/chatCommand.ts b/src/hooks/useChatCommand.ts similarity index 95% rename from src/utils/chatCommand.ts rename to src/hooks/useChatCommand.ts index cb30fe73..dfed483b 100644 --- a/src/utils/chatCommand.ts +++ b/src/hooks/useChatCommand.ts @@ -1,9 +1,11 @@ import { useCallback, useEffect, useMemo, useState } from "react"; import tmi, { ChatUserstate } from "tmi.js"; -import { ambassadors, AmbassadorKey } from "./ambassadors"; -import { typeSafeObjectEntries } from "./helpers"; -import { fetchCurrentChannelInfo, useTwitchAuth } from "./twitch-api"; +import { ambassadors, AmbassadorKey } from "../utils/ambassadors"; +import { typeSafeObjectEntries } from "../utils/helpers"; +import { fetchCurrentChannelInfo } from "../utils/twitchApi"; + +import useTwitchAuth from "./useTwitchAuth"; const testChannelNames = process.env.REACT_APP_TEST_CHANNEL_NAMES?.split(",") ?? []; diff --git a/src/utils/twitch-api.ts b/src/hooks/useTwitchAuth.ts similarity index 54% rename from src/utils/twitch-api.ts rename to src/hooks/useTwitchAuth.ts index d5a0da7b..867e35cf 100644 --- a/src/utils/twitch-api.ts +++ b/src/hooks/useTwitchAuth.ts @@ -1,38 +1,5 @@ import { useSyncExternalStore } from "react"; -type ChannelsResponse = { - data: Array; -}; - -type ChannelInfo = { - broadcaster_id: string; - broadcaster_login: string; - broadcaster_name: string; - broadcaster_language: string; - game_id: string; - game_name: string; - title: string; - delay: number; - tags: string[]; -}; - -export async function fetchCurrentChannelInfo(auth: Twitch.ext.Authorized) { - const url = new URL("https://api.twitch.tv/helix/channels"); - url.searchParams.set("broadcaster_id", auth.channelId); - - const response = await fetch(url, { - headers: { - "client-id": auth.clientId, - Authorization: `Extension ${auth.helixToken}`, - }, - }); - - const data = (await response.json()) as ChannelsResponse; // TODO: validate schema? - if (data?.data?.length) return data.data[0]; - - return null; -} - const authStore = { value: null as Twitch.ext.Authorized | null, listeners: [] as (() => void)[], @@ -49,10 +16,6 @@ const authStore = { }, }; -// Twitch auth callback may be called before React is ready, so we use an external store -export const useTwitchAuth = () => - useSyncExternalStore(authStore.subscribe, authStore.snapshot); - export const bindTwitchAuth = () => { // If Twitch isn't available, do nothing if (!("Twitch" in window) || !window.Twitch.ext) return; @@ -62,3 +25,7 @@ export const bindTwitchAuth = () => { authStore.update(auth); }); }; + +// Twitch auth callback may be called before React is ready, so we use an external store +export default () => + useSyncExternalStore(authStore.subscribe, authStore.snapshot); diff --git a/src/pages/overlay/components/buttons/Buttons.tsx b/src/pages/overlay/components/buttons/Buttons.tsx index cf5da073..f570588d 100644 --- a/src/pages/overlay/components/buttons/Buttons.tsx +++ b/src/pages/overlay/components/buttons/Buttons.tsx @@ -1,7 +1,7 @@ import { useMemo } from "react"; import { classes } from "../../../../utils/classes"; -import Tooltip from "../../../../utils/global/tooltip/Tooltip"; +import Tooltip from "../../../../components/tooltip/Tooltip"; import styles from "./buttons.module.scss"; diff --git a/src/pages/overlay/components/overlay/Overlay.tsx b/src/pages/overlay/components/overlay/Overlay.tsx index cc458144..fc9a7749 100644 --- a/src/pages/overlay/components/overlay/Overlay.tsx +++ b/src/pages/overlay/components/overlay/Overlay.tsx @@ -10,7 +10,7 @@ import React, { import Buttons from "../buttons/Buttons"; -import useChatCommand from "../../../../utils/chatCommand"; +import useChatCommand from "../../../../hooks/useChatCommand"; import { isAmbassadorKey, type AmbassadorKey, diff --git a/src/pages/overlay/components/overlay/ambassadors/Ambassadors.tsx b/src/pages/overlay/components/overlay/ambassadors/Ambassadors.tsx index cc2ff188..0681097b 100644 --- a/src/pages/overlay/components/overlay/ambassadors/Ambassadors.tsx +++ b/src/pages/overlay/components/overlay/ambassadors/Ambassadors.tsx @@ -1,7 +1,7 @@ import React, { useRef, useEffect, useCallback } from "react"; -import AmbassadorCard from "../../../../../utils/global/ambassadorCard/AmbassadorCard"; -import AmbassadorButton from "../../../../../utils/global/ambassadorButton/AmbassadorButton"; +import AmbassadorCard from "../../../../../components/ambassadorCard/AmbassadorCard"; +import AmbassadorButton from "../../../../../components/ambassadorButton/AmbassadorButton"; import { sortedAmbassadors, ambassadors, diff --git a/src/pages/overlay/index.tsx b/src/pages/overlay/index.tsx index 2a55e2c8..b23e095b 100644 --- a/src/pages/overlay/index.tsx +++ b/src/pages/overlay/index.tsx @@ -1,10 +1,11 @@ import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; +import { bindTwitchAuth } from "../../hooks/useTwitchAuth"; + import App from "./App"; import { SettingsProvider } from "./hooks/useSettings"; import { SleepingProvider } from "./hooks/useSleeping"; -import { bindTwitchAuth } from "../../utils/twitch-api"; import "./index.scss"; diff --git a/src/pages/panel/components/ambassadorCardOverlay/AmbassadorCardOverlay.tsx b/src/pages/panel/components/ambassadorCardOverlay/AmbassadorCardOverlay.tsx index e9102bb2..73bd56e4 100644 --- a/src/pages/panel/components/ambassadorCardOverlay/AmbassadorCardOverlay.tsx +++ b/src/pages/panel/components/ambassadorCardOverlay/AmbassadorCardOverlay.tsx @@ -2,7 +2,7 @@ import React, { useCallback, type MouseEventHandler } from "react"; import AmbassadorCard, { type AmbassadorCardProps, -} from "../../../../utils/global/ambassadorCard/AmbassadorCard"; +} from "../../../../components/ambassadorCard/AmbassadorCard"; import styles from "./ambassadorCardOverlay.module.scss"; interface AmbassadorCardOverlayProps { diff --git a/src/pages/panel/components/ambassadorPanel/AmbassadorPanel.tsx b/src/pages/panel/components/ambassadorPanel/AmbassadorPanel.tsx index b568698d..d5154350 100644 --- a/src/pages/panel/components/ambassadorPanel/AmbassadorPanel.tsx +++ b/src/pages/panel/components/ambassadorPanel/AmbassadorPanel.tsx @@ -1,8 +1,8 @@ import React, { useState, useCallback, Fragment } from "react"; -import AmbassadorButton from "../../../../utils/global/ambassadorButton/AmbassadorButton"; +import AmbassadorButton from "../../../../components/ambassadorButton/AmbassadorButton"; import AmbassadorCardOverlay from "../ambassadorCardOverlay/AmbassadorCardOverlay"; -import useChatCommand from "../../../../utils/chatCommand"; +import useChatCommand from "../../../../hooks/useChatCommand"; import { sortedAmbassadors, isAmbassadorKey, diff --git a/src/pages/panel/index.tsx b/src/pages/panel/index.tsx index 9026e626..395bc1d6 100644 --- a/src/pages/panel/index.tsx +++ b/src/pages/panel/index.tsx @@ -1,8 +1,9 @@ import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; +import { bindTwitchAuth } from "../../hooks/useTwitchAuth"; + import App from "./App"; -import { bindTwitchAuth } from "../../utils/twitch-api"; import "./index.scss"; diff --git a/src/utils/twitchApi.ts b/src/utils/twitchApi.ts new file mode 100644 index 00000000..2654905d --- /dev/null +++ b/src/utils/twitchApi.ts @@ -0,0 +1,32 @@ +type ChannelsResponse = { + data: Array; +}; + +type ChannelInfo = { + broadcaster_id: string; + broadcaster_login: string; + broadcaster_name: string; + broadcaster_language: string; + game_id: string; + game_name: string; + title: string; + delay: number; + tags: string[]; +}; + +export async function fetchCurrentChannelInfo(auth: Twitch.ext.Authorized) { + const url = new URL("https://api.twitch.tv/helix/channels"); + url.searchParams.set("broadcaster_id", auth.channelId); + + const response = await fetch(url, { + headers: { + "client-id": auth.clientId, + Authorization: `Extension ${auth.helixToken}`, + }, + }); + + const data = (await response.json()) as ChannelsResponse; // TODO: validate schema? + if (data?.data?.length) return data.data[0]; + + return null; +} From 9363a0fcc50f7581d32c6fa1e2499f280735c338 Mon Sep 17 00:00:00 2001 From: MattIPv4 Date: Fri, 6 Oct 2023 22:50:45 +0100 Subject: [PATCH 2/2] Import cleanup --- src/components/ambassadorCard/AmbassadorCard.tsx | 2 ++ src/components/tooltip/Tooltip.tsx | 13 ++++++++----- src/pages/overlay/App.tsx | 4 +++- src/pages/overlay/components/buttons/Buttons.tsx | 3 ++- src/pages/overlay/components/overlay/Overlay.tsx | 10 ++++++---- .../components/overlay/ambassadors/Ambassadors.tsx | 6 ++++-- .../components/overlay/settings/Settings.tsx | 2 ++ .../overlay/components/overlay/welcome/Welcome.tsx | 7 ++++--- src/pages/overlay/components/toggle/Toggle.tsx | 2 +- src/pages/overlay/hooks/useSettings.tsx | 2 +- src/pages/overlay/hooks/useSleeping.tsx | 2 +- .../ambassadorCardOverlay/AmbassadorCardOverlay.tsx | 3 ++- .../components/ambassadorPanel/AmbassadorPanel.tsx | 9 ++++++--- src/pages/panel/components/nav/Nav.tsx | 1 + 14 files changed, 43 insertions(+), 23 deletions(-) diff --git a/src/components/ambassadorCard/AmbassadorCard.tsx b/src/components/ambassadorCard/AmbassadorCard.tsx index 858f74ad..94f2a565 100644 --- a/src/components/ambassadorCard/AmbassadorCard.tsx +++ b/src/components/ambassadorCard/AmbassadorCard.tsx @@ -8,7 +8,9 @@ import { } from "../../utils/ambassadors"; import { camelToKebab } from "../../utils/helpers"; import { classes } from "../../utils/classes"; + import { normalizeAmbassadorName } from "../../hooks/useChatCommand"; + import moderatorBadge from "../../assets/mod.png"; import Tooltip from "../tooltip/Tooltip"; diff --git a/src/components/tooltip/Tooltip.tsx b/src/components/tooltip/Tooltip.tsx index 1ba8d5bc..d934942d 100644 --- a/src/components/tooltip/Tooltip.tsx +++ b/src/components/tooltip/Tooltip.tsx @@ -1,4 +1,4 @@ -import React, { +import { useCallback, useRef, useState, @@ -6,6 +6,9 @@ import React, { useMemo, useId, type FocusEvent, + Children, + isValidElement, + cloneElement, } from "react"; import styles from "./tooltip.module.scss"; @@ -17,7 +20,7 @@ interface TooltipProps { maxWidth?: string; } -const Tooltip: React.FC = (props) => { +const Tooltip = (props: TooltipProps) => { const { text, children, fontSize, maxWidth } = props; const id = useId(); @@ -58,10 +61,10 @@ const Tooltip: React.FC = (props) => { // Add event listeners + refs to the children to show/hide tooltip const childrenWithProps = useMemo( () => - React.Children.map(children, (child) => { - if (!React.isValidElement(child)) return child; + Children.map(children, (child) => { + if (!isValidElement(child)) return child; - return React.cloneElement(child as React.ReactElement, { + return cloneElement(child as React.ReactElement, { onMouseEnter: handleEnter, onFocus: handleEnter, onMouseLeave: () => setShow(false), diff --git a/src/pages/overlay/App.tsx b/src/pages/overlay/App.tsx index fcaac052..cb85449b 100644 --- a/src/pages/overlay/App.tsx +++ b/src/pages/overlay/App.tsx @@ -1,11 +1,13 @@ -import React, { useEffect, useCallback } from "react"; +import { useEffect, useCallback } from "react"; import { classes } from "../../utils/classes"; + import useHiddenCursor from "./hooks/useHiddenCursor"; import useSettings from "./hooks/useSettings"; import useSleeping from "./hooks/useSleeping"; import Overlay from "./components/overlay/Overlay"; + import styles from "./App.module.scss"; // Hide the overlay after 5s of inactivity diff --git a/src/pages/overlay/components/buttons/Buttons.tsx b/src/pages/overlay/components/buttons/Buttons.tsx index f570588d..3e2f7901 100644 --- a/src/pages/overlay/components/buttons/Buttons.tsx +++ b/src/pages/overlay/components/buttons/Buttons.tsx @@ -1,8 +1,9 @@ import { useMemo } from "react"; -import { classes } from "../../../../utils/classes"; import Tooltip from "../../../../components/tooltip/Tooltip"; +import { classes } from "../../../../utils/classes"; + import styles from "./buttons.module.scss"; type ButtonsOptions = Readonly< diff --git a/src/pages/overlay/components/overlay/Overlay.tsx b/src/pages/overlay/components/overlay/Overlay.tsx index fc9a7749..920b1083 100644 --- a/src/pages/overlay/components/overlay/Overlay.tsx +++ b/src/pages/overlay/components/overlay/Overlay.tsx @@ -1,4 +1,4 @@ -import React, { +import { useEffect, useRef, useCallback, @@ -8,14 +8,14 @@ import React, { type Dispatch, } from "react"; -import Buttons from "../buttons/Buttons"; - -import useChatCommand from "../../../../hooks/useChatCommand"; import { isAmbassadorKey, type AmbassadorKey, } from "../../../../utils/ambassadors"; import { classes } from "../../../../utils/classes"; + +import useChatCommand from "../../../../hooks/useChatCommand"; + import useSettings from "../../hooks/useSettings"; import useSleeping from "../../hooks/useSleeping"; @@ -28,6 +28,8 @@ import AmbassadorsOverlay from "./ambassadors/Ambassadors"; import SettingsIcon from "../../../../assets/overlay/settings.png"; import SettingsOverlay from "./settings/Settings"; +import Buttons from "../buttons/Buttons"; + import styles from "./overlay.module.scss"; // Show command-triggered popups for 10s diff --git a/src/pages/overlay/components/overlay/ambassadors/Ambassadors.tsx b/src/pages/overlay/components/overlay/ambassadors/Ambassadors.tsx index 0681097b..bf17789b 100644 --- a/src/pages/overlay/components/overlay/ambassadors/Ambassadors.tsx +++ b/src/pages/overlay/components/overlay/ambassadors/Ambassadors.tsx @@ -1,16 +1,18 @@ -import React, { useRef, useEffect, useCallback } from "react"; +import { useRef, useEffect, useCallback } from "react"; import AmbassadorCard from "../../../../../components/ambassadorCard/AmbassadorCard"; import AmbassadorButton from "../../../../../components/ambassadorButton/AmbassadorButton"; + import { sortedAmbassadors, ambassadors, } from "../../../../../utils/ambassadors"; import { classes } from "../../../../../utils/classes"; -import type { OverlayOptionProps } from "../Overlay"; import arrow from "../../../../../assets/arrow.png"; +import type { OverlayOptionProps } from "../Overlay"; + import styles from "./ambassadors.module.scss"; export default function Ambassadors(props: OverlayOptionProps) { diff --git a/src/pages/overlay/components/overlay/settings/Settings.tsx b/src/pages/overlay/components/overlay/settings/Settings.tsx index b6faa714..199f905d 100644 --- a/src/pages/overlay/components/overlay/settings/Settings.tsx +++ b/src/pages/overlay/components/overlay/settings/Settings.tsx @@ -1,8 +1,10 @@ import { typeSafeObjectEntries } from "../../../../../utils/helpers"; + import useSettings from "../../../hooks/useSettings"; import Card from "../../card/Card"; import Toggle from "../../toggle/Toggle"; + import type { OverlayOptionProps } from "../Overlay"; import styles from "./settings.module.scss"; diff --git a/src/pages/overlay/components/overlay/welcome/Welcome.tsx b/src/pages/overlay/components/overlay/welcome/Welcome.tsx index 3777947b..652af8c9 100644 --- a/src/pages/overlay/components/overlay/welcome/Welcome.tsx +++ b/src/pages/overlay/components/overlay/welcome/Welcome.tsx @@ -1,6 +1,3 @@ -import Card from "../../card/Card"; -import type { OverlayOptionProps } from "../Overlay"; - import website from "../../../../../assets/welcome/website.png"; import amazonWishlist from "../../../../../assets/welcome/amazonWishlist.png"; import instagram from "../../../../../assets/welcome/instagram.png"; @@ -8,6 +5,10 @@ import tiktok from "../../../../../assets/welcome/tiktok.png"; import twitter from "../../../../../assets/welcome/twitter.png"; import gitHub from "../../../../../assets/welcome/github.png"; +import Card from "../../card/Card"; + +import type { OverlayOptionProps } from "../Overlay"; + import styles from "./welcome.module.scss"; export default function Welcome(props: OverlayOptionProps) { diff --git a/src/pages/overlay/components/toggle/Toggle.tsx b/src/pages/overlay/components/toggle/Toggle.tsx index 3b1995fb..0b73981e 100644 --- a/src/pages/overlay/components/toggle/Toggle.tsx +++ b/src/pages/overlay/components/toggle/Toggle.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, type ChangeEvent } from "react"; +import { useCallback, type ChangeEvent } from "react"; import styles from "./toggle.module.scss"; diff --git a/src/pages/overlay/hooks/useSettings.tsx b/src/pages/overlay/hooks/useSettings.tsx index dde1416c..a618a225 100644 --- a/src/pages/overlay/hooks/useSettings.tsx +++ b/src/pages/overlay/hooks/useSettings.tsx @@ -1,4 +1,4 @@ -import React, { +import { createContext, useCallback, useContext, diff --git a/src/pages/overlay/hooks/useSleeping.tsx b/src/pages/overlay/hooks/useSleeping.tsx index 3e4108e9..a9cefebe 100644 --- a/src/pages/overlay/hooks/useSleeping.tsx +++ b/src/pages/overlay/hooks/useSleeping.tsx @@ -1,4 +1,4 @@ -import React, { +import { createContext, useCallback, useContext, diff --git a/src/pages/panel/components/ambassadorCardOverlay/AmbassadorCardOverlay.tsx b/src/pages/panel/components/ambassadorCardOverlay/AmbassadorCardOverlay.tsx index 73bd56e4..1408120a 100644 --- a/src/pages/panel/components/ambassadorCardOverlay/AmbassadorCardOverlay.tsx +++ b/src/pages/panel/components/ambassadorCardOverlay/AmbassadorCardOverlay.tsx @@ -1,8 +1,9 @@ -import React, { useCallback, type MouseEventHandler } from "react"; +import { useCallback, type MouseEventHandler } from "react"; import AmbassadorCard, { type AmbassadorCardProps, } from "../../../../components/ambassadorCard/AmbassadorCard"; + import styles from "./ambassadorCardOverlay.module.scss"; interface AmbassadorCardOverlayProps { diff --git a/src/pages/panel/components/ambassadorPanel/AmbassadorPanel.tsx b/src/pages/panel/components/ambassadorPanel/AmbassadorPanel.tsx index d5154350..b004a1ef 100644 --- a/src/pages/panel/components/ambassadorPanel/AmbassadorPanel.tsx +++ b/src/pages/panel/components/ambassadorPanel/AmbassadorPanel.tsx @@ -1,14 +1,17 @@ -import React, { useState, useCallback, Fragment } from "react"; +import { useState, useCallback, Fragment } from "react"; import AmbassadorButton from "../../../../components/ambassadorButton/AmbassadorButton"; -import AmbassadorCardOverlay from "../ambassadorCardOverlay/AmbassadorCardOverlay"; -import useChatCommand from "../../../../hooks/useChatCommand"; + import { sortedAmbassadors, isAmbassadorKey, type AmbassadorKey, } from "../../../../utils/ambassadors"; +import useChatCommand from "../../../../hooks/useChatCommand"; + +import AmbassadorCardOverlay from "../ambassadorCardOverlay/AmbassadorCardOverlay"; + import styles from "./ambassadorPanel.module.scss"; export default function AmbassadorPanel() { diff --git a/src/pages/panel/components/nav/Nav.tsx b/src/pages/panel/components/nav/Nav.tsx index 0d992ac8..d7f9034d 100644 --- a/src/pages/panel/components/nav/Nav.tsx +++ b/src/pages/panel/components/nav/Nav.tsx @@ -1,4 +1,5 @@ import AlveusLogo from "../../../../assets/alveus-logo.png"; + import styles from "./nav.module.scss"; export default function Nav() {