diff --git a/app/app.jsx b/app/app.jsx index 22e45c0..fd15e3e 100644 --- a/app/app.jsx +++ b/app/app.jsx @@ -1,13 +1,21 @@ import React from 'react'; import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom' +import Header from './components/header'; import Home from './pages/home'; import StationProfile from './pages/station-profile'; +import packageInfo from '../package.json' +const VERSION = packageInfo.version; + export default function App() { return ( +
+

+ This website (Version: {VERSION}) dislays a public transport station profile for the provided UIC station code. + } /> } /> diff --git a/app/components/header.jsx b/app/components/header.jsx new file mode 100644 index 0000000..ea6291f --- /dev/null +++ b/app/components/header.jsx @@ -0,0 +1,47 @@ +import React from 'react' +import { Link} from 'react-router-dom'; + +export default function Header(){ + + return ( + <> + + + + + + + + + + + + + + ); +}; diff --git a/app/pages/home.jsx b/app/pages/home.jsx index 8f67e0e..ae24d60 100644 --- a/app/pages/home.jsx +++ b/app/pages/home.jsx @@ -1,9 +1,93 @@ -import React from 'react'; +import React, { useState } from 'react'; export default function Home() { + + const uicUnavailable = ''; + + const [uic, setUic] = useState(uicUnavailable); + const [uicError, setUicError] = useState(''); + const [isComplete, setIsComplete] = useState(false); + const handleSubmit = (e) => { + console.log('handleSubmit() start...'); + e.preventDefault(); + + setUicError(""); + if (isNaN(uic)) { + console.log('handleSubmit() UIC NOT valid'); + + setUicError("Error! Enter valid UIC: "); + } else { + console.log('handleSubmit() UIC is complete'); + setIsComplete(true); + } + + console.log('handleSubmit() done.'); + }; + + const handleSend = (e) => { + e.preventDefault(); + console.log("Home:handleSend() uic: " + uic); + + setUic(uicUnavailable); + setUicError(''); + setIsComplete(false); + console.log("Home:handleSend() done."); + }; + + const ButtonSend = () => { + if(isComplete) { + console.log('buttonSend() complete'); + return( +

+ + +
+ ); + }else{ + console.log('buttonSend() NOT complete'); + return( +
+ {(!isComplete) ? : null} + +
+ ); + } + }; + return ( <> Enter UIC station code: +
+
handleSubmit(e)}> + + setUic(uic => e.target.value)} + type="text" + value={uic} + placeholder="Enter UIC" + required + className="input-uic" + id="input-uic" + name="input-uic" + /> +
+ + +
+ ); } diff --git a/app/pages/station-profile.jsx b/app/pages/station-profile.jsx index bca8ee0..b929d1a 100644 --- a/app/pages/station-profile.jsx +++ b/app/pages/station-profile.jsx @@ -1,8 +1,8 @@ import React, { useEffect, useState } from 'react'; -import {get} from '../utils/request'; - import { useParams } from "react-router-dom"; +import {get} from '../utils/request'; + export default function StationProfile() { // Get the userId param from the URL. diff --git a/config/webpack.common.js b/config/webpack.common.js index 5038060..76288ad 100644 --- a/config/webpack.common.js +++ b/config/webpack.common.js @@ -21,11 +21,6 @@ module.exports = { include: path.resolve(__dirname, '../app'), use: ['babel-loader'], }, - { - //test all *.css using style-loader and css-loader - test: /\.css$/i, - use: ["style-loader", "css-loader"], - }, ] }, resolve: {