[EPPETA-19] Inject the base URL into the react application

.gitignore

@@ -15,6 +15,7 @@ obj/
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

src/reactapp/.env.example

@@ -0,0 +1,7 @@
+# SPDX-License-Identifier: Apache-2.0
+# Licensed to the Ed-Fi Alliance under one or more agreements.
+# The Ed-Fi Alliance licenses this file to you under the Apache License, Version 2.0.
+# See the LICENSE and NOTICES files in the project root for more information.
+
+
+EPPETA_API_BASE_PATH=https://localhost:7065

src/reactapp/README.md

@@ -2,6 +2,15 @@
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
+## Environment Variables
+
+The React app uses some environment variables to set configuration values.
+
+| Name                       | Required    | Explanation                                                                                                                            |
+| -------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------- |
+| REACT_APP_EPPETA_API_BASE_PATH   | yes | The EPP API base path to be used by the app to get and post data.                                                                      |
+
+
 ## Available Scripts
 
 In the project directory, you can run:

src/reactapp/src/components/FetchHelpers.js

@@ -7,9 +7,7 @@ import { transform as _transform } from "lodash-es";
 import { getToken } from "../components/TokenHelpers";
 
 
-// TODO: replace hard-coded with some sort of runtime setting
-// Will be fixed in EPPETA-19.
-const BaseUrl = "https://localhost:7065";
+const BaseUrl = process.env.REACT_APP_EPPETA_API_BASE_PATH;
 
 const modify = async (verb, route, values) => {
   if (!route.startsWith("/")) {

src/reactapp/src/components/Navbar.js

@@ -29,9 +29,12 @@ import {
 import logo from '../assets/logo.jpg'
 import { Image } from "@chakra-ui/react"
 import { getLoggedInUserName, getLoggedInUserFirstName, clearToken } from "../components/TokenHelpers";
+import { useNavigate } from "react-router-dom";
+
 
 export default function WithSubnavigation() {
-    const { isOpen, onToggle } = useDisclosure();
+  const { isOpen, onToggle } = useDisclosure();
+  const navigate = useNavigate();
 
     return (
         <Box>
@@ -78,15 +81,15 @@ export default function WithSubnavigation() {
                     justify={'flex-end'}
                     direction={'row'}
                     spacing={6}>
-                    <Button onClick={() => { window.location.href = "/login" }}
+                    <Button onClick={() => { navigate("/login") }}
                         as={'a'}
                         fontSize={'sm'}
                         fontWeight={400}
                         variant={'link'}
                         href={'#'}>
                         Sign In
                     </Button>
-                    <Button onClick={() => { window.location.href = "/signup" }}
+                    <Button onClick={() => { navigate("/signup") }}
                         as={'a'}
                         display={{ base: 'none', md: 'inline-flex' }}
                         fontSize={'sm'}
@@ -113,7 +116,7 @@ export default function WithSubnavigation() {
             </Flex>
             <Button onClick={() => {
               clearToken('');
-              window.location.href = "/login"
+              navigate("/login")
               }}
               as={'a'}
               fontSize={'sm'}

src/reactapp/src/pages/Main.js

@@ -114,7 +114,7 @@ export default function EvaluationTable() {
       </HStack>
       <SortableTable data={EvaluationRatings} headers={headers} paginate={true} itemsPerPage={50} filter={filterExpression} noRowsMessage="No evaluations to display" />
       <Box textAlign="center" mt="5" mb="10">
-        <Button colorScheme="blue" onClick={() => (window.location.href = "/new")}>
+        <Button colorScheme="blue" onClick={() => (navigate("/new"))}>
           New Evaluation
         </Button>
       </Box>

src/reactapp/src/pages/Signup.js

@@ -20,20 +20,21 @@ import {
 import { useState } from "react";
 import { ViewIcon, ViewOffIcon } from "@chakra-ui/icons";
 import { Formik, Form } from "formik";
-
+import { useNavigate } from "react-router-dom";
 import InputField from "../components/InputField";
 import { post } from "../components/FetchHelpers";
 import { defaultErrorMessage, AlertMessage } from "../components/AlertMessage";
 
 export default function SignupForm() {
+  const navigate = useNavigate();
   const [showPassword, setShowPassword] = useState(false);
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
   const [error, setError] = useState(null);
 
   const loadSignInPage = () => {
     // TODO: what if the site is running behind a proxy? Then / might be the wrong base
     // Address this in EPPETA-19
-    window.location.href = "/login";
+    navigate("/login");
   };
 
   const onSubmitSignup = async (values) => {