client: Fix more type check issues

Author: jtojnar

client/js/helpers/hooks.ts

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
-import { useLocation } from 'react-router-dom';
 import { useMediaMatch } from 'rooks';
+import { useLocation } from '../templates/App';
 import { ValueListenable } from './ValueListenable';
 
 /**

client/js/helpers/uri.ts

@@ -1,5 +1,5 @@
 import { generatePath } from 'react-router-dom';
-import { Location } from 'history';
+import { Location } from '../templates/App';
 import { FilterType } from '../Filter';
 
 /**

client/js/requests/items.ts

@@ -132,6 +132,28 @@ type StatusUpdate = {
 
 type SyncParams = {
     updatedStatuses: Array<StatusUpdate>;
+    since?: Date;
+    itemsNotBefore?: Date;
+};
+
+export type EntryStatus = {
+    id: number;
+    unread: boolean;
+    starred: boolean;
+};
+
+export type NavTag = { tag: string; unread: number };
+
+export type NavSource = { id: number; unread: number };
+
+export type Stats = { all: number; unread: number; starred: number };
+
+type SyncResponse = {
+    entries: Array<EnrichedResponseItem>;
+    stats?: Stats;
+    tags?: NavTag[];
+    sources?: NavSource[];
+    itemUpdates?: EntryStatus[];
 };
 
 /**
@@ -140,7 +162,7 @@ type SyncParams = {
 export function sync(
     updatedStatuses: Array<StatusUpdate>,
     syncParams: SyncParams,
-): { controller: AbortController; promise: Promise<GetItemsResponse> } {
+): { controller: AbortController; promise: Promise<SyncResponse> } {
     const params = {
         ...syncParams,
         updatedStatuses: syncParams.updatedStatuses

client/js/selfoss-base.ts

@@ -6,7 +6,7 @@ import { ValueListenable } from './helpers/ValueListenable';
 import { HttpError, TimeoutError } from './errors';
 import { Configuration } from './model/Configuration';
 import { LoadingState } from './requests/LoadingState';
-import { App, createApp } from './templates/App';
+import { App, History, createApp } from './templates/App';
 import dbOnline from './selfoss-db-online';
 import dbOffline from './selfoss-db-offline';
 import db from './selfoss-db';
@@ -39,6 +39,7 @@ class selfoss {
     public static db = db;
     public static dbOnline = dbOnline;
     public static dbOffline = dbOffline;
+    static history: History;
 
     /**
      * initialize application

client/js/templates/App.tsx

@@ -1,12 +1,17 @@
+import {
+    History as HistoryGeneric,
+    Location as LocationGeneric,
+} from 'history';
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 import {
     BrowserRouter as Router,
     Switch,
     Route,
     Link,
     Redirect,
-    useHistory,
-    useLocation,
+    useHistory as useHistoryGeneric,
+    useLocation as useLocationGeneric,
+    useParams as useParamsGeneric,
 } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Collapse } from '@kunukn/react-collapse';
@@ -29,6 +34,26 @@ import { Configuration, ConfigurationContext } from '../model/Configuration';
 import { LoadingState } from '../requests/LoadingState';
 import * as sourceRequests from '../requests/sources';
 import locales from '../locales';
+import { NavSource, NavTag } from '../requests/items';
+import { FilterType } from '../Filter';
+
+export type LocationState = {
+    error?: string;
+    returnLocation?: string;
+    forceReload?: number;
+};
+export type Params = {
+    filter?: FilterType;
+    category?: string;
+    id?: string;
+};
+
+export type History = HistoryGeneric<LocationState>;
+export type Location = LocationGeneric<LocationState>;
+
+export const useHistory = useHistoryGeneric<LocationState>;
+export const useParams = useParamsGeneric<Params>;
+export const useLocation = useLocationGeneric<LocationState>;
 
 type MessageAction = {
     label: string;
@@ -391,13 +416,13 @@ type AppState = {
     /**
      * tag repository
      */
-    tags: Array<Tag>;
+    tags: Array<NavTag>;
     tagsState: LoadingState;
 
     /**
      * source repository
      */
-    sources: Array<Source>;
+    sources: Array<NavSource>;
     sourcesState: LoadingState;
 
     /**

client/js/templates/EntriesPage.tsx

@@ -5,13 +5,15 @@ import React, {
     useMemo,
     useState,
 } from 'react';
-import { Link, useLocation, useParams } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { useOnline } from 'rooks';
 import { useStateWithDeps } from 'use-state-with-deps';
+import { Location, useLocation, useParams } from './App';
 import selfoss from '../selfoss-base';
 import Item from './Item';
 import { FilterType } from '../Filter';
 import * as itemsRequests from '../requests/items';
+import { EntryStatus } from '../requests/items';
 import * as sourceRequests from '../requests/sources';
 import { LoadingState } from '../requests/LoadingState';
 import { Spinner, SpinnerBig } from './Spinner';
@@ -24,7 +26,7 @@ import { autoScroll, Direction } from '../helpers/navigation';
 import { LocalizationContext } from '../helpers/i18n';
 import { useShouldReload } from '../helpers/hooks';
 import { forceReload, makeEntriesLinkLocation } from '../helpers/uri';
-import { ConfigurationContext } from '../model/Configuration';
+import { Configuration, ConfigurationContext } from '../model/Configuration';
 import { HttpError } from '../errors';
 
 function reloadList({
@@ -535,18 +537,33 @@ const initialState = {
     loadingState: LoadingState.INITIAL,
 };
 
+type Match = {
+    params: {
+        category?: string;
+        filter: FilterType;
+    };
+};
+
 type StateHolderProps = {
-    configuration: object;
-    location: object;
-    match: object;
+    configuration: Configuration;
+    location: Location;
+    match: Match;
     setNavExpanded: React.Dispatch<React.SetStateAction<boolean>>;
     navSourcesExpanded: boolean;
     setGlobalUnreadCount: React.Dispatch<React.SetStateAction<number>>;
     unreadItemsCount: number;
 };
 
+type Entry = {
+    id: number;
+    unread: boolean;
+    starred: boolean;
+    tags: string[];
+    source: number;
+};
+
 type StateHolderState = {
-    entries: Array<object>;
+    entries: Array<Entry>;
     hasMore: boolean;
     /**
      * Currently selected entry.
@@ -691,7 +708,7 @@ export default class StateHolder extends React.Component<
         const autoMarkAsRead =
             selfoss.isAllowedToWrite() &&
             this.props.configuration.autoMarkAsRead &&
-            entry.unread == 1;
+            entry.unread;
         if (autoMarkAsRead) {
             this.markEntryRead(id, true);
         }
@@ -735,7 +752,7 @@ export default class StateHolder extends React.Component<
         );
     }
 
-    refreshEntryStatuses(entryStatuses) {
+    refreshEntryStatuses(entryStatuses: EntryStatus[]) {
         this.state.entries.forEach((entry) => {
             const { id } = entry;
             const newStatus = entryStatuses.find(
@@ -799,9 +816,9 @@ export default class StateHolder extends React.Component<
      * Mark all visible items as read
      */
     markVisibleRead(): void {
-        const ids = [];
-        const tagUnreadDiff = {};
-        const sourceUnreadDiff = {};
+        const ids: number[] = [];
+        const tagUnreadDiff: { [index: string]: number } = {};
+        const sourceUnreadDiff: { [index: string]: number } = {};
 
         let markedEntries = this.state.entries.map((entry) => {
             if (!entry.unread) {

client/js/templates/HashPassword.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useHistory } from './App';
 import { useInput } from 'rooks';
 import { LoadingState } from '../requests/LoadingState';
 import { HttpError } from '../errors';