feat(metrics): add metrics page with info

.gitignore

@@ -106,3 +106,5 @@ dist
 .eslintcache
 
 **/*/env-config.js
+
+**/.DS_Store

.vscode/settings.json

@@ -15,8 +15,8 @@
     "editor.tabSize": 2,
     "stylelint.validate": ["css", "scss"],
     "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": true,
-      "source.fixAll.stylelint": true
+      "source.fixAll.eslint": "explicit",
+      "source.fixAll.stylelint": "explicit"
     },
   }
 

README.md

@@ -82,5 +82,5 @@ docker build -t tourmanique-ui .
 
 ### Run
 ```bash
-docker run --detach --publish 7551:80 --rm --name tourmanique-ui --env ENV_KEY="'dev'" --env API_ROOT="'http://localhost:7501/api'" tourmanique-ui
+docker run --detach --publish 9551:80 --rm --name tourmanique-ui --env ENV_KEY="'dev'" --env API_ROOT="'http://localhost:7501/api'" tourmanique-ui
 ```

src/pages/Galleries/components/GalleriesList/GalleriesList.tsx

@@ -42,6 +42,8 @@ function GalleriesList({
           id,
           name,
           previewPhotos,
+          // @ts-ignore
+          photosCount
         }) => (
           <li
             className="galleries-list__item"
@@ -60,7 +62,7 @@ function GalleriesList({
               onDelete={() => {
                 onGalleryDelete(id);
               }}
-              photosCount={previewPhotos.length}
+              photosCount={photosCount}
               previewPhotos={previewPhotos}
             />
           </li>

src/pages/Metrics/MetricsPage.scss

@@ -27,5 +27,7 @@
     @include noselect;
 
     width: 100%;
+
+    border-radius: 3%;
   }
 }

src/pages/Metrics/MetricsPage.tsx

@@ -1,46 +1,56 @@
 /* eslint-disable no-nested-ternary */
-import { useEffect, useState } from 'react';
-import metricImage from '../../assets/images/metric-image.png';
+import { useMemo } from 'react';
 import Breadcrumbs from '../../components/Breadcrumbs/Breadcrumbs';
-import MetricSimilarList from './components/MetricsSimilarList/MetricsSimilarList';
-import {
-  similarPhotosArray,
-} from './MetricsTestValues.data';
-import MetricsInfo from './components/MetricsInfo/MetricsInfo';
+// import MetricSimilarList from './components/MetricsSimilarList/MetricsSimilarList';
+
+import { MetricsContainer } from './sections/metrics/MetricsContainer';
+import { useParams } from 'react-router-dom';
+import { MetricsStateContext } from './sections/metrics/state/MetricsStateContext';
+import { MetricsState } from './sections/metrics/state/MetricsState';
+import { PhotoStateContext } from './sections/photo/state/PhotoStateContext';
+import { PhotoContainer } from './sections/photo/PhotoContainer';
+import { PhotoState } from './sections/photo/state/PhotoState';
 
 function MetricsPage() {
-  const [isLoading, setIsLoading] = useState(true);
+  const {
+    galleryId,
+    id
+  } = useParams();
 
-  const delay = 1;
+  const photoState = useMemo(
+    () => new PhotoState(),
+    [],
+  )
 
-  useEffect(() => {
-    const timer1 = setTimeout(() => setIsLoading(false), delay * 1000);
-    return () => {
-      clearTimeout(timer1);
-    };
-  }, []);
+  const metricsState = useMemo(
+    () => new MetricsState(),
+    [],
+  )
 
   return (
     <div className="metrics-page">
       <Breadcrumbs />
       <div className="metrics-page__wrapper">
-        <div className="metrics-page__image-container">
-          <img
-            src={metricImage}
-            className="metrics-page__image"
-            alt="metric"
-            draggable={false}
+
+        <PhotoStateContext.Provider value={photoState}>
+          <PhotoContainer
+            galleryId={Number(galleryId)}
+            photoId={Number(id)}
           />
-        </div>
+        </PhotoStateContext.Provider>
 
-        <MetricsInfo isLoading={isLoading} />
+        <MetricsStateContext.Provider value={metricsState}>
+          <MetricsContainer
+            galleryId={Number(galleryId)}
+            photoId={Number(id)}
+          />
+        </MetricsStateContext.Provider>
 
-        <MetricSimilarList
+        {/* <MetricSimilarList
           isLoading={isLoading}
           similarPhotosArray={similarPhotosArray}
-        />
+        /> */}
       </div>
-
     </div>
   );
 }

src/pages/Metrics/sections/metrics/MetricsContainer.cy.tsx

@@ -0,0 +1,66 @@
+import { associationsArray, colorsArray, emotionsArray, objectsArray } from "../../MetricsTestValues.data"
+import { MetricsContainer } from "./MetricsContainer"
+import { MetricsState } from "./state/MetricsState"
+import { MetricsStateContext } from "./state/MetricsStateContext"
+
+const GALLERY_ID = 1
+const PHOTO_ID = 2
+
+describe(`ToDosContainer`, () => {
+  beforeEach(() => {
+    const metricsResponse = {
+      metrics: {
+        uniqueness: {
+          mainInPercentage: 75,
+          colorsInPercentage: 44,
+          otherInPercentage: 32, 
+        },
+        features: {
+          colors: colorsArray,
+          emotions: emotionsArray,
+          objects: objectsArray,
+          associations: associationsArray,
+        }
+      },
+    }
+
+    cy.intercept(
+      `GET`,
+      `*/galleries/${GALLERY_ID}/${PHOTO_ID}/metrics`,
+      metricsResponse,
+    )
+  })
+
+  describe(`Initialization`, initializationTests)
+})
+
+
+function initializationTests() {
+  it(`
+  GIVEN metrics from network
+  WHEN render the component
+  SHOULD see them
+  `, () => {
+    mountComponent()
+
+    cy.contains(`75%`)
+    cy.contains(`44%`)
+    cy.contains(`32%`)
+    cy.contains(`calm`)
+    cy.contains(`sky`)
+    cy.contains(`vacation`)
+  })
+}
+
+function mountComponent() {
+  const metricsState = new MetricsState()
+
+  cy.mount(
+    <MetricsStateContext.Provider value={metricsState}>
+      <MetricsContainer 
+        galleryId={GALLERY_ID}
+        photoId={PHOTO_ID}
+      />
+    </MetricsStateContext.Provider>,
+  )
+}

src/pages/Metrics/sections/metrics/MetricsContainer.tsx

@@ -0,0 +1,45 @@
+import { observer } from "mobx-react-lite"
+import { useContext, useEffect } from "react"
+import { api } from "../../../../common/utils/HttpClient"
+import { MetricsContent } from "./MetricsContent"
+import { MetricsStateContext } from "./state/MetricsStateContext"
+
+export const MetricsContainer = observer(({
+  galleryId,
+  photoId,
+}: {
+  galleryId: number,
+  photoId: number,
+}) => {
+  const metricsState = useContext(MetricsStateContext)
+
+  useEffect(() => {
+    async function loadMetricsAsync() {
+      metricsState.setIsLoading({
+        isLoading: true
+      })
+
+      try {
+        const {
+          data: {
+            metrics,
+          }
+        } = await api.get(`/galleries/${galleryId}/${photoId}/metrics`)
+
+        metricsState.initialize({
+          metrics,
+        })
+      } finally {
+        metricsState.setIsLoading({
+          isLoading: false
+        })
+      }
+    }
+
+    loadMetricsAsync()
+  }, [])
+
+  return (
+    <MetricsContent />
+  )
+})

src/pages/Metrics/sections/metrics/MetricsContent.tsx

@@ -0,0 +1,16 @@
+import { observer } from "mobx-react-lite"
+import { useContext } from "react"
+import MetricsInfo from "./components/MetricsInfo/MetricsInfo"
+import { MetricsStateContext } from "./state/MetricsStateContext"
+
+export const MetricsContent = observer(() => {
+  const metricsState = useContext(MetricsStateContext)
+
+  return (
+    <MetricsInfo
+      uniqueness={metricsState.metrics.uniqueness}
+      features={metricsState.metrics.features}
+      isLoading={metricsState.isLoading}
+    />
+  )
+})