Merge pull request #15 from frontend-park-mail-ru/development

РК 3

.gitignore

@@ -4,3 +4,4 @@ serverConfig.json
 dist
 .vscode
 bun.lockb
+keys

Dockerfile

@@ -10,6 +10,9 @@ RUN npm run build
 FROM nginx:stable-alpine
 RUN rm /etc/nginx/conf.d/default.conf
 COPY nginx.conf /etc/nginx/conf.d
+COPY ./keys/ /usr/share/keys
+RUN nginx -t
+COPY sw.js /usr/share/nginx/html/
 COPY --from=builder /app/dist /usr/share/nginx/html
 COPY ./static /usr/share/nginx/html/static
 EXPOSE 80

README.md

@@ -38,3 +38,11 @@ export const apiUrl="https://mysite.com" // Без замыкающего сле
 ### Дополнительные команды
 
 `npm run lint` - запустить линтер
+
+### Запуск на деплой
+
+Надо разместить в поддиректории `/keys` этого репозитория файлы `fullchain.pem` и `privkey.pem`
+
+Вероятнее всего, Вам потребуется настроить nginx. Отредактируйте `nginx.conf`
+
+Запуск фронта делается через docker: `docker compose up --build -d`

docker-compose.yml

@@ -0,0 +1,16 @@
+services:
+  main_front:
+    container_name: main_front
+    build:
+      context: .
+      dockerfile: ./Dockerfile
+    ports:
+      - "0.0.0.0:443:443"
+      - "0.0.0.0:80:80"
+      - "0.0.0.0:8005:8005"
+      - "0.0.0.0:8005:8006"
+      - "0.0.0.0:8005:8007"
+    volumes:
+      - pumpkin-user-uploads:/usr/share/nginx/html/uploads
+volumes:
+  pumpkin-user-uploads:

nginx.conf

@@ -1,9 +1,18 @@
 server {
     listen 80;
 
+    return 301 https://$host$request_uri;
+}
+
+server {
+    listen 443 ssl;
+
     root /usr/share/nginx/html;
     index index.html;
 
+    ssl_certificate /usr/share/keys/fullchain.pem;
+    ssl_certificate_key /usr/share/keys/privkey.pem;
+
     # MIME-типы будут правильно определены автоматически
     location /static/ {
         root /static;
@@ -15,7 +24,7 @@ server {
         try_files /static /static/ =404;
     }
 
-    location ~* ^/(main\.js|runtime\.js|main\.css|.*\.ttf)$ {
+    location ~* ^/(main\.js|runtime\.js|main\.css|.*\.ttf|sw\.js)$ {
         try_files $uri =404;
     }
 
@@ -45,3 +54,37 @@ server {
         internal;
     }
 }
+
+server {
+    listen 8805 ssl;
+
+    server_name kanban-pumpkin.ru;
+    ssl_certificate /usr/share/keys/fullchain.pem;
+    ssl_certificate_key /usr/share/keys/privkey.pem;
+
+    location / {
+        proxy_pass http://0.0.0.0:8802;
+    }
+}
+server {
+    listen 8806 ssl;
+
+    server_name kanban-pumpkin.ru;
+    ssl_certificate /usr/share/keys/fullchain.pem;
+    ssl_certificate_key /usr/share/keys/privkey.pem;
+
+    location / {
+        proxy_pass http://0.0.0.0:8803;
+    }
+}
+server {
+    listen 8807 ssl;
+
+    server_name kanban-pumpkin.ru;
+    ssl_certificate /usr/share/keys/fullchain.pem;
+    ssl_certificate_key /usr/share/keys/privkey.pem;
+
+    location / {
+        proxy_pass http://0.0.0.0:8804;
+    }
+}

src/App.tsx

@@ -3,36 +3,60 @@ import './fonts.scss';
 import { createApp } from './jsxCore/core';
 import { HomePage } from './screens/HomePage';
 import { IComponentFunction } from './jsxCore/types';
-import { setApiUrl } from './api/apiHelper';
 import { MainApp } from './screens/MainApp';
-import { useRouterStore } from './stores/routerStore';
+import { setRouterStore, useRouterStore } from './stores/routerStore';
 import { ToastContainer } from './containers/ToastContainer';
-import { apiUrl } from './config';
 import { updateMe } from './stores/meStore';
-import { loadBoard } from './stores/activeBoardStore';
-import { updateBoards } from './stores/boardsStore';
-
-setApiUrl(apiUrl);
+import { getFlagRoutes } from './routes/routesFlag';
+import { CsatPoll } from './screens/CsatPoll';
+import { CsatResults } from './screens/CsatResults';
 
 const App: IComponentFunction = () => {
   const routerStore = useRouterStore();
-  console.log('Router store: ', routerStore);
 
   return (
     <>
       <div class="display-none"></div>
-      {routerStore.isApp ? (
-        <MainApp key="main_app" />
-      ) : (
-        <HomePage key="home_page" />
-      )}
+      {routerStore.isApp && <MainApp key="main_app" />}
+      {routerStore.isHome && <HomePage key="home_page" />}
+      {routerStore.isPoll && <CsatPoll key="csat_poll" />}
+      {routerStore.isCsatResults && <CsatResults key="csat_results" />}
       <ToastContainer key="toast_container" />
     </>
   );
 };
 
-loadBoard(useRouterStore().boardId);
 const appRoot = document.getElementById('app_root') as HTMLDivElement;
 createApp(App, appRoot);
 updateMe();
-updateBoards();
+
+setTimeout(() => {
+  setRouterStore(getFlagRoutes(window.location.pathname));
+}, 0);
+
+if ('serviceWorker' in navigator) {
+  window.addEventListener('load', function () {
+    navigator.serviceWorker.register('/sw.js').then(
+      function (registration) {
+        console.log(
+          'ServiceWorker registration successful with scope: ',
+          registration.scope
+        );
+      },
+      function (err) {
+        console.log('ServiceWorker registration failed: ', err);
+      }
+    );
+  });
+} else {
+  console.error('Service Worker is not available');
+}
+
+// const REFETCH_DELAY = 5000;
+
+// setInterval(() => {
+//   const activeBoard = useActiveBoardStore();
+//   if (activeBoard !== undefined) {
+//     loadBoard(activeBoard.id, true);
+//   }
+// }, REFETCH_DELAY);

src/api/apiHelper.ts

@@ -1,6 +1,7 @@
-let apiRoot: string = '';
+import { boardUrl, userUrl, pollUrl } from '@/config';
 let csrfToken: string = '';
-export let useMocks = false;
+export const useMocks =
+  boardUrl.toString() === 'mock' || userUrl.toString() === 'mock';
 
 interface IResponce {
   status: number;
@@ -15,9 +16,17 @@ interface IResponce {
  */
 const getApiUrl = (addr: string): string => {
   if (addr.startsWith('/')) {
-    return apiRoot + addr;
+    addr = addr.slice(1);
+  }
+  if (addr.startsWith('users') || addr.startsWith('auth')) {
+    const ret = userUrl + '/' + addr;
+    console.log(ret);
+    return ret;
+  } else if (addr.startsWith('poll')) {
+    return pollUrl + '/' + addr;
+  } else {
+    return boardUrl + '/' + addr;
   }
-  return apiRoot + '/' + addr;
 };
 
 const fetchApi = async (
@@ -99,15 +108,6 @@ export const apiDelete = async (addr: string) => {
   return fetchApi(addr, 'DELETE');
 };
 
-export const setApiUrl = (newApiRoot: string) => {
-  apiRoot = newApiRoot;
-  if (newApiRoot === 'mock') {
-    useMocks = true;
-  } else {
-    useMocks = false;
-  }
-};
-
 export const HTTP_STATUS_OK = 200;
 export const HTTP_STATUS_CREATED = 201;
 export const HTTP_STATUS_BAD_REQUEST = 400;

src/api/boards.ts

@@ -18,8 +18,9 @@ import {
   BoardContentResponse,
   BoardInfoResponse,
   BoardResponse,
-} from './types';
+} from './responseTypes';
 import { showToast } from '@/stores/toastNotificationStore';
+import { decodeCard } from './decode';
 
 // Получить все доски пользователя
 export const getBoards = async (): Promise<Board[]> => {
@@ -76,7 +77,7 @@ export const getBoardContent = async (
       );
       boardContentResponse.allCards.forEach((card) => {
         const colIdx = columnIndex.get(card.columnId) ?? 0;
-        columns[colIdx].cards.push(card);
+        columns[colIdx].cards.push(decodeCard(card));
       });
 
       return {