feat: added api proxy & image type

constants.ts

@@ -0,0 +1 @@
+export const BACKEND_URL: string = 'http://localhost:3333';

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,
 };

src/constants/index.ts

@@ -1 +0,0 @@
-export const API_BASE_URL: string = 'http://localhost:3333/api';

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[];

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'>

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;

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') }],
   },