Merge pull request #43 from fs-jun24-team-3/fixed-api-gallery-goodssl…

…ider Fixed api, gallery, goodsslider
fs-jun24-team-3 · Sep 21, 2024 · 6cc0905 · 6cc0905
2 parents 3c6c152 + 85f9427
commit 6cc0905
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 16 deletions.
diff --git a/src/api/api.ts b/src/api/api.ts
@@ -4,7 +4,7 @@ import { Product } from '../utils/types/Product';
 import { Tablet } from '../utils/types/Tablet';
 
 export const BASE_URL =
-  'https://raw.githubusercontent.com/mate-academy/react_phone-catalog/master/public';
+  'https://raw.githubusercontent.com/mate-academy/react_phone-catalog/master/public/';
 
 function wait(delay: number): Promise<void> {
   return new Promise(resolve => {
@@ -20,10 +20,10 @@ function get<T>(url: string, useJSON: boolean = true): Promise<T> {
     .then(res => res.json());
 }
 
-export const getPhones = () => get<Phone[]>('/api/phones');
-export const getTablets = () => get<Tablet[]>('/api/tablets');
-export const getProducts = () => get<Product[]>('/api/products');
-export const getAccessories = () => get<Accessory[]>('/api/accessories');
+export const getPhones = () => get<Phone[]>('api/phones');
+export const getTablets = () => get<Tablet[]>('api/tablets');
+export const getProducts = () => get<Product[]>('api/products');
+export const getAccessories = () => get<Accessory[]>('api/accessories');
 export const getGood = (goodsType: string, phoneId: string) => {
   switch (goodsType) {
     case 'iphone':

diff --git a/src/components/Main/GoodsSlider/GoodsSlider.tsx b/src/components/Main/GoodsSlider/GoodsSlider.tsx
@@ -1,15 +1,17 @@
 import React from 'react';
 import { PhoneCard } from '../PhoneCard';
 import './GoodSlider.scss';
+import { UnionProduct } from '../../../utils/types/UnionProduct';
+import { ProductCategory } from '../../../utils/types/ProductCategory';
 
 type Props = {
   sliderTitle: string;
 };
 
 //це заглушка, її можна видалити коли будуть виведемо данні з редаксу
-const phones = {
+const phones: UnionProduct = {
   id: 'apple-iphone-11-128gb-black',
-  category: 'phones',
+  category: ProductCategory.Phone,
   namespaceId: 'apple-iphone-11',
   name: 'Apple iPhone 11 128GB Black',
   capacityAvailable: ['64GB', '128GB', '256GB'],

diff --git a/src/components/Main/PhoneCard/PhoneCard.tsx b/src/components/Main/PhoneCard/PhoneCard.tsx
@@ -25,7 +25,7 @@ export const PhoneCard: React.FC<Props> = ({ item }) => {
           className="card__logo"
           onClick={() => {
             navigate(
-              pathname !== '/' ? `${pathname}/${id}` : `${category}/${id}`,
+              pathname !== '/' ? `${pathname}/${id}` : `${category}s/${id}`,
             );
           }}
         />

diff --git a/src/components/ProductDetails/Gallery/Gallery.scss b/src/components/ProductDetails/Gallery/Gallery.scss
@@ -2,19 +2,18 @@
 .swiper {
   @include swiperSizes;
 
-  background-color: #fff;
+  background-color: $white-color;
 
   &__container {
     display: flex;
     justify-content: center;
     max-width: 100%;
     max-height: 100%;
   }
-  
+
   &__container img {
     object-fit: contain;
   }
-
 }
 
 .swiper-slide {
@@ -44,22 +43,22 @@
 
   &__slide {
     @include slidePreviewSizes;
-    
+
     display: flex;
     flex-direction: column;
     list-style: none;
     box-sizing: border-box;
     border: $slide-preview-default-border;
     padding: 7px;
-    border-radius: 8px;    
+    border-radius: 8px;
     cursor: pointer;
 
     &:hover {
-      border: 1px solid $slide-preview-active-hover-border;
+      border: $slide-preview-active-hover-border;
     }
 
     &--is-active {
-      border: 1px solid $slide-preview-active-hover-border;
+      border: $slide-preview-active-hover-border;
     }
   }
 
@@ -69,4 +68,4 @@
     object-fit: contain;
   }
 }
-// #endregion
+// #endregion