By placing a label variable in the Select component, the label will not be displayed. Only an empty field will appear.
First, I add the components of the pages responsible for creating a new warehouse and editing an existing one to the router in the main App.jsx component.
import WarehouseAddPage from "./pages/WarehouseAddPage"
import WarehouseEditPage from "./pages/WarehouseEditPage"
import { warehouseLoader } from "./components/Warehouse"
const router = createBrowserRouter(
createRoutesFromElements(
<Route path="/" element={<MainLayout/>}>
<Route index element={<MainPage/>} />
<Route path="/login/" element={<LoginPage/>} />
<Route path="/logout" element={<LogoutPage/>} />
<Route path="/register" element={<RegisterPage/>} />
<Route path="/warehouses" element={<WarehousesPage/>} />
<Route path="/warehouses/:id" element={<WarehousePage/>} loader={warehouseLoader} />
<Route path="/add-warehouse" element={<WarehouseAddPage/>} />
<Route path="/edit-warehouse/:id" element={<WarehouseEditPage/>} loader={warehouseLoader} />
<Route path="*" element={<ErrorPage/>} />
</Route>
)
)
function App() {
return (
<RouterProvider router={router} />
)
}
export default App
The Warehouse() function uses the loader to obtain data about a specific warehouse. When the loader returns null, the login component is displayed.
import { useEffect } from "react"
import { useLoaderData, useNavigate, useLocation } from "react-router-dom"
function Warehouse() {
const warehouse = useLoaderData()
const navigate = useNavigate()
const location = useLocation()
useEffect(() => {
if (warehouse===null) {
navigate('/login', {state: {"from": location.pathname}})
}
},[]
)
return (
<>
{warehouse &&
<><h1>{warehouse.warehouse_name}</h1>
<h3>{warehouse.warehouse_info}</h3></>}
</>
)
}
The loader function is similar to the function that returns all warehouses belonging to a user:
In the example below I will use a component that displays the warehouses owned by the user.
The useEffect() function runs the fetchWarechouses() function when the page loads.
An attempt is made to download a list of warehouses from the API, and when the result is negative (status 401 - authorization error), a request is made to renew the access token using the refresh token.
If this also fails, the login component is displayed. Additionally, the path to the current page is sent as a parameter, so that you can return to it after a successful login.
The following component creates a new user:
import { useState } from "react"
function Register() {
const [username, setUsername] = useState("")
const [password, setPassword] = useState("")
const [email, setEmail] = useState("")
const [profile, setProfile] = useState("client")
First, I'll make a method where I'll create an inactive user (who cannot log in yet).
from ..utils import send_activation_email
class NewUserViewSet(mixins.CreateModelMixin, viewsets.GenericViewSet):
serializer_class = ContractUserSerializer
def create(self, request, *args, **kwargs):
# create user & send email to verify account
serializer = self.get_serializer(data=request.data)
serializer.is_valid(raise_exception=True)
self.perform_create(serializer)
user = ContractUser.objects.get(username=serializer.data["username"])
send_activation_email(user, request.build_absolute_uri)
return Response(serializer.data, status=status.HTTP_201_CREATED)
I create a Contract model.
The model consists of fields:
The delivery date contains a validator - it cannot be earlier than the order date.
First, I make simple Warehouse model with foreign key - a client (the warehouse owner).
from django.db import models
from users.models import ContractUser
class Warehouse(models.Model):
warehouse_name = models.CharField(max_length=15, unique=True)
warehouse_info = models.TextField(max_length=100)
client = models.ForeignKey(ContractUser, on_delete=models.CASCADE)
def __str__(self):
return self.warehouse_name