From d997f9923926445903b5b30c35fc5de76c0686b6 Mon Sep 17 00:00:00 2001
From: Sergey Yarkov <serzh.yarkov@gmail.com>
Date: Fri, 22 Oct 2021 22:23:58 +0300
Subject: [PATCH] feat: added api proxy & image type

---
 constants.ts                                           | 1 +
 src/api.config.ts                                      | 3 +--
 src/constants/index.ts                                 | 1 -
 src/interfaces/index.ts                                | 4 ++--
 src/pages/courses/components/CourseList/CourseItem.tsx | 3 ++-
 src/types/index.d.ts                                   | 8 ++++++++
 vite.config.ts                                         | 9 +++++++++
 7 files changed, 23 insertions(+), 6 deletions(-)
 create mode 100644 constants.ts
 delete mode 100644 src/constants/index.ts

diff --git a/constants.ts b/constants.ts
new file mode 100644
index 0000000..55cc2ac
--- /dev/null
+++ b/constants.ts
@@ -0,0 +1 @@
+export const BACKEND_URL: string = 'http://localhost:3333';
diff --git a/src/api.config.ts b/src/api.config.ts
index 2e0d588..6a20d45 100644
--- a/src/api.config.ts
+++ b/src/api.config.ts
@@ -1,8 +1,7 @@
 import { AxiosRequestConfig } from 'axios';
-import * as constants from './constants';
 
 const apiConfig: AxiosRequestConfig = {
-  baseURL: constants.API_BASE_URL,
+  baseURL: '/api/',
   responseType: 'json',
   withCredentials: true,
 };
diff --git a/src/constants/index.ts b/src/constants/index.ts
deleted file mode 100644
index 120b1eb..0000000
--- a/src/constants/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const API_BASE_URL: string = 'http://localhost:3333/api';
diff --git a/src/interfaces/index.ts b/src/interfaces/index.ts
index 7f423c6..b5e460b 100644
--- a/src/interfaces/index.ts
+++ b/src/interfaces/index.ts
@@ -1,5 +1,5 @@
 import type { RouteComponentProps } from 'react-router-dom';
-import { LinkType } from '@educt/types';
+import { CourseImage, LinkType } from '@educt/types';
 import { CourseStatusEnum, UserRoleEnum } from '../enums';
 
 export interface IAppConfig {
@@ -21,7 +21,7 @@ export interface ICourse {
   title: string;
   description: string;
   status: CourseStatusEnum;
-  image: null | {};
+  image: null | CourseImage;
   teacher: Pick<IUser, 'id' | 'first_name' | 'last_name' | 'email'>;
   category: ICategory;
   lessons: ILesson[];
diff --git a/src/pages/courses/components/CourseList/CourseItem.tsx b/src/pages/courses/components/CourseList/CourseItem.tsx
index 5acc994..d0c723f 100644
--- a/src/pages/courses/components/CourseList/CourseItem.tsx
+++ b/src/pages/courses/components/CourseList/CourseItem.tsx
@@ -31,6 +31,7 @@ import { useRootStore } from '@educt/hooks/useRootStore';
 import CourseStatusBadge from '@educt/components/CourseStatusBadge';
 import { CourseStatusEnum } from '@educt/enums';
 import { observer } from 'mobx-react';
+import { API_BASE_URL } from '@educt/constants';
 
 type CourseItemPropsType = {
   course: Omit<ICourse, 'teacher' | 'students' | 'lessons'>;
@@ -111,7 +112,7 @@ const CourseItem: React.FC<CourseItemPropsType> = ({ course, onDelete, onSetStat
             w='100%'
             borderTopLeftRadius='lg'
             borderTopRightRadius='lg'
-            src='https://bit.ly/2k1H1t6'
+            src={course.image ? `/api/assets/images/courses/${course.image.name}` : ''}
           />
         </Box>
         <Box p='0 10px' mt='10px' pb='20px'>
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index 0b675fa..ce29456 100644
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -15,6 +15,14 @@ export type LinkType = {
   icon: IconType;
 };
 
+export type CourseImage = {
+  id: number;
+  name: string;
+  ext: string;
+  created_at: string;
+  updated_at: string;
+};
+
 export type ConfirmEmailContainerDataType = {
   newEmail: string;
   expired_seconds: number;
diff --git a/vite.config.ts b/vite.config.ts
index a407df2..81d390d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,4 +1,5 @@
 import { defineConfig } from 'vite';
+import * as constants from './constants';
 import path from 'path';
 import react from '@vitejs/plugin-react';
 import { visualizer } from 'rollup-plugin-visualizer';
@@ -18,6 +19,14 @@ export default defineConfig({
   root: './',
   publicDir: 'public',
   plugins: [react()],
+  server: {
+    proxy: {
+      '/api': {
+        target: constants.BACKEND_URL,
+        changeOrigin: true,
+      },
+    },
+  },
   resolve: {
     alias: [{ find: '@educt', replacement: path.resolve(__dirname, 'src') }],
   },