Merge pull request #2 from asmirnov-backend/dev

0.2.0

.eslintignore

@@ -0,0 +1,20 @@
+.now/*
+*.css
+.changeset
+dist
+esm/*
+public/*
+tests/*
+scripts/*
+*.config.js
+.DS_Store
+node_modules
+coverage
+.next
+build
+!.commitlintrc.cjs
+!.lintstagedrc.cjs
+!jest.config.js
+!plopfile.js
+!react-shim.js
+!tsup.config.ts

.eslintrc.json

@@ -1,3 +1,93 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": [
+    "plugin:react/recommended",
+    "plugin:prettier/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:jsx-a11y/recommended"
+  ],
+  "plugins": [
+    "react",
+    "unused-imports",
+    "import",
+    "@typescript-eslint",
+    "jsx-a11y",
+    "prettier"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "rules": {
+    "no-console": "warn",
+    "react/prop-types": "off",
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off",
+    "react-hooks/exhaustive-deps": "off",
+    "jsx-a11y/click-events-have-key-events": "warn",
+    "jsx-a11y/interactive-supports-focus": "warn",
+    "prettier/prettier": "warn",
+    "no-unused-vars": "off",
+    "unused-imports/no-unused-vars": "off",
+    "unused-imports/no-unused-imports": "warn",
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      {
+        "args": "after-used",
+        "ignoreRestSiblings": false,
+        "argsIgnorePattern": "^_.*?$"
+      }
+    ],
+    "import/order": [
+      "warn",
+      {
+        "groups": [
+          "type",
+          "builtin",
+          "object",
+          "external",
+          "internal",
+          "parent",
+          "sibling",
+          "index"
+        ],
+        "pathGroups": [
+          {
+            "pattern": "~/**",
+            "group": "external",
+            "position": "after"
+          }
+        ],
+        "newlines-between": "always"
+      }
+    ],
+    "react/self-closing-comp": "warn",
+    "react/jsx-sort-props": [
+      "warn",
+      {
+        "callbacksLast": true,
+        "shorthandFirst": true,
+        "noSortAlphabetically": false,
+        "reservedFirst": true
+      }
+    ],
+    "padding-line-between-statements": [
+      "warn",
+      { "blankLine": "always", "prev": "*", "next": "return" },
+      { "blankLine": "always", "prev": ["const", "let", "var"], "next": "*" },
+      {
+        "blankLine": "any",
+        "prev": ["const", "let", "var"],
+        "next": ["const", "let", "var"]
+      }
+    ]
+  }
 }

.github/workflows/deploy.yml

@@ -0,0 +1,93 @@
+# Sample workflow for building and deploying a Next.js site to GitHub Pages
+#
+# To get started with Next.js see: https://nextjs.org/docs/getting-started
+#
+name: Deploy Next.js site to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Detect package manager
+        id: detect-package-manager
+        run: |
+          if [ -f "${{ github.workspace }}/yarn.lock" ]; then
+            echo "manager=yarn" >> $GITHUB_OUTPUT
+            echo "command=install" >> $GITHUB_OUTPUT
+            echo "runner=yarn" >> $GITHUB_OUTPUT
+            exit 0
+          elif [ -f "${{ github.workspace }}/package.json" ]; then
+            echo "manager=npm" >> $GITHUB_OUTPUT
+            echo "command=ci" >> $GITHUB_OUTPUT
+            echo "runner=npx --no-install" >> $GITHUB_OUTPUT
+            exit 0
+          else
+            echo "Unable to determine package manager"
+            exit 1
+          fi
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: ${{ steps.detect-package-manager.outputs.manager }}
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+        with:
+          # Automatically inject basePath in your Next.js configuration file and disable
+          # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
+          #
+          # You may remove this line if you want to manage the configuration yourself.
+          static_site_generator: next
+      - name: Restore cache
+        uses: actions/cache@v4
+        with:
+          path: |
+            .next/cache
+          # Generate a new cache whenever packages or source files change.
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          # If source files changed but packages didn't, rebuild from a prior cache.
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
+      - name: Install dependencies
+        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
+      - name: Build with Next.js
+        run: ${{ steps.detect-package-manager.outputs.runner }} next build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./build
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -4,7 +4,6 @@
 /node_modules
 /.pnp
 .pnp.js
-.yarn/install-state.gz
 
 # testing
 /coverage
@@ -15,8 +14,6 @@
 
 # production
 /build
-/dist
-/html
 
 # misc
 .DS_Store

README.md

@@ -1,3 +1 @@
-# Caloricity
-
-![](./view.png)
+# Caloricity frontend

src/api/useDeleteMutation.ts → api/useDeleteMutation.ts

@@ -4,6 +4,6 @@ export default function useDeleteMutation(input: { url: string; id: string }) {
   return useSWRMutation(`${input.url}/${input.id}`, (url: string) =>
     fetch(url, {
       method: "DELETE",
-    })
+    }),
   );
 }

src/api/useMutation.ts → api/useMutation.ts

@@ -1,4 +1,5 @@
 import useSWRMutation from "swr/mutation";
+
 import { backendUrl } from "../utils/backendUrl.const";
 
 export default function useMutation<Form>(
@@ -7,19 +8,26 @@ export default function useMutation<Form>(
     | {
         method: "POST";
       }
-    | { method: "PUT"; id: string } = { method: "POST" }
+    | { method: "PUT"; id: string | null } = { method: "POST" },
 ) {
   const add = options.method == "PUT" ? "/" + options.id : "";
+  let urlForRequest: string | null;
+
+  if (options.method == "PUT" && options.id === null) {
+    urlForRequest = null;
+  } else {
+    urlForRequest = `${backendUrl}${url}` + add;
+  }
 
   return useSWRMutation(
-    `${backendUrl}${url}` + add,
+    urlForRequest,
     (urlForFetch: string, { arg }: { arg: Form }) =>
       fetch(urlForFetch, {
         method: options.method,
         body: JSON.stringify(arg),
         headers: {
           "content-type": "application/json",
         },
-      })
+      }),
   );
 }

src/api/usePageQuery.ts → api/usePageQuery.ts

@@ -1,7 +1,8 @@
 import useSWR from "swr";
 import { useSearchParams } from "next/navigation";
+
 import { backendUrl } from "../utils/backendUrl.const";
-import { PageOutput } from "./interfaces/PageOutput.interface";
+import { PageOutput } from "../interfaces/PageOutput.interface";
 
 // TODO Add Generic type
 export default function usePageQuery(
@@ -10,12 +11,13 @@ export default function usePageQuery(
     page: number;
     rowsPerPage: number;
     queryParams?: Record<string, any>;
-  }
+  },
 ) {
   const searchParams = useSearchParams();
   const search = searchParams?.get("search");
 
   const queryParams = new URLSearchParams(options.queryParams);
+
   queryParams.set("page", (options.page - 1).toString());
   queryParams.set("size", options.rowsPerPage.toString());
   queryParams.set("sort", "updatedAt,desc");
@@ -27,6 +29,6 @@ export default function usePageQuery(
       fetch(resource, init).then((res) => res.json()),
     {
       keepPreviousData: true,
-    }
+    },
   );
 }

src/api/useQuery.ts → api/useQuery.ts

@@ -1,11 +1,12 @@
 import useSWR from "swr";
+
 import { backendUrl } from "../utils/backendUrl.const";
 
-export default function useQuery<Form>(id: string, url: string) {
+export default function useQuery<Form>(id: string | null, url: string) {
   return useSWR<Form>(
-    `${backendUrl}${url}/${id}`,
+    id ? `${backendUrl}${url}/${id}` : null,
     (resource: string, init: any) =>
       fetch(resource, init).then((res) => res.json()),
-    {}
+    {},
   );
 }

src/api/useSubmit.ts → api/useSubmit.ts

@@ -11,12 +11,14 @@ export default function useSubmit<T extends FieldValues>(input: {
 
   return async (params: T) => {
     const res = await input.trigger(params);
+
     if (res.ok) {
       enqueueSnackbar("Успешно", { variant: "success" });
       setTimeout(back, 1000);
     } else {
       const json = await res.json();
       const errorText = "title" in json ? json.title : "Ошибка";
+
       enqueueSnackbar(errorText, { variant: "error" });
       console.error(json?.detail ?? json);
     }

src/components/Actions/DeleteAction.tsx → components/Actions/DeleteAction.tsx

@@ -10,6 +10,7 @@ import {
 } from "@nextui-org/react";
 import { Trash2 } from "lucide-react";
 import { useSnackbar } from "notistack";
+
 import useDeleteMutation from "../../api/useDeleteMutation";
 
 export const DeleteAction = (input: { id: string; url: string }) => {
@@ -19,19 +20,23 @@ export const DeleteAction = (input: { id: string; url: string }) => {
 
   const doDelete = async () => {
     const res = await trigger();
+
     if (res.ok) {
       onClose();
       enqueueSnackbar("Успешно удалено", { variant: "success" });
       setTimeout(() => location.reload(), 2500);
     } else {
-      enqueueSnackbar("Ошибка", { variant: "error" });
-      console.log(await res.json());
+      const json = await res.json();
+      const errorText = "title" in json ? json.title : "Ошибка";
+
+      enqueueSnackbar(errorText, { variant: "error" });
+      console.error(json?.detail ?? json);
     }
   };
 
   return (
     <>
-      <Tooltip content="Удалить" className="bg-pink-400">
+      <Tooltip className="bg-pink-400" content="Удалить">
         <button onClick={onOpen}>
           <Trash2 fill="#f9a8d4" />
         </button>
@@ -46,12 +51,12 @@ export const DeleteAction = (input: { id: string; url: string }) => {
               <div className="flex flex-row gap-3 w-full">
                 <Button
                   color="primary"
-                  onPress={onClose}
                   isDisabled={isMutating}
+                  onPress={onClose}
                 >
                   Назад
                 </Button>
-                <div className="flex flex-row gap-3 w-full"></div>
+                <div className="flex flex-row gap-3 w-full" />
                 <Button
                   color="danger"
                   isDisabled={isMutating}