feature: view offer/request

src/Main.tsx

@@ -16,14 +16,20 @@ import {
  Stack,
  useStatStyles,
 } from '@chakra-ui/react';
-import { HamburgerIcon, CloseIcon, AddIcon } from '@chakra-ui/icons';
+import {
+ HamburgerIcon,
+ CloseIcon,
+ AddIcon,
+ ViewOffIcon,
+} from '@chakra-ui/icons';
 import { Route, Routes, useNavigate } from 'react-router-dom';
 import Home from './components/Home';
 import InsertJob from './components/InsertJob';
 import Register from './components/Register';
 import Login from './components/Login';
 import OffersRequests from './components/OffersRequests';
 import AuthenticationService from './service/AuthenticationService';
+import ViewOfferRequest from './components/ViewOfferRequest';
 
 const mainMenu = [
  { name: 'Home', url: '/' },
@@ -221,6 +227,7 @@ export default function Main() {
  <Route path="/insertJob" element={<InsertJob />} />
  <Route path="/register" element={<Register />} />
  <Route path="/authenticate" element={<Login />} />
+ <Route path="/view/:id" element={<ViewOfferRequest />} />
 
  <Route
  path="/myOffers"

src/components/OffersRequests.tsx

@@ -8,8 +8,6 @@ import {
  Image,
  Text,
  Box,
- Fade,
- ScaleFade,
  Skeleton,
 } from '@chakra-ui/react';
 import { useEffect, useState } from 'react';
@@ -18,6 +16,7 @@ import Job from '../dto/Job';
 import GenericResponse from '../dto/GenericResponse';
 import Pagination from './Pagination';
 import PaginationUtil from '../util/PaginationUtil';
+import { useNavigate } from 'react-router-dom';
 
 interface Props {
  baseUrl: string;
@@ -57,6 +56,7 @@ export default function OffersRequests({ baseUrl, urlCountItems }: Props) {
  key={idx}
  title={item.title}
  description={item.description}
+ idd={item.id}
  />
  ))}
  </Box>
@@ -71,15 +71,22 @@ export default function OffersRequests({ baseUrl, urlCountItems }: Props) {
 interface Offer {
  title: string;
  description: string;
+ idd: number | undefined;
 }
 
-function Offer({ title, description }: Offer) {
+function Offer({ title, description, idd }: Offer) {
  const [imageLoaded, setImageLoaded] = useState(false);
+ const navigate = useNavigate();
+ const goToViewOfferRequest = (id: number | undefined) => {
+ navigate('/view/' + id);
+ };
+
  return (
  <Card
  direction={{ base: 'column', sm: 'row' }}
  overflow="hidden"
  variant="outline"
+ onClick={() => goToViewOfferRequest(idd)}
  >
  <Skeleton width={{ base: '100%', sm: '200px' }} isLoaded={imageLoaded}>
  <Image

src/components/ViewOfferRequest.tsx

@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react';
+import GenericService from '../service/GenericService';
+import Job from '../dto/Job';
+import { Card, CardBody } from '@chakra-ui/card';
+import { Box, Text } from '@chakra-ui/react';
+import { useParams } from 'react-router-dom';
+
+interface Props {}
+export default function ViewOfferRequest({}: Props) {
+ const [job, setJob] = useState<Job>();
+ let { id } = useParams();
+ useEffect(() => {
+ GenericService.get<Job>('api/v1/job/' + id).then((job) => {
+ setJob(job);
+ });
+ }, []);
+
+ return (
+ <Card>
+ <CardBody>
+ <Text>ID: {job && job.id}</Text>
+ <Text>Title: {job && job.title}</Text>
+ <Text>Description: {job && job.description}</Text>
+ <Text>Status: {job && job.status}</Text>
+ <Text>Type: {job && job.type}</Text>
+ {job &&
+ job.images &&
+ job.images.map((image, idx) => (
+ <Box key={idx}>
+ <img src={image} />
+ </Box>
+ ))}
+ </CardBody>
+ </Card>
+ );
+}