Adds readme

.eslintrc.yml

@@ -9,6 +9,7 @@ extends:
   - plugin:jest/style
   - prettier
   - prettier/standard
+  - plugin:react-hooks/recommended
 parserOptions:
   ecmaFeatures:
     jsx: true

.stylelintrc.json

@@ -0,0 +1,3 @@
+{
+	"extends": ["stylelint-prettier/recommended"]
+}

Jenkinsfile

@@ -26,6 +26,12 @@ pipeline {
 						sh './do.sh _lint'
 					}
 				}
+				stage('stylelint') {
+					steps {
+						echo 'Running stylelint'
+						sh './do.sh _stylelint'
+					}
+				}
 				stage('test') {
 					steps {
 						echo 'Running test'

README.md

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

__mocks__/styleMock.js

@@ -0,0 +1,3 @@
+// __mocks__/styleMock.js
+
+module.exports = {};

do.sh

@@ -22,6 +22,10 @@ _lint() {
 	npx eslint src --ext .js,.jsx
 }
 
+_stylelint() {
+	npx stylelint "src/**/*.{css,scss,sass}"
+}
+
 _jest() {
 	npx jest --ci --coverage
 }
@@ -32,7 +36,7 @@ _jestUpdateSnaps() {
 
 test() {
 	echo "I am ${FUNCNAME[0]}ing"
-	_lint && _jest
+	_lint && _stylelint && _jest
 }
 
 "$@" # <- execute the task

package.json

@@ -26,7 +26,10 @@
 			"<rootDir>/src/**/*.jsx",
 			"!<rootDir>/src/**/*.test.jsx"
 		],
-		"coverageProvider": "babel"
+		"coverageProvider": "babel",
+		"moduleNameMapper": {
+			"\\.(css|less|scss)$": "<rootDir>/__mocks__/styleMock.js"
+		}
 	},
 	"private": "true",
 	"license": "ISC",
@@ -35,6 +38,7 @@
 		"@babel/core": "^7.12.10",
 		"@babel/preset-env": "^7.12.11",
 		"@babel/preset-react": "^7.12.10",
+		"@testing-library/jest-dom": "^5.11.9",
 		"@testing-library/react": "^11.2.3",
 		"@testing-library/user-event": "^12.6.2",
 		"babel-loader": "^8.2.2",
@@ -47,13 +51,22 @@
 		"eslint-plugin-node": "^11.1.0",
 		"eslint-plugin-promise": "^4.2.1",
 		"eslint-plugin-react": "^7.22.0",
+		"eslint-plugin-react-hooks": "^4.2.0",
 		"eslint-plugin-testing-library": "^3.10.1",
+		"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",
-		"webpack": "^5.11.1",
+		"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"
 	},
@@ -61,7 +74,8 @@
 		"prop-types": "^15.7.2",
 		"react": "^17.0.1",
 		"react-dom": "^17.0.1",
-		"react-hot-loader": "^4.13.0"
+		"react-hot-loader": "^4.13.0",
+		"react-router-dom": "^5.2.0"
 	},
 	"browserslist": [
 		"since 2017-06"

src/App.css

@@ -1,14 +0,0 @@
-.App {
-	font: 14px "Century Gothic", Futura, sans-serif;
-	margin: 1rem;
-}
-
-.mainContent {
-	width: 80%;
-	margin: auto;
-}
-
-body {
-	background-color: rgb(240, 240, 240);
-	color: rgb(50, 50, 50);
-}

src/App.jsx

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

src/App.scss

@@ -0,0 +1,17 @@
+@use './common_styles/typography' as t;
+@use './common_styles/colours';
+
+.app {
+	font: t.$stack;
+	line-height: 1.5;
+	margin: 1rem;
+}
+
+body {
+	background-color: colours.$background-color;
+	color: colours.$text-color;
+}
+
+.main-title {
+	font-style: italic;
+}

src/common_styles/colours.scss

@@ -0,0 +1,6 @@
+$text-color: rgb(50, 50, 50);
+$inverted-text-color: rgb(245, 235, 235);
+$background-color: rgb(250, 245, 242);
+
+$accent-color: rgb(70, 90, 200);
+$dimmed-color: rgb(220, 220, 245);

src/common_styles/typography.scss

@@ -0,0 +1,33 @@
+// @font-face {
+// 	src: url('../fonts/FernMicro-Regular.woff2') format("woff2"),
+// 		 url('../fonts/FernMicro-Regular.woff') format("woff");
+// 	font-family: 'FernMicro';
+// 	font-style: normal;
+// 	font-weight: normal;
+// }
+//
+// @font-face {
+// 	src: url('../fonts/FernMicro-Italic.woff2') format("woff2"),
+// 		 url('../fonts/FernMicro-Italic.woff') format("woff");
+// 	font-family: 'FernMicro';
+// 	font-style: italic;
+// 	font-weight: normal;
+// }
+
+@font-face {
+	font-family: "Trilby";
+	font-style: normal;
+	font-weight: 400 800;
+	src: url("fonts/TrilbyVariable-VF-Testing.woff2") format("woff2"),
+		url("fonts/TrilbyVariable-VF-Testing.woff") format("woff");
+}
+
+@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/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/context/AuthContext.jsx

@@ -1,10 +1,56 @@
-import React from "react";
+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();
 
 const AuthProvider = (props) => {
-	return <AuthContext.Provider value={{ login, register }} {...props} />;
+	const [user, setUser] = useState(null);
+
+	const setUserWithToken = (token) => {
+		if (user !== null) {
+			// Already set don't re-set.
+			return;
+		}
+		getUserInfo(token).then((user) => {
+			user.token = token;
+			setUser(user);
+		});
+	};
+
+	const tok = window.localStorage.getItem(localStorageKey);
+
+	if (tok !== null) {
+		setUserWithToken(tok);
+	}
+
+	const wrappedLogin = (username, password) => {
+		login(username, password).then((token) => {
+			window.localStorage.setItem(localStorageKey, token);
+			setUserWithToken(token);
+		});
+	};
+
+	const wrappedRegister = register;
+
+	const wrappedLogout = () => {
+		window.localStorage.removeItem(localStorageKey);
+		setUser(null);
+	};
+
+	return (
+		<AuthContext.Provider
+			value={{
+				login: wrappedLogin,
+				register: wrappedRegister,
+				logout: wrappedLogout,
+				user,
+			}}
+			{...props}
+		/>
+	);
 };
 
 function useAuth() {
@@ -15,4 +61,13 @@ function useAuth() {
 	return context;
 }
 
-export { AuthProvider, 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/context/index.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { AuthProvider } from "./AuthContext.jsx";
+import { AuthProvider } from "./AuthContext";
 import PropTypes from "prop-types";
 
 function AppProviders({ children }) {

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/Register.test.jsx

@@ -8,7 +8,7 @@ test("Register inputs", () => {
 	const register = render(<Register register={registerFunc} />);
 
 	const usernameInput = register.getByRole("textbox", { name: /Username/ });
-	const displayNameInput = register.getByRole("textbox", { name: /Name/ })
+	const displayNameInput = register.getByRole("textbox", { name: /Name/ });
 	const passwordInput = register.getByLabelText("Password");
 	const buttonInput = register.getByRole("button", { name: /Sign me up/i });
 
@@ -17,7 +17,7 @@ test("Register inputs", () => {
 	const pw = "here's a password";
 
 	userEvent.type(usernameInput, username);
-	userEvent.type(displayNameInput, displayName)
+	userEvent.type(displayNameInput, displayName);
 	userEvent.type(passwordInput, pw);
 	userEvent.click(buttonInput);
 	expect(registerFunc).toHaveBeenCalledWith(username, displayName, pw);

src/screens/UnauthenticatedApp-snapshot.test.jsx

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

src/screens/UnauthenticatedApp.jsx

@@ -2,26 +2,36 @@ import React, { useState } from "react";
 import { useAuth } from "../context/AuthContext";
 import Login from "./Login";
 import Register from "./Register";
+import "./UnauthenticatedApp.scss";
 
 function UnauthenticatedApp() {
 	const { login, register } = useAuth();
 
 	const [showRegister, setShowRegister] = useState(false);
 
-	function toggle() {
-		setShowRegister(!showRegister);
-	}
-
 	const form = showRegister ? (
 		<Register register={register} />
 	) : (
 		<Login login={login} />
 	);
 	return (
-		<div>
-			<button type="submit" onClick={toggle}>
-				toggle signup
-			</button>
+		<div className="unauthenticated-app">
+			<div className="button-wrapper">
+				<button
+					type="submit"
+					onClick={() => setShowRegister(false)}
+					className="choose-login"
+				>
+					Login
+				</button>
+				<button
+					type="submit"
+					onClick={() => setShowRegister(true)}
+					className="choose-register"
+				>
+					Register
+				</button>
+			</div>
 			{form}
 		</div>
 	);

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/UnauthenticatedApp.test.jsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import UnauthenticatedApp from "./UnauthenticatedApp";
+import "@testing-library/jest-dom/extend-expect";
+import { AuthContext } from "../context/AuthContext";
+
+test("Login inputs", () => {
+	const loginFunc = jest.fn();
+	const registerFunc = jest.fn();
+	const app = render(
+		<AuthContext.Provider
+			value={{ login: loginFunc, register: registerFunc, logout: jest.fn() }}
+		>
+			<UnauthenticatedApp />
+		</AuthContext.Provider>
+	);
+
+	const chooseLoginButton = app.getByRole("button", { name: /Login/i });
+	const chooseRegisterButton = app.getByRole("button", { name: /Register/i });
+
+	userEvent.click(chooseLoginButton);
+	expect(app.getByRole("heading")).toHaveTextContent("Please Log In");
+
+	userEvent.click(chooseRegisterButton);
+	expect(app.getByRole("heading")).toHaveTextContent(
+		"Enter your data to register."
+	);
+});

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

@@ -0,0 +1,64 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UnauthenticatedApp Snapshot 1`] = `
+<div
+  className="unauthenticated-app"
+>
+  <div
+    className="button-wrapper"
+  >
+    <button
+      className="choose-login"
+      onClick={[Function]}
+      type="submit"
+    >
+      Login
+    </button>
+    <button
+      className="choose-register"
+      onClick={[Function]}
+      type="submit"
+    >
+      Register
+    </button>
+  </div>
+  <div
+    className="login-wrapper"
+  >
+    <h2>
+      Please Log In
+    </h2>
+    <form
+      onSubmit={[Function]}
+    >
+      <label>
+        <p>
+          Username
+        </p>
+        <input
+          id="username"
+          onChange={[Function]}
+          type="text"
+        />
+      </label>
+      <label>
+        <p>
+          Password
+        </p>
+        <input
+          id="password"
+          onChange={[Function]}
+          type="password"
+        />
+      </label>
+      <div>
+        <button
+          type="submit"
+        >
+          Submit
+        </button>
+      </div>
+    </form>
+  </div>
+</div>
+`;

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/auth-service.js

@@ -40,9 +40,7 @@ export const login = (username, password) => {
 			return response.json();
 		})
 		.then((data) => {
-			console.log(data);
 			if (data.token) {
-				console.log(data.token);
 				return data.token;
 			}
 			throw Error("where's my token");

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",
+		});
+	};
+};

src/services/user-service.js

@@ -0,0 +1,18 @@
+import { API_ROOT } from "./config";
+
+export const getUserInfo = (token) => {
+	const url = API_ROOT + "me";
+
+	return fetch(url, {
+		method: "GET",
+		headers: {
+			Authorization: "Bearer " + token,
+			Accept: "application/json",
+		},
+	}).then((response) => {
+		if (!response.ok) {
+			throw Error(response.statusText);
+		}
+		return response.json();
+	});
+};

webpack.config.js

@@ -16,6 +16,33 @@ module.exports = {
 				test: /\.css$/,
 				use: ["style-loader", "css-loader"],
 			},
+			{
+				test: /\.s[ac]ss$/i,
+				use: [
+					"style-loader",
+					"css-loader",
+					"resolve-url-loader",
+					{
+						loader: "sass-loader",
+						options: {
+							implementation: require("sass"),
+							sourceMap: true,
+						},
+					},
+				]
+			},
+			{
+				test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
+				use: [
+					{
+						loader: 'file-loader',
+						options: {
+							name: '[name].[ext]',
+							outputPath: 'fonts/'
+						},
+					},
+				]
+			},
 		],
 	},
 	resolve: { extensions: ["*", ".js", ".jsx"] },