Production

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+    "recommendations": []
+}

package.json

@@ -39,5 +39,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.3.1"
   }
 }

src/App.js

@@ -1,9 +1,30 @@
-import './App.css';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import LoginPage from './pages/LoginPage/LoginPage';
+import AllCoursesPage from './pages/AllCoursesPage/AllCoursesPage';
+import MyCoursesPage from './pages/MyCoursesPage/MyCoursesPage';
+import NewCoursePage from './pages/NewCoursePage/NewCoursePage';
+import HomePage from './pages/HomePage/HomePage';
+import Layout from './components/Layout/Layout';
+import PrivateRoute from './router/PrivateRoute';
 
 function App() {
   return (
-    <div className="App">
-      gkgkgkgkg
+    <div>
+      <Router>
+        {/* <Header /> */}
+
+        <Routes>
+          <Route path='login' element={<LoginPage />} />
+          <Route path='/' element={<Layout />}>
+            <Route index element={<HomePage />} />
+            <Route path='my-courses' element={<MyCoursesPage />} />
+            <Route path='new-course' element={<NewCoursePage />} />
+            <Route path='courses' element={<AllCoursesPage />} />
+            {/* <Route path='/' element={<Layout />}>
+            </Route> */}
+          </Route>
+        </Routes>
+      </Router>
     </div>
   );
 }

src/axios/index.js

@@ -0,0 +1,17 @@
+import axios from "axios";
+
+const token = localStorage.getItem("token");
+
+const BASE_URL = 'https://inverse-tracker.ru/api';
+
+export const instanceLogged = axios.create({
+  baseURL: BASE_URL,
+  timeout: 30000,
+  headers: { Authorization: `Token ${token}` }, //Переделать
+  // headers: { Authorization: "Token db87a3d921c5f19f4367c808a85287d0f82cd258" }, //Переделать
+});
+
+export const instance = axios.create({
+  baseURL: BASE_URL,
+  timeout: 1000,
+});

src/components/AllCourses/AllCourses.js

@@ -0,0 +1,47 @@
+import React, { useEffect } from 'react';
+import CardCourse from '../CardCourse/CardCourse';
+import { getAllCourses } from './getAllCourses';
+import { useSelector, useDispatch } from 'react-redux';
+import { Statuses } from '../../constant/statuses';
+
+const AllCourses = () => {
+  const dispatch = useDispatch();
+
+  const isLoading =
+    useSelector((state) => state.courses.status) === Statuses.inProgress;
+  // console.log(isLoading);
+
+
+  const coursesData = useSelector((state) => state.courses.courses);
+  // console.log(coursesData);
+
+  useEffect(() => {
+    getAllCourses(dispatch, coursesData.length);
+  }, []);
+
+  if (isLoading) {
+    return <span>Loading...</span>;
+  }
+  return (
+    <div className='flex justify-center flex-wrap'>
+      {coursesData.length > 0 &&
+        coursesData.map((course) => (
+          // console.log(course.name)
+          // <CardCourse
+          //   key={course.id}
+          //   name={course.name}
+          //   description={course.description}
+          //   category={course.category}
+          // />
+          <CardCourse
+            key={course.id}
+            name={course.name}
+            description={course.description}
+            category={course.category.name}
+          />
+        ))}
+    </div>
+  );
+};
+
+export default AllCourses;

src/components/AllCourses/getAllCourses.js

@@ -0,0 +1,21 @@
+import { instanceLogged } from '../../axios';
+import {coursesSlice} from '../../store/slices/courses';
+
+export const getAllCourses = async (dispatch, len) => {
+  console.log(len)
+  if (len > 0) {
+    return;
+  }
+  try {
+    //Get courses
+    dispatch(coursesSlice.actions.startLoading());
+    const getCourses = await instanceLogged.get('courses/');
+    dispatch(coursesSlice.actions.successLoading(getCourses.data));
+
+    // console.log(getCourses.data);
+  } catch (e) {
+    console.log(e);
+    dispatch(coursesSlice.actions.failLoading());
+    return e;
+  }
+};

src/components/CardCourse/CardCourse.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import time from '../../img/Course/time.svg';
+import title from '../../img/titleWrap.svg';
+import laptop from '../../img/laptop.svg';
+import './CardCourse.scss'
+
+const CardCourse = (props) => {
+  // const course = {
+  //   name: 'Вязание бархатных тяг',
+  //   description: 'Вы научитесь вязать лучшие бархатные тяги в мире.',
+  //   category: 'вязание',
+  // };
+  // console.log(props)
+
+  return (
+    <div className='w-72 shadow-lg rounded-2xl bg-gray-200 mb-5 mx-5'>
+      <div className='flex items-center justify-between px-6 py-2'>
+        <img src={title}/>
+        <img src={laptop} className='w-24' />
+      </div>
+      <div className='w-full h-40 px-6 py-4 rounded-lg bg-lightGray flex flex-col justify-between'>
+        <span className='font-mont-semibold text-sm text-black'>
+          {props.name}
+        </span>
+        <div className='flex items-center mb-2'>
+          <img src={time} className='mr-1' />
+          <span className='font-mont-semibold text-xs text-mainBlue'>
+            Пн, Ср, Пт
+          </span>
+        </div>
+        <span className='description font-mont-semibold text-xs text-darkGray mb-3 h-8'>
+          {props.description}
+        </span>
+        <span className='font-mont-semibold text-xs text-mainBlue rounded-full bg-white p-2 w-fit'>
+          {props.category}
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default CardCourse;

src/components/CardCourse/CardCourse.scss

@@ -0,0 +1,10 @@
+
+
+.description {
+//   @apply font-mont-semibold text-xs text-darkGray mb-3;
+
+  -webkit-line-clamp: 1; /* Число отображаемых строк */
+  display: -webkit-box; /* Включаем флексбоксы */
+  -webkit-box-orient: vertical; /* Вертикальная ориентация */
+  overflow: hidden;
+}

src/components/Layout/Layout.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Navigate, Outlet } from 'react-router-dom';
+import LeftBar from '../LeftBar/LeftBar';
+import { useAuth } from '../../hooks/useAuth';
+
+// import "./Layout.scss";
+
+const Layout = () => {
+  const auth = useAuth();
+
+  return auth ? (
+    <div className='w-screen h-screen overflow-auto flex'>
+      <LeftBar />
+      <Outlet />
+    </div>
+  ) : (
+    <Navigate to='login' />
+  );
+};
+
+export default Layout;

src/components/LeftBar/LeftBar.js

@@ -0,0 +1,102 @@
+import React from 'react';
+import group from '../../img/LeftBar/Group.svg';
+import vector from '../../img/LeftBar/Vector.svg';
+import allcoursesActive from '../../img/LeftBar/allCoursesActive.svg';
+import title from '../../img/title.svg';
+import './LeftBar.scss';
+import AllCoursesIcon from '../../img/icon/AllCoursesIcon';
+import { Link } from 'react-router-dom';
+
+const LeftBar = () => {
+  const pathName = window.location.pathname;
+
+  return (
+    <div className='w-72 h-full shadow-lg p-11 box-border'>
+      {/* <AllCoursesIcon /> */}
+      {/* <svg src={allcoursesActive} className='test'/> */}
+      {/* <img src={vector} className='test'/> */}
+
+      <img src={title} className='mb-20' />
+      <ul className='w-full'>
+        <li>
+          <Link to='/my-courses' className='link-my-courses'>
+            {pathName === '/my-courses' ? (
+              <div className=''>
+                <div className='iconActive' />
+                <span className='font-mont-bold text-2xl  text-mainBlue'>
+                  Мои курсы
+                </span>
+              </div>
+            ) : (
+              <>
+                <div className='icon' />
+                <span className='font-mont-bold text-2xl  text-darkGray hover:text-mainBlue'>
+                  Мои курсы
+                </span>
+              </>
+            )}
+          </Link>
+        </li>
+        <li>
+          <Link to='/courses' className='link-all-courses'>
+            {pathName === '/courses' ? (
+              <>
+                <div className='iconActive' />
+                <span className='font-mont-bold text-2xl  text-mainBlue'>
+                  Все курсы
+                </span>
+              </>
+            ) : (
+              <>
+                <div className='icon' />
+                <span className='font-mont-bold text-2xl  text-darkGray hover:text-mainBlue'>
+                  Все курсы
+                </span>
+              </>
+            )}
+          </Link>
+        </li>
+        <li>
+          <Link to='/courses' className='link-news'>
+            {pathName === '/news' ? (
+              <>
+                <div className='iconActive' />
+                <span className='font-mont-bold text-2xl  text-mainBlue'>
+                  Новости
+                </span>
+              </>
+            ) : (
+              <>
+                <div className='icon' />
+                <span className='font-mont-bold text-2xl  text-darkGray hover:text-mainBlue'>
+                  Новости
+                </span>
+              </>
+            )}
+          </Link>
+        </li>
+        <li>
+          <Link to='/courses' className='link-all-courses'>
+            {pathName === '/profile' ? (
+              <>
+                <div className='iconActive' />
+                <span className='font-mont-bold text-2xl  text-mainBlue'>
+                  Профиль
+                </span>
+              </>
+            ) : (
+              <>
+                <div className='icon' />
+                <span className='font-mont-bold text-2xl  text-darkGray hover:text-mainBlue'>
+                  Профиль
+                </span>
+              </>
+            )}
+          </Link>
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+export default LeftBar;