Fixing urls part 2 (#380)

* use react-router for urls, fix front page link

Author: siren

admin-ui/src/common/urls.ts

@@ -1,5 +1,3 @@
-import { publicUrl } from "./const";
-
 export const prefixes = {
   recurringReservations: "/recurring-reservations",
   reservations: "/reservations",
@@ -10,19 +8,19 @@ export const prefixes = {
 export const applicationRoundUrl = (
   applicationRoundId: number | string
 ): string =>
-  `${publicUrl}${prefixes.recurringReservations}/application-rounds/${applicationRoundId}`;
+  `${prefixes.recurringReservations}/application-rounds/${applicationRoundId}`;
 
 export const applicationUrl = (applicationId: number | string): string =>
-  `${publicUrl}${prefixes.applications}/${applicationId}`;
+  `${prefixes.applications}/${applicationId}`;
 
 export const reservationUrl = (reservationId: number | string): string =>
-  `${publicUrl}${prefixes.reservations}/${reservationId}`;
+  `${prefixes.reservations}/${reservationId}`;
 
 export const requestedReservationsUrl = (): string =>
-  `${publicUrl}${prefixes.reservations}/requested`;
+  `${prefixes.reservations}/requested`;
 
 export const applicationDetailsUrl = (applicationId: number | string): string =>
-  `${publicUrl}${prefixes.applications}/${applicationId}/details`;
+  `${prefixes.applications}/${applicationId}/details`;
 
 export const applicationRoundApplications = (
   applicationRoundId: number | string | null
@@ -31,8 +29,12 @@ export const applicationRoundApplications = (
 export const reservationUnitUrl = (
   reservationUnitId: number,
   unitId: number
-): string =>
-  `${publicUrl}/unit/${unitId}/reservationUnit/edit/${reservationUnitId}`;
+): string => `/unit/${unitId}/reservationUnit/edit/${reservationUnitId}`;
+
+export const spaceUrl = (spaceId: number, unitId: number): string =>
+  `/unit/${unitId}/space/edit/${spaceId}`;
+
+export const resourceUrl = (resourceId: number, unitId: number): string =>
+  `/unit/${unitId}/resource/edit/${resourceId}`;
 
-export const unitUrl = (unitId: number): string =>
-  `${publicUrl}/unit/${unitId}`;
+export const unitUrl = (unitId: number): string => `/unit/${unitId}`;

admin-ui/src/component/BreadcrumbWrapper.tsx

@@ -5,6 +5,7 @@ import { Breadcrumb } from "common";
 import { useTranslation } from "react-i18next";
 import { trim } from "lodash";
 import { breakpoints } from "../styles/util";
+import { publicUrl } from "../common/const";
 
 type Alias = {
   slug: string;
@@ -47,7 +48,10 @@ const BreadcrumbWrapper = ({ route, aliases }: Props): JSX.Element => {
   return (
     <Wrapper>
       <StyledBreadcrumb
-        routes={[{ title: t("breadcrumb.frontpage"), slug: "/" }, ...routes]}
+        routes={[
+          { title: t("breadcrumb.frontpage"), slug: publicUrl },
+          ...routes,
+        ]}
         isMobile={isMobile}
       />
     </Wrapper>

admin-ui/src/component/DataTable.tsx

@@ -15,7 +15,7 @@ import {
   IconSliders,
 } from "hds-react";
 import { useTranslation } from "react-i18next";
-import { useHistory } from "react-router-dom";
+import { Link, useHistory } from "react-router-dom";
 import get from "lodash/get";
 import isEqual from "lodash/isEqual";
 import pullAll from "lodash/pullAll";
@@ -37,7 +37,6 @@ import {
   filterData,
 } from "../common/util";
 import FilterContainer, { FilterBtn } from "./FilterContainer";
-import { publicUrl } from "../common/const";
 
 export type OrderTypes = "asc" | "desc";
 
@@ -228,7 +227,7 @@ export const Heading = styled.thead`
   }
 `;
 
-const A = styled.a`
+const A = styled(Link)`
   &,
   :visited,
   :hover,
@@ -829,10 +828,7 @@ function DataTable({
                                 return (
                                   <Cell key={colKey}>
                                     {link ? (
-                                      <A
-                                        href={`${publicUrl}${link}`}
-                                        className="cellContent"
-                                      >
+                                      <A to={`${link}`} className="cellContent">
                                         <span className="cellContent">
                                           {value}
                                         </span>

admin-ui/src/component/Resources/ResourcesList.tsx

@@ -20,6 +20,7 @@ import { RESOURCES_QUERY } from "../../common/queries";
 import { Query, ResourceType } from "../../common/gql-types";
 import BreadcrumbWrapper from "../BreadcrumbWrapper";
 import { useNotification } from "../../context/NotificationContext";
+import { resourceUrl } from "../../common/urls";
 
 const Wrapper = styled.div`
   padding: var(--spacing-layout-xl) 0;
@@ -100,7 +101,7 @@ const getCellConfig = (t: TFunction): CellConfig => {
     sorting: "name",
     order: "asc",
     rowLink: ({ space, pk }: ResourceType) =>
-      `/unit/${space?.unit?.pk}/resource/edit/${pk}`,
+      resourceUrl(Number(pk), Number(space?.unit?.pk)),
   };
 };
 
@@ -114,7 +115,6 @@ const getFilterConfig = (
   const types = uniq(resources.map((resource) => resource.locationType)).filter(
     (n) => n
   );
-  // const districts = uniq(spaces.map((space: Space) => space.building.district));
 
   return [
     {

admin-ui/src/component/Spaces/SpacesList.tsx

@@ -18,6 +18,7 @@ import { SPACES_QUERY } from "../../common/queries";
 import { Query, SpaceType } from "../../common/gql-types";
 import BreadcrumbWrapper from "../BreadcrumbWrapper";
 import { useNotification } from "../../context/NotificationContext";
+import { spaceUrl } from "../../common/urls";
 
 const Wrapper = styled.div`
   padding: var(--spacing-layout-xl) 0;
@@ -115,7 +116,8 @@ const getCellConfig = (t: TFunction): CellConfig => {
     index: "pk",
     sorting: "name",
     order: "asc",
-    rowLink: ({ pk, unit }: SpaceType) => `unit/${unit?.pk}/space/edit/${pk}`,
+    rowLink: ({ pk, unit }: SpaceType) =>
+      spaceUrl(Number(pk), Number(unit?.pk)),
   };
 };
 

admin-ui/src/component/Unit/ResourcesTable.tsx

@@ -15,6 +15,7 @@ import {
   ResourceType,
   UnitByPkType,
 } from "../../common/gql-types";
+import { resourceUrl } from "../../common/urls";
 
 interface IProps {
   resources: ResourceType[] | undefined;
@@ -86,7 +87,7 @@ const ResourcesTable = ({
                 {
                   name: t("ResourceTable.menuEditResource"),
                   onClick: () => {
-                    history.push(`/unit/${unit.pk}/resource/edit/${pk}`);
+                    history.push(resourceUrl(Number(pk), Number(unit.pk)));
                   },
                 },
                 {
@@ -122,7 +123,7 @@ const ResourcesTable = ({
     index: "pk",
     sorting: "nameFi",
     order: "asc",
-    rowLink: ({ pk }: ResourceType) => `/unit/${unit.pk}/resource/edit/${pk}`,
+    rowLink: ({ pk }: ResourceType) => resourceUrl(Number(pk), Number(unit.pk)),
   } as CellConfig;
 
   return (

admin-ui/src/component/lists/components.tsx

@@ -1,5 +1,6 @@
 import { get } from "lodash";
 import React from "react";
+import { Link } from "react-router-dom";
 import styled from "styled-components";
 import { Table, TableProps } from "../../common/hds-fork/table/Table";
 import { breakpoints } from "../../styles/util";
@@ -68,7 +69,7 @@ const NoDataMessage = styled.span`
   line-height: 4;
 `;
 
-const A = styled.a`
+const A = styled(Link)`
   color: black;
 `;
 
@@ -78,7 +79,7 @@ export const TableLink = ({
 }: {
   href: string;
   children: React.ReactNode;
-}): JSX.Element => <A href={href}>{children}</A>;
+}): JSX.Element => <A to={href}>{children}</A>;
 
 /**
  *