release v1.0.0 (#141)

README.md

@@ -3,7 +3,7 @@
 [![Production deployment](https://api.netlify.com/api/v1/badges/a154da12-c432-4157-b1b2-52876346d0db/deploy-status)](https://stegoer.netlify.app/)
 [![Continuous Integration](https://github.com/stegoer/client/actions/workflows/ci.yml/badge.svg)](https://github.com/stegoer/client/actions/workflows/ci.yml)
 [![Docs](https://github.com/stegoer/client/actions/workflows/docs.yml/badge.svg)](https://github.com/stegoer/client/actions/workflows/docs.yml)
-[![pre-commit.ci status](https://results.pre-commit.ci/badge/github/stegoer/client/main.svg)](https://results.pre-commit.ci/latest/github/stegoer/client/main)
+[![pre-commit.ci status](https://results.pre-commit.ci/badge/github/stegoer/client/master.svg)](https://results.pre-commit.ci/latest/github/stegoer/client/master)
 [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat)](https://prettier.io/)
 
 Client is using TypeScript, NextJS and GraphQL.
@@ -12,19 +12,32 @@ Client is using TypeScript, NextJS and GraphQL.
 
 Client website: https://stegoer.netlify.app/
 
+Development documentation: https://github.com/stegoer/client/blob/master/README.md
+
+Reference documentation: https://stegoer.github.io/client
+
 Source code: https://github.com/stegoer/client
 
 ---
 
 ## Installation
 
-### Install dependencies
+### Install instructions
+
+1. Install Node.js https://nodejs.org/en/download/
+2. Clone this repository
+
+```sh
+git clone git@github.com:stegoer/client.git
+```
+
+4. Install dependencies
 
 ```sh
 npm install
 ```
 
-### Create the `.env.local` file
+#### Create the `.env.local` file
 
 Create a `.env.local` file and copy the contents of `.env.local.example` file into the `.env.local` file
 
@@ -40,6 +53,12 @@ cp .env.local.example .env.local
 npm run dev
 ```
 
+### [package.json](https://github.com/stegoer/client/blob/master/package.json) scripts
+
+```sh
+npm run-script
+```
+
 ### GraphQL
 
 [GraphQL Code Generator](https://www.graphql-code-generator.com/)
@@ -49,15 +68,15 @@ configuration options.
 #### Codegen
 
 ```sh
-npm run gen
+npm run graphql:gen
 ```
 
 To add a new query or mutation head to `src/graphql/user` or
 `src/graphql/image` and add a new file.
 
 To add a new fragment head to the `src/graphql/fragments` folder.
 
-### Docs
+### Reference documentation
 
 ```sh
 npm run docs:build
@@ -68,6 +87,9 @@ which is then published via the
 [Docs GitHub Action](https://github.com/stegoer/client/blob/master/.github/workflows/docs.yml)
 on [GitHub Pages](https://pages.github.com/).
 
+See [typedoc.json](https://github.com/stegoer/client/blob/master/typedoc.json)
+for configuration.
+
 ## Contributing
 
 ```sh

src/components/input/password-strength/password-strength.constants.ts

@@ -1,4 +1,4 @@
-type Requirement = {
+export type Requirement = {
   re: RegExp;
   label: string;
 };

src/components/navigation/next.link.tsx

@@ -2,7 +2,7 @@ import Link from "next/link";
 
 import type { PropsWithChildren } from "react";
 
-type NextLinkProps = PropsWithChildren<{
+export type NextLinkProps = PropsWithChildren<{
   href: string;
   passHref?: boolean;
 }>;

src/components/navigation/text.link.tsx

@@ -2,7 +2,7 @@ import { Text } from "@mantine/core";
 
 import type { PropsWithChildren } from "react";
 
-type TextLinkProps = PropsWithChildren<{
+export type TextLinkProps = PropsWithChildren<{
   href: string;
 }>;
 

src/features/docs/components/docs.component.tsx

@@ -10,6 +10,9 @@ const DocsComponent = (): JSX.Element => {
       <Accordion.Item label="server">
         <DocsItem docType="server" />
       </Accordion.Item>
+      <Accordion.Item label="documentation">
+        <DocsItem docType="documentation" />
+      </Accordion.Item>
     </Accordion>
   );
 };

src/features/docs/components/docs.item.tsx

@@ -1,21 +1,35 @@
 import { List } from "@mantine/core";
-import { DOCUMENTATION_URLS, SOURCE_URLS } from "@features/docs/docs.constants";
+import {
+  DEVELOPMENT_DOCUMENTATION_URLS,
+  REFERENCE_URLS,
+  SOURCE_URLS,
+} from "@features/docs/docs.constants";
 import type { DocType } from "@features/docs/docs.types";
 import TextLink from "@components/navigation/text.link";
-import { GitHubLogoIcon, ReaderIcon } from "@modulz/radix-icons";
+import { FileIcon, GitHubLogoIcon, ReaderIcon } from "@modulz/radix-icons";
 
-type DocsItemProps = {
+export type DocsItemProps = {
   docType: DocType;
 }
 
 const DocsItem = ({ docType }: DocsItemProps): JSX.Element => {
+  const referenceUrl = REFERENCE_URLS[docType]
+
   return (
     <List center>
       <List.Item icon={<ReaderIcon/>} >
-        <TextLink href={DOCUMENTATION_URLS[docType]}>
-          documentation
+        <TextLink href={DEVELOPMENT_DOCUMENTATION_URLS[docType]}>
+          development
         </TextLink>
       </List.Item>
+      {referenceUrl && (
+        <List.Item icon={<FileIcon />}>
+          <TextLink href={referenceUrl}>
+            reference
+          </TextLink>
+        </List.Item>
+      )
+      }
       <List.Item icon={<GitHubLogoIcon/>}>
         <TextLink href={SOURCE_URLS[docType]}>
           source

src/features/docs/docs.constants.ts

@@ -1,17 +1,30 @@
 import type { DocType } from "@features/docs/docs.types";
 
-export const CLIENT_DOCS_URL = `https://stegoer.github.io/client`;
-export const SERVER_DOCS_URL = `https://pkg.go.dev/github.com/stegoer/server`;
+export const CLIENT_DEVELOPMENT_DOCS_URL = `https://github.com/stegoer/client/blob/master/README.md`;
+export const SERVER_DEVELOPMENT_DOCS_URL = `https://github.com/stegoer/server/blob/main/README.md`;
+export const DOCUMENTATION_DEVELOPMENT_DOCS_URL = `https://github.com/stegoer/documentation/blob/main/README.md`;
 
-export const DOCUMENTATION_URLS: Record<DocType, string> = {
-  client: CLIENT_DOCS_URL,
-  server: SERVER_DOCS_URL,
+export const DEVELOPMENT_DOCUMENTATION_URLS: Record<DocType, string> = {
+  client: CLIENT_DEVELOPMENT_DOCS_URL,
+  server: SERVER_DEVELOPMENT_DOCS_URL,
+  documentation: DOCUMENTATION_DEVELOPMENT_DOCS_URL
+}
+
+export const CLIENT_REFERENCE_URL = `https://stegoer.github.io/client`;
+export const SERVER_REFERENCE_URL = `https://pkg.go.dev/github.com/stegoer/server`;
+
+export const REFERENCE_URLS: Record<DocType, string | undefined> = {
+  client: CLIENT_REFERENCE_URL,
+  server: SERVER_REFERENCE_URL,
+  documentation: undefined,
 }
 
 export const CLIENT_SOURCE_URL = `https://github.com/stegoer/client`;
 export const SERVER_SOURCE_URL = `https://github.com/stegoer/server`;
+export const DOCUMENTATION_SOURCE_URL = `https://github.com/stegoer/documentation`;
 
 export const SOURCE_URLS: Record<DocType, string> = {
   client: CLIENT_SOURCE_URL,
-  server: SERVER_SOURCE_URL
+  server: SERVER_SOURCE_URL,
+  documentation: DOCUMENTATION_SOURCE_URL
 }

src/features/docs/docs.types.ts

@@ -1 +1 @@
-export type DocType = `client` | `server`;
+export type DocType = `client` | `server` | `documentation`;

src/features/image-table/components/image-table.component.tsx

@@ -20,6 +20,8 @@ const ImageTable = dynamic(
   () => import(`@features/image-table/components/image-table/image-table`),
 );
 
+const navigationDisabledTimeout = 500; // 0.5 seconds
+
 const calculateEdgesIndexes = (page: number): readonly [number, number] => {
   return [(page - 1) * IMAGE_TABLE_PER_PAGE, page * IMAGE_TABLE_PER_PAGE];
 };
@@ -40,6 +42,7 @@ const ImageTableComponent = (): JSX.Element => {
   // relay pagination based query
   const [first, setFirst] = useState<number | undefined>(IMAGE_TABLE_PER_PAGE);
   const [last, setLast] = useState<number>();
+  const [navigationDisabled, setNavigationDisabled] = useState(false);
   const [startCursor, setStartCursor] = useState<string>();
   const [endCursor, setEndCursor] = useState<string>();
   const [imagesQuery, fetchImages] = useImagesQuery({
@@ -55,7 +58,7 @@ const ImageTableComponent = (): JSX.Element => {
     },
   });
   // UI constants
-  const loading = !imagesQuery.data && imagesQuery.fetching;
+  const loading = imagesQuery.fetching;
   const isFirstPage = page === 1;
   const isLastPage = Boolean(
     imagesQuery.data?.images.totalCount === 0 ||
@@ -78,6 +81,12 @@ const ImageTableComponent = (): JSX.Element => {
 
   const onMove = useCallback(
     (direction: MoveDirection) => {
+      // don't allow user to change pages quickly
+      setNavigationDisabled(true);
+      setTimeout(() => {
+        setNavigationDisabled(false);
+      }, navigationDisabledTimeout);
+
       const isLeft = direction === `left`;
 
       // don't set new variables if we would move outside of bounds
@@ -109,7 +118,8 @@ const ImageTableComponent = (): JSX.Element => {
 
   return (
     <>
-      {loading || imagesQuery.data?.images.edges.length === 0 ? (
+      {(loading && !imagesQuery.data) ||
+      imagesQuery.data?.images.edges.length === 0 ? (
         <ImageTableSkeleton
           error={
             imagesQuery.data?.images.edges.length === 0
@@ -124,7 +134,7 @@ const ImageTableComponent = (): JSX.Element => {
         />
       )}
       <ImageTableNavigation
-        loading={loading}
+        loading={loading || navigationDisabled}
         isFirstPage={isFirstPage}
         isLastPage={isLastPage}
         selectedPage={page}

src/layouts/navbar/navbar.tsx

@@ -5,7 +5,7 @@ import { Navbar as MantineNavbar } from "@mantine/core";
 import type { MantineNumberSize } from "@mantine/core";
 import type { Ref } from "react";
 
-type NavbarProps = {
+export type NavbarProps = {
   opened: boolean;
   breakpoint: MantineNumberSize;
   setRef?: Ref<HTMLElement>;