Reorganize global hooks + components

src/utils/global/ambassadorButton/AmbassadorButton.tsx → 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";
 

src/utils/global/ambassadorButton/ambassadorButton.module.scss → src/components/ambassadorButton/ambassadorButton.module.scss

@@ -1,4 +1,4 @@
-@import "../../../variables.scss";
+@import "../../variables.scss";
 
 .ambassador {
   display: flex;

src/utils/global/ambassadorCard/AmbassadorCard.tsx → src/components/ambassadorCard/AmbassadorCard.tsx

@@ -1,18 +1,21 @@
-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;

src/utils/global/ambassadorCard/ambassadorCard.module.scss → 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;

src/utils/global/tooltip/Tooltip.tsx → src/components/tooltip/Tooltip.tsx

@@ -1,11 +1,14 @@
-import React, {
+import {
   useCallback,
   useRef,
   useState,
   type MouseEvent,
   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<TooltipProps> = (props) => {
+const Tooltip = (props: TooltipProps) => {
   const { text, children, fontSize, maxWidth } = props;
 
   const id = useId();
@@ -58,10 +61,10 @@ const Tooltip: React.FC<TooltipProps> = (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),

src/utils/global/tooltip/tooltip.module.scss → src/components/tooltip/tooltip.module.scss

@@ -1,4 +1,4 @@
-@import "../../../variables.scss";
+@import "../../variables.scss";
 
 .tooltip {
   background-color: $tooltip-background-color;

src/utils/chatCommand.ts → 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(",") ?? [];

src/utils/twitch-api.ts → src/hooks/useTwitchAuth.ts

@@ -1,38 +1,5 @@
 import { useSyncExternalStore } from "react";
 
-type ChannelsResponse = {
-  data: Array<ChannelInfo>;
-};
-
-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);

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

src/pages/overlay/components/buttons/Buttons.tsx

@@ -1,7 +1,8 @@
 import { useMemo } from "react";
 
+import Tooltip from "../../../../components/tooltip/Tooltip";
+
 import { classes } from "../../../../utils/classes";
-import Tooltip from "../../../../utils/global/tooltip/Tooltip";
 
 import styles from "./buttons.module.scss";
 

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 "../../../../utils/chatCommand";
 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

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 AmbassadorCard from "../../../../../utils/global/ambassadorCard/AmbassadorCard";
-import AmbassadorButton from "../../../../../utils/global/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) {

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";

src/pages/overlay/components/overlay/welcome/Welcome.tsx

@@ -1,13 +1,14 @@
-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";
 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) {

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";
 

src/pages/overlay/hooks/useSettings.tsx

@@ -1,4 +1,4 @@
-import React, {
+import {
   createContext,
   useCallback,
   useContext,

src/pages/overlay/hooks/useSleeping.tsx

@@ -1,4 +1,4 @@
-import React, {
+import {
   createContext,
   useCallback,
   useContext,

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";
 

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 "../../../../utils/global/ambassadorCard/AmbassadorCard";
+} from "../../../../components/ambassadorCard/AmbassadorCard";
+
 import styles from "./ambassadorCardOverlay.module.scss";
 
 interface AmbassadorCardOverlayProps {

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 AmbassadorButton from "../../../../utils/global/ambassadorButton/AmbassadorButton";
-import AmbassadorCardOverlay from "../ambassadorCardOverlay/AmbassadorCardOverlay";
-import useChatCommand from "../../../../utils/chatCommand";
 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() {

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() {

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";