feat: improve dataset, rendering improvements

benyap · Jan 19, 2022 · 45b2a8f · 45b2a8f
1 parent 0c0b8f3
commit 45b2a8f
Show file tree

Hide file tree

Showing 33 changed files with 607,025 additions and 88,389 deletions.
diff --git a/data/categories.json b/data/categories.json
diff --git a/data/colors.json b/data/colors.json
diff --git a/src/renderer/data/part-colors.json → data/part-colors.json b/src/renderer/data/part-colors.json → data/part-colors.json
diff --git a/data/parts.json b/data/parts.json
diff --git a/electron-builder.yml b/electron-builder.yml
@@ -1,15 +1,22 @@
-appId: "com.benyap.brick-manager"
-productName: "Brick Manager"
+appId: com.benyap.brick-manager
+productName: Brick Manager
+
 directories:
   app: build
   output: dist
+
+extraResources:
+  - data
+
 mac:
   category: public.app-category.productivity
   target: dmg
   icon: assets/brick-manager.icns
+
 win:
   target: nsis
   icon: assets/brick-manager.ico
+
 nsis:
   installerIcon: assets/brick-manager.ico
   oneClick: false

diff --git a/package.json b/package.json
@@ -35,6 +35,7 @@
     "electron-util": "0.17.2",
     "fuse.js": "6.5.3",
     "jotai": "1.5.0",
+    "nanoid": "3.2.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-router": "6.2.1",

diff --git a/public/index.html b/public/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta
       http-equiv="Content-Security-Policy"
-      content="default-src 'self'; style-src 'self' 'sha256-deDIoPlRijnpfbTDYsK+8JmDfUBmpwpnb0L/SUV8NeU='; img-src https://cdn.rebrickable.com"
+      content="default-src 'self'; style-src 'self' 'sha256-deDIoPlRijnpfbTDYsK+8JmDfUBmpwpnb0L/SUV8NeU='; img-src https://cdn.rebrickable.com https://img.bricklink.com; connect-src http://www.bricklink.com https://www.bricklink.com"
     />
     <link href="styles.css" rel="stylesheet" />
     <title>Brick Manager</title>

diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
@@ -19,7 +19,7 @@ export function App() {
       <ResourceProvider loadingScreen={<SplashScreen />}>
         <Routes>
           <Route element={<SideBar />}>
-            <Route path="/" element={<DashboardView />}></Route>
+            <Route path="/" element={<DashboardView />} />
             <Route path="inventory" element={<InventoryView />}></Route>
             <Route path="builds" element={<BuildsView />}></Route>
             <Route path="database" element={<DatabaseView />}>

diff --git a/src/renderer/components/core/ResourceProvider/ResourceProvider.tsx b/src/renderer/components/core/ResourceProvider/ResourceProvider.tsx
@@ -64,6 +64,11 @@ export function ResourceProvider(props: ResourceProviderProps) {
     ]).then(() => setLoading(false));
   }, [state, minimumWait]);
 
+  useEffect(() => {
+    if (loading) return;
+    document.body.classList.add("ready");
+  }, [loading]);
+
   return (
     <ResourceContext.Provider value={state ?? {}}>
       <Transition

diff --git a/src/renderer/components/core/ResourceProvider/loaders/categories.ts b/src/renderer/components/core/ResourceProvider/loaders/categories.ts
@@ -1,10 +1,10 @@
 import Fuse from "fuse.js";
 
 import { ICategory } from "~/models";
+import { loadJSONData } from "~/utils/data";
 
 export async function loadCategories() {
-  const data = await import("~/data/categories.json");
-  const categories = data.default as ICategory[];
+  const categories = await loadJSONData<ICategory[]>("categories.json");
 
   const byId = categories.reduce((map, category) => {
     map[category.id] = category;

diff --git a/src/renderer/components/core/ResourceProvider/loaders/colors.ts b/src/renderer/components/core/ResourceProvider/loaders/colors.ts
@@ -1,25 +1,22 @@
 import Fuse from "fuse.js";
 
 import { IColor } from "~/models";
+import { loadJSONData } from "~/utils/data";
 import { keyBy } from "~/utils/transform";
 
-export function getTags({ externalIds, externalNames }: IColor) {
-  const { BrickLink: BrickLinkIds = [], LEGO: LEGOIds = [] } = externalIds;
-  const { BrickLink: BricklinkNames = [], LEGO: LEGONames = [] } = externalNames;
+export function getTags({ identifiers = {} }: IColor) {
+  const { BrickLink = [], LEGO = [] } = identifiers;
   return {
-    BrickLinkIds,
-    BricklinkNames,
-    LEGOIds,
-    LEGONames,
+    BrickLinkIds: BrickLink.map(({ id }) => id),
+    BricklinkNames: BrickLink.map(({ name }) => name),
+    LEGOIds: LEGO.map(({ id }) => id),
+    LEGONames: LEGO.map(({ name }) => name),
   };
 }
 
 export async function loadColors() {
-  const data = await import("~/data/colors.json");
-
-  const colors = data.default as IColor[];
+  const colors = await loadJSONData<IColor[]>("colors.json");
   const colorsById = keyBy(colors, "id");
-
   return {
     data: colors,
     byId: colorsById,

diff --git a/src/renderer/components/core/ResourceProvider/loaders/parts.ts b/src/renderer/components/core/ResourceProvider/loaders/parts.ts
@@ -1,23 +1,21 @@
 import Fuse from "fuse.js";
 
 import { IPart, IPartColors } from "~/models";
+import { loadJSONData } from "~/utils/data";
 import { keyBy } from "~/utils/transform";
 
-export function getTags({ name, externalIds }: IPart) {
-  const { BrickLink: BrickLinkIds = [], LEGO: LEGOIds = [] } = externalIds;
+export function getTags({ name, identifiers = {} }: IPart) {
+  const { BrickLink = [], LEGO = [] } = identifiers;
   return {
     name,
-    BrickLinkIds,
-    LEGOIds,
+    BrickLinkIds: BrickLink,
+    LEGOIds: LEGO,
   };
 }
 
 export async function loadParts() {
-  const partData = await import("~/data/parts.json");
-  const colorData = await import("~/data/part-colors.json");
-
-  const parts = partData.default as IPart[];
-  const colors = colorData.default as IPartColors[];
+  const parts = await loadJSONData<IPart[]>("parts.json");
+  const colors = await loadJSONData<IPartColors[]>("part-colors.json");
   const colorsByPartId = keyBy(colors, "partId");
 
   const partsWithColors = parts.map((part) => ({

diff --git a/src/renderer/components/elements/Tooltip/Tooltip.tsx b/src/renderer/components/elements/Tooltip/Tooltip.tsx
@@ -67,6 +67,7 @@ export function Tooltip(props: TooltipProps) {
   const tooltip = useRef<HTMLDivElement>(null);
 
   function showTooltip() {
+    if (!title) return;
     if (!tooltip.current || !target.current || !tooltip.current) return;
 
     tooltip.current.style.display = "block";

diff --git a/src/renderer/components/elements/VirtualizedList/VirtualizedList.tsx b/src/renderer/components/elements/VirtualizedList/VirtualizedList.tsx
@@ -2,6 +2,7 @@ import AutoSizer from "react-virtualized-auto-sizer";
 import { FixedSizeList, ListChildComponentProps } from "react-window";
 
 export interface VirtualizedListProps<T> {
+  listRef?: React.LegacyRef<FixedSizeList<T[]>>;
   data: T[];
   rowHeight: number;
   children: (props: ListChildComponentProps<T[]>) => JSX.Element;
@@ -15,11 +16,12 @@ export interface VirtualizedListProps<T> {
  * TODO: add better keyboard navigation support
  */
 export function VirtualizedList<T>(props: VirtualizedListProps<T>) {
-  const { data, rowHeight, children } = props;
+  const { listRef, data, rowHeight, children } = props;
   return (
     <AutoSizer>
       {({ width, height }) => (
         <FixedSizeList
+          ref={listRef}
           itemCount={data.length}
           itemData={data}
           itemSize={rowHeight}

diff --git a/src/renderer/components/views/DatabaseView/ColorsView/ColorItem.tsx b/src/renderer/components/views/DatabaseView/ColorsView/ColorItem.tsx
@@ -13,11 +13,11 @@ export function ColorItem(props: ListChildComponentProps<ColorItemProps[]>) {
   const { index, data, style } = props;
 
   const { color, onClick, compact } = data[index];
-  const { name, material, rgb, externalNames, externalIds } = color;
+  const { name, material, rgb, identifiers = {} } = color;
 
-  const bestName = externalNames.BrickLink?.[0] ?? externalNames.LEGO?.[0] ?? name;
-  const brickLinkId = externalIds.BrickLink?.[0];
-  const legoId = externalIds.LEGO?.[0];
+  const identifier = identifiers.BrickLink?.[0] ?? identifiers.LEGO?.[0];
+  const brickLinkId = identifiers.BrickLink?.[0].id;
+  const legoId = identifiers.LEGO?.[0].id;
 
   return (
     <div style={style} className="p-2">
@@ -51,7 +51,7 @@ export function ColorItem(props: ListChildComponentProps<ColorItemProps[]>) {
               "text-lg flex justify-between items-center": compact,
             })}
           >
-            <span>{bestName}</span>
+            <span>{identifier?.name ?? name}</span>
             {compact && (
               <span className="text-base font-normal text-lego-navy text-opacity-70 hidden lg:block">
                 {brickLinkId && (
@@ -74,7 +74,7 @@ export function ColorItem(props: ListChildComponentProps<ColorItemProps[]>) {
                   key={vendor}
                   className="text-lego-navy text-opacity-80 text-sm lg:text-base"
                 >
-                  <b>{vendor}</b>&nbsp;{externalIds[vendor]?.[0]}
+                  <b>{vendor}</b>&nbsp;{identifiers[vendor]?.[0].id}
                 </div>
               ))}
             </div>

diff --git a/src/renderer/components/views/DatabaseView/ColorsView/ColorPanel.tsx b/src/renderer/components/views/DatabaseView/ColorsView/ColorPanel.tsx
@@ -6,15 +6,15 @@ import PanelCloseButton from "~/components/core/PanelCloseButton";
 
 export interface ColorPanelProps {
   className?: string;
-  color?: IColor;
+  color?: IColor | null;
   onClose?: () => void;
 }
 
 export function ColorPanel(props: ColorPanelProps) {
   const { className, color, onClose } = props;
-  const { name, material, rgb, externalIds = {}, externalNames = {} } = color ?? {};
+  const { name, material, rgb, identifiers = {} } = color ?? {};
 
-  const bestName = externalNames?.BrickLink?.[0] ?? externalNames?.LEGO?.[0] ?? name;
+  const identifier = identifiers?.BrickLink?.[0] ?? identifiers?.LEGO?.[0];
 
   return (
     <div
@@ -28,7 +28,7 @@ export function ColorPanel(props: ColorPanelProps) {
         <div className="flex flex-col-reverse lg:flex-row justify-between">
           <div className="mb-4">
             <h2 className="font-bold text-4xl lg:text-5xl text-lego-navy mb-1">
-              {bestName}
+              {identifier?.name ?? name}
             </h2>
             <p className="text-lego-navy text-opacity-60 text-xl lg:text-2xl font-semibold">
               {rgb}
@@ -40,19 +40,11 @@ export function ColorPanel(props: ColorPanelProps) {
           />
         </div>
         <div className="grid gap-5">
-          {externalIds["BrickLink"] && (
-            <VendorIDDisplay
-              name="BrickLink"
-              ids={externalIds["BrickLink"]}
-              names={externalNames["BrickLink"]}
-            />
+          {identifiers?.BrickLink && (
+            <VendorIDs name="BrickLink" identifiers={identifiers.BrickLink} />
           )}
-          {externalIds["LEGO"] && (
-            <VendorIDDisplay
-              name="LEGO"
-              ids={externalIds["LEGO"]}
-              names={externalNames["LEGO"]}
-            />
+          {identifiers?.LEGO && (
+            <VendorIDs name="LEGO" identifiers={identifiers.LEGO} />
           )}
         </div>
       </div>
@@ -61,22 +53,25 @@ export function ColorPanel(props: ColorPanelProps) {
   );
 }
 
-function VendorIDDisplay(props: { name: string; ids?: string[]; names?: string[] }) {
-  const { name, ids, names } = props;
+function VendorIDs(props: {
+  name: string;
+  identifiers?: { id: string; name: string }[];
+}) {
+  const { name, identifiers } = props;
   return (
     <div>
       <h3 className="text-lego-navy text-opacity-90 font-semibold lg:text-lg lg:mb-1">
         {name} ID
       </h3>
       <table>
         <tbody>
-          {ids?.map((id, index) => (
+          {identifiers?.map(({ id, name }) => (
             <tr
               key={id}
               className="text-lego-navy text-opacity-90 text-sm lg:text-base"
             >
               <td className="min-w-[40px] lg:min-w-[48px]">{id}</td>
-              <td>{names?.[index]}</td>
+              <td>{name}</td>
             </tr>
           ))}
         </tbody>