diff --git a/src/plugins/spotifyControls/PlayerComponent.tsx b/src/plugins/spotifyControls/PlayerComponent.tsx index 24394c6f..af53f59c 100644 --- a/src/plugins/spotifyControls/PlayerComponent.tsx +++ b/src/plugins/spotifyControls/PlayerComponent.tsx @@ -22,7 +22,7 @@ import { Link } from "@components/Link"; import { debounce } from "@utils/debounce"; import { classes, LazyComponent } from "@utils/misc"; import { filters, find, findByCodeLazy } from "@webpack"; -import { ContextMenu, FluxDispatcher, Forms, Menu, React } from "@webpack/common"; +import { ContextMenu, FluxDispatcher, Forms, Menu, React, useEffect, useState } from "@webpack/common"; import { SpotifyStore, Track } from "./SpotifyStore"; @@ -142,10 +142,10 @@ function SeekBar() { () => [SpotifyStore.mPosition, SpotifyStore.isSettingPosition, SpotifyStore.isPlaying] ); - const [position, setPosition] = React.useState(storePosition); + const [position, setPosition] = useState(storePosition); // eslint-disable-next-line consistent-return - React.useEffect(() => { + useEffect(() => { if (isPlaying && !isSettingPosition) { setPosition(SpotifyStore.position); const interval = setInterval(() => { @@ -232,7 +232,7 @@ function AlbumContextMenu({ track }: { track: Track; }) { function Info({ track }: { track: Track; }) { const img = track?.album?.image; - const [coverExpanded, setCoverExpanded] = React.useState(false); + const [coverExpanded, setCoverExpanded] = useState(false); const i = ( <> @@ -327,7 +327,7 @@ export function Player() { ); const isPlaying = useStateFromStores([SpotifyStore], () => SpotifyStore.isPlaying); - const [shouldHide, setShouldHide] = React.useState(false); + const [shouldHide, setShouldHide] = useState(false); // Hide player after 5 minutes of inactivity // eslint-disable-next-line consistent-return diff --git a/src/utils/misc.tsx b/src/utils/misc.tsx index 8b7cea2d..6710523a 100644 --- a/src/utils/misc.tsx +++ b/src/utils/misc.tsx @@ -16,7 +16,7 @@ * along with this program. If not, see . */ -import { Clipboard, React, Toasts } from "@webpack/common"; +import { Clipboard, React, Toasts, useEffect, useState } from "@webpack/common"; /** * Makes a lazy function. On first call, the value is computed. @@ -48,13 +48,13 @@ export function useAwaiter(factory: () => Promise, providedOpts?: AwaiterO deps: [], onError: null, }, providedOpts); - const [state, setState] = React.useState({ + const [state, setState] = useState({ value: opts.fallbackValue, error: null, pending: true }); - React.useEffect(() => { + useEffect(() => { let isAlive = true; if (!state.pending) setState({ ...state, pending: true }); @@ -72,7 +72,7 @@ export function useAwaiter(factory: () => Promise, providedOpts?: AwaiterO * Returns a function that can be used to force rerender react components */ export function useForceUpdater() { - const [, set] = React.useState(0); + const [, set] = useState(0); return () => set(s => s + 1); } diff --git a/src/utils/react.ts b/src/utils/react.ts index 8585846c..e5e1f677 100644 --- a/src/utils/react.ts +++ b/src/utils/react.ts @@ -16,7 +16,7 @@ * along with this program. If not, see . */ -import { React } from "@webpack/common"; +import { React, useState } from "@webpack/common"; import { checkIntersecting } from "./misc"; @@ -30,7 +30,7 @@ export const useIntersection = (intersectOnly = false): [ isIntersecting: boolean, ] => { const observerRef = React.useRef(null); - const [isIntersecting, setIntersecting] = React.useState(false); + const [isIntersecting, setIntersecting] = useState(false); const refCallback = (element: Element | null) => { observerRef.current?.disconnect(); diff --git a/src/webpack/common.tsx b/src/webpack/common.tsx index 31175f95..f2c42d10 100644 --- a/src/webpack/common.tsx +++ b/src/webpack/common.tsx @@ -31,7 +31,12 @@ export const Margins = findByPropsLazy("marginTop20"); export let FluxDispatcher: Other.FluxDispatcher; export const Flux = findByPropsLazy("connectStores"); + export let React: typeof import("react"); +export let useState: typeof React.useState; +export let useEffect: typeof React.useEffect; +export let useMemo: typeof React.useMemo; + export const ReactDOM: typeof import("react-dom") = findByPropsLazy("createPortal", "render"); export const RestAPI = findByPropsLazy("getAPIBaseURL", "get"); @@ -76,7 +81,7 @@ export const TextArea = findByCodeLazy("handleSetRef", "textArea") as React.Comp export const Select = LazyComponent(() => findByCode("optionClassName", "popoutPosition", "autoFocus", "maxVisibleItems")); export const Slider = LazyComponent(() => findByCode("closestMarkerIndex", "stickToMarkers")); -export let SnowflakeUtils: { fromTimestamp: (timestamp: number) => string, extractTimestamp: (snowflake: string) => number }; +export let SnowflakeUtils: { fromTimestamp: (timestamp: number) => string, extractTimestamp: (snowflake: string) => number; }; waitFor(["fromTimestamp", "extractTimestamp"], m => SnowflakeUtils = m); export let Parser: any; @@ -151,7 +156,10 @@ export const NavigationRouter = mapMangledModuleLazy("Transitioning to external goForward: filters.byCode("goForward()"), }); -waitFor("useState", m => React = m); +waitFor("useState", m => { + React = m; + ({ useEffect, useState, useMemo } = React); +}); waitFor(["dispatch", "subscribe"], m => { FluxDispatcher = m;