Merge pull request #155 from Studio-Yandex-Practicum/development/api/…

…athorization

Athorization

.env.sample

@@ -0,0 +1 @@
+APP_HOSTNAME=https://gealit.ru/

.gitignore

@@ -10,6 +10,7 @@ lerna-debug.log*
 node_modules
 dist
 .env
+package-lock.json
 
 *.local
 

.prettierrc

@@ -3,6 +3,6 @@
   "semi": false,
   "arrowParens": "avoid",
   "bracketSameLine": true,
-  "printWidth": 120,
+  "printWidth": 110,
   "trailingComma": "none"
 }

README.md

@@ -51,6 +51,7 @@ Frontend часть проекта для сайта maxboom. Онлайн ма
 
 1. Убедитесь что у вас установлен `node`
 2. Выполните команду `npm install`
+3. Затем команду `npm run init` для создания .env файла и записи в него необходимой информации
 
 ## Запуск Devserver
 

config/storybook/decorators/StoreDecorator.js

@@ -0,0 +1,7 @@
+import {StoreProvider} from "../../../src/app/providers/SroreProvider/index.js";
+
+export const StoreDecorator = (initialState) => (Story) =>
+(  <StoreProvider initialState={initialState}>
+    <Story/>
+  </StoreProvider>);
+

config/storybook/decorators/StyleDecorator.js

@@ -1,3 +1,3 @@
-import '../../../src/index.scss';
+import '../../../src/app/styles/index.scss';
 
 export const StyleDecorator = (story) => story();

config/storybook/preview.ts

@@ -1,6 +1,8 @@
 import type { Preview } from '@storybook/react'
 import { StyleDecorator } from './decorators/StyleDecorator'
 import { RouterDecorator } from './decorators/RouterDecorator'
+import { StoreDecorator } from './decorators/StoreDecorator'
+
 const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
@@ -11,7 +13,7 @@ const preview: Preview = {
       }
     }
   },
-  decorators: [StyleDecorator, RouterDecorator]
+  decorators: [StyleDecorator, RouterDecorator, StoreDecorator({})]
 }
 
 export default preview

config/storybook/webpack.config.js

@@ -1,5 +1,6 @@
-const { buildCssLoader } = require("../build/loaders/buildCssLoader");
+const { buildCssLoader } = require("../build/loaders/buildCssLoader.cjs");
 const path = require("path");
+const { DefinePlugin } = require("webpack");
 const cssLoader = buildCssLoader(false);
 
 module.exports = ({ config }) => {
@@ -17,5 +18,11 @@ module.exports = ({ config }) => {
   });
   config.resolve.alias['@'] = path.resolve(__dirname, '..', '..', 'src');
 
+  config?.plugins?.push(
+    new DefinePlugin({
+      __API__: JSON.stringify(process.env.APP_HOSTNAME),
+    }),
+  );
+
   return config;
 };

init.js

@@ -0,0 +1,3 @@
+import fs from 'fs';
+
+fs.copyFileSync('.env.sample', '.env')

package.json

@@ -6,7 +6,9 @@
     "node": ">=18",
     "npm": ">=9.5"
   },
+  "type": "module",
   "scripts": {
+    "init": "node init",
     "build:dev": "webpack --node-env=development",
     "build:prod": "webpack --node-env=production",
     "start": "webpack serve",
@@ -64,6 +66,7 @@
     "@typescript-eslint/parser": "6.4.1",
     "babel-loader": "9.1.3",
     "css-loader": "6.8.1",
+    "dotenv": "16.3.1",
     "eslint": "8.47.0",
     "eslint-config-prettier": "9.0.0",
     "eslint-plugin-react": "7.33.2",

src/app/App.tsx

@@ -0,0 +1,22 @@
+import { RouterProvider } from 'react-router-dom'
+import { router } from './router/AppRouter'
+import { useEffect } from 'react'
+import { loginActions } from '@/features/login/model/slice/loginSlice'
+import { useAppDispatch } from '@/shared/libs/hooks/store'
+import { tokenFromStorageGet } from '@/shared/libs/helpers/localStorageHandler'
+import { $api } from '@/shared/api/api'
+
+function App() {
+  const dispatch = useAppDispatch()
+
+  useEffect(() => {
+    const token = tokenFromStorageGet()
+    if (token) {
+      dispatch(loginActions.initAuth(token))
+      $api.addToken(token)
+    }
+  }, [dispatch])
+  return <RouterProvider router={router} />
+}
+
+export default App

src/app/providers/SroreProvider/config/StateSchema.ts

@@ -0,0 +1,16 @@
+import { LoginSchema } from '@/features/login/model/types/types'
+import { ApiInstance } from '@/shared/api/api'
+
+export interface StateSchema {
+  login: LoginSchema
+}
+
+export interface ThunkExtraArg {
+  api: ApiInstance
+}
+
+export interface ThunkConfig<E> {
+  rejectValue: E
+  extra: ThunkExtraArg
+  state: StateSchema
+}

src/app/providers/SroreProvider/config/store.ts

@@ -0,0 +1,27 @@
+import { configureStore, ReducersMapObject } from '@reduxjs/toolkit'
+import { loginReducer } from '@/features/login/model/slice/loginSlice'
+import { StateSchema, ThunkExtraArg } from './StateSchema'
+import { $api } from '@/shared/api/api'
+
+const rootReducer: ReducersMapObject<StateSchema> = {
+  login: loginReducer
+}
+
+export function createReduxStore(initialState: StateSchema) {
+  const extraArg: ThunkExtraArg = {
+    api: $api
+  }
+  return configureStore({
+    reducer: rootReducer,
+    devTools: __IS_DEV__,
+    preloadedState: initialState,
+    middleware: getDefaultMiddleware =>
+      getDefaultMiddleware({
+        thunk: {
+          extraArgument: extraArg
+        }
+      })
+  })
+}
+
+export type AppDispatch = ReturnType<typeof createReduxStore>['dispatch']

src/app/providers/SroreProvider/index.ts

@@ -0,0 +1,3 @@
+export type { StateSchema } from './config/StateSchema'
+
+export { StoreProvider } from './ui/StoreProvider'

src/app/providers/SroreProvider/ui/StoreProvider.tsx

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react'
+import { Provider } from 'react-redux'
+import { DeepPartial } from '@reduxjs/toolkit'
+import { StateSchema } from '../config/StateSchema'
+import { createReduxStore } from '../config/store'
+
+interface StoreProviderProps {
+  initialState?: DeepPartial<StateSchema> // DeepPartial для Storybook
+  children?: ReactNode
+}
+
+export const StoreProvider = (props: StoreProviderProps) => {
+  const { initialState, children } = props
+
+  const store = createReduxStore(initialState as StateSchema) // кастуем DeepPartial
+
+  return <Provider store={store}>{children}</Provider>
+}

src/app/router/AppRouter/index.ts

@@ -0,0 +1,3 @@
+import { AppRouter } from './ui/AppRouter'
+
+export { AppRouter as router }

src/router/index.tsx → src/app/router/AppRouter/ui/AppRouter.tsx

@@ -10,7 +10,7 @@ import ComparePage from '@/pages/ComparePage/ComparePage'
 import FavoritesPage from '@/pages/FavoritesPage/FavoritesPage'
 import CartPage from '@/pages/CartPage/CartPage'
 
-export const router = createBrowserRouter([
+export const AppRouter = createBrowserRouter([
   {
     path: Routes.HOME,
     element: <RootPage />,

src/app/styles/index.scss

@@ -0,0 +1,5 @@
+@import '@/shared/styles/utils/variables';
+
+@import 'vendors/normalise';
+
+@import 'base/reset';

types/statics/index.d.ts → src/app/types/statics/index.d.ts

@@ -11,3 +11,6 @@ declare module '*.webp'
 declare module '*.png'
 declare module '*.jpg'
 declare module '*.jpeg'
+
+declare const __API__: string;
+declare const __IS_DEV__: boolean;