Create structure for select user account

package.json

@@ -23,11 +23,15 @@
     "start:main": "cross-env NODE_ENV=development electronmon -r ts-node/register/transpile-only .",
     "start:preload": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.preload.dev.ts",
     "start:renderer": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack serve --config ./.erb/configs/webpack.config.renderer.dev.ts",
-    "test": "jest"
+    "test": "jest",
+    "lint": "cross-env NODE_ENV=development eslint --cache",
+    "check-ts": "bash -c tsc --noEmit"
   },
   "lint-staged": {
-    "*.{js,jsx,ts,tsx}": [
-      "cross-env NODE_ENV=development eslint --cache"
+    "*.{ts,tsx}": [
+      "npm run lint",
+      "npm run check-ts",
+      "prettier --write"
     ],
     "*.json,.{eslintrc,prettierrc}": [
       "prettier --ignore-path .eslintignore --parser json --write"

src/renderer/App.tsx

@@ -8,6 +8,7 @@ import ConfigureAssets from 'renderer/pages/configure-assets/ConfigureAssets.com
 import {INITIAL_STATE, reducer} from 'renderer/reducer'
 import {getRoutePath} from 'renderer/route'
 import SaveShortcut from 'renderer/pages/save-shortcut/SaveShortcut.component'
+import SelectUserAccount from 'renderer/pages/select-user-account/SelectUserAccount'
 
 export default function App() {
 	const [state, dispatch] = useReducer(reducer, INITIAL_STATE)
@@ -19,6 +20,7 @@ export default function App() {
 					<Router>
 						<Routes>
 							<Route path={getRoutePath(ERoute.SETUP)} element={<Setup />} />
+							<Route path={getRoutePath(ERoute.SELECT_ACCOUNT)} element={<SelectUserAccount />} />
 							<Route path={getRoutePath(ERoute.CONFIGURE_ASSETS)} element={<ConfigureAssets />} />
 							<Route path={getRoutePath(ERoute.SAVE)} element={<SaveShortcut />} />
 						</Routes>

src/renderer/api/steam-grid.api.ts

@@ -6,7 +6,6 @@ import ESteamGridAssetType from 'renderer/enums/ESteamGridAssetType'
 import EAssetType from 'renderer/enums/EAssetType'
 import TGameAssetCollection from 'renderer/types/TGameAssetCollection'
 import TBaseApiSteamGrid from 'renderer/types/TBaseApiSteamGrid'
-import {AxiosError} from 'axios'
 
 export const LOCAL_STORAGE_STEAM_GRID_API_KEY = 'steam-grid-api-key'
 

src/renderer/enums/ERoute.ts

@@ -1,5 +1,6 @@
 enum ERoute {
 	SETUP = 'SETUP',
+	SELECT_ACCOUNT = 'SELECT_ACCOUNT',
 	CONFIGURE_ASSETS = 'CONFIGURE_ASSETS',
 	SAVE = 'SAVE'
 }

src/renderer/hooks/useSteamUserId.tsx

@@ -0,0 +1,10 @@
+import {useContext} from 'react'
+import {CommonContext} from 'renderer/context'
+
+const useSteamUserId = () => {
+	const {steamUserId} = useContext(CommonContext)
+
+	return steamUserId
+}
+
+export default useSteamUserId

src/renderer/pages/configure-assets/ConfigureAssets.component.tsx

@@ -72,7 +72,7 @@ const ConfigureAssets = () => {
 		void fetchGameAssets({start: 0, end: ITEMS_PER_PAGE})
 	})
 
-	const onBack = useCallback(() => navigate(getRoutePath(ERoute.SETUP)), [navigate])
+	const onBack = useCallback(() => navigate(getRoutePath(ERoute.SELECT_ACCOUNT)), [navigate])
 	const onSave = useCallback(() => navigate(getRoutePath(ERoute.SAVE)), [navigate])
 
 	const onChangePage = useCallback(

src/renderer/pages/save-shortcut/SaveShortcut.component.tsx

@@ -15,6 +15,7 @@ import {getFileExtension} from 'renderer/utils/files'
 import {useState} from 'react'
 import Page from 'renderer/uikit/page/Page.component'
 import styles from './SaveShortcut.module.scss'
+import useSteamUserId from 'renderer/hooks/useSteamUserId'
 
 enum EStep {
 	DOWNLOAD_ASSETS = 'Downloading assets',
@@ -32,6 +33,7 @@ const PROMISE_THROTTLE = new PromiseThrottle({
 const SaveShortcut = () => {
 	const [step, setStep] = useState(EStep.DOWNLOAD_ASSETS)
 	const apiKey = useSteamGridApiKey()
+	const steamUserId = useSteamUserId()
 	const games = useGames()
 
 	const addToLog = (message: string, color = 'white') => {
@@ -50,13 +52,13 @@ const SaveShortcut = () => {
 			for (const assetType of Object.keys(EAssetType) as EAssetType[]) {
 				const selectedAsset = getSelectedAsset({assets: game.assets?.[assetType] ?? []})
 
-				if (selectedAsset) {
+				if (selectedAsset && steamUserId) {
 					const assetExtension = getFileExtension(selectedAsset.mime)
 					const fileName = getAssetFileName(game.id, assetExtension)[assetType]
 					await Electron.ipcRenderer.invoke(EChannel.DOWNLOAD_ASSET, {
 						url: selectedAsset.url,
 						fileName,
-						directory: getSteamGridAssetsFolderPath('48553049')
+						directory: getSteamGridAssetsFolderPath(steamUserId)
 					})
 					addToLog(
 						`Downloaded: ${game.name} / ${assetType.toLocaleLowerCase()} - ${fileName} - ${selectedAsset.url}`,
@@ -80,12 +82,15 @@ const SaveShortcut = () => {
 	}
 
 	const saveShortcuts = async () => {
-		const shortcutsObject = (await getSteamShortcuts()) as {shortcuts: {[id: string]: VdfMap}}
+		if (!steamUserId) {
+			throw Error('Steam user Id not provided.')
+		}
+		const shortcutsObject = (await getSteamShortcuts({steamUserId})) as {shortcuts: {[id: string]: VdfMap}}
 
 		for (const game of games) {
 			const selectedIcon = getSelectedAsset({assets: game.assets?.ICON ?? []})
 			const iconFileExtension = getFileExtension(selectedIcon?.mime ?? '')
-			const iconPath = `${getSteamGridAssetsFolderPath('48553049')}/${
+			const iconPath = `${getSteamGridAssetsFolderPath(steamUserId)}/${
 				getAssetFileName(game.id, iconFileExtension).ICON
 			}`
 			const shortcutValue = {
@@ -104,7 +109,7 @@ const SaveShortcut = () => {
 				shortcutsObject.shortcuts[shortcutsValue.length] = shortcutValue
 			}
 		}
-		await saveSteamShortcuts(shortcutsObject)
+		await saveSteamShortcuts({shortcuts: shortcutsObject, steamUserId})
 		console.log({shortcutsObject})
 		addToLog('Saving shortcut.vdf to Steam folder.', PRIMARY_LOG_COLOR)
 	}

src/renderer/pages/select-user-account/SelectUserAccount.tsx

@@ -0,0 +1,35 @@
+import {useCallback} from 'react'
+import {useNavigate} from 'react-router-dom'
+import ERoute from 'renderer/enums/ERoute'
+import {getRoutePath} from 'renderer/route'
+import Button, {EButtonVariant} from 'renderer/uikit/button/Button.component'
+import PageFooter from 'renderer/uikit/page/footer/PageFooter.component'
+import Page from 'renderer/uikit/page/Page.component'
+
+const SelectUserAccount = () => {
+	const navigate = useNavigate()
+
+	const onBack = useCallback(() => navigate(getRoutePath(ERoute.SETUP)), [navigate])
+	const onNext = useCallback(() => navigate(getRoutePath(ERoute.CONFIGURE_ASSETS)), [navigate])
+
+	return (
+		<Page
+			title='User Configuration'
+			subtitle='Choose user account:'
+			footerComponent={
+				<PageFooter
+					leadingComponent={
+						<Button onClick={onBack} variant={EButtonVariant.SECONDARY}>
+							Back
+						</Button>
+					}
+					trailingComponent={<Button onClick={onNext}>Next</Button>}
+				/>
+			}
+		>
+			<span>OI</span>
+		</Page>
+	)
+}
+
+export default SelectUserAccount

src/renderer/pages/setup/Setup.component.tsx

@@ -49,7 +49,7 @@ const Setup = () => {
 			type: EAction.SET_GAMES,
 			payload: games
 		})
-		navigate(getRoutePath(ERoute.CONFIGURE_ASSETS))
+		navigate(getRoutePath(ERoute.SELECT_ACCOUNT))
 	}, [dispatch, selectMultipleFiles, navigate])
 
 	const setEmuDeckGames = useCallback(async () => {

src/renderer/pages/setup/about-modal/AboutModal.component.tsx

@@ -1,4 +1,4 @@
-import Modal, {TModalProps} from 'renderer/uikit/modal/Modal.component'
+import Modal from 'renderer/uikit/modal/Modal.component'
 import styles from './AboutModal.module.scss'
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
 import {faBug} from '@fortawesome/free-solid-svg-icons'
@@ -18,7 +18,7 @@ const SUPPORT_CONFIG: Array<{label: string; icon?: IconProp; image?: string; lin
 	}
 ]
 
-const AboutModal = ({isOpened, onClose}: TModalProps) => (
+const AboutModal = ({isOpened, onClose}: {isOpened: boolean; onClose: () => void}) => (
 	<Modal className={styles['about-modal']} isOpened={isOpened} title={'Steam Deck Roommate'} onClose={onClose}>
 		<span>The ultimate rom manager for Steam Deck users.</span>
 		<span className={styles.contribute}>Contribute:</span>

src/renderer/pages/setup/steam-grid-key-modal/SteamGridKeyModal.component.tsx

@@ -1,15 +1,20 @@
 import {useCallback, useState} from 'react'
 import {getGameIdByName} from 'renderer/api/steam-grid.api'
 import Button from 'renderer/uikit/button/Button.component'
-import Modal, {TModalProps} from 'renderer/uikit/modal/Modal.component'
+import Modal from 'renderer/uikit/modal/Modal.component'
 import styles from './SteamGridKeyModal.module.scss'
 
 const SteamGridKeyModal = ({
 	isOpened,
 	isCloseable,
 	onSave,
 	onClose
-}: {onSave: (apiKey: string) => void} & TModalProps) => {
+}: {
+	onSave: (apiKey: string) => void
+	isOpened: boolean
+	isCloseable: boolean
+	onClose: () => void
+}) => {
 	const [apiKey, setApiKey] = useState<string | undefined>('')
 	const [errorMessage, setErrorMessage] = useState<string | undefined>()
 

src/renderer/reducer/index.ts

@@ -6,6 +6,7 @@ import TGame from 'renderer/types/TGame'
 
 export type TCommonState = {
 	games: TGame[]
+	steamUserId?: string | null
 	setupFlow?: ESetup
 	steamGridApiKey?: string | null
 }
@@ -19,7 +20,8 @@ export enum EAction {
 	SET_SETUP_FLOW = 'SET_SETUP_FLOW',
 	SET_GAMES = 'SET_GAMES',
 	SET_STEAM_GRID_API_KEY = 'SET_STEAM_GRID_API_KEY',
-	SELECT_ASSET = 'SELECT_ASSET'
+	SELECT_ASSET = 'SELECT_ASSET',
+	SET_STEAM_USER_ID = 'SET_STEAM_USER_ID'
 }
 
 export type TAction =
@@ -30,6 +32,7 @@ export type TAction =
 	| {type: EAction.SET_GAMES; payload: TGame[]}
 	| {type: EAction.SET_STEAM_GRID_API_KEY; payload: string}
 	| {type: EAction.SELECT_ASSET; payload: {gameId: string; assetType: EAssetType; assetId: number}}
+	| {type: EAction.SET_STEAM_USER_ID; payload: string}
 
 export const reducer = (state: TCommonState, action: TAction): TCommonState => {
 	switch (action.type) {
@@ -40,6 +43,8 @@ export const reducer = (state: TCommonState, action: TAction): TCommonState => {
 		case EAction.SET_STEAM_GRID_API_KEY:
 			localStorage.setItem(LOCAL_STORAGE_STEAM_GRID_API_KEY, action.payload)
 			return {...state, steamGridApiKey: action.payload}
+		case EAction.SET_STEAM_USER_ID:
+			return {...state, steamUserId: action.payload}
 		case EAction.SELECT_ASSET: {
 			const {gameId, assetType, assetId} = action.payload
 			const modifiedGame = state.games.find((game) => game.id === gameId)

src/renderer/route/index.ts

@@ -4,6 +4,9 @@ const ROUTE_CONFIG: {[route in ERoute]: {path: string}} = {
 	[ERoute.SETUP]: {
 		path: '/'
 	},
+	[ERoute.SELECT_ACCOUNT]: {
+		path: '/select-account'
+	},
 	[ERoute.CONFIGURE_ASSETS]: {
 		path: '/configure-assets'
 	},

src/renderer/utils/steam-shortcuts.ts

@@ -12,14 +12,13 @@ const getShortcutsPath = (steamId: string): string => {
 	return path.join(homedir(), `.steam/steam/userdata/${steamId}/config/shortcuts.vdf`)
 }
 
-export const getSteamShortcuts = async (): Promise<VdfMap> => {
-	const buffer = await getBufferFileData(getShortcutsPath('48553049'))
+export const getSteamShortcuts = async ({steamUserId}: {steamUserId: string}): Promise<VdfMap> => {
+	const buffer = await getBufferFileData(getShortcutsPath(steamUserId))
 	return readVdf(buffer)
 }
 
-export const saveSteamShortcuts = async (shortcuts: VdfMap) => {
+export const saveSteamShortcuts = async ({shortcuts, steamUserId}: {shortcuts: VdfMap; steamUserId: string}) => {
 	const outBuffer = writeVdf(shortcuts)
 
-	await fsPromise.writeFile(getShortcutsPath('48553049'), outBuffer)
-	console.log('File saved')
+	await fsPromise.writeFile(getShortcutsPath(steamUserId), outBuffer)
 }

tsconfig.json

@@ -13,7 +13,8 @@
     "allowSyntheticDefaultImports": true,
     "resolveJsonModule": true,
     "allowJs": true,
-    "outDir": ".erb/dll"
+    "outDir": ".erb/dll",
+    "skipLibCheck": true
   },
   "exclude": ["test", "release/build", "release/app/dist", ".erb/dll"]
 }