Merge pull request #46 from mikeiken/dev

Dev

frontend/src/components/api/instance.js

@@ -1,22 +1,23 @@
 import axios from 'axios'
 
-export const Instance = axios.create({
-    baseURL: 'localhost:8000',
+function getCookie(name) {
+    const value = `; ${document.cookie}`;
+    const parts = value.split(`; ${name}=`);
+    if (parts.length === 2) return parts.pop().split(';').shift();
+}
+
+const xsrfToken = getCookie('XSRF-TOKEN');
+
+
+const Instance = axios.create({
+    baseURL: 'http://homelab.kerasi.ru/api/v1',
     timeout: 5000,
     headers: {
-        Accept: 'application/json',
-        xsrfCookieName: 'XSRF-TOKEN',
-        xsrfHeaderName: 'X-XSRF-TOKEN',
-    }
+        'Accept': 'application/json',
+        'X-XSRF-TOKEN': xsrfToken,
+    },
+    xsrfCookieName: 'XSRF-TOKEN',
+    xsrfHeaderName: 'X-XSRF-TOKEN',
 })
 
-export const Routes = {
-    AUTH_ROUTES: {
-        login: '/login',
-        logout: '/logout',
-    },
-    PRODUCTS: {
-        plant: '/plant',
-
-    },
-}
+export default Instance

frontend/src/components/auth/components/auth-style.css

@@ -76,7 +76,7 @@
 .input-box label{
   position: absolute;
   top: 50%;
-  left: 10%;
+  left: 13%;
   transform: translateY(-50%);
   color: #282528;
   font-size: 13px;

frontend/src/components/card/style-card.css

@@ -3,9 +3,10 @@
     margin: 0;
     padding: 15px;
     flex: 1 1 20%;
-    min-width: 100px;
+    min-width: 220px;
     max-width: 220px;
     height: 350px !important;
+    min-height: 350px !important;
     border-radius: 20px;
     background-image: url(../../../public/TropicalRainforest.png);
     background-color: aquamarine;
@@ -17,6 +18,7 @@
     cursor: pointer !important;
     opacity: 0; 
     transform: translateY(20px); 
+
 }
 
 
@@ -36,7 +38,7 @@
 }
 
 .card-wrapper img {
-    width: 200px !important;
+    width: 110% !important;
     border-radius: 20px;
     filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
     padding: 0;

frontend/src/components/header/Header.js

@@ -1,26 +1,23 @@
 import React from 'react'
-import './style.css'
+import '../main-page/style.css'
 import { Routes, Route, Link } from 'react-router-dom';
 import AuthForm from '../auth/auth';
 
 export default function Header() {
     return (
         <>
-            <div className='header'>
-                <img className='logo' src={process.env.PUBLIC_URL + '/logo.png'}></img>
+            <header className='header'>
+                <img className='logo' src={process.env.PUBLIC_URL + '/logo.png'} alt="Logo"></img>
                 <nav className='navbar'>
-
                     <Link to=''>Участки</Link>
                     <Link to=''>Подрядчики</Link>
                     <Link to=''>Лицензия</Link>
                     <Link to=''>О нас</Link>
-
                 </nav>
                 <Link to='/login'>
                     <button className='login-btn'>Войти</button>
                 </Link>
-
-            </div>
+            </header>
             <Routes>
                 <Route path='/login' element={<AuthForm />} />
             </Routes>

frontend/src/components/main-page/MainPage.js

@@ -1,10 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import Header from '../header/Header';
 import Card from '../card/Card';
-import AddItemButton from '../add-item/AddItemButton';
 import './style.css';
-import axios from 'axios';
-
+import Instance from '../api/instance'
 export default function MainPage() {
     const [data, setData] = useState([]);
     const [loading, setLoading] = useState(true);
@@ -14,28 +12,24 @@ export default function MainPage() {
         const fetchData = async () => {
             try {
                 setLoading(true);
-                const response = await axios.get('http://homelab.kerasi.ru/api/v1/plant/?format=json');
+                const response = await Instance.get('/plant/?format=json');
                 setData(response.data);
-            } catch (err) {
+            } catch (err) { 
                 setError(err);
             } finally {
                 setLoading(false);
             }
         };
 
         fetchData();
-
-        return () => {
-            console.log(data);
-        };
     }, []);
 
     return (
-        <div className='max-height'>
+        <div className='main'>
             <Header />
-            <div className='h-container'>
+            <div className='content-container'>
                 <div className='box1'>
-
+                    {/* Контент для box1 */}
                 </div>
                 <div className='box2'>
                     {loading ? (
@@ -51,9 +45,7 @@ export default function MainPage() {
                             <Card key={item.id} label={item.name} description={item.nutrients} />
                         ))
                     )}
-                    {/* <AddItemButton onAdd={''} /> */}
                 </div>
-
             </div>
         </div>
     );