Merge pull request #71 from ost-fh/update-linkbutton

Update linkbutton to use a:href

README.md

@@ -26,6 +26,15 @@ contains the backend of this application. It processes the db calls and handle t
 
 The newest production-ready release of this application is hosted by the Eastern Switzerland University of Applied Sciences (OST). In the background a [mongo DB](https://www.mongodb.com/) stores the test results and user profiles.
 
+### Deployment
+
+[Dev Branch Deployment](https://cactus-dev.sifs0003.infs.ch/)
+[Main Branch Deployment](https://cactus.projects-ost.ch/)
+
+### Use of Branches
+
+The main and dev-branches are protected. Create a feature branch and a pull request (into dev) to add changes. The main branch is only to be changed from the dev-branch.
+
 ## Contribution
 
 We appreciate your interest in contributing to our project. There are two mainly focused ways to contribute this project showed in this visualization.

frontend/src/pages/testlab/parts/2_preparation/preparation.tsx

@@ -1,16 +1,16 @@
 import React, { useContext, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
+import { browserName, osName } from "react-device-detect";
+import { BsChevronLeft, BsChevronRight } from "react-icons/bs";
 
 import Alert from "../../../../shared/components/alert";
 import Heading from "../../../../shared/components/heading";
 import LinkButton from "../../../../shared/components/link-button";
-import { BsChevronLeft, BsChevronRight } from "react-icons/bs";
+import { Library } from "../../../../shared/resources/types";
 
 import LabPathDisplay from "../../components/lab-path-display";
-import { Library } from "../../../../shared/resources/types";
 import "./preparation.scss";
 import { TestDataContext } from "../../test-lab";
-import { browserName, osName } from "react-device-detect";
 import SelectScreenreader from "./parts/select-screenreader";
 import ComponentLinkSection from "./parts/component-link-section";
 

frontend/src/pages/testlab/parts/3_test-form/test-form.tsx

@@ -1,21 +1,23 @@
 import React, { useContext, useEffect, useState } from "react";
+import { BsChevronLeft, BsChevronRight } from "react-icons/bs";
 import { useNavigate } from "react-router-dom";
+
 import {
   getComponentCriteria,
   postTestResult,
 } from "../../../../shared/services/api";
-import LinkButton from "../../../../shared/components/link-button";
 import {
   ComponentCriteria,
   CriteriaGroup,
   CriteriumResult,
 } from "../../../../shared/resources/types";
+import LinkButton from "../../../../shared/components/link-button";
+import Heading from "../../../../shared/components/heading";
 import Alert from "../../../../shared/components/alert";
-import { BsChevronLeft, BsChevronRight } from "react-icons/bs";
+
 import LabPathDisplay from "../../components/lab-path-display";
-import TestItem from "./test-item";
-import Heading from "../../../../shared/components/heading";
 import { TestDataContext } from "../../test-lab";
+import TestItem from "./test-item";
 
 // type TestFormProps = {
 //   testData: TestData;
@@ -115,7 +117,6 @@ const TestForm = () => {
 
       <div className='control-group'>
         <h2 className='visually-hidden'>Navigation</h2>
-
         <LinkButton
           type='button'
           label='Back'

frontend/src/shared/components/link-button.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement } from "react";
-import { useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 
 type LinkButtonProps = {
   to: string;
@@ -20,19 +20,18 @@ const LinkButton = ({
   iconPosition = "left",
   ariaLabel = undefined,
 }: LinkButtonProps) => {
-  const navigate = useNavigate();
   return (
-    <button
+    <Link
       aria-label={ariaLabel}
-      className={`${className ? className : ""} ${
+      className={`button ${className ? className : ""} ${
         icon ? "button-with-icon" : ""
       }`}
       type={type}
-      onClick={() => navigate(to)}
+      to={to}
     >
       {iconPosition === "left" ? icon : ""} {label}{" "}
       {iconPosition === "right" ? icon : ""}
-    </button>
+    </Link>
   );
 };
 

frontend/src/shared/layout/buttons.scss

@@ -18,6 +18,7 @@ button,
   font-size: 1rem;
   // display: inline-block;
   transition-duration: 0.3s;
+  cursor: pointer;
 
   -webkit-user-select: none; /* Safari */
   -ms-user-select: none; /* IE 10 and IE 11 */