refactor: jobOffersRequests

src/Main.tsx

@@ -30,6 +30,7 @@ import JobOffersRequests from './components/job/JobOffersRequests';
 import AuthenticationService from './service/AuthenticationService';
 import ViewOfferRequest from './components/job/ViewOfferRequest';
 import UserService from './service/UserService';
+import JobConst from './consts/JobConst';
 
 const mainMenu = [
  { name: 'Home', url: '/' },
@@ -213,8 +214,8 @@ export default function Main() {
  element={
  <JobOffersRequests
  key={'offers'}
- baseUrl="api/v1/job/public/0"
- urlCountItems="api/v1/job/public/count/0"
+ type={JobConst.TYPE_OFFER}
+ scope={JobConst.SCOPE_PUBLIC}
  title="Offers"
  />
  }
@@ -224,8 +225,8 @@ export default function Main() {
  element={
  <JobOffersRequests
  key={'requests'}
- baseUrl="api/v1/job/public/1"
- urlCountItems="api/v1/job/public/count/1"
+ type={JobConst.TYPE_REQUEST}
+ scope={JobConst.SCOPE_PUBLIC}
  title="Requests"
  />
  }
@@ -234,15 +235,15 @@ export default function Main() {
  <Route path="/editJob/:id" element={<InsertJob />} />
  <Route path="/register" element={<Register />} />
  <Route path="/authenticate" element={<Login />} />
- <Route path="/view/:id" element={<ViewOfferRequest />} />
+ <Route path="/view/:scope/:id" element={<ViewOfferRequest />} />
 
  <Route
  path="/myOffers"
  element={
  <JobOffersRequests
  key={'myOffers'}
- baseUrl="api/v1/job/mine/0"
- urlCountItems="api/v1/job/count/mine/0"
+ type={JobConst.TYPE_OFFER}
+ scope={JobConst.SCOPE_PRIVATE}
  title="My Offers"
  />
  }
@@ -252,8 +253,8 @@ export default function Main() {
  element={
  <JobOffersRequests
  key={'myRequests'}
- baseUrl="api/v1/job/mine/1"
- urlCountItems="api/v1/job/count/mine/1"
+ type={JobConst.TYPE_REQUEST}
+ scope={JobConst.SCOPE_PRIVATE}
  title="My Requests"
  />
  }

src/components/job/JobOffersRequests.tsx

@@ -19,41 +19,44 @@ import GenericResponse from '../../dto/GenericResponse';
 import Pagination from '../Pagination';
 import PaginationUtil from '../../util/PaginationUtil';
 import { useNavigate } from 'react-router-dom';
-import JobConst from '../../consts/JobConst';
 import UserService from '../../service/UserService';
 import Stars from './Stars';
 import JobService from '../../service/JobService';
 import Title from './Title';
 
 interface Props {
- baseUrl: string;
- urlCountItems: string;
+ type: number;
+ scope: string;
  title: string;
 }
 
-export default function JobOffersRequests({
- baseUrl,
- urlCountItems,
- title,
-}: Props) {
+export default function JobOffersRequests({ type, scope, title }: Props) {
+ const BASE_URL_RETRIEVE_ITEMS: string = `api/v1/job/${scope}/${type}`;
+ const BASE_URL_RETRIEVE_ITEMS_FIRST_PAGE: string = `${BASE_URL_RETRIEVE_ITEMS}/0`;
+ const BASE_URL_COUNT_ITEMS: string = `api/v1/job/${scope}/count/${type}`;
+
  const [offers, setOffers] = useState<Array<Job>>(new Array<Job>());
  const [itemsCount, setItemsCount] = useState(0);
  const [isLoaded, setLoaded] = useState(false);
 
  useEffect(() => {
- GenericService.getAll<Array<Job>>(baseUrl + '/0').then((data) => {
- GenericService.get<GenericResponse<number>>(urlCountItems).then(
- (genericResponse) => {
- setOffers(data);
- setItemsCount(genericResponse.value);
- setLoaded(true);
- }
- );
- });
+ GenericService.getAll<Array<Job>>(BASE_URL_RETRIEVE_ITEMS_FIRST_PAGE).then(
+ (data) => {
+ GenericService.get<GenericResponse<number>>(BASE_URL_COUNT_ITEMS).then(
+ (genericResponse) => {
+ setOffers(data);
+ setItemsCount(genericResponse.value);
+ setLoaded(true);
+ }
+ );
+ }
+ );
  }, []);
 
  const goToPage = (page: number) => {
- GenericService.getAll<Array<Job>>(baseUrl + '/' + page).then((data) => {
+ GenericService.getAll<Array<Job>>(
+ BASE_URL_RETRIEVE_ITEMS + '/' + page
+ ).then((data) => {
  setOffers(data);
  window.scrollTo(0, 0);
  });
@@ -64,7 +67,9 @@ export default function JobOffersRequests({
  <Title title={title} />
  <SimpleGrid spacing={3}>
  {offers &&
- offers.map((item, idx) => <JobComponent key={idx} job={item} />)}
+ offers.map((item, idx) => (
+ <JobComponent scope={scope} key={idx} job={item} />
+ ))}
  </SimpleGrid>
  <Pagination
  callback={goToPage}
@@ -76,13 +81,14 @@ export default function JobOffersRequests({
 
 interface JobProps {
  job: Job;
+ scope: string;
 }
 
-function JobComponent({ job }: JobProps) {
+function JobComponent({ job, scope }: JobProps) {
  const [imageLoaded, setImageLoaded] = useState(false);
  const navigate = useNavigate();
  const goToViewOfferRequest = (id: number | undefined) => {
- navigate('/view/' + id);
+ navigate(`/view/${scope}/${id}`);
  };
 
  function showUserButtons(job: Job) {

src/components/job/ViewOfferRequest.tsx

@@ -36,9 +36,10 @@ export default function ViewOfferRequest({}: Props) {
  const navigate = useNavigate();
  const [modalImage, setModalImage] = useState<string>();
 
- let { id } = useParams();
+ let { id, scopeFromUrl } = useParams();
+ const scope = scopeFromUrl || 'public';
  useEffect(() => {
- GenericService.get<Job>('api/v1/job/' + id).then((job) => {
+ GenericService.get<Job>(`api/v1/job/${scope}/${id}`).then((job) => {
  setJob(job);
  });
  }, []);
@@ -51,15 +52,14 @@ export default function ViewOfferRequest({}: Props) {
  navigate('/editJob/' + id);
  };
 
- const deleteJobOfferRequest = (jobId: number | undefined) => {
+ const deleteJobOfferRequest = (jobId: number | undefined, scope: string) => {
  if (jobId) {
- deleteItem(jobId);
+ deleteItem(jobId, scope);
  }
  };
 
- const deleteItem = (jobId: number) => {
- GenericService.delete('api/v1/job', jobId).then((_) => {
- // setOffers(offers.filter((offer) => offer.id !== jobId));
+ const deleteItem = (jobId: number, scope: string) => {
+ GenericService.delete(`api/v1/job/${scope}`, jobId).then((_) => {
  navigate('/offers');
  });
  };
@@ -69,19 +69,19 @@ export default function ViewOfferRequest({}: Props) {
  onOpen();
  }
 
- function calculateTitle(type: number | undefined): import('react').ReactNode {
+ function calculateTitle(type: number | undefined): string {
  if (type === 0) {
- return 'Offers';
+ return 'Offer';
  }
  if (type === 1) {
- return 'Requests';
+ return 'Request';
  }
  return '';
  }
 
  return (
  <>
- <Title title={job?.type === 0 ? 'Offer' : 'Request'} />
+ {job && <Title title={calculateTitle(job?.type)} />}
  <Card
  direction={{ base: 'column', sm: 'row' }}
  overflow="hidden"
@@ -185,7 +185,7 @@ export default function ViewOfferRequest({}: Props) {
  colorScheme="red"
  mr={3}
  display={job && showUserButtons(job) ? '' : 'none'}
- onClick={() => job && deleteJobOfferRequest(job.id)}
+ onClick={() => job && deleteJobOfferRequest(job.id, scope)}
  >
  Delete
  </Button>

src/consts/JobConst.ts

@@ -1,4 +1,7 @@
 export default class JobConst {
  static readonly TYPE_OFFER = 0;
  static readonly TYPE_REQUEST = 1;
+
+ static readonly SCOPE_PUBLIC = 'public';
+ static readonly SCOPE_PRIVATE = 'private';
 }