lesson 3 in progress

.eslintrc.cjs

@@ -1,8 +1,10 @@
 module.exports = {
   extends: ['@it-incubator/eslint-config', 'plugin:storybook/recommended'],
+  plugins:['myPlugin'],
   rules: {
     'no-console': ['warn', {
       allow: ['warn', 'error']
-    }]
+    }],
+    "myPlugin/no-wrong-redux-import": "error"
   }
 };

eslint/index.js

@@ -0,0 +1,12 @@
+const fs = require('fs')
+const path = require('path')
+
+const ruleFiles = fs
+  .readdirSync(__dirname)
+  .filter(file => file !== 'index.js' && !file.endsWith('test.js'))
+
+const rules = Object.fromEntries(
+  ruleFiles.map(file => [path.basename(file, '.js'), require('./' + file)])
+)
+
+module.exports = { rules }

eslint/no-wrong-redux-import.js

@@ -0,0 +1,26 @@
+// @ts-check
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    fixable: 'code',
+  },
+  create(context) {
+    return {
+      ImportDeclaration(node) {
+        if (
+          (node.source && node.source.value === '@reduxjs/toolkit/query/') ||
+          node.source.value === '@reduxjs/toolkit/query'
+        ) {
+          context.report({
+            node,
+            message:
+              "Import from '@reduxjs/toolkit/query/' is disallowed. Please import from '@reduxjs/toolkit/query/react'.",
+            fix(fixer) {
+              return fixer.replaceText(node.source, "'@reduxjs/toolkit/query/react'")
+            },
+          })
+        }
+      },
+    }
+  },
+}

package.json

@@ -58,6 +58,7 @@
     "storybook": "^7.2.1",
     "stylelint": "^15.10.2",
     "typescript": "^5.0.2",
-    "vite": "^4.4.5"
+    "vite": "^4.4.5",
+    "eslint-plugin-myPlugin": "file:./eslint"
   }
 }

pnpm-lock.yaml

@@ -115,6 +115,9 @@ devDependencies:
   eslint:
     specifier: ^8.45.0
     version: 8.45.0
+  eslint-plugin-myPlugin:
+    specifier: file:./eslint
+    version: file:eslint
   eslint-plugin-react-hooks:
     specifier: ^4.6.0
     version: 4.6.0(eslint@8.45.0)
@@ -10210,3 +10213,9 @@ packages:
   /zod@3.21.4:
     resolution: {integrity: sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==}
     dev: false
+
+  file:eslint:
+    resolution: {directory: eslint, type: directory}
+    name: eslint
+    version: 0.0.0
+    dev: true

src/router.tsx

@@ -1,14 +1,43 @@
-import { createBrowserRouter, RouteObject, RouterProvider } from 'react-router-dom'
+import {
+  createBrowserRouter,
+  Navigate,
+  Outlet,
+  RouteObject,
+  RouterProvider,
+} from 'react-router-dom'
 
-const routes: RouteObject[] = [
+import { useGetDecksQuery } from '@/services/base-api'
+
+const publicRoutes: RouteObject[] = [
+  {
+    path: '/login',
+    element: <div>login</div>,
+  },
+]
+
+const privateRoutes: RouteObject[] = [
   {
     path: '/',
     element: <div>hello</div>,
   },
 ]
-
-const router = createBrowserRouter(routes)
+const router = createBrowserRouter([
+  {
+    element: <PrivateRoutes />,
+    children: privateRoutes,
+  },
+  ...publicRoutes,
+])
 
 export const Router = () => {
+  const result = useGetDecksQuery()
+
+  console.log(result)
+
   return <RouterProvider router={router} />
 }
+function PrivateRoutes() {
+  const isAuthenticated = false
+
+  return isAuthenticated ? <Outlet /> : <Navigate to="/login" />
+}

src/services/auth/index.ts

@@ -1 +0,0 @@
-export * from './auth.ts'

src/services/base-api.ts

@@ -1,9 +1,9 @@
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
 
-export const api = createApi({
-  reducerPath: 'api',
+export const baseApi = createApi({
+  reducerPath: 'baseApi',
   baseQuery: fetchBaseQuery({
-    baseUrl: 'http://localhost:3333',
+    baseUrl: 'https://api.flashcards.andrii.es',
     credentials: 'include',
     prepareHeaders: headers => {
       headers.append('x-auth-skip', 'true')
@@ -11,11 +11,11 @@ export const api = createApi({
   }),
   endpoints: builder => {
     return {
-      getMe: builder.query<any, void>({
+      getDecks: builder.query<any, void>({
         query: () => `v1/decks`,
       }),
     }
   },
 })
 
-export const { useGetMeQuery } = api
+export const { useGetDecksQuery } = baseApi

src/services/store.ts

@@ -1,13 +1,16 @@
 import { configureStore } from '@reduxjs/toolkit'
+import { setupListeners } from '@reduxjs/toolkit/query/react'
 
-import { api } from '@/services/auth'
+import { baseApi } from './base-api'
 
 export const store = configureStore({
   reducer: {
-    [api.reducerPath]: api.reducer,
+    [baseApi.reducerPath]: baseApi.reducer,
   },
-  middleware: getDefaultMiddleware => getDefaultMiddleware().concat(api.middleware),
+  middleware: getDefaultMiddleware => getDefaultMiddleware().concat(baseApi.middleware),
 })
 
 export type AppDispatch = typeof store.dispatch
 export type RootState = ReturnType<typeof store.getState>
+
+setupListeners(store.dispatch)