Break into files

src/components/login.js

@@ -0,0 +1,20 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+
+export default (player) => {
+	function Login(props) {
+		const [input, setInput] = useState("");
+		return (
+			<div className="login">
+				<input type="text" placeholder="Token ID" value={input}
+					onChange={evt => setInput(evt.target.value)} />
+				<button onClick={() => player.auth(input).then(x => props.setLoggedIn(x))}>Submit</button>
+			</div>
+		);
+	}
+
+	Login.propTypes = {
+		setLoggedIn: PropTypes.func,
+	};
+	return Login;
+};

src/components/mainapp.js

@@ -0,0 +1,7 @@
+import React from "react";
+export default () => function MainApp() {
+	return (
+		<div className="main">
+		</div>
+	);
+};

src/index.js

@@ -1,49 +1,20 @@
 import React, { useState } from "react";
 import ReactDOM from "react-dom";
-import PropTypes from "prop-types";
 import "./index.css";
 import { config } from "./config";
 import axios from "axios";
+import login from "./components/login";
+import mainapp from "./components/mainapp";
+import models from "./models";
 
-function auth(token) {
-	return axios.get(`${config.apiUrl}/auth?token=${encodeURIComponent(token)}`)
-		.then((res) => res.data.success);
-}
+const { player } = models(config, axios);
 
-function Login(props) {
-	const [input, setInput] = useState("");
-	return (
-		<div className="login">
-			<input type="text" placeholder="Token ID" value={input}
-				onChange={evt => setInput(evt.target.value)} />
-			<button onClick={() => auth(input).then(x => props.setLoggedIn(x))}>Submit</button>
-		</div>
-	);
-}
-
-Login.propTypes = {
-	setLoggedIn: PropTypes.func,
-};
-
-function MainApp() {
-	return (
-		<div className="main">
-		</div>
-	);
-}
+const Login = login(player);
+const MainApp = mainapp();
 
 function App(){
 	const [loggedIn, setLoggedIn] = useState(false);
-	if (loggedIn){
-		return (
-			<MainApp />
-		);
-	}
-	else {
-		return (
-			<Login setLoggedIn={setLoggedIn} />
-		);
-	}
+	return loggedIn ? <MainApp /> : <Login setLoggedIn={setLoggedIn} />;
 }
 
 ReactDOM.render(<App />, document.getElementById("root"));

src/models/index.js

@@ -0,0 +1,5 @@
+import player from "./player";
+
+export default (config, axios) => { return {
+	player: player(config, axios),
+};};

src/models/player.js

@@ -0,0 +1,6 @@
+export default (config, axios) => {return {
+	auth: (token) => {
+		return axios.get(`${config.apiUrl}/auth?token=${encodeURIComponent(token)}`)
+			.then((res) => res.data.success);
+	},
+};};