feat: Expose RandomGames component to exts

feat: Expose useContextMenu and useLocalization hooks to exts

fix: Make sure Lang provider is covering Dynamic component provider

refactor: Make openGameContextMenu a func from useContextMenu
refactor: Replace instances of useContext(LangContext) with standardized useLocalization hook

Author: colin969

docs/development/lang.md

@@ -11,7 +11,7 @@ import { LangContext } from '@renderer/util/lang';
 
 function BoringTextBox() {
   // Load the context
-  const strings = React.useContext(LangContext);
+  const strings = useLocalization();
 
   // Pretend we're loading by returning `Loading` :^)
   return (

src/renderer/components/ActivityRoutes.tsx

@@ -9,15 +9,14 @@ import { TagsPage } from './pages/TagsPage';
 import { FpfssPage } from './pages/FpfssPage';
 
 export type ActivityRoutesProps = {
-  onGameContextMenu: (event: React.MouseEvent, gameId: string, logoPath: string, screenshotPath: string) => void;
   manualUrl: string;
 }
 
-export function ActivityRoutes({ onGameContextMenu, manualUrl }: ActivityRoutesProps) {
+export function ActivityRoutes({ manualUrl }: ActivityRoutesProps) {
   return (
     <>
       <ActivityRoute path={Paths.HOME} exact>
-        <HomePage onGameContextMenu={onGameContextMenu}/>
+        <HomePage/>
       </ActivityRoute>
       <ActivityRoute path={Paths.TAGS}>
         <TagsPage/>

src/renderer/components/BrowsePageDisplay.tsx

@@ -1,16 +1,16 @@
 
 import { useAppDispatch, useAppSelector } from '@renderer/hooks/useAppSelector';
+import { useLocalization } from '@renderer/hooks/useLocalization';
 import { requestRange, selectGame, setGridScroll, setListScroll } from '@renderer/store/search/slice';
 import { gameDragDataType, getPlatformIconURL } from '@renderer/Util';
-import { LangContext } from '@renderer/util/lang';
 import { BackIn } from '@shared/back/types';
 import { calcScale } from '@shared/Util';
 import { isGame } from '@shared/utils/misc';
 import { formatString } from '@shared/utils/StringFormatter';
 import { delayedThrottle } from '@shared/utils/throttle';
 import { Content, Game, Playlist } from 'flashpoint-launcher';
 import { BrowsePageDisplayGridProps, BrowsePageDisplayListProps, BrowsePageDisplayProps } from 'flashpoint-launcher-renderer';
-import React, { useContext, useState } from 'react';
+import React, { useState } from 'react';
 import { ScrollIndices } from 'react-virtualized';
 import { GameGrid } from './GameGrid';
 import { GameList } from './GameList';
@@ -247,7 +247,7 @@ type BasicNoRowRendererProps = {
 }
 
 export function BasicNoRowsRenderer(props: BasicNoRowRendererProps) {
-  const strings = useContext(LangContext);
+  const strings = useLocalization();
   const { contentTotal, selectedPlaylist } = props;
 
   return (

src/renderer/components/ConfirmElement.tsx

@@ -1,5 +1,5 @@
 import { withConfirmDialog, WithConfirmDialogProps } from '@renderer/containers/withConfirmDialog';
-import { LangContext } from '@renderer/util/lang';
+import { useLocalization } from '@renderer/hooks/useLocalization';
 import { Subtract } from '@shared/interfaces';
 import * as React from 'react';
 
@@ -28,7 +28,7 @@ type ConfirmElementComponentProps<T = undefined> = {
 // Wrapper component around the "useConfirm" hook.
 function ConfirmElementComponent<T = undefined>(props: ConfirmElementComponentProps<T>) {
   const { onConfirm, message, render, extra } = props;
-  const strings = React.useContext(LangContext);
+  const strings = useLocalization();
   const confirm = async () => {
     if (onConfirm) {
       const res = await props.openConfirmDialog(message, [strings.misc.yes, strings.misc.no], 1, 0);

src/renderer/components/CurateBox.tsx

@@ -7,6 +7,7 @@ import {
 } from '@renderer/components/CurateBoxInputRow';
 import { GameImageSplit } from '@renderer/components/GameImageSplit';
 import { useAppDispatch } from '@renderer/hooks/useAppSelector';
+import { useLocalization } from '@renderer/hooks/useLocalization';
 import {
   AddAppType,
   addPlatform,
@@ -17,7 +18,6 @@ import {
   setPrimaryPlatform
 } from '@renderer/store/curate/slice';
 import { axios, getCurationURL, getPlatformIconURL } from '@renderer/Util';
-import { LangContext } from '@renderer/util/lang';
 import { BackIn, CurationImageEnum } from '@shared/back/types';
 import { GamePropSuggestions } from '@shared/interfaces';
 import { mapRuffleSupportString } from '@shared/utils/misc';
@@ -49,7 +49,7 @@ export type CurateBoxProps = {
 }
 
 export function CurateBox(props: CurateBoxProps) {
-  const strings = React.useContext(LangContext);
+  const strings = useLocalization();
   const disabled = !!props.curation.locked;
   const dispatch = useAppDispatch();
   const folder = props.curation.folder;

src/renderer/components/CurateBoxAddApp.tsx

@@ -1,11 +1,11 @@
 import { useAppDispatch } from '@renderer/hooks/useAppSelector';
+import { useLocalization } from '@renderer/hooks/useLocalization';
 import { editAddApp, removeAddApp } from '@renderer/store/curate/slice';
 import { BackIn } from '@shared/back/types';
 import { AddAppCuration, AddAppCurationMeta } from '@shared/curate/types';
 import { Platform } from 'flashpoint-launcher';
 import * as React from 'react';
 import { Dispatch } from 'redux';
-import { LangContext } from '../util/lang';
 import { CurateBoxRow } from './CurateBoxRow';
 import { InputField } from './InputField';
 import { SimpleButton } from './SimpleButton';
@@ -37,7 +37,7 @@ export function CurateBoxAddApp(props: CurateBoxAddAppProps) {
   const editable = true;
   const disabled = props.disabled;
   // Localized strings
-  const strings = React.useContext(LangContext);
+  const strings = useLocalization();
   const specialType = props.addApp.applicationPath === ':extras:' || props.addApp.applicationPath === ':message:';
   let lcString = strings.browse.launchCommand;
   let lcPlaceholderString = strings.browse.noLaunchCommand;

src/renderer/components/CurateBoxContentTree.tsx

@@ -1,15 +1,15 @@
 import { getPointer } from '@renderer/context/MenuContext';
 import { useAppDispatch } from '@renderer/hooks/useAppSelector';
 import { useContextMenu } from '@renderer/hooks/useContextMenu';
+import { useLocalization } from '@renderer/hooks/useLocalization';
 import { toggleContentNodeView } from '@renderer/store/curate/slice';
-import { LangContext } from '@renderer/util/lang';
 import { CURATIONS_FOLDER_WORKING } from '@shared/constants';
 import { genFlatContentTree, sizeToString } from '@shared/Util';
 import { ContentTree, FlatContentTreeNode } from 'flashpoint-launcher';
+import { MenuItemType } from 'flashpoint-launcher-renderer';
 import * as path from 'node:path';
-import React, { useContext } from 'react';
+import React from 'react';
 import { AutoSizer, List, ListRowProps } from 'react-virtualized';
-import { MenuItemType } from './Menu';
 import { OpenIcon } from './OpenIcon';
 
 const RENDERER_OVERSCAN = 50;
@@ -23,7 +23,7 @@ export type CurateBoxContentTreeProps = {
 export function CurateBoxContentTree(props: CurateBoxContentTreeProps) {
   const { folder, launchPath, contentTree } = props;
   const dispatch = useAppDispatch();
-  const strings = useContext(LangContext);
+  const strings = useLocalization();
   const flatTree = genFlatContentTree(contentTree);
   const { openMenu } = useContextMenu();
 

src/renderer/components/CurateBoxInputRow.tsx

@@ -1,8 +1,8 @@
 import { CurateBoxRow } from '@renderer/components/CurateBoxRow';
 import { InputElement, InputField, InputFieldEntry } from '@renderer/components/InputField';
 import { useAppDispatch } from '@renderer/hooks/useAppSelector';
+import { useLocalization } from '@renderer/hooks/useLocalization';
 import { editCurationMeta } from '@renderer/store/curate/slice';
-import { LangContext } from '@renderer/util/lang';
 import { CurationMeta } from '@shared/curate/types';
 import { Tag, TagCategory, TagSuggestion } from 'flashpoint-launcher';
 import * as React from 'react';
@@ -120,7 +120,7 @@ export type CurateBoxTagDropdownInputRowProps = CurateBoxInputRowProps & {
 }
 
 export function CurateBoxTagDropdownInputRow(props: CurateBoxTagDropdownInputRowProps) {
-  const strings = React.useContext(LangContext);
+  const strings = useLocalization();
 
   const onSubmitTag = (text: string) => {
     const tags = text.split(';');

src/renderer/components/CurateBoxWarnings.tsx

@@ -1,6 +1,5 @@
+import { useLocalization } from '@renderer/hooks/useLocalization';
 import { CurationWarnings, LangContainer } from 'flashpoint-launcher';
-import * as React from 'react';
-import { LangContext } from '../util/lang';
 
 export type CurateBoxWarningsProps = {
   /** Warnings to display. */
@@ -9,7 +8,7 @@ export type CurateBoxWarningsProps = {
 
 // The part of a Curation Box that displays all the warnings (if any).
 export function CurateBoxWarnings(props: CurateBoxWarningsProps) {
-  const strings = React.useContext(LangContext).curate;
+  const strings = useLocalization().curate;
   const { warnings } = props;
   // Count the number of warnings
   const warningCount = props.warnings.writtenWarnings.length;

src/renderer/components/Footer.tsx

@@ -1,5 +1,6 @@
 import { useViewName } from '@renderer/hooks/search';
 import { useAppDispatch, useAppSelector } from '@renderer/hooks/useAppSelector';
+import { useLocalization } from '@renderer/hooks/useLocalization';
 import { setMainState } from '@renderer/store/main/slice';
 import { updatePreferences } from '@renderer/store/preferences/slice';
 import { GENERAL_VIEW_ID } from '@renderer/store/search/slice';
@@ -9,14 +10,12 @@ import { getLibraryItemTitle } from '@shared/library/util';
 import { formatString } from '@shared/utils/StringFormatter';
 import { ScaleValues } from 'flashpoint-launcher';
 import * as React from 'react';
-import { useContext } from 'react';
 import { useLocation } from 'react-router-dom';
 import { getViewName } from '../Util';
-import { LangContext } from '../util/lang';
 import { FooterScaler } from './FooterScaler';
 
 export function Footer() {
-  const strings = useContext(LangContext);
+  const strings = useLocalization();
   const dispatch = useAppDispatch();
   const allGamesTotal = useAppSelector(state => state.main.gamesTotal);
   const componentStatuses = useAppSelector(state => state.main.componentStatuses);