fix: correct undefined errors (#9)

* fix: explicitly check fetch result, because it doesn't throw an Exception on HTTP errors. * refactor: simplify internal components into one list component * refactor: use material-ui css shorthands * docs: fix typo
TeamWertarbyte · Aug 5, 2024 · 53471ec · 53471ec
1 parent 4f149b4
commit 53471ec
Show file tree

Hide file tree

Showing 10 changed files with 110 additions and 120 deletions.
diff --git a/README.md b/README.md
@@ -100,7 +100,7 @@ The library can be easily testet in dev mode via the provided 'dev' script and A
 
 ```
 # npm
-npm run rev
+npm run dev
 
 # yarn
 yarn dev

diff --git a/lib/changelog.hook.ts b/lib/changelog.hook.ts
@@ -40,6 +40,11 @@ export function useChangelogs(config: UpdateHiveConfig): UpdateHiveHookResult {
         },
       });
 
+      if (!result.ok) {
+        const error = await result.json();
+        throw new Error(error.message);
+      }
+
       setData(await result.json());
     } catch (error) {
       if (error instanceof Error) {

diff --git a/lib/components/ChangelogContainer/index.tsx b/lib/components/ChangelogContainer/index.tsx
@@ -57,14 +57,12 @@ export const ChangelogContainer: React.FC<Props> = ({
   }
 
   return (
-    <div>
-      <ChangelogContext.Provider value={{ data }}>
-        {errorMessage && <Error error={errorMessage} />}
-        {!errorMessage && loading && <Loading />}
-        {!errorMessage && !loading && data && (
-          <CssVarsProvider>{children}</CssVarsProvider>
-        )}
-      </ChangelogContext.Provider>
-    </div>
+    <ChangelogContext.Provider value={{ data }}>
+      {errorMessage && <Error error={errorMessage} />}
+      {!errorMessage && loading && <Loading />}
+      {!errorMessage && !loading && data && (
+        <CssVarsProvider>{children}</CssVarsProvider>
+      )}
+    </ChangelogContext.Provider>
   );
 };
diff --git a/lib/components/ChangelogList/ChangelogList.tsx b/lib/components/ChangelogList/ChangelogList.tsx
@@ -1,10 +1,17 @@
 import * as React from 'react';
 import { useUpdateHiveContext } from '../ChangelogContext';
 import { ChangeType } from '../../changelog.types.ts';
-import { ChangeTypeMap, getTypeColor } from '../changelog.util.ts';
+import {
+  ChangelogWithComponents,
+  ChangeTypeMap,
+  getTypeColor,
+  groupChangelogsByComponents,
+  reorderChangelogs,
+  ungroupedChangelogs,
+} from '../changelog.util.ts';
 import ComponentList from './_internal/ComponentList.tsx';
-import SimpleList from './_internal/SimpleList.tsx';
 import { GroupBy } from './ChangelogList.types.ts';
+import { useMemo } from 'react';
 
 interface Props {
   groupBy?: GroupBy;
@@ -27,18 +34,30 @@ export const ChangelogList: React.FC<Props> = ({
 }) => {
   const { data } = useUpdateHiveContext();
 
+  const componentChangelogs: ChangelogWithComponents[] | undefined =
+    useMemo(() => {
+      if (!data) {
+        return undefined;
+      }
+
+      const reorderedChangelogs = reorderChangelogs(data);
+
+      if (groupBy === GroupBy.NONE) {
+        return ungroupedChangelogs(reorderedChangelogs);
+      }
+
+      return groupChangelogsByComponents(reorderedChangelogs);
+    }, [data, groupBy]);
+
   return (
-    <div>
-      {data &&
-        (groupBy === GroupBy.COMPONENT ? (
-          <ComponentList
-            changelogs={data}
-            changeTypeMapper={changeTypeMapper}
-            typeColorResolver={typeColorResolver}
-          />
-        ) : (
-          <SimpleList changelogs={data} changeTypeMapper={changeTypeMapper} />
-        ))}
-    </div>
+    <>
+      {componentChangelogs && (
+        <ComponentList
+          changelogs={componentChangelogs}
+          changeTypeMapper={changeTypeMapper}
+          typeColorResolver={typeColorResolver}
+        />
+      )}
+    </>
   );
 };
diff --git a/lib/components/ChangelogList/MinimalChangelogList.tsx b/lib/components/ChangelogList/MinimalChangelogList.tsx
@@ -1,8 +1,15 @@
 import * as React from 'react';
 import { useUpdateHiveContext } from '../ChangelogContext';
-import { ChangeTypeMap } from '../changelog.util.ts';
+import {
+  ChangelogWithComponents,
+  ChangeTypeMap,
+  getTypeColor,
+  reorderChangelogs,
+  ungroupedChangelogs,
+} from '../changelog.util.ts';
 import { ChangeType } from '../../changelog.types.ts';
-import SimpleList from './_internal/SimpleList.tsx';
+import { useMemo } from 'react';
+import ComponentList from './_internal/ComponentList.tsx';
 
 interface Props {
   changeTypeMapper?: Record<ChangeType, string>;
@@ -20,11 +27,25 @@ export const MinimalChangelogList: React.FC<Props> = ({
 }) => {
   const { data } = useUpdateHiveContext();
 
+  const componentChangelogs: ChangelogWithComponents[] | undefined =
+    useMemo(() => {
+      if (!data) {
+        return undefined;
+      }
+
+      const reorderedChangelogs = reorderChangelogs(data);
+      return ungroupedChangelogs(reorderedChangelogs);
+    }, [data]);
+
   return (
-    <div>
-      {data && (
-        <SimpleList changeTypeMapper={changeTypeMapper} changelogs={data} />
+    <>
+      {componentChangelogs && (
+        <ComponentList
+          changelogs={componentChangelogs}
+          changeTypeMapper={changeTypeMapper}
+          typeColorResolver={getTypeColor}
+        />
       )}
-    </div>
+    </>
   );
 };
diff --git a/lib/components/ChangelogList/_internal/ComponentList.tsx b/lib/components/ChangelogList/_internal/ComponentList.tsx
@@ -1,15 +1,10 @@
 import { Box, List, ListItem, Typography } from '@mui/joy';
 import * as React from 'react';
-import { Changelog, ChangeType } from '../../../changelog.types.ts';
-import { useMemo } from 'react';
-import {
-  ChangelogWithComponents,
-  groupChangelogsByComponents,
-  reorderChangelogs,
-} from '../../changelog.util.ts';
+import { ChangeType } from '../../../changelog.types.ts';
+import { ChangelogWithComponents } from '../../changelog.util.ts';
 
 interface Props {
-  changelogs: Changelog[];
+  changelogs: ChangelogWithComponents[];
   changeTypeMapper: Record<ChangeType, string>;
   typeColorResolver: (type: ChangeType) => string;
 }
@@ -19,42 +14,37 @@ const ComponentList: React.FC<Props> = ({
   changeTypeMapper,
   typeColorResolver,
 }) => {
-  const componentChangelogs: ChangelogWithComponents[] = useMemo(() => {
-    const reorderedChangelogs = reorderChangelogs(changelogs);
-    return groupChangelogsByComponents(reorderedChangelogs);
-  }, [changelogs]);
-
   return (
-    <div>
-      {componentChangelogs.map((changelog, index) => (
-        <div key={`changelog-${index}`}>
-          <Box sx={() => ({ marginBottom: '8px' })}>
-            <Typography level="h3" sx={() => ({ marginRight: '8px' })}>
+    <>
+      {changelogs.map((changelog, index) => (
+        <div key={`changelogs-${index}`}>
+          <Box sx={() => ({ mb: 1 })}>
+            <Typography level="h3" sx={() => ({ mr: 1 })}>
               Version {changelog.version}
             </Typography>
             {changelog.description && (
               <Typography>{changelog.description}</Typography>
             )}
           </Box>
           {changelog.entries.map((entry) => (
-            <>
-              <Typography level="title-lg">{entry.component}</Typography>
+            <div key={`changelogs-${index}-components-${entry.component}`}>
+              {entry.component && (
+                <Typography level="title-lg">{entry.component}</Typography>
+              )}
               <List
                 marker={'circle'}
                 sx={() => ({ '--ListItem-minHeight': 20 })}
               >
                 {entry.changelogs.map((entry, entryIndex) => (
                   <ListItem
-                    sx={() => ({
-                      padding: '0px',
-                    })}
-                    key={`changelog-${index}-entry-${entryIndex}`}
+                    sx={() => ({ p: 0 })}
+                    key={`changelogs-${changelog.version}-entry-${entryIndex}`}
                   >
                     <Box sx={() => ({ display: 'flex', flexDirection: 'row' })}>
                       <Typography
                         level="title-sm"
                         sx={() => ({
-                          marginRight: '8px',
+                          mr: 1,
                           color: typeColorResolver(entry.changeType),
                         })}
                       >
@@ -67,11 +57,11 @@ const ComponentList: React.FC<Props> = ({
                   </ListItem>
                 ))}
               </List>
-            </>
+            </div>
           ))}
         </div>
       ))}
-    </div>
+    </>
   );
 };
 

diff --git a/lib/components/ChangelogList/_internal/SimpleList.tsx b/lib/components/ChangelogList/_internal/SimpleList.tsx
diff --git a/lib/components/changelog.util.ts b/lib/components/changelog.util.ts
@@ -42,7 +42,19 @@ export interface ChangelogWithComponents {
   entries: ComponentEntries[];
 }
 
-export const groupChangelogsByComponents = (changelogs: Changelog[]) => {
+export const ungroupedChangelogs = (
+  changelogs: Changelog[],
+): ChangelogWithComponents[] => {
+  return changelogs.map((changelog) => ({
+    version: changelog.version,
+    description: changelog.description,
+    entries: [{ component: '', changelogs: changelog.entries }],
+  }));
+};
+
+export const groupChangelogsByComponents = (
+  changelogs: Changelog[],
+): ChangelogWithComponents[] => {
   const mapped: ChangelogWithComponents[] = [];
 
   changelogs.forEach((changelog: Changelog) => {
@@ -57,7 +69,7 @@ export const groupChangelogsByComponents = (changelogs: Changelog[]) => {
 };
 
 export interface ComponentEntries {
-  component: string;
+  component?: string;
   changelogs: ChangelogEntryInterface[];
 }
 

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,14 +1,14 @@
 import * as React from 'react';
 import {
-  useChangelogs,
   ChangelogContainer,
   ChangelogList,
+  useChangelogs,
 } from '../dist/updatehive-react';
 
 export const App: React.FC = () => {
-  const API_KEY = import.meta.env.VITE_UPDATEHIVE_API_KEY;
-  const PRODUCT = import.meta.env.VITE_UPDATEHIVE_PRODUCT;
-  const serviceURL = import.meta.env.VITE_UPDATEHIVE_URL;
+  const API_KEY = import.meta.env.VITE_UPDATEHIVE_API_KEY as string;
+  const PRODUCT = import.meta.env.VITE_UPDATEHIVE_PRODUCT as string;
+  const serviceURL = import.meta.env.VITE_UPDATEHIVE_URL as string;
 
   const { loading, error, data } = useChangelogs({
     connection: {
@@ -29,7 +29,7 @@ export const App: React.FC = () => {
       <h1>UpdateHive - React Client Component</h1>
       <h3>Example using UpdateHive react hook</h3>
       <div>
-        {loading || data === undefined ? (
+        {loading || error || data === undefined ? (
           <div>Loading changelogs ...</div>
         ) : (
           <div>

diff --git a/tsconfig.json b/tsconfig.json
@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "ES2020",
     "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable", "ESNext.Array"],
+    "lib": ["ES2023", "DOM", "DOM.Iterable", "ES2023.Array"],
     "module": "ESNext",
     "skipLibCheck": true,
-Original file line number
+Diff line change
@@ Expand Up @@
     ```
     # npm
-    npm run rev
+    npm run dev
     # yarn
     yarn dev
@@ Expand Down @@