Update dependencies, go to GitHub Actions and fix lint problems

Author: LeMarck

.eslintrc.json

@@ -7,7 +7,8 @@
   "extends": [
     "eslint:recommended",
     "plugin:react/recommended",
-    "plugin:@typescript-eslint/recommended"
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {

.github/workflows/test.yaml

@@ -0,0 +1,22 @@
+name: GitHub Action Status
+
+on:
+  push:
+    branches: [ "master" ]
+  pull_request:
+    branches: [ "master" ]
+
+jobs:
+  test:
+
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: "node"
+    - run: npm ci
+    - run: npm run lint
+    - run: npm test
+    - uses: coverallsapp/github-action@v2

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

.travis.yml

@@ -1,73 +1,98 @@
 # React Router Lazy Page
 
-[![Build Status](https://app.travis-ci.com/LeMarck/react-router-lazy-page.svg?branch=master)](https://app.travis-ci.com/LeMarck/react-router-lazy-page)
+![GitHub Action Status](https://github.com/LeMarck/react-router-lazy-page/actions/workflows/test.yaml/badge.svg)
 [![Coverage Status](https://coveralls.io/repos/github/LeMarck/react-router-lazy-page/badge.svg?branch=master)](https://coveralls.io/github/LeMarck/react-router-lazy-page?branch=master)
 
-[React.lazy](https://ru.reactjs.org/docs/code-splitting.html) alternative for pages with data fetching
+> Используется в связке с `react-router@5`
+>
+> В `react-router@>=6` появились `clientLoader/loader` для загрузки данных
 
-## Page
+HOC для загрузки данных на страницу
 
-**Page** is a [React Component](https://reactjs.org/docs/components-and-props.html) exported from a `.js`, `.jsx`, `.ts`
-, or `.tsx`
+## Альтернативы
 
-**pages/About.page.tsx**
+Стразу же укажу альтернативы, хотя это решение использовалось в боевом проекте (сейчас его судьба мне не известна, проект был запущен мной в 2021 году), но это приложение имеет свои особенности которые и подтолкнули меня к созданию этого решения
 
-```tsx
-const About = () => <div>About</div>;
-
-export default About;
-```
+- [TanStack Query](https://tanstack.com/query/latest/docs/framework/react/overview)
+- [SWR](https://swr.vercel.app)
+- [React Router](https://reactrouter.com/start/framework/data-loading)
 
-[**Next.js – Pages**](https://nextjs.org/docs/basic-features/pages)
+## Предпосылки
 
-## Data Fetching
+Хотел получить механизм единой загрузки данных, чтобы избавиться от необходимости `if/else` с лоудером
 
-**pages/Blog.page.tsx**
+Пример:
 
 ```tsx
-
-const Blog = ({ posts }) => <ul>
-  {posts.map((post) => (
-    <li>{post.title}</li>
-  ))}
-</ul>;
-
-export async function getStaticProps() {
-  const res = await fetch('https://.../posts')
-  const posts = await res.json()
-
-  return { props: { posts } };
+const Page = () => {
+  const {profile, isLoadingProfile} = useProfile();
+  const {todoList, isLoadingToDoList} = useToDoList();
+
+  if (isLoadingProfile) {
+    return <div>Loading...</div>;
+  }
+
+  if (isLoadingToDoList) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div>
+      <div>{profile.name}</div>
+      <ul>
+        {todoList.map((todo) => (
+          <li>{todo.title}</li>
+        ))}
+      </ul>
+    </div>
+  )
 }
-
-export default Blog
 ```
 
-[**Next.js – Data Fetching**](https://nextjs.org/docs/basic-features/data-fetching)
+На момент 2020-2021 годов ещё не было React Router v6, а о существовании `swr` и `@tanstack/react-query` я не знал. Судя по npmjs.com они только появлялись и набирали популярность. Мне понравился подход Next.js с загрузкой данных через функцию `getInitialProps` (сейчас так уже не делают), который я и решил повторить
 
-## Usage
-
-**App.tsx**
+В итоге получился вот такой подход
 
 ```tsx
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
-import { lazyPage } from 'react-lazy-page';
-import { Suspense } from 'react';
+// pages/TodoList.tsx
+const TodoList = ({
+  profile,
+  todoList
+}) => (
+  <div>
+    <div>{profile.name}</div>
+    <ul>
+      {todoList.map((todo) => (
+        <li>{todo.title}</li>
+      ))}
+    </ul>
+  </div>
+)
+
+export async function getInitialProps() {
+  const profileResponse = await fetch("https://.../profile");
+  const todoListResponse = await fetch("https://.../todolist");
+
+  return {
+    props: {
+      profile: await profileResponse.json(),
+      todoList: await todoListResponse.json()
+    }
+  };
+}
+
+export default Page;
 
-export const App = (): JSX.Element => <BrowserRouter>
+// pages/index.tsx
+const TodoList = lazyPage(() => import("./TodoList"));
+
+const App = () => (
   <Suspense fallback={<div>Loading...</div>}>
-    <Switch>
-      <Route path={'/about'} component={lazyPage(() => import('./pages/About.page'))} exact/>
-      <Route path={'/blog'} component={lazyPage(() => import('./pages/Blog.page'))} exact/>
-    </Switch>
+    <TodoList />
   </Suspense>
-</BrowserRouter>;
+)
 ```
 
-## TODO
-
-- [ ] Write **documentation**
-- [ ] **Publish** a package
-
 ## License
 
 [**MIT License**](LICENSE)

README.md

@@ -1,4 +1,8 @@
-import { PureComponent, ReactNode, Suspense as ReactSuspense } from 'react';
+import {
+  PureComponent,
+  ReactNode,
+  Suspense as ReactSuspense,
+} from 'react';
 import { render, screen } from '@testing-library/react';
 import { MemoryRouter, Route } from 'react-router';
 import { lazyPage } from './index';
@@ -12,23 +16,33 @@ class Wrapper extends PureComponent<{ children: ReactNode }> {
 
   render(): ReactNode {
     if (this.state.error) {
-      return <div data-testid={'ErrorComponent'}>{this.state.error.message}</div>;
+      return (
+        <div data-testid={'ErrorComponent'}>{this.state.error.message}</div>
+      );
     }
 
-    return <ReactSuspense fallback={<div data-testid={'LoadingComponent'}>Loading...</div>}>
-      {this.props.children}
-    </ReactSuspense>;
+    return (
+      <ReactSuspense
+        fallback={<div data-testid={'LoadingComponent'}>Loading...</div>}
+      >
+        {this.props.children}
+      </ReactSuspense>
+    );
   }
 }
 
-const ContentComponent = ({ message = 'DefaultMessage' }: { message: string }): JSX.Element =>
-  <div data-testid={'ContentComponent'}>{message}</div>;
+const ContentComponent = ({
+  message = 'DefaultMessage',
+}: {
+  message: string;
+}): JSX.Element => <div data-testid={'ContentComponent'}>{message}</div>;
 
 describe('lazyPage', () => {
   let spy: jest.SpyInstance;
 
   beforeAll(() => {
-    spy = jest.spyOn(console, 'error').mockImplementation(() => { /* */
+    spy = jest.spyOn(console, 'error').mockImplementation(() => {
+      /* */
     });
   });
 
@@ -37,9 +51,16 @@ describe('lazyPage', () => {
   });
 
   it('Should render the "ContentComponent" component with default message', async () => {
-    const Component = lazyPage(() => Promise.resolve({ default: ContentComponent }));
+    const Component = lazyPage(() =>
+      Promise.resolve({ default: ContentComponent }),
+    );
 
-    render(<Wrapper><Component/></Wrapper>, { wrapper: MemoryRouter });
+    render(
+      <Wrapper>
+        <Component />
+      </Wrapper>,
+      { wrapper: MemoryRouter },
+    );
 
     expect(screen.queryByTestId('LoadingComponent')).toBeInTheDocument();
 
@@ -50,13 +71,19 @@ describe('lazyPage', () => {
   });
 
   it('Should render the "ContentComponent" component with custom message', async () => {
-    const Component = lazyPage(() => Promise.resolve({
-      default: ContentComponent,
-      getInitialProps: async () => ({ props: { message: 'TestMessage' } })
-    }));
-
+    const Component = lazyPage(() =>
+      Promise.resolve({
+        default: ContentComponent,
+        getInitialProps: async () => ({ props: { message: 'TestMessage' } }),
+      }),
+    );
 
-    render(<Wrapper><Component/></Wrapper>, { wrapper: MemoryRouter });
+    render(
+      <Wrapper>
+        <Component />
+      </Wrapper>,
+      { wrapper: MemoryRouter },
+    );
 
     expect(screen.queryByTestId('LoadingComponent')).toBeInTheDocument();
 
@@ -67,15 +94,21 @@ describe('lazyPage', () => {
   });
 
   test('Should render the "ErrorComponent" component with Error message', async () => {
-    const Component = lazyPage(() => Promise.resolve({
-      default: ContentComponent,
-      getInitialProps: () => {
-        throw Error('TestError');
-      }
-    }));
-
+    const Component = lazyPage(() =>
+      Promise.resolve({
+        default: ContentComponent,
+        getInitialProps: () => {
+          throw Error('TestError');
+        },
+      }),
+    );
 
-    render(<Wrapper><Component/></Wrapper>, { wrapper: MemoryRouter });
+    render(
+      <Wrapper>
+        <Component />
+      </Wrapper>,
+      { wrapper: MemoryRouter },
+    );
 
     expect(screen.queryByTestId('LoadingComponent')).toBeInTheDocument();
 
@@ -86,18 +119,24 @@ describe('lazyPage', () => {
   });
 
   test('Should cause a redirect to the "/test" page', async () => {
-    const Component = lazyPage(() => Promise.resolve({
-      default: ContentComponent,
-      getInitialProps: async () => ({ redirect: '/test' })
-    }));
-
+    const Component = lazyPage(() =>
+      Promise.resolve({
+        default: ContentComponent,
+        getInitialProps: async () => ({ redirect: '/test' }),
+      }),
+    );
 
     render(
       <Wrapper>
-        <Route path={'/'} exact component={Component}/>);
-        <Route path={'/test'} exact render={() => <ContentComponent message={'RedirectMessage'}/>}/>
+        <Route path={'/'} exact component={Component} />
+        );
+        <Route
+          path={'/test'}
+          exact
+          render={() => <ContentComponent message={'RedirectMessage'} />}
+        />
       </Wrapper>,
-      { wrapper: MemoryRouter }
+      { wrapper: MemoryRouter },
     );
 
     expect(screen.queryByTestId('LoadingComponent')).toBeInTheDocument();