setup cicd

.github/workflows/firebase-hosting-merge.yml

@@ -0,0 +1,20 @@
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on merge
+'on':
+  push:
+    branches:
+      - master
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - run: npm install && CI=true npm test && CI=true npm run build
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_ZOOPROJECT_TAIPEI }}'
+          channelId: live
+          projectId: zooproject-taipei

.github/workflows/firebase-hosting-pull-request.yml

@@ -0,0 +1,21 @@
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on PR
+"on":
+  pull_request:
+    branches:
+      - master
+      - develop
+jobs:
+  build_and_preview:
+    if: "${{ github.event.pull_request.head.repo.full_name == github.repository }}"
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - run: npm install && npm run test -- --watchAll=false && npm run build
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: "${{ secrets.GITHUB_TOKEN }}"
+          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_ZOOPROJECT_TAIPEI }}"
+          projectId: zooproject-taipei

src/App.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { Provider } from "react-redux";
-import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import { Switch, Route, Redirect } from "react-router-dom";
 import Map from "./Pages/Map";
 import store from "./Redux/Store";
 import Header from "./Utils/Header";
@@ -9,22 +9,19 @@ import Member from "./Pages/Member";
 import ShowAllAnimals from "./Pages/ShowAllAnimals";
 import Entrance from "./Pages/Entrance";
 import Landing from "./Pages/Landing";
-import PageNotFound from "./Pages/PageNotFound";
 
 function App() {
   return (
     <Provider store={store}>
-      <Router>
-        <Header />
-        <Switch>
-          <Route exact path="/" component={Landing} />
-          <Route exact path="/all" component={ShowAllAnimals} />
-          <Route exact path="/map" component={Map} />
-          <Route path="/member" component={Member} />
-          <Route path="/entrance" component={Entrance} />
-          <Route component={PageNotFound} />
-        </Switch>
-      </Router>
+      <Header />
+      <Switch>
+        <Route exact path="/" component={Landing} />
+        <Route exact path="/all" component={ShowAllAnimals} />
+        <Route exact path="/map" component={Map} />
+        <Route path="/member" component={Member} />
+        <Route path="/entrance" component={Entrance} />
+        <Redirect to="/404" />
+      </Switch>
       {/* <Footer /> */}
     </Provider>
   );

src/Pages/Map/Animal/AnimalsData/SubmitButton.js

@@ -52,7 +52,7 @@ export default function SubmitButton(props) {
 
   useEffect(() => {
     const initSavedPlan = () => {
-      if (idValue) {
+      if (savedData && idValue) {
         if (savedData === "none" || savedData.length === 0) {
           return null;
         }

src/Pages/PageNotFound/index.js

@@ -10,6 +10,7 @@ const Container = styled.div`
   justify-content: center;
   align-items: center;
   height: 100vh;
+  background-color: #f2f2f2;
   .textBlock {
     box-sizing: border-box;
     display: flex;
@@ -74,7 +75,7 @@ export default function PageNotFound() {
       <div className="textBlock">
         <span className="quote">“</span>
         <div className="text">
-          <span className="gray">404...</span> 找不到你輸入的網址
+          <span className="gray">404...</span> 找不到這個頁面
         </div>
         <span className="quote-2">”</span>
         <div className="text small gray">

src/index.js

@@ -1,13 +1,18 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 import "./index.css";
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 import App from "./App.js";
 import PageNotFound from "./Pages/PageNotFound";
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <Router>
+      <Switch>
+        <Route exact path="/404" component={PageNotFound} />
+        <Route path="/" component={App} />
+      </Switch>
+    </Router>
   </React.StrictMode>,
   document.getElementById("root")
 );