feat: added 40 point task

Author: Дмитрий Никифоров

.env

@@ -0,0 +1 @@
+API=http://localhost:3000

package.json

@@ -24,7 +24,7 @@
     "@vkontakte/vk-bridge": "^2.0.2"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "PORT=3005 react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

src/assets/styles/main.css

@@ -1,13 +1,41 @@
-import { View, Panel } from '@vkontakte/vkui';
+import { View, Panel, AdaptivityProvider, AppRoot, ConfigProvider } from '@vkontakte/vkui';
+import { useEffect } from 'react';
+import { useAppSelector } from '../../hooks/use-store';
+import { NotDefaultTheme } from '../../store/reducers/settingsSlice';
 import Inbox from '../inbox/Inbox';
 
 const App = () => {
+  const settings = useAppSelector((state) => state.settings);
+
+  useEffect(() => {
+    if (settings.notDefaultTheme) {
+      document.body.classList.remove('vkui--vkBase--dark');
+      if (settings.notDefaultTheme === NotDefaultTheme.MONOCHROME) {
+        document.body.classList.remove('vkui--vkBase--light');
+      }
+      document.body.classList.remove('vkui--vkBase--monochrome');
+      document.body.classList.remove('vkui--vkBase--dog');
+      document.body.classList.remove('vkui--vkBase--cat');
+      document.body.classList.add(`vkui--vkBase--${settings.notDefaultTheme}`);
+    } else {
+      document.body.classList.remove('vkui--vkBase--monochrome');
+      document.body.classList.remove('vkui--vkBase--dog');
+      document.body.classList.remove('vkui--vkBase--cat');
+    }
+  }, [settings]);
+
   return (
-    <View activePanel="inbox">
-      <Panel id="inbox">
-        <Inbox />
-      </Panel>
-    </View>
+    <ConfigProvider appearance={settings.theme}>
+      <AdaptivityProvider>
+        <AppRoot>
+          <View activePanel="inbox">
+            <Panel id="inbox">
+              <Inbox />
+            </Panel>
+          </View>
+        </AppRoot>
+      </AdaptivityProvider>
+    </ConfigProvider>
   );
 };
 

src/components/app/App.tsx

@@ -1,15 +1,25 @@
+import { Dispatch, SetStateAction } from 'react';
 import {
   Icon20MailOutline,
   Icon20BookmarkOutline,
   Icon20ExclamationMarkOutline,
   Icon20RoubleOutline,
-  Icon20KeyOutline
+  Icon20KeyOutline,
+  Icon20FilterOutline
 } from '@vkontakte/icons';
 import { Panel, PanelHeader, Group, List, Cell, Caption } from '@vkontakte/vkui';
 
 import styles from './menu.module.css';
 
-const Menu = ({ activeCategory, getMails }: { activeCategory: string; getMails: (category: string) => void }) => {
+const Menu = ({
+  activeCategory,
+  getMails,
+  setModal
+}: {
+  activeCategory: string;
+  getMails: (category: string) => void;
+  setModal: Dispatch<SetStateAction<string>>;
+}) => {
   return (
     <Panel>
       <PanelHeader separator={false} />
@@ -95,6 +105,14 @@ const Menu = ({ activeCategory, getMails }: { activeCategory: string; getMails:
           >
             <Caption level="1">Доверенный</Caption>
           </Cell>
+          <Cell
+            className={styles.cell}
+            expandable
+            before={<Icon20FilterOutline />}
+            onClick={() => setModal('settings')}
+          >
+            <Caption level="1">Настройки</Caption>
+          </Cell>
         </List>
       </Group>
     </Panel>

src/components/inbox/Inbox.tsx

@@ -1,6 +1,5 @@
 import ReactDOM from 'react-dom/client';
 import { Provider } from 'react-redux';
-import { AdaptivityProvider, ConfigProvider, AppRoot } from '@vkontakte/vkui';
 import '@vkontakte/vkui/dist/vkui.css';
 import './assets/styles/main.css';
 import '@vkontakte/vkui/dist/unstable.css';
@@ -13,13 +12,7 @@ const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
 
 root.render(
   <Provider store={store}>
-    <ConfigProvider>
-      <AdaptivityProvider>
-        <AppRoot>
-          <App />
-        </AppRoot>
-      </AdaptivityProvider>
-    </ConfigProvider>
+    <App />
   </Provider>
 );
 

src/components/menu/menu.tsx

@@ -1,17 +1,18 @@
-import { configureStore, combineReducers } from "@reduxjs/toolkit";
+import { configureStore, combineReducers } from '@reduxjs/toolkit';
 
-import { mailsApi } from "./services/mails";
-import mailsSlice from "./reducers/mailsSlice";
+import { mailsApi } from './services/mails';
+import mailsSlice from './reducers/mailsSlice';
+import settingsSlice from './reducers/settingsSlice';
 
 const rootReducer = combineReducers({
   [mailsApi.reducerPath]: mailsApi.reducer,
   mails: mailsSlice,
+  settings: settingsSlice
 });
 
 export const store = configureStore({
   reducer: rootReducer,
-  middleware: (getDefaultMiddleware) =>
-    getDefaultMiddleware().concat(mailsApi.middleware),
+  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(mailsApi.middleware)
 });
 
 export type RootState = ReturnType<typeof store.getState>;

src/index.tsx

@@ -0,0 +1,36 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { Appearance } from '@vkontakte/vkui';
+
+export enum NotDefaultTheme {
+  MONOCHROME = 'monochrome',
+  CAT = 'cat',
+  DOG = 'dog',
+}
+
+const initialState: { theme: Appearance; notDefaultTheme: NotDefaultTheme | undefined } = {
+  theme: Appearance.LIGHT,
+  notDefaultTheme: undefined
+};
+
+export const settingsSlice = createSlice({
+  name: 'settings',
+  initialState,
+  reducers: {
+    setTheme(state, action: PayloadAction<Appearance | NotDefaultTheme>) {
+      if (Object.values(Appearance).includes(action.payload as Appearance)) {
+        state.theme = action.payload as Appearance;
+        state.notDefaultTheme = initialState.notDefaultTheme;
+      } else {
+        state.theme = Appearance.LIGHT;
+        state.notDefaultTheme = action.payload as NotDefaultTheme;
+      }
+    },
+    resetNotDefaultTheme(state) {
+      state.notDefaultTheme = initialState.notDefaultTheme;
+    }
+  }
+});
+
+export const { setTheme, resetNotDefaultTheme } = settingsSlice.actions;
+
+export default settingsSlice.reducer;

src/store/index.ts

@@ -4,7 +4,7 @@ import { mail } from '../../interface/mail';
 export const mailsApi = createApi({
   reducerPath: 'mailsApi',
   baseQuery: fetchBaseQuery({
-    baseUrl: 'http://localhost:3000'
+    baseUrl: process.env.API || 'http://localhost:3000'
   }),
   endpoints: (build) => ({
     fetchMails: build.query<mail.Mail[], string>({