Layout, Pages, Dashboard, MUI

frontend_reactjs/src/pages/ApiTest.tsx

@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react"
+import UserService from "../services/UserService"
+import AuthService from "../services/AuthService"
+import { Button } from "@mui/material"
+
+export default function ApiTest() {
+    const [temp, setTemp] = useState<any>(null)
+
+    const hello = async () => {
+        await AuthService.hello().then(response => {
+            setTemp(response)
+        })
+    }
+
+    return (
+        <>
+            <div>{JSON.stringify(temp)}</div>
+            <Button onClick={() => hello()}>
+                Hello
+            </Button>
+        </>
+    )
+}

frontend_reactjs/src/pages/Main.tsx

@@ -1,3 +1,7 @@
-export default function Main (){
-    return ( <><h1>Main page</h1></>)
+export default function Main() {
+    return (
+        <>
+            Главная
+        </>
+    )
 }

frontend_reactjs/src/pages/NotFound.tsx

@@ -1,3 +1,7 @@
-export default function NotFound (){
-    return ( <><h1>Page not found</h1></>)
+export default function NotFound() {
+    return (
+        <>
+            <h1>Page not found</h1>
+        </>
+    )
 }

frontend_reactjs/src/pages/Roles.tsx

@@ -1,26 +1,26 @@
-import { useState} from 'react'
+import { useState } from 'react'
 import RoleCard from '../components/RoleCard'
 import Modal from '../components/Modal'
 import useDataFetching from '../components/FetchingData'
 
-interface IRoleCard{
-    id: number
-    name: string
-  }
+interface IRoleCard {
+  id: number
+  name: string
+}
 interface Props {
-    showModal: boolean;
-  }
-function Users() {
-  const [showModal, setShowModal] = useState<Props>({showModal: false});
-  const cards = useDataFetching<IRoleCard[]>("http://localhost:8000/auth/role/",[])
-  
+  showModal: boolean;
+}
+function Roles() {
+  const [showModal, setShowModal] = useState<Props>({ showModal: false });
+  const cards = useDataFetching<IRoleCard[]>(`${import.meta.env.VITE_API_URL}/auth/role/`, [])
+
   return (
     <div>
-      {cards.map((card, index) => <RoleCard key={index} {...card}/>)}
-      <button className='absolute w-0 h-0' onClick={() => setShowModal({showModal:true})}>+</button>
-      <Modal {...showModal}/>
+      {cards.map((card, index) => <RoleCard key={index} {...card} />)}
+      <button className='absolute w-0 h-0' onClick={() => setShowModal({ showModal: true })}>+</button>
+      <Modal {...showModal} />
     </div>
   )
 }
 
-export default Users
+export default Roles

frontend_reactjs/src/pages/Users.tsx

@@ -1,16 +1,16 @@
 import Card from '../components/Card'
 import useDataFetching from '../components/FetchingData'
-interface ICard{
+interface ICard {
   firstname: string
   lastname: string
   email: string
 }
 
 function Users() {
-  const cards= useDataFetching<ICard[]>("http://localhost:8000/auth/user/",[])
+  const cards = useDataFetching<ICard[]>(`${import.meta.env.VITE_API_URL}/auth/user/`, [])
   return (
     <div>
-      {cards.map((card, index) => <Card key={index} {...card}/>)}
+      {cards.map((card, index) => <Card key={index} {...card} />)}
     </div>
   )
 }

frontend_reactjs/src/pages/auth/SignIn.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const SignIn = () => {
+  return (
+    <div>SignIn</div>
+  )
+}
+
+export default SignIn