refactor: use selector

Author: pd4d10

src/renderer/app.tsx

@@ -1,19 +1,14 @@
 import "./app.css";
 import { Header } from "./header";
 import { Session } from "./session";
-import { useSelector } from "./store";
+import { sessionSelector, useSelector } from "./store";
 import { Colors } from "@blueprintjs/core";
 import React from "react";
 import { useMedia } from "react-use";
 
 export const App: React.FC = () => {
   const darkMode = useMedia("(prefers-color-scheme: dark)");
-
-  const appState = useSelector((s) => s.app);
-  const sessionState = useSelector((s) => s.session);
-
-  const sessionEntries = Object.entries(sessionState);
-  console.log(appState, sessionState);
+  const sessionState = useSelector(sessionSelector);
 
   return (
     <div
@@ -27,7 +22,7 @@ export const App: React.FC = () => {
     >
       <Header />
       <div style={{ overflowY: "auto" }}>
-        {sessionEntries.length ? (
+        {Object.entries(sessionState).length ? (
           <Session />
         ) : (
           <div

src/renderer/header.tsx

@@ -1,5 +1,5 @@
 import defaultImage from "./images/electron.png";
-import { useDispatch, useSelector } from "./store";
+import { appSelector, useSelector } from "./store";
 import { noDragStyle } from "./utils";
 import {
   Button,
@@ -12,8 +12,7 @@ import { Select } from "@blueprintjs/select";
 import { type FC, useState } from "react";
 
 export const Header: FC = () => {
-  const dispatch = useDispatch();
-  const appState = useSelector((s) => s.app);
+  const appState = useSelector(appSelector);
   const [input, setInput] = useState("");
 
   return (

src/renderer/session.tsx

@@ -1,4 +1,4 @@
-import { useDispatch, useSelector } from "./store";
+import { appSelector, sessionSelector, useSelector } from "./store";
 import {
   Tabs,
   Tab,
@@ -12,9 +12,8 @@ import { useEffect, type FC, useState } from "react";
 
 export const Session: FC = () => {
   const [activeId, setActiveId] = useState("");
-  const dispatch = useDispatch();
-  // const appState = useSelector((s) => s.app);
-  const sessionState = useSelector((s) => s.session);
+  const appState = useSelector(appSelector);
+  const sessionState = useSelector(sessionSelector);
 
   useEffect(() => {
     const sessionIds = Object.keys(sessionState);
@@ -27,21 +26,19 @@ export const Session: FC = () => {
 
   return (
     <Tabs
-      vertical
       selectedTabId={activeId}
       onChange={(key) => {
         setActiveId(key as string);
       }}
     >
       {Object.entries(sessionState).map(([id, session]) => {
-        // const appInfo = appState.info[session.appId];
+        const appInfo = appState[session.appId];
 
         return (
           <Tab
             id={id}
             key={id}
-            // title={`${appInfo?.name} (${appInfo?.id})`}
-            title="session" // TODO:
+            title={`${appInfo?.name} (${appInfo?.id})`}
             panel={
               <div style={{ display: "flex", marginTop: -20 }}>
                 <div>

src/renderer/store.ts

@@ -1,9 +1,5 @@
-import { reducer, type Action, type State } from "../reducer";
-import {
-  applyMiddleware,
-  legacy_createStore,
-  type Dispatch,
-} from "@reduxjs/toolkit";
+import { reducer, type State } from "../reducer";
+import { applyMiddleware, legacy_createStore } from "@reduxjs/toolkit";
 import { composeWithStateSync } from "electron-redux/renderer";
 import * as rr from "react-redux";
 
@@ -12,5 +8,6 @@ export const store = legacy_createStore(
   composeWithStateSync(applyMiddleware()),
 );
 
-export const useDispatch = rr.useDispatch.withTypes<Dispatch<Action>>();
 export const useSelector = rr.useSelector.withTypes<State>();
+export const appSelector = (s: State) => s.app;
+export const sessionSelector = (s: State) => s.session;