Adds readme

.stylelintrc.json

@@ -1,6 +1,3 @@
 {
-	"extends": "stylelint-config-sass-guidelines",
-	"rules": {
-		"indentation": "tab"
-	}
+	"extends": ["stylelint-prettier/recommended"]
 }

README.md

@@ -0,0 +1 @@
+React project for gogmagog frontend

package-lock.json

@@ -5651,6 +5651,12 @@
 			"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
 			"dev": true
 		},
+		"fast-diff": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
+			"integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
+			"dev": true
+		},
 		"fast-glob": {
 			"version": "3.2.4",
 			"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.4.tgz",
@@ -10490,6 +10496,15 @@
 			"integrity": "sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==",
 			"dev": true
 		},
+		"prettier-linter-helpers": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
+			"integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
+			"dev": true,
+			"requires": {
+				"fast-diff": "^1.1.2"
+			}
+		},
 		"pretty-format": {
 			"version": "26.6.2",
 			"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
@@ -12750,6 +12765,12 @@
 				}
 			}
 		},
+		"stylelint-config-prettier": {
+			"version": "8.0.2",
+			"resolved": "https://registry.npmjs.org/stylelint-config-prettier/-/stylelint-config-prettier-8.0.2.tgz",
+			"integrity": "sha512-TN1l93iVTXpF9NJstlvP7nOu9zY2k+mN0NSFQ/VEGz15ZIP9ohdDZTtCWHs5LjctAhSAzaILULGbgiM0ItId3A==",
+			"dev": true
+		},
 		"stylelint-config-sass-guidelines": {
 			"version": "7.1.0",
 			"resolved": "https://registry.npmjs.org/stylelint-config-sass-guidelines/-/stylelint-config-sass-guidelines-7.1.0.tgz",
@@ -12799,6 +12820,15 @@
 				}
 			}
 		},
+		"stylelint-prettier": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/stylelint-prettier/-/stylelint-prettier-1.1.2.tgz",
+			"integrity": "sha512-8QZ+EtBpMCXYB6cY0hNE3aCDKMySIx4Q8/malLaqgU/KXXa6Cj2KK8ulG1AJvUMD5XSSP8rOotqaCzR/BW6qAA==",
+			"dev": true,
+			"requires": {
+				"prettier-linter-helpers": "^1.0.0"
+			}
+		},
 		"stylelint-scss": {
 			"version": "3.18.0",
 			"resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-3.18.0.tgz",

package.json

@@ -56,14 +56,16 @@
 		"file-loader": "^6.2.0",
 		"jest": "^26.6.3",
 		"jest-junit": "^12.0.0",
-		"prettier": "2.2.1",
+		"prettier": "^2.2.1",
 		"react-test-renderer": "^17.0.1",
 		"resolve-url-loader": "^3.1.2",
 		"sass": "^1.32.5",
 		"sass-loader": "^10.1.1",
 		"style-loader": "^2.0.0",
 		"stylelint": "^13.9.0",
+		"stylelint-config-prettier": "^8.0.2",
 		"stylelint-config-sass-guidelines": "^7.1.0",
+		"stylelint-prettier": "^1.1.2",
 		"webpack": "^5.19.0",
 		"webpack-cli": "^4.3.1",
 		"webpack-dev-server": "^3.11.1"

src/App.jsx

@@ -2,15 +2,14 @@ import React from "react";
 import { hot } from "react-hot-loader";
 import "./App.scss";
 import { useAuth } from "./context/AuthContext";
-import UnauthenticatedApp from "./components/UnauthenticatedApp";
-import AuthenticatedApp from "./components/AuthenticatedApp";
+import UnauthenticatedApp from "./screens/UnauthenticatedApp";
+import AuthenticatedApp from "./screens/AuthenticatedApp";
 
 function App() {
 	const { user } = useAuth();
-	console.log(user);
 	return (
 		<div className="app">
-			<h1>Frontend</h1>
+			<h1 className="main-title">GOG</h1>
 			{user ? <AuthenticatedApp /> : <UnauthenticatedApp />}
 		</div>
 	);

src/App.scss

@@ -11,3 +11,7 @@ body {
 	background-color: colours.$background-color;
 	color: colours.$text-color;
 }
+
+.main-title {
+	font-style: italic;
+}

src/common_styles/colours.scss

@@ -3,4 +3,4 @@ $inverted-text-color: rgb(245, 235, 235);
 $background-color: rgb(250, 245, 242);
 
 $accent-color: rgb(70, 90, 200);
-$dimmed-color: rgb(200, 200, 215);
+$dimmed-color: rgb(220, 220, 245);

src/common_styles/typography.scss

@@ -15,11 +15,19 @@
 // }
 
 @font-face {
-	font-family: 'Trilby';
+	font-family: "Trilby";
 	font-style: normal;
-	font-weight: normal;
-	src: url('fonts/Trilby-Regular-Testing.woff2') format('woff2'),
-		url('fonts/Trilby-Regular-Testing.woff') format('woff');
+	font-weight: 400 800;
+	src: url("fonts/TrilbyVariable-VF-Testing.woff2") format("woff2"),
+		url("fonts/TrilbyVariable-VF-Testing.woff") format("woff");
 }
 
-$stack: 14px 'Trilby', 'Century Gothic', Futura, sans-serif;
+@font-face {
+	font-family: "Trilby";
+	font-style: italic;
+	font-weight: 400 800;
+	src: url("fonts/TrilbyVariable-VF_Italic-Testing.woff2") format("woff2"),
+		url("fonts/TrilbyVariable-VF_Italic-Testing.woff") format("woff");
+}
+
+$stack: 18px "Trilby", "Century Gothic", Futura, sans-serif;

src/components/AuthenticatedApp-snapshot.test.jsx

@@ -1,23 +0,0 @@
-import React from "react";
-import renderer from "react-test-renderer";
-import AuthenticatedApp from "./AuthenticatedApp";
-import { AuthContext } from "../context/AuthContext";
-
-test("AuthenticatedApp Snapshot", () => {
-	const appRender = renderer.create(
-		<AuthContext.Provider
-			value={{
-				login: jest.fn(),
-				register: jest.fn(),
-				logout: jest.fn(),
-				user: { display_name: "Ted" },
-			}}
-		>
-			<AuthenticatedApp />
-		</AuthContext.Provider>
-	);
-
-	const tree = appRender.toJSON();
-
-	expect(tree).toMatchSnapshot();
-});

src/components/AuthenticatedApp.jsx

@@ -1,17 +0,0 @@
-import React from "react";
-import { useAuth } from "../context/AuthContext";
-
-function AuthenticatedApp() {
-	const { logout, user } = useAuth();
-
-	return (
-		<div>
-			<p>Howdy partner. Your name looks like it&apos;s {user.display_name}.</p>
-			<button type="button" onClick={logout}>
-				Logout
-			</button>
-		</div>
-	);
-}
-
-export default AuthenticatedApp;

src/components/CurrentPlan/index.jsx

@@ -0,0 +1,31 @@
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import Plan from "../Plan";
+
+function CurrentPlan({ currentPlan, getPlanForID }) {
+	const [plan, setPlan] = useState();
+	useEffect(() => {
+		if (currentPlan && currentPlan.plan_id) {
+			getPlanForID(currentPlan.plan_id).then((data) => {
+				setPlan(data);
+			});
+		}
+	}, [currentPlan, getPlanForID]);
+
+	const ret = currentPlan ? (
+		<div className="current-plan-wrapper">
+			<p>{JSON.stringify(currentPlan)}</p>
+			<Plan plan={plan} />
+		</div>
+	) : (
+		<div>No current plan</div>
+	);
+	return ret;
+}
+
+CurrentPlan.propTypes = {
+	currentPlan: PropTypes.object,
+	getPlanForID: PropTypes.func,
+};
+
+export default CurrentPlan;

src/components/Plan/index.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+function Plan({ initial_plan }) {
+
+	const onChangeDescription = (e) => {
+		const p = {
+			...plan,
+			plan_description: e.currentTarget.value
+		};
+		savePlan(p);
+ 	}
+
+	return (
+		<div className="plan-wrapper">
+			<p>{plan.plan_id}: </p>
+			<input type="text" onChange={onChangeDescription} value={plan.plan_description}/>
+		</div>
+	);
+}
+
+Plan.propTypes = {
+	plan: PropTypes.object
+};
+
+export default Plan;

src/components/PlanList/index.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Plan from "../Plan";
+
+function PlanList({ plans, savePlan }) {
+	return (
+		<ul className="plan-list-wrapper">
+			{plans.map((plan) => {
+				return (
+					<li key={plan.plan_id}>
+						<Plan plan={plan} savePlan={savePlan}/>
+					</li>
+				);
+			})}
+		</ul>
+	);
+}
+
+PlanList.propTypes = {
+	plans: PropTypes.arrayOf(PropTypes.object),
+	savePlan: PropTypes.func
+};
+
+export default PlanList;

src/components/UnauthenticatedApp.scss

@@ -1,16 +0,0 @@
-@use '../common_styles/colours';
-@use '../common_styles/typography';
-
-.unauthenticated-app button {
-	background-color: colours.$accent-color;
-	border: 0;
-	color: colours.$inverted-text-color;
-	font: typography.$stack;
-	margin: 10px;
-	padding: 10px 15px;
-}
-
-.unauthenticated-app .choose-register {
-	background-color: colours.$dimmed-color;
-	color: colours.$text-color;
-}

src/components/__snapshots__/AuthenticatedApp-snapshot.test.jsx.snap

@@ -1,17 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AuthenticatedApp Snapshot 1`] = `
-<div>
-  <p>
-    Howdy partner. Your name looks like it's 
-    Ted
-    .
-  </p>
-  <button
-    onClick={[MockFunction]}
-    type="button"
-  >
-    Logout
-  </button>
-</div>
-`;

src/components/lib/Header.jsx

@@ -1,19 +0,0 @@
-import React from "react";
-import { NavLink } from "react-router-dom";
-
-function Header() {
-	return (
-		<nav>
-			<NavLink exact activeClassName="active" to="/">
-				Home
-			</NavLink>
-			<NavLink activeClassName="active" to="/users">
-				Users
-			</NavLink>
-			<NavLink activeClassName="active" to="/contact">
-				Contact
-			</NavLink>
-		</nav>
-	);
-}
-export default Header;

src/context/AuthContext.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { register, login } from "../services/auth-service";
 import { getUserInfo } from "../services/user-service";
+import { client } from "../services/api-client";
 
 const localStorageKey = "__auth_token__";
 const AuthContext = React.createContext();
@@ -14,6 +15,7 @@ const AuthProvider = (props) => {
 			return;
 		}
 		getUserInfo(token).then((user) => {
+			user.token = token;
 			setUser(user);
 		});
 	};
@@ -59,4 +61,13 @@ function useAuth() {
 	return context;
 }
 
-export { AuthProvider, AuthContext, useAuth };
+function useClient() {
+	const { logout, user } = useAuth();
+	const token = user?.token;
+	return React.useCallback(
+		(endpoint, config) => client(endpoint, { ...config, token, logout }),
+		[token, logout]
+	);
+}
+
+export { AuthProvider, AuthContext, useAuth, useClient };

src/screens/AuthenticatedApp.jsx

@@ -0,0 +1,74 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { useAuth, useClient } from "../context/AuthContext";
+import "./AuthenticatedApp.scss";
+import PlanList from "../components/PlanList";
+import { getPlansFunc, savePlanFunc } from "../services/plans-service";
+
+function AuthenticatedApp() {
+	const { logout, user } = useAuth();
+
+	const [plans, setPlans] = useState([]);
+	const [isLoading, setLoading] = useState(true);
+	const [error, setError] = useState("HI");
+	const client = useClient();
+	// const getPlans = getPlansFunc(client);
+
+	const getPlans = useCallback(() => getPlansFunc(client)(), [client]);
+	const savePlan = useCallback(
+		(plan) => {
+			console.log("in the callback saveplan func");
+			console.log(plan);
+			return savePlanFunc(client)(plan)
+		}, [client]);
+
+	const updatePlan = (plan) => {
+		savePlan(plan)
+			.then((data) => {
+				console.log("returning from save plan");
+				console.log(data);
+				setError(null);
+			})
+			.catch((error) => {
+				setError(error);
+			})
+		const newPlans = plans.map(currentPlan => {
+			if (currentPlan.plan_id === plan.plan_id) {
+				return plan;
+			}
+			return currentPlan;
+		});
+		setPlans(newPlans);
+	}
+
+	useEffect(() => {
+		setLoading(true);
+		getPlans()
+			.then((data) => {
+				setPlans(data);
+				setLoading(false);
+				setError(null);
+			})
+			.catch((error) => {
+				setError(error);
+				setLoading(false);
+			});
+	}, [getPlans]);
+
+	return (
+		<div className="authenticated-app-outer">
+			<button type="button" onClick={logout}>
+				Logout
+			</button>
+			<div className="authenticated-app">
+				<p>
+					Howdy partner. Your name looks like it&apos;s {user.display_name}.
+				</p>
+				<p>Error: {error || "No errors"}</p>
+				<p>Loading: {isLoading ? "Loading" : "Not loading"}</p>
+				<PlanList plans={plans} savePlan={updatePlan} />
+			</div>
+		</div>
+	);
+}
+
+export default AuthenticatedApp;

src/screens/AuthenticatedApp.scss

@@ -0,0 +1,17 @@
+@use '../common_styles/colours';
+@use '../common_styles/typography';
+
+.authenticated-app-outer {
+	.authenticated-app {
+		padding: 1em;
+		margin: 1em;
+	}
+	button {
+		background-color: colours.$accent-color;
+		border: 0;
+		color: colours.$inverted-text-color;
+		font: typography.$stack;
+		margin: 10px;
+		padding: 10px 15px;
+	}
+}

src/screens/Login.jsx

@@ -13,7 +13,7 @@ export default function Login({ login }) {
 
 	return (
 		<div className="login-wrapper">
-			<h1>Please Log In</h1>
+			<h2>Please Log In</h2>
 			<form onSubmit={handleSubmit}>
 				<label>
 					<p>Username</p>

src/screens/Register.jsx

@@ -14,7 +14,7 @@ export default function Register({ register }) {
 
 	return (
 		<div className="register-wrapper">
-			<h1>Enter your data to register.</h1>
+			<h2>Enter your data to register.</h2>
 			<form onSubmit={handleSubmit}>
 				<label>
 					<p>Username</p>

src/screens/UnauthenticatedApp.scss

@@ -0,0 +1,31 @@
+@use '../common_styles/colours';
+@use '../common_styles/typography';
+
+.unauthenticated-app {
+	button {
+		background-color: colours.$accent-color;
+		border: 0;
+		color: colours.$inverted-text-color;
+		font: typography.$stack;
+		margin: 10px;
+		padding: 10px 15px;
+	}
+	.register-wrapper,
+	.login-wrapper {
+		padding: 1em;
+		margin: 1em;
+		label {
+			display: block;
+			margin: 1em auto;
+		}
+		input {
+			margin-top: 0;
+			margin-bottom: 1rem;
+		}
+	}
+}
+
+.unauthenticated-app .choose-register {
+	background-color: colours.$dimmed-color;
+	color: colours.$text-color;
+}

src/screens/__snapshots__/Login-snapshot.test.jsx.snap

@@ -4,9 +4,9 @@ exports[`Login Snapshot 1`] = `
 <div
   className="login-wrapper"
 >
-  <h1>
+  <h2>
     Please Log In
-  </h1>
+  </h2>
   <form
     onSubmit={[Function]}
   >

src/screens/__snapshots__/Register-snapshot.test.jsx.snap

@@ -4,9 +4,9 @@ exports[`Register Snapshot 1`] = `
 <div
   className="register-wrapper"
 >
-  <h1>
+  <h2>
     Enter your data to register.
-  </h1>
+  </h2>
   <form
     onSubmit={[Function]}
   >

src/screens/__snapshots__/UnauthenticatedApp-snapshot.test.jsx.snap

@@ -25,9 +25,9 @@ exports[`UnauthenticatedApp Snapshot 1`] = `
   <div
     className="login-wrapper"
   >
-    <h1>
+    <h2>
       Please Log In
-    </h1>
+    </h2>
     <form
       onSubmit={[Function]}
     >

src/services/api-client.jsx

@@ -0,0 +1,31 @@
+import { API_ROOT } from "./config";
+
+export const client = (
+	endpoint,
+	{ data, token, logout, headers: customHeaders, ...customConfig } = {}
+) => {
+	const config = {
+		method: data ? "POST" : "GET",
+		body: data ? JSON.stringify(data) : undefined,
+		headers: {
+			Authorization: token ? `Bearer ${token}` : undefined,
+			"Content-Type": data ? "application/json" : undefined,
+			Accept: "application/json",
+			...customHeaders,
+		},
+		...customConfig,
+	};
+	const url = `${API_ROOT}${endpoint}`;
+
+	return fetch(url, config).then(async (response) => {
+		if (response.status === 401) {
+			logout();
+			window.location.assign(window.location);
+			return Promise.reject(Error("Gotta re-auth"));
+		}
+		if (!response.ok) {
+			return Promise.reject(Error(response.statusText));
+		}
+		return response.json();
+	});
+};

src/services/plans-service.jsx

@@ -0,0 +1,22 @@
+export const getCurrentPlanFunc = (client) => {
+	return () => client("currentPlan");
+};
+
+export const getPlanForIDFunc = (client) => {
+	return (id) => {
+		return client(`plans/${id}`);
+	};
+};
+
+export const getPlansFunc = (client) => {
+	return () => client("plans/");
+};
+
+export const savePlanFunc = (client) => {
+	return (plan) => {
+		return client(`plans/${plan.plan_id}`, {
+			data: plan,
+			method: "PUT",
+		});
+	};
+};