refactor: Move LogsPage and BrowsePage to functional components

fix: Various state fixes for Logs page

fix: Fixed logs page source dropdown

Author: colin969

extensions/core-nga/src/components/components.tsx

@@ -68,10 +68,10 @@ export function NgCredits(props: GameComponentProps) {
   return (
     <div className='browse-right-sidebar__row'>
       <p>Credits: </p>
-      { credits.map((credit, idx) => {
+      {credits.map((credit, idx) => {
         return (
           <div className='nga-credit' key={idx}>
-            { credit.roles?.map((role, idx) => {
+            {credit.roles?.map((role, idx) => {
               if (role in ROLE_ICONS) {
                 const Component = ROLE_ICONS[role];
                 return (
@@ -91,10 +91,16 @@ export function NgCredits(props: GameComponentProps) {
                 );
               }
             })}
-            <div className='nga-credt-name'>{credit.name}</div>
+            <div
+              className='nga-credt-name browse-right-sidebar__searchable'
+              onClick={() => {
+                props.doSearch(`developer:"${credit.name}"`);
+              }}>
+              {credit.name}
+            </div>
           </div>
         );
-      }) }
+      })}
     </div>
   );
 }

src/back/index.ts

@@ -1,18 +1,17 @@
+import { BackIn, BackInit, BackInitArgs, BackOut, BackResParams, ComponentState, ComponentStatus, DownloadDetails } from '@shared/back/types';
+import { getContentFolderByKey, getCurationFolder } from '@shared/curate/util';
+import { ILogoSet, LogoSet } from '@shared/extensions/interfaces';
+import { IBackProcessInfo, RecursivePartial } from '@shared/interfaces';
+import { LangFileContent, getDefaultLocalization } from '@shared/lang';
 import { ILogEntry, LogLevel } from '@shared/Log/interface';
+import { PreferencesFile } from '@shared/preferences/PreferencesFile';
+import { defaultPreferencesData } from '@shared/preferences/util';
 import { Theme } from '@shared/ThemeFile';
 import {
   createErrorProxy, deepCopy,
   removeFileExtension,
   stringifyArray
 } from '@shared/Util';
-import * as os from 'os';
-import { BackIn, BackInit, BackInitArgs, BackOut, BackResParams, ComponentState, ComponentStatus, DownloadDetails, FpfssUser } from '@shared/back/types';
-import { getContentFolderByKey, getCurationFolder } from '@shared/curate/util';
-import { ILogoSet, LogoSet } from '@shared/extensions/interfaces';
-import { IBackProcessInfo, RecursivePartial } from '@shared/interfaces';
-import { LangFileContent, getDefaultLocalization } from '@shared/lang';
-import { PreferencesFile } from '@shared/preferences/PreferencesFile';
-import { defaultPreferencesData } from '@shared/preferences/util';
 import { validateSemiUUID } from '@shared/utils/uuid';
 import { FPA_VERSION, VERSION } from '@shared/version';
 import * as child_process from 'child_process';
@@ -22,32 +21,31 @@ import * as fs from 'fs-extra';
 import * as http from 'http';
 import * as mime from 'mime';
 import { Progress, add, extractFull } from 'node-7z';
+import * as os from 'os';
 import * as path from 'path';
 import 'reflect-metadata';
 import { genCurationWarnings, loadCurationFolder } from './curate/util';
 // Required for the DB Models to function
+import { FlashpointArchive, enableDebug, loggerSusbcribe } from '@fparchive/flashpoint-archive';
 import {
   CURATIONS_FOLDER_EXPORTED,
   CURATIONS_FOLDER_EXTRACTING,
   CURATIONS_FOLDER_TEMP,
   CURATIONS_FOLDER_WORKING, CURATION_META_FILENAMES
 } from '@shared/constants';
-import { FlashpointArchive, enableDebug, loggerSusbcribe } from '@fparchive/flashpoint-archive';
+import { formatString } from '@shared/utils/StringFormatter';
 import { Tail } from 'tail';
 import { ConfigFile } from './ConfigFile';
-import { loadExecMappingsFile } from './Execs';
-import { ExtConfigFile } from './ExtConfigFile';
-import { InstancedAbortController } from './InstancedAbortController';
-import { ManagedChildProcess } from './ManagedChildProcess';
-import { PlaylistFile } from './PlaylistFile';
-import { ServicesFile } from './ServicesFile';
-import { SocketServer } from './SocketServer';
-import { newThemeWatcher } from './Themes';
 import { CONFIG_FILENAME, DISCORD_LINK, EXT_CONFIG_FILENAME, PREFERENCES_FILENAME, SERVICES_SOURCE, WIKI_AV_TROUBLESHOOTING } from './constants';
+import { saveCurationFpfssInfo } from './curate/fpfss';
 import { loadCurationIndexImage } from './curate/parse';
 import { readCurationMeta } from './curate/read';
 import { onFileServerRequestCurationFileFactory, onFileServerRequestPostCuration } from './curate/util';
+import { axios } from './dns';
 import { downloadGameData } from './download';
+import { Downloader } from './Downloader';
+import { loadExecMappingsFile } from './Execs';
+import { ExtConfigFile } from './ExtConfigFile';
 import { ApiEmitter } from './extensions/ApiEmitter';
 import { ExtensionService } from './extensions/ExtensionService';
 import {
@@ -57,24 +55,26 @@ import {
   registerInterceptor
 } from './extensions/NodeInterceptor';
 import { Command, RegisteredMiddleware } from './extensions/types';
+import { InstancedAbortController } from './InstancedAbortController';
+import { ManagedChildProcess } from './ManagedChildProcess';
 import { SystemEnvMiddleware } from './middleware';
+import { PlaylistFile } from './PlaylistFile';
 import { registerRequestCallbacks } from './responses';
 import { genContentTree } from './rust';
+import { ServicesFile } from './ServicesFile';
+import { SocketServer } from './SocketServer';
+import { newThemeWatcher } from './Themes';
 import { BackState, ImageDownloadItem } from './types';
+import { awaitDialog } from './util/dialog';
 import { EventQueue } from './util/EventQueue';
+import { onDidInstallGameData, onDidRemoveGame, onDidRemovePlaylistGame, onDidUninstallGameData, onDidUpdateGame, onDidUpdatePlaylist, onDidUpdatePlaylistGame, onServiceChange, onWillImportCuration, onWillUninstallGameData } from './util/events';
 import { FileServer, serveFile } from './util/FileServer';
 import { FolderWatcher } from './util/FolderWatcher';
+import { dispose } from './util/lifecycle';
 import { LogFile } from './util/LogFile';
 import { logFactory } from './util/logging';
 import { createContainer, exit, getMacPATH, promiseSleep, runService } from './util/misc';
 import { uuid } from './util/uuid';
-import { onDidInstallGameData, onDidRemoveGame, onDidRemovePlaylistGame, onDidUninstallGameData, onDidUpdateGame, onDidUpdatePlaylist, onDidUpdatePlaylistGame, onServiceChange, onWillImportCuration, onWillUninstallGameData } from './util/events';
-import { dispose } from './util/lifecycle';
-import { formatString } from '@shared/utils/StringFormatter';
-import { awaitDialog } from './util/dialog';
-import { saveCurationFpfssInfo } from './curate/fpfss';
-import { axios } from './dns';
-import { Downloader } from './Downloader';
 
 export const VERBOSE = {
   enabled: false
@@ -1461,7 +1461,6 @@ async function updateFileServerDownloadQueue() {
     })
     .catch((err) => {
       item.res.writeHead(404);
-      log.error('Launcher', 'Failure downloading image on demand: ' + err);
     })
     .finally(async () => {
       removeFileServerDownloadItem(item);
@@ -1643,4 +1642,4 @@ export async function databaseReady(): Promise<FlashpointArchive> {
     };
     waitForDb();
   });
-}
+}

src/main/MainWindowPreload.ts

@@ -84,6 +84,7 @@ window.Shared = {
 
   customVersion: undefined,
 
+  initialLogEntries: createErrorProxy('initialLogEntries'),
   initialLang: createErrorProxy('initialLang'),
   initialLangList: createErrorProxy('initialLangList'),
   initialThemes: createErrorProxy('initialThemes'),
@@ -126,7 +127,7 @@ const onInit = (async () => {
         fullJsonFolderPath: path.resolve(data.config.flashpointPath, data.preferences.jsonFolderPath),
       };
       window.Shared.fileServerPort = data.fileServerPort;
-      window.Shared.log.entries = data.log;
+      window.Shared.initialLogEntries = data.log;
       // window.Shared.initialServices = data.services;
       window.Shared.customVersion = data.customVersion;
       window.Shared.initialLang = data.language;

src/renderer/components/Dropdown.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { checkIfAncestor } from '../Util';
+import { useRef, useState } from 'react';
 
 export type DropdownProps = {
   /** Extra class name to add to dropdown frame */
@@ -17,45 +16,51 @@ export type DropdownProps = {
 export function Dropdown(props: DropdownProps) {
   // Hooks
   const [expanded, setExpanded] = useState<boolean>(false);
-  const contentRef = useRef<HTMLDivElement>(null);
-  useEffect(() => { // ("Hide" the drop-downs content if the user clicks outside the content element)
-    if (expanded) {
-      const onGlobalMouseDown = (event: MouseEvent) => {
-        if (!event.defaultPrevented) {
-          if (!checkIfAncestor(event.target as HTMLElement | null, contentRef.current)) {
-            setExpanded(false);
-          }
-        }
-      };
-      document.addEventListener('mousedown', onGlobalMouseDown);
-      return () => { document.removeEventListener('mousedown', onGlobalMouseDown); };
-    }
-  }, [expanded, contentRef]);
-  const onMouseDown = useCallback((event: React.MouseEvent) => {
-    if (event.button === 0) { // (Left mouse button)
-      setExpanded(!expanded);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const onToggleExpanded = () => {
+    setExpanded(!expanded);
+  };
+
+  // Close dropdown when clicking outside of it
+  const handleClickOutside = (event: any) => {
+    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+      setExpanded(false);
     }
-  }, [expanded]);
+  };
+
+  React.useEffect(() => {
+    // Add event listener to handle clicks outside the dropdown
+    document.addEventListener('mousedown', handleClickOutside);
+
+    // Cleanup the event listener on component unmount
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  });
 
   const baseClass = props.form ? 'simple-dropdown-form' : 'simple-dropdown';
 
   // Render
   return (
-    <div className={`${baseClass} ${props.className}`}>
+    <div
+      className={`${baseClass} ${props.className}`}
+      onClick={onToggleExpanded}>
       <div
         className={`${baseClass}__select-box ${props.headerClassName}`}
-        onMouseDown={onMouseDown}
         tabIndex={0}>
         <div className={`${baseClass}__select-text`}>
-          { props.text }
+          {props.text}
         </div>
         <div className={`${baseClass}__select-icon`} />
       </div>
       <div
         className={`${baseClass}__content` + (expanded ? '' : ` ${baseClass}__content--hidden`)}
-        onMouseUp={() => setExpanded(false)}
-        ref={contentRef}>
-        { props.children }
+        ref={dropdownRef}
+        onClick={(e) => e.stopPropagation()}>
+        {expanded && (
+          props.children
+        )}
       </div>
     </div>
   );

src/renderer/components/GameGrid.tsx

@@ -13,9 +13,6 @@ import { GameLaunchOverride, TagFilter } from 'flashpoint-launcher';
 
 const RENDERER_OVERSCAN = 5;
 
-/** A function that receives an HTML element. */
-type RefFunc<T extends HTMLElement> = (instance: T | null) => void;
-
 type ColumnsRows = {
   columns: number;
   rows: number;
@@ -54,8 +51,6 @@ export type GameGridProps = {
   /** Moves a game at the specified index above the other game at the destination index, inside the playlist */
   onMovePlaylistGame: (sourceGameId: string, destGameId: string) => void;
   updateView: UpdateView;
-  /** Function for getting a reference to grid element. Called whenever the reference could change. */
-  gridRef?: RefFunc<HTMLDivElement>;
   /** Updates to clear platform icon cache */
   logoVersion: number;
   /** Screenshot Preview Mode */
@@ -106,7 +101,6 @@ export class GameGrid extends React.Component<GameGridProps, GameGridState> {
   componentDidMount(): void {
     window.Shared.back.registerAny(this.onResponse);
     this.updateCssVars();
-    this.updatePropRefs();
   }
 
   componentDidUpdate(prevProps: GameGridProps): void {
@@ -116,7 +110,6 @@ export class GameGrid extends React.Component<GameGridProps, GameGridState> {
       });
     }
     this.updateCssVars();
-    this.updatePropRefs();
 
     // Clear forced scrollTop after use
     if (this.state.forceScrollTop !== undefined) {
@@ -417,26 +410,6 @@ export class GameGrid extends React.Component<GameGridProps, GameGridState> {
     }
   }
 
-  /**
-   * Call the "ref" property functions.
-   * Do this whenever there's a possibility that the referenced elements has been replaced.
-   */
-  updatePropRefs(): void {
-    if (this.props.gridRef) {
-      // Find the grid element
-      let ref: HTMLDivElement | null = null;
-      if (this.wrapperRef.current) {
-        const inner = this.wrapperRef.current.querySelector('.game-grid');
-        if (inner) { ref = inner as HTMLDivElement; }
-      }
-      // Call callback
-      if (ref !== this.prevWrapperRef) {
-        this.prevWrapperRef = ref;
-        this.props.gridRef(ref);
-      }
-    }
-  }
-
   calculateSize(resultsTotal: number, width: number): ColumnsRows {
     // Calculate and set column/row count
     // (16 is the width of a scroll-bar in pixels - at least on windows)

src/renderer/components/GameList.tsx

@@ -11,9 +11,6 @@ import { GameListItem } from './GameListItem';
 import { GameDragData, GameDragEventData } from './pages/BrowsePage';
 import { GameLaunchOverride, TagFilter } from 'flashpoint-launcher';
 
-/** A function that receives an HTML element. */
-type RefFunc<T extends HTMLElement> = (instance: T | null) => void;
-
 const RENDERER_OVERSCAN = 15;
 
 export type OwnProps = {
@@ -51,8 +48,6 @@ export type OwnProps = {
   /** Moves a game at the specified index above the other game at the destination index, inside the playlist */
   onMovePlaylistGame: (sourceGameId: string, destGameId: string) => void;
   updateView: UpdateView;
-  /** Function for getting a reference to grid element. Called whenever the reference could change. */
-  listRef?: RefFunc<HTMLDivElement>;
   /** Updates to clear platform icon cache */
   logoVersion: number;
   /** View id */

src/renderer/components/LeftBrowseSidebar.tsx

@@ -16,7 +16,7 @@ type OwnProps = {
   selectedPlaylistID?: string;
   isEditing: boolean;
   isNewPlaylist: boolean;
-  currentPlaylist?: Playlist;
+  currentPlaylist: Playlist | null;
   playlistIconCache: Record<string, string>;
   onDelete: () => void;
   onSave: () => void;
@@ -100,7 +100,7 @@ export class LeftBrowseSidebar extends React.Component<LeftBrowseSidebarProps> {
   renderPlaylistsMemo = memoizeOne((
     playlists: Playlist[],
     playlistIconCache: Record<string, string>,
-    currentPlaylist: Playlist | undefined,
+    currentPlaylist: Playlist | null,
     editingDisabled: boolean,
     editingExtremeDisabled: boolean,
     isEditing: boolean,
@@ -109,7 +109,7 @@ export class LeftBrowseSidebar extends React.Component<LeftBrowseSidebarProps> {
   ) => {
     const renderItem = (playlist: Playlist, isNew: boolean): void => {
       const isSelected = isNew || playlist.id === selectedPlaylistID;
-      const p = (isSelected && currentPlaylist) ? currentPlaylist : playlist;
+      const p = (isSelected && currentPlaylist !== null) ? currentPlaylist : playlist;
       const key = isNew ? '?new' : playlist.id;
       elements.push(
         <PlaylistItem