More fixes for README and small lint fixes (#3472)

* Small lints from ts5 branch

* Fix website README

* Update scraper README

Author: ZhangYiJiang

export/src/data.ts

@@ -43,7 +43,9 @@ export async function getModules(moduleCodes: string[]) {
 export const parseExportData: Middleware<State> = (ctx, next) => {
   if (ctx.query.data) {
     try {
-      // @ts-expect-error: type string[] is not assignable to type string
+      if (typeof ctx.query.data !== 'string') {
+        throw new Error(`Expected query.data to be string, got ${typeof ctx.query.data}`);
+      }
       const data = JSON.parse(ctx.query.data);
       validateExportData(data);
       ctx.state.data = data;

scrapers/nus-v2/README.md

@@ -6,7 +6,7 @@ This folder contains the scraper which produces our [v2 API data][api-v2] from i
 
 ## Getting Started
 
-Node LTS is required. We use Node 16 in production.
+Node LTS is required. We use Node 18 in production.
 
 Use `yarn` to install dependencies, then set up `env.json` with all the necessary keys and API base URL, then run the test script to check the setup is okay.
 

website/README.md

@@ -44,7 +44,7 @@ We recommend the following development tools to help speed up your work
 
 ### Writing styles
 
-We uses [CSS Modules][css-modules] to structure styles. This means that with the exception of a few global styles, styles for each component lives beside their source files (see [colocation](#colocation)). This allows us to write short, semantic names for styles without worrying about collision.
+We use [CSS Modules][css-modules] to structure styles. This means that except for a few global styles, styles for each component lives beside their source files (see [colocation](#colocation)). This allows us to write short, semantic names for styles without worrying about collision.
 
 ```scss
 // MyComponent.scss
@@ -66,7 +66,7 @@ import "~styles/utils/modules-entry"; // Import variables, mixins
 }
 ```
 
-```ts
+```tsx
 // MyComponent.tsx
 import styles from './MyComponent.scss';
 
@@ -86,23 +86,23 @@ Currently CSS variables are used only for colors that change under night mode.
 
 Prefer SVG when possible. SVG images are usually smaller and more flexible. `.svg` files are loaded using [SVGR][svgr] as React components - this means you can add classnames, inline styles and other SVG attributes to the component loaded. SVGR also automatically optimizes the image.
 
-```js
+```tsx
 import CloudyIcon from 'img/weather/cloudy.svg';
 
 const cloud = <CloudyIcon className={styles.myIcon} />;
 ```
 
 PNG, JPEG and GIF files will be loaded using `url-loader` and can be imported as a string representing the URL of the asset after bundling. In production files smaller than 15kb will be converted into data URL
 
-```js
+```tsx
 import partyParrot from 'img/gif/partyparrot.gif';
 
 const danceParty = <img src={partyParrot} alt=":partyparrot:" />;
 ```
 
 To load SVG as files using `url-loader` instead, add the `?url` resource query to the end of the path.
 
-```js
+```ts
 import { Icon } from 'leaflet';
 // eslint-disable-next-line import/extensions
 import marker from 'img/marker.svg?url';
@@ -127,7 +127,7 @@ To write an action that makes a request, simple call and return the result from
 
 **Example**
 
-```js
+```ts
 import { requestAction } from 'actions/requests';
 
 export const FETCH_DATA = 'FETCH_DATA';
@@ -144,7 +144,7 @@ Components should dispatch the action to fetch data. The dispatch function retur
 
 **Example**
 
-```js
+```tsx
 import { fetchData } from 'actions/example';
 
 type Props = {
@@ -164,7 +164,7 @@ class MyComponent extends React.Component<Props, State> {
   componentDidMount() {
     this.props.fetchData()
       .then(data => this.setState({ data }))
-      .catch(error => this.setState({ error });
+      .catch(error => this.setState({ error }));
   }
 
   render() {
@@ -213,7 +213,7 @@ export function exampleBank(state: ExampleBank, action: FSA): ExampleBank {
 
 **Component example**
 
-```ts
+```tsx
 type Props = {
   myData: MyData | null,
   fetchData: () => Promise<MyData>,
@@ -226,7 +226,7 @@ type State = {
 class MyComponent extends React.Component<Props, State> {
   componentDidMount() {
     this.props.fetchData()
-      .catch(error => this.setState({ error });
+      .catch(error => this.setState({ error }));
   }
 
   render() {

website/src/bootstrapping/configure-store.ts

@@ -1,4 +1,4 @@
-import { createStore, applyMiddleware, compose } from 'redux';
+import { createStore, applyMiddleware, compose, PreloadedState } from 'redux';
 import { persistStore } from 'redux-persist';
 import thunk from 'redux-thunk';
 import { setAutoFreeze } from 'immer';
@@ -44,8 +44,12 @@ export default function configureStore(defaultState?: State) {
 
   const storeEnhancer = applyMiddleware(...middlewares);
 
-  // @ts-expect-error Argument of type 'State | undefined' is not assignable to parameter
-  const store = createStore(rootReducer, defaultState, composeEnhancers(storeEnhancer));
+  const store = createStore(
+    rootReducer,
+    // Redux typings does not seem to allow non-JSON serialized values in PreloadedState so this needs to be casted
+    defaultState as PreloadedState<State> | undefined,
+    composeEnhancers(storeEnhancer),
+  );
 
   if (module.hot) {
     // Enable webpack hot module replacement for reducers

website/src/views/components/filters/CheckboxItemFilter.tsx

@@ -24,7 +24,7 @@ type State = {};
  * queried items are distinct and mutually exclusive.
  */
 export default class CheckboxItemFilter extends SearchkitComponent<CheckboxItemFilterProps, State> {
-  declare accessor: CheckboxFilterAccessor; // This typing is bad - this should really be optional
+  declare accessor: CheckboxFilterAccessor;
 
   static defaultProps = {
     showCount: true,