Fixing up the paths for hosting, adding some help text

client/package.json

@@ -2,6 +2,7 @@
   "name": "vacation-planner",
   "version": "0.1.0",
   "private": true,
+  "homepage": "https://kirkleon.ddns.net/vacation-planner/",
   "dependencies": {
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",

client/src/App.js

@@ -5,7 +5,17 @@ const NameForm = ({ onNameSet }) => {
   const [name, setName] = useState("");
 
   return (
-    <div>
+    <div
+      style={{
+        display: "flex",
+        flexFlow: "column nowrap",
+      }}
+    >
+      <span>Vacation Planner</span>
+      <span>Enter the name you want to use for the planner</span>
+      <span>Remember the name you use b/c you'll need it to log back in at a later time</span>
+      <span>Please just behave and use a reasonable name</span>
+      <span>I spend my day job cleaning up edge cases from bad users</span>
       <form onSubmit={() => onNameSet(name.trim())}>
         <input 
           type="text" 
@@ -138,7 +148,13 @@ function App() {
         flexFlow: "column nowrap",
       }}
     >
+      <span>Ignore how ugly this site is I wrote it in like, 2 days</span>
       <span>Logged in as: {name}</span>
+      <span>Green is definitely available</span>
+      <span>Red is definitely not available</span>
+      <span>Yellow is possibly available</span>
+      <span>White is unknown availability</span>
+      <span>WEEK buttons toggle a whole week</span>
       {
         chunk(calendar, 7).map((row, ind) => (
           <div

client/src/api.js

@@ -1,4 +1,4 @@
-const BASE_URL = "http://localhost:5000"
+const BASE_URL = "http://localhost:5000/vacation-planner/api"
 
 export const getHealth = async () => {
   const res = await fetch(BASE_URL + "/");
@@ -33,6 +33,6 @@ export const setAvailability = async (name, availability) => {
   if (!res.ok) {
     throw new Error(res.statusText);
   }
-  
+
   return await res.json();
 }

server/app.py

@@ -4,18 +4,13 @@ import pickle
 import atexit
 import datetime
 
-from flask import Flask, jsonify, request, abort
+from flask import Flask, Blueprint, jsonify, request, abort
 from flask_cors import CORS
 
 DB_FILE = "vacation.db"
 
 last_update = datetime.datetime.now()
 
-app = Flask(__name__)
-CORS(app)
-app.config["APPLICATION_ROOT"] = "/vacation/api"
-app.url_map.strict_slashes = False
-
 try:
     with open(DB_FILE, "rb") as infile:
         db = pickle.load(infile)
@@ -33,12 +28,15 @@ def backup_db():
     save_db(f"backup-{datetime.datetime.now().isoformat()}-")
 
 
-@app.route("/")
+bp = Blueprint("vacation", __name__)
+
+
+@bp.route("/")
 def health():
     return jsonify({"status": "healthy"})
 
 
-@app.route("/availability", methods=["GET", "POST"])
+@bp.route("/availability", methods=["GET", "POST"])
 def status():
     global last_update
     
@@ -79,5 +77,11 @@ def status():
     })
 
 
+app = Flask(__name__)
+CORS(app)
+app.register_blueprint(bp, url_prefix="/vacation-planner/api")
+app.url_map.strict_slashes = False
+
+
 if __name__ == "__main__":
     app.run("0.0.0.0", 5000, debug=True)