Merge branch 'master' of https://github.com/evansloan/collectionlog.net

.github/workflows/unit_tests.yml

@@ -12,12 +12,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 14.x
+      - name: Use Node.js 18.x
         uses: actions/setup-node@v2
         with:
-          node-version: 14.x
+          node-version: 18.x
       - name: Install Yarn
-        run: npm install -g yarn
+        run: corepack enable && corepack prepare yarn@stable --activate
       - name: Install dependencies
         run: yarn install --frozen-lockfile
       - name: Run tests

.gitignore

@@ -2,8 +2,15 @@
 
 # dependencies
 /node_modules
-/.pnp
-.pnp.js
+
+# yarn
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
 
 # testing
 /coverage

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

CONTRIBUTING.md

@@ -1,7 +1,7 @@
 # Contributing
 
 ## Project setup
-1. Install the [Yarn package manager](https://classic.yarnpkg.com/lang/en/docs/install/)
+1. Install the [Yarn package manager](https://yarnpkg.com/getting-started/install)
 2. Clone the repository `git clone https://github.com/evansloan/collectionlog.net && cd collectionlog.net`
 3. Install dependencies `yarn install`
 4. Run the project `yarn start`

package.json

@@ -6,21 +6,18 @@
     "@fortawesome/fontawesome-svg-core": "^6.2.0",
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@reduxjs/toolkit": "^1.8.1",
+    "@tanstack/query-sync-storage-persister": "^4.29.25",
+    "@tanstack/react-query": "^4.29.25",
+    "@tanstack/react-query-devtools": "^4.29.25",
+    "@tanstack/react-query-persist-client": "^4.29.25",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.1.1",
-    "@types/jest": "^27.4.1",
-    "@types/node": "^17.0.25",
-    "@types/react": "^18.0.6",
-    "@types/react-dom": "^18.0.2",
-    "@types/react-test-renderer": "^18.0.0",
     "axios": "^0.27.2",
     "react": "^18.2.0",
     "react-document-meta": "^3.0.0-beta.2",
     "react-dom": "^18.2.0",
     "react-ga4": "^2.1.0",
-    "react-redux": "^8.0.1",
     "react-router-dom": "^6.4.0",
     "react-scripts": "5.0.1",
     "react-test-renderer": "^18.2.0",
@@ -53,7 +50,12 @@
     ]
   },
   "devDependencies": {
+    "@types/jest": "^27.4.1",
+    "@types/node": "^17.0.25",
+    "@types/react": "^18.0.6",
     "@types/react-document-meta": "^3.0.2",
+    "@types/react-dom": "^18.0.2",
+    "@types/react-test-renderer": "^18.0.0",
     "autoprefixer": "^10.4.11",
     "postcss": "^8.4.16",
     "tailwindcss": "^3.1.8"

src/App.tsx

@@ -1,21 +1,44 @@
 import React from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister';
+import { QueryClient } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
 
 import { Hiscores, Home, Log } from './pages';
 import { Footer, Header } from './components/layout';
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+      retryOnMount: false,
+      refetchOnWindowFocus: false,
+      cacheTime: 1000 * 60,
+      staleTime: 1000 * 60,
+    },
+  },
+});
+
+const persister = createSyncStoragePersister({
+  storage: window.sessionStorage,
+});
+
 const App = () => (
-  <BrowserRouter>
-    <Header />
-    <Routes>
-      <Route path='/' element={<Home />} />
-      <Route path='/log/:username' element={<Log />} />
-      <Route path='/log/:username/:entry' element={<Log />} />
-      <Route path='/hiscores' element={<Hiscores />} />
-      <Route path='/hiscores/:page' element={<Hiscores />} />
-    </Routes>
-    <Footer />
-  </BrowserRouter>
+  <PersistQueryClientProvider client={queryClient} persistOptions={{ persister }} >
+    <BrowserRouter>
+      <Header />
+      <Routes>
+        <Route path='/' element={<Home />} />
+        <Route path='/log/:username' element={<Log />} />
+        <Route path='/log/:username/:pageName' element={<Log />} />
+        <Route path='/hiscores' element={<Hiscores />} />
+        <Route path='/hiscores/:page' element={<Hiscores />} />
+      </Routes>
+      <Footer />
+    </BrowserRouter>
+    <ReactQueryDevtools initialIsOpen={false} />
+  </PersistQueryClientProvider>
 );
 
 export default App;

src/api/collection-log/collection-log-api.ts

@@ -36,11 +36,7 @@ class CollectionLogAPI {
   }
 
   private getRequest = async <T>(url: string, queryParams?: any): Promise<AxiosResponse<T>> => {
-    try {
-      return await CollectionLogAPI.axiosInstance.get<T>(url, { params: queryParams });
-    } catch (error: any) {
-      return error.response;
-    }
+    return await CollectionLogAPI.axiosInstance.get<T>(url, { params: queryParams });
   };
 
   private postRequest = async <T, R>(url: string, data: T): Promise<AxiosResponse<R>> => {
@@ -53,17 +49,20 @@ class CollectionLogAPI {
 
   getCollectionLog = async (username: string) => {
     const url = `${CollectionLogAPI.COLLECTION_LOG_ENDPOINT}/user/${username}`;
-    return await this.getRequest<CollectionLogResponse>(url);
+    const res = await this.getRequest<CollectionLogResponse>(url);
+    return res.data.collectionLog;
   };
 
   getRecentItems = async (username: string) => {
     const url = `${CollectionLogAPI.ITEMS_ENDPOINT}/recent/${username}`;
-    return await this.getRequest<ItemsResponse>(url);
+    const res = await this.getRequest<ItemsResponse>(url);
+    return res.data.items;
   };
 
   getRecentItemsGlobal = async () => {
     const url = `${CollectionLogAPI.ITEMS_ENDPOINT}/global`;
-    return await this.getRequest<ItemsResponse>(url);
+    const res = await this.getRequest<ItemsResponse>(url);
+    return res.data.items;
   };
 
   getHiscores = async (page: number, filter: string) => {
@@ -72,7 +71,8 @@ class CollectionLogAPI {
     if (filter != 'ALL') {
       queryParams = { accountType: filter };
     }
-    return await this.getRequest<HiscoresResponse>(url, queryParams);
+    const res = await this.getRequest<HiscoresResponse>(url, queryParams);
+    return res.data.hiscores;
   };
 
   getRankByUsername = async (username: string, filter?: string) => {
@@ -81,12 +81,14 @@ class CollectionLogAPI {
     if (filter != 'ALL') {
       queryParams = { accountType: filter };
     }
-    return await this.getRequest<RankResponse>(url, queryParams);
+    const res = await this.getRequest<RankResponse>(url, queryParams);
+    return res.data.rank;
   };
 
   getRanksByUsername = async (username: string) => {
     const url = `${CollectionLogAPI.HISCORES_ENDPOINT}/ranks/${username}`;
-    return await this.getRequest<RanksResponse>(url);
+    const res = await this.getRequest<RanksResponse>(url);
+    return res.data.accountTypeRanks;
   };
 
   getUserTypeahead = async (username: string) => {
@@ -101,12 +103,14 @@ class CollectionLogAPI {
 
   getUserCount = async () => {
     const url = `${CollectionLogAPI.USER_ENDPOINT}/count`;
-    return await this.getRequest<UserCountResponse>(url);
+    const res = await this.getRequest<UserCountResponse>(url);
+    return res.data.count;
   };
 
   getUserSettings = async (username: string) => {
     const url = `${CollectionLogAPI.USER_ENDPOINT}/settings/${username.toLowerCase()}`;
-    return await this.getRequest<UserSettingsResponse>(url);
+    const res = await this.getRequest<UserSettingsResponse>(url);
+    return res.data.userSettings;
   };
 }
 

src/app/constants.ts

@@ -11,4 +11,4 @@ export const discordUrl = 'https://discord.gg/loghunters';
 export const gitHubUrl = 'https://github.com/evansloan/collectionlog.net';
 export const pluginUrl = 'https://runelite.net/plugin-hub/show/collection-log';
 
-export const expectedMaxUniqueItems = 1443;
+export const expectedMaxUniqueItems = 1451;

src/app/hooks/collection-log.ts

@@ -0,0 +1,39 @@
+import { useQuery } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
+import { CollectionLogAPI } from '../../api/collection-log/collection-log-api';
+import CollectionLogService from '../../services/collection-log';
+
+const api = CollectionLogAPI.getInstance();
+
+export const useCollectionLog = (username: string) => {
+  username = username.toLowerCase();
+  const [collectionLogService, setCollectionLogService] = useState<CollectionLogService>();
+  const query = useQuery({
+    queryKey: ['collection-log', username],
+    queryFn: async () => await api.getCollectionLog(username),
+  });
+
+  useEffect(() => {
+    if (!query.data) {
+      return;
+    }
+    setCollectionLogService(new CollectionLogService(query.data));
+  }, [query.data]);
+
+  return { collectionLog: collectionLogService, ...query };
+};
+
+export const useRecentItems = (params: { global?: boolean; username?: string }) => {
+  const username = params.username?.toLowerCase().trim();
+  const query = useQuery({
+    queryKey: ['recent-items', username ?? 'global'],
+    queryFn: async () => {
+      return params.global
+        ? await api.getRecentItemsGlobal()
+        : await api.getRecentItems(username as string);
+    },
+  });
+
+  return { recentItems: query.data, ...query };
+};
+

src/app/hooks/hiscores.ts

@@ -0,0 +1,38 @@
+import { useQuery } from '@tanstack/react-query';
+import { useState } from 'react';
+import { CollectionLogAPI } from '../../api/collection-log/collection-log-api';
+
+const api = CollectionLogAPI.getInstance();
+
+export const useRanks = (username: string) => {
+  username = username.toLowerCase();
+  const query = useQuery({
+    queryKey: ['ranks', username],
+    queryFn: async () => await api.getRanksByUsername(username),
+  });
+
+  return { ranks: query.data, ...query };
+};
+
+export const useHiscores = (page: number, filter: RankType, username?: string) => {
+  const [hsPage, setHsPage] = useState(page);
+  const query = useQuery({
+    queryKey: ['hiscores', page, filter, username],
+    queryFn: async () => {
+      if (username) {
+        const rank = await api.getRankByUsername(username.toLowerCase().trim(), filter);
+        page = rank != 0 ? Math.ceil(rank / 25) : 1;
+      }
+
+      setHsPage(page);
+      return { hiscores: await api.getHiscores(page, filter), page };
+    },
+  });
+
+  return {
+    ...query,
+    hiscores: query.data?.hiscores,
+    page: query.data?.page ?? hsPage,
+    setPage: setHsPage,
+  };
+};

src/app/hooks/twitch.ts

@@ -0,0 +1,13 @@
+import { useQuery } from '@tanstack/react-query';
+import TwitchAPI from '../../api/twitch/twitch-api';
+
+const api = TwitchAPI.getInstance();
+
+export const useTwitchStreams = () => {
+  const query = useQuery({
+    queryKey: ['twitch-streams'],
+    queryFn: async () => await api.getStreams(),
+  });
+
+  return { ...query, streams: query.data };
+};

src/app/hooks.ts → src/app/hooks/ui.ts

@@ -1,10 +1,4 @@
-import { useEffect } from 'react';
-import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
-
-import type { RootState, AppDispatch } from './store';
-
-export const useAppDispatch = () => useDispatch<AppDispatch>();
-export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
+import React, { useEffect } from 'react';
 
 export const useOutsideClickHandler = (ref: React.RefObject<Element>, clickHandler: (...args: any) => void) => {
   useEffect(() => {

src/app/hooks/user.ts

@@ -0,0 +1,23 @@
+import { useQuery } from '@tanstack/react-query';
+import { CollectionLogAPI } from '../../api/collection-log/collection-log-api';
+
+const api = CollectionLogAPI.getInstance();
+
+export const useUserSettings = (username: string) => {
+  username = username.toLowerCase().trim();
+  const query = useQuery({
+    queryKey: ['user-settings', username],
+    queryFn: async () => await api.getUserSettings(username),
+  });
+
+  return { ...query, userSettings: query.data };
+};
+
+export const useUserCount = () => {
+  const query = useQuery({
+    queryKey: ['user-count'],
+    queryFn: async () => await api.getUserCount(),
+  });
+
+  return { ...query, userCount: query.data };
+};