Add Mobx Stores

README.md

@@ -2,7 +2,7 @@ I will be writing an article on the follow code example, but I wanted to share t
 
 ## Global & Local State with MobX React Example
 
-### A factory function approach to MobX stores with React & Next.js
+### MobX stores with React & Next.js
 
 [View the demo site](https://mobx-local-global-stores.vercel.app/)
 
@@ -15,33 +15,31 @@ I will be writing an article on the follow code example, but I wanted to share t
 #### [GlobalStores](https://github.com/codeBelt/mobx-local-global-stores/blob/main/src/stores/GlobalStore.ts)
 
 - **[AuthGlobalStore](https://github.com/codeBelt/mobx-local-global-stores/blob/main/src/stores/auth/AuthGlobalStore.ts)**:
-  - Factory function store that uses `observable`
+  - ES6 Class store that uses `makeAutoObservable`
   - A fake auth store to keep track of a user loaded from [randomuser.me](https://randomuser.me/)
 - **[ToastGlobalStore](https://github.com/codeBelt/mobx-local-global-stores/blob/main/src/stores/toast/ToastGlobalStore.ts)**:
-  - Factory function store that uses `observable`
+  - ES6 Class store that uses `makeAutoObservable`
   - A store that uses [notistack](https://iamhosseindhv.com/notistack) to create a notification (toast) system
 
 #### Local Stores
 
 - **[IndexPageStore](https://github.com/codeBelt/mobx-local-global-stores/blob/main/src/components/pages/index-page/IndexPage.store.ts)**:
-  - Factory function store that uses `observable`
+  - ES6 Class store that uses `makeAutoObservable`
   - Makes two requests in the browser to [api.tvmaze.com](https://api.tvmaze.com)
   - Shows a loading indicator and allows the user to sort actors
 - **[EpisodesPageStore](https://github.com/codeBelt/mobx-local-global-stores/blob/main/src/components/pages/episodes-page/EpisodesPage.store.ts)**:
-  - Factory function store that uses `observable`
+  - ES6 Class store that uses `makeAutoObservable`
   - Hydrated with data that was fetched server-side
   - Allows the user to sort the data on the page that was previously rendered server-side
   - Shows how use the [GlobalStores](https://github.com/codeBelt/mobx-local-global-stores/blob/main/src/stores/GlobalStore.ts) ([getGlobalStore()](https://github.com/codeBelt/mobx-local-global-stores/blob/main/src/components/shared/global-store-provider/GlobalStoreProvider.tsx#L13)) within local stores
 - **[AboutPageStore](https://github.com/codeBelt/mobx-local-global-stores/blob/main/src/components/pages/about-page/AboutPage.store.ts)**:
-  - ES6 Class store that uses `makeAutoObservable` for comparison
+  - Factory function store that uses `observable` for comparison
   - A simple store that makes a request to [httpstat.us](https://httpstat.us)
   - Shows how to handle api errors in the local store and on the page
   - Shows how use the [GlobalStores](https://github.com/codeBelt/mobx-local-global-stores/blob/main/src/stores/GlobalStore.ts) ([getGlobalStore()](https://github.com/codeBelt/mobx-local-global-stores/blob/main/src/components/shared/global-store-provider/GlobalStoreProvider.tsx#L13)) within local stores
 
 If you want to see an overview of the files using Mobx check out this [PR Diff](https://github.com/codeBelt/mobx-local-global-stores/pull/4/files).
 
-If you want to check out the example with stores using all ES6 Classes [here is the branch](https://github.com/codeBelt/mobx-local-global-stores/tree/es6-classes). ([PR Diff](https://github.com/codeBelt/mobx-local-global-stores/pull/5/files))
-
 ### Feedback Welcomed
 
 If you want to give me feedback on how to improve my usage with MobX, TypeScript types, or Next.js. Create an issue on my [repo](https://github.com/codeBelt/mobx-local-global-stores).
@@ -50,5 +48,4 @@ You could also fork my repo and create a PR to show me how you would improve som
 
 ### Help Wanted
 
-- Validate I am following best practice with Mobx and factory functions.
 - Help me understand how to remove `runInAction` from [ToastGlobalStore](https://github.com/codeBelt/mobx-local-global-stores/blob/main/src/stores/toast/ToastGlobalStore.ts) and validate I set up [ToastNotifier](https://github.com/codeBelt/mobx-local-global-stores/blob/main/src/components/ui/toast-notifier/ToastNotifier.tsx) correctly.

src/components/pages/about-page/AboutPage.store.ts

@@ -0,0 +1,36 @@
+import { observable } from 'mobx';
+import { getErrorRequest } from '../../../domains/shows/shows.services';
+import { initialResponseStatus } from '../../../utils/mobx.utils';
+import { ApiResponse } from '../../../utils/http/http.types';
+import { getGlobalStore } from '../../shared/global-store-provider/GlobalStoreProvider';
+
+export const AboutPageStore = () =>
+  observable({
+    globalStore: getGlobalStore(),
+    errorExampleResults: initialResponseStatus<null>(null),
+
+    /**
+     * Store initializer. Should only be called once.
+     */
+    *init() {
+      yield Promise.all([this.loadSomething()]);
+    },
+
+    *loadSomething() {
+      const response: ApiResponse<null> = yield getErrorRequest();
+
+      this.errorExampleResults = {
+        data: this.errorExampleResults.data,
+        isRequesting: false,
+        ...response, // Overwrites the default data prop or adds an error. Also adds the statusCode.
+      };
+
+      if (response.error) {
+        const message = `${response.statusCode}: ${response.error.message}`;
+
+        this.globalStore.toastStore.enqueueToast(message, 'error');
+      }
+    },
+  });
+
+export type AboutPageStore = ReturnType<typeof AboutPageStore>;

src/components/pages/about-page/AboutPage.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { LoadingIndicator } from '../../ui/loading-indicator/LoadingIndicator';
+import { Container, Header, Message } from 'semantic-ui-react';
+import { AboutPageStore } from './AboutPage.store';
+import { observer } from 'mobx-react-lite';
+import { useLocalStore } from '../../shared/local-store-provider/LocalStoreProvider';
+
+interface IProps {}
+
+export const AboutPage: React.FC<IProps> = observer((props) => {
+  const localStore = useLocalStore<AboutPageStore>();
+
+  return (
+    <div>
+      <Header as="h2">About</Header>
+      <LoadingIndicator isActive={localStore.errorExampleResults.isRequesting}>
+        <Container>
+          <p>This page is only to show how to handle API errors on the page.</p>
+          <p>You will also notice a popup indicator with the actual error text.</p>
+          <p>Below we create a custom error message.</p>
+        </Container>
+        {Boolean(localStore.errorExampleResults.error) && (
+          <Message info={true} header="Error" content="Sorry there was an error requesting this content." />
+        )}
+      </LoadingIndicator>
+    </div>
+  );
+});
+
+AboutPage.displayName = 'AboutPage';
+AboutPage.defaultProps = {};

src/components/pages/episodes-page/EpisodesPage.store.ts

@@ -0,0 +1,50 @@
+import { makeAutoObservable } from 'mobx';
+import groupBy from 'lodash.groupby';
+import orderBy from 'lodash.orderby';
+import { IEpisode, IEpisodeTable } from '../../../domains/shows/shows.types';
+import dayjs from 'dayjs';
+import { ApiResponse } from '../../../utils/http/http.types';
+import { getGlobalStore } from '../../shared/global-store-provider/GlobalStoreProvider';
+import { EpisodesToggleOption } from './episodes-toggle/EpisodesToggle.constants';
+
+export class EpisodesPageStore {
+  readonly globalStore = getGlobalStore();
+  sortType = EpisodesToggleOption.ASC;
+  episodesResults: ApiResponse<IEpisode[]>;
+
+  constructor(episodesResults: ApiResponse<IEpisode[]>) {
+    this.episodesResults = episodesResults;
+
+    makeAutoObservable(this);
+  }
+
+  get sortedTableData(): IEpisodeTable[] {
+    return orderBy(this.generateTableData, 'title', this.sortType);
+  }
+
+  get generateTableData(): IEpisodeTable[] {
+    if (this.episodesResults.error) {
+      return [];
+    }
+
+    const seasons: { [season: string]: IEpisode[] } = groupBy(this.episodesResults.data, 'season');
+
+    return Object.entries(seasons).map(([season, models]) => {
+      return {
+        title: `Season ${season}`,
+        rows: models.map((model) => ({
+          episode: model.number,
+          name: model.name,
+          date: dayjs(model.airdate).format('MMM D, YYYY'),
+          image: model.image?.medium ?? '',
+        })),
+      };
+    });
+  }
+
+  setSortType(sortType: EpisodesToggleOption): void {
+    this.sortType = sortType;
+
+    this.globalStore.toastStore.enqueueToast('Nice! You just sorted Server-Side Rendered Content.', 'info');
+  }
+}

src/components/pages/episodes-page/EpisodesPage.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { EpisodesPageStore } from './EpisodesPage.store';
+import { EpisodesTable } from './episodes-table/EpisodesTable';
+import { useLocalStore } from '../../shared/local-store-provider/LocalStoreProvider';
+import { observer } from 'mobx-react-lite';
+import { Container } from 'semantic-ui-react';
+import { EpisodesToggle } from './episodes-toggle/EpisodesToggle';
+
+export interface IProps {}
+
+export const EpisodesPage: React.FC<IProps> = observer((props) => {
+  const localStore = useLocalStore<EpisodesPageStore>();
+
+  return (
+    <>
+      <Container textAlign="right" fluid={true}>
+        <EpisodesToggle />
+      </Container>
+      {localStore.sortedTableData.map((model) => (
+        <EpisodesTable key={model.title} tableData={model} />
+      ))}
+    </>
+  );
+});
+
+EpisodesPage.displayName = 'EpisodesPage';
+EpisodesPage.defaultProps = {};

src/components/pages/episodes-page/episodes-table/EpisodesTable.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Header, Table } from 'semantic-ui-react';
+import { IEpisodeTable } from '../../../../domains/shows/shows.types';
+import { EpisodesTableRow } from './episodes-table-row/EpisodesTableRow';
+
+interface IProps {
+  readonly tableData: IEpisodeTable;
+}
+
+export const EpisodesTable: React.FC<IProps> = (props) => {
+  return (
+    <div key={props.tableData.title}>
+      <Header as="h2">{props.tableData.title}</Header>
+      <Table>
+        <Table.Header>
+          <Table.Row>
+            <Table.HeaderCell width={1}>Scene</Table.HeaderCell>
+            <Table.HeaderCell>Episode</Table.HeaderCell>
+            <Table.HeaderCell>Date</Table.HeaderCell>
+            <Table.HeaderCell>Name</Table.HeaderCell>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          {props.tableData.rows.map((model) => (
+            <EpisodesTableRow key={model.episode} rowData={model} />
+          ))}
+        </Table.Body>
+      </Table>
+    </div>
+  );
+};
+
+EpisodesTable.displayName = 'EpisodesTable';
+EpisodesTable.defaultProps = {};

src/components/pages/episodes-page/episodes-table/episodes-table-row/EpisodesTableRow.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Image, Table } from 'semantic-ui-react';
+import { IEpisodeTableRow } from '../../../../../domains/shows/shows.types';
+
+interface IProps {
+  readonly rowData: IEpisodeTableRow;
+}
+
+export const EpisodesTableRow: React.FC<IProps> = (props) => {
+  return (
+    <Table.Row key={props.rowData.episode}>
+      <Table.Cell>
+        <Image src={props.rowData.image} rounded={true} size="small" />
+      </Table.Cell>
+      <Table.Cell>{props.rowData.episode}</Table.Cell>
+      <Table.Cell>{props.rowData.date}</Table.Cell>
+      <Table.Cell>{props.rowData.name}</Table.Cell>
+    </Table.Row>
+  );
+};
+
+EpisodesTableRow.displayName = 'EpisodesTableRow';
+EpisodesTableRow.defaultProps = {};

src/components/pages/episodes-page/episodes-toggle/EpisodesToggle.constants.tsx

@@ -0,0 +1,4 @@
+export enum EpisodesToggleOption {
+  ASC = 'asc',
+  DESC = 'desc',
+}

src/components/pages/episodes-page/episodes-toggle/EpisodesToggle.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Button } from 'semantic-ui-react';
+import { useLocalStore } from '../../../shared/local-store-provider/LocalStoreProvider';
+import { EpisodesPageStore } from '../EpisodesPage.store';
+import { EpisodesToggleOption } from './EpisodesToggle.constants';
+import { observer } from 'mobx-react-lite';
+
+export interface IProps {}
+
+export const EpisodesToggle: React.FC<IProps> = observer((props) => {
+  const localStore = useLocalStore<EpisodesPageStore>();
+
+  return (
+    <Button.Group>
+      <Button
+        positive={localStore.sortType === EpisodesToggleOption.ASC}
+        onClick={() => localStore.setSortType(EpisodesToggleOption.ASC)}
+      >
+        Seasons Ascending
+      </Button>
+      <Button.Or />
+      <Button
+        positive={localStore.sortType === EpisodesToggleOption.DESC}
+        onClick={() => localStore.setSortType(EpisodesToggleOption.DESC)}
+      >
+        Seasons Descending
+      </Button>
+    </Button.Group>
+  );
+});
+
+EpisodesToggle.displayName = 'EpisodesToggle';
+EpisodesToggle.defaultProps = {};

src/components/pages/index-page/IndexPage.store.ts

@@ -0,0 +1,58 @@
+import { makeAutoObservable } from 'mobx';
+import { getCastsRequest, getShowRequest } from '../../../domains/shows/shows.services';
+import { initialResponseStatus } from '../../../utils/mobx.utils';
+import { ICast, IShow } from '../../../domains/shows/shows.types';
+import { ApiResponse } from '../../../utils/http/http.types';
+import { defaultShowId } from '../../../domains/shows/shows.constants';
+import orderBy from 'lodash.orderby';
+import { getGlobalStore } from '../../shared/global-store-provider/GlobalStoreProvider';
+
+export class IndexPageStore {
+  readonly globalStore = getGlobalStore();
+  sortValue = '';
+  showResults = initialResponseStatus<IShow | null>(null);
+  castsResults = initialResponseStatus<ICast[]>([]);
+
+  constructor() {
+    makeAutoObservable(this);
+  }
+
+  get isRequesting(): boolean {
+    return [this.showResults.isRequesting, this.castsResults.isRequesting].some(Boolean);
+  }
+
+  get actors(): ICast[] {
+    return orderBy(this.castsResults.data, (cast) => cast.person[this.sortValue], 'asc');
+  }
+
+  setSortOption(sortValue: string) {
+    this.sortValue = sortValue;
+  }
+
+  /**
+   * Store initializer. Should only be called once.
+   */
+  *init() {
+    yield Promise.all([this.loadShow(), this.loadCasts()]);
+  }
+
+  *loadShow() {
+    const response: ApiResponse<IShow> = yield getShowRequest(defaultShowId);
+
+    this.showResults = {
+      data: this.showResults.data,
+      isRequesting: false,
+      ...response, // Overwrites the default data prop or adds an error. Also adds the statusCode.
+    };
+  }
+
+  *loadCasts() {
+    const response: ApiResponse<ICast[]> = yield getCastsRequest(defaultShowId);
+
+    this.castsResults = {
+      data: this.castsResults.data,
+      isRequesting: false,
+      ...response, // Overwrites the default data prop or adds an error. Also adds the statusCode.
+    };
+  }
+}

src/components/pages/index-page/IndexPage.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Divider, Header, Icon } from 'semantic-ui-react';
+import { LoadingIndicator } from '../../ui/loading-indicator/LoadingIndicator';
+import { MainOverview } from './main-overview/MainOverview';
+import { Actors } from './actors/Actors';
+import { observer } from 'mobx-react-lite';
+import { IndexPageStore } from './IndexPage.store';
+import { useLocalStore } from '../../shared/local-store-provider/LocalStoreProvider';
+
+interface IProps {}
+
+export const IndexPage: React.FC<IProps> = observer((props) => {
+  const localStore = useLocalStore<IndexPageStore>();
+
+  return (
+    <LoadingIndicator isActive={localStore.isRequesting}>
+      <MainOverview />
+      <Divider horizontal={true}>
+        <Header as="h4">
+          <Icon name="users" /> Actors
+        </Header>
+      </Divider>
+      <Actors />
+    </LoadingIndicator>
+  );
+});
+
+IndexPage.displayName = 'IndexPage';
+IndexPage.defaultProps = {};