Merge pull request #230 from NDLANO/bump-node-types

Bump node types to 20

README.md

@@ -4,7 +4,7 @@
 
 ## Requirements
 
-- Node.JS 18
+- Node.JS > 20.6.0
 - yarn ~1.15.0
 - Docker (optional)
 

package.json

@@ -45,7 +45,7 @@
     "@types/express": "^4.17.13",
     "@types/jest": "^29.2.4",
     "@types/lodash": "^4.14.191",
-    "@types/node": "^18.11.15",
+    "@types/node": "^20.9.2",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.13",
     "@types/remarkable": "^2.0.3",

src/containers/ListingPage/ListingContainer.tsx

@@ -9,7 +9,7 @@ import { useState, useEffect, useCallback } from 'react';
 import { gql, useQuery } from '@apollo/client';
 
 import { useTranslation } from 'react-i18next';
-import ListingView from './ListingView';
+import ListingView, { ListItemType } from './ListingView';
 import useQueryParameter from '../../util/useQueryParameter';
 import { getTagsParameter } from '../../util/listingHelpers';
 import { Filter, ListItem } from '../../interfaces';
@@ -74,7 +74,7 @@ const ListingContainer = ({ isOembed, subjects, tags, filters }: Props) => {
     notifyOnNetworkStatusChange: true, // For spinner on load more
   });
 
-  const handleSelectItem = (value: ListItem | null): void => {
+  const handleSelectItem = (value: ListItemType | null): void => {
     setQueryParams({
       ...queryParams,
       concept: value?.id,

src/containers/ListingPage/ListingView.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { ChangeEvent, useState } from 'react';
+import { ChangeEvent, ComponentProps, useState } from 'react';
 import { Helmet } from 'react-helmet-async';
 import { useLocation } from 'react-router-dom';
 import { Remarkable } from 'remarkable';
@@ -132,6 +132,12 @@ const formatToSubjectFiltersQuery = (subjectFilters: string[]): string => {
 
 type ViewStyle = 'grid' | 'list';
 
+export type ListItemType = Parameters<
+  ComponentProps<typeof ListView>['onSelectItem']
+>[0];
+
+type FilterType = ComponentProps<typeof ListView>['filters'];
+
 interface Props {
   isOembed: boolean;
   loading: boolean;
@@ -149,7 +155,7 @@ interface Props {
   searchValue: string;
   setSearchValue: (value: string) => void;
   onLoadMoreClick: () => void;
-  handleSelectItem: (value: ListItem | null) => void;
+  handleSelectItem: (value: ListItemType | null) => void;
   handleChangeListFilter: (
     selectedItem: string | null,
     stateAndHelpers: ControllerStateAndHelpers<string>,
@@ -185,7 +191,6 @@ const ListingView = ({
   const location = useLocation();
   const [filterSearchValue, setFilterSearchValue] = useState('');
   const [currentListFilters, setCurrentListFilters] = useState<string[]>([]);
-  const [detailedItem, setDetailedItem] = useState(null);
   const [viewStyle, setViewStyle] = useState<ViewStyle>('grid');
   const { t, i18n } = useTranslation();
 
@@ -230,17 +235,19 @@ const ListingView = ({
     placeholder: t(`listview.filters.category.openFilter`),
   };
 
-  const getFilters = (): object[] => {
+  const getFilters = (): FilterType => {
     if (selectedListFilter) {
       const mainOptions = filters[selectedListFilter]?.main.map(filter => ({
         title: filter,
         value: filter,
         disabled: !listItems.some(item => item.filters.includes(filter)),
+        icon: () => null,
       }));
       const subOptions = filters[selectedListFilter]?.sub.map(filter => ({
         title: filter,
         value: filter,
         disabled: !listItems.some(item => item.filters.includes(filter)),
+        icon: () => null,
       }));
 
       return [
@@ -395,8 +402,6 @@ const ListingView = ({
             disableSearch={isOembed}
             disableViewOption={isOembed}
             items={listItems}
-            detailedItem={detailedItem}
-            selectCallback={setDetailedItem}
             viewStyle={viewStyle}
             onChangedViewStyle={(e: { viewStyle: ViewStyle }): void =>
               setViewStyle(e.viewStyle)

src/util/apiHelpers.ts

@@ -22,7 +22,8 @@ import config from '../config';
 const __CLIENT__ = process.env.BUILD_TARGET === 'client'; //eslint-disable-line
 
 declare global {
-  let __SERVER__: boolean;
+  // eslint-disable-next-line no-var
+  var __SERVER__: boolean;
 }
 const NDLA_API_URL = global.__SERVER__
   ? config.ndlaApiUrl

tsconfig.json

@@ -28,8 +28,7 @@
       "@emotion/styled",
       "jest",
       "node",
-      "webpack-env",
-      "@testing-library/jest-dom"
+      "webpack-env"
     ],
     "paths": {
       "*": ["node_modules/*", "src/types/*"]