[chore] Bundler restructure (#880)

* re-structure bundler, settings panel files * add more info logging * tidy up CSS syntax errors * split into lib/ files * livereloading server * fix factor function for production builds * remove testing console.log * default to production env, saves 300kb bundle size
2025-06-05 21:59:39 +02:00 · 2022-10-03 16:46:38 +02:00
parent 56f53a2a6f
commit 5249294a16
40 changed files with 503 additions and 434 deletions
--- a/web/source/settings/components/error.jsx
+++ b/web/source/settings/components/error.jsx
@@ -0,0 +1,45 @@
+/*
+	GoToSocial
+	Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+"use strict";
+
+const Promise = require("bluebird");
+const React = require("react");
+
+module.exports = function ErrorFallback({error, resetErrorBoundary}) {
+	return (
+		<div className="error">
+			<p>
+				{"An error occured, please report this on the "}
+				<a href="https://github.com/superseriousbusiness/gotosocial/issues">GoToSocial issue tracker</a>
+				{" or "}
+				<a href="https://matrix.to/#/#gotosocial-help:superseriousbusiness.org">Matrix support room</a>.
+				<br/>Include the details below:
+			</p>
+			<pre>
+				{error.name}: {error.message}
+			</pre>
+			<pre>
+				{error.stack}
+			</pre>
+			<p>
+				<button onClick={resetErrorBoundary}>Try again</button> or <a href="">refresh the page</a>
+			</p>
+		</div>
+	);
+};
--- a/web/source/settings/components/fake-toot.jsx
+++ b/web/source/settings/components/fake-toot.jsx
@@ -0,0 +1,43 @@
+/*
+	GoToSocial
+	Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+"use strict";
+
+const React = require("react");
+const Redux = require("react-redux");
+
+module.exports = function FakeToot({children}) {
+	const account = Redux.useSelector((state) => state.user.profile);
+
+	return (
+		<div className="toot expanded">
+			<div className="contentgrid">
+				<span className="avatar">
+					<img src={account.avatar} alt=""/>
+				</span>
+				<span className="displayname">{account.display_name.trim().length > 0 ? account.display_name : account.username}</span>
+				<span className="username">@{account.username}</span>
+				<div className="text">
+					<div className="content">
+						{children}
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
--- a/web/source/settings/components/form-fields.jsx
+++ b/web/source/settings/components/form-fields.jsx
@@ -0,0 +1,167 @@
+/*
+	GoToSocial
+	Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+"use strict";
+
+const React = require("react");
+const Redux = require("react-redux");
+const d = require("dotty");
+const prettierBytes = require("prettier-bytes");
+
+function eventListeners(dispatch, setter, obj) {
+	return {
+		onTextChange: function (key) {
+			return function (e) {
+				dispatch(setter([key, e.target.value]));
+			};
+		},
+		
+		onCheckChange: function (key) {
+			return function (e) {
+				dispatch(setter([key, e.target.checked]));
+			};
+		},
+		
+		onFileChange: function (key, withPreview) {
+			return function (e) {
+				let file = e.target.files[0];
+				if (withPreview) {
+					let old = d.get(obj, key);
+					if (old != undefined) {
+						URL.revokeObjectURL(old); // no error revoking a non-Object URL as provided by instance
+					}
+					let objectURL = URL.createObjectURL(file);
+					dispatch(setter([key, objectURL]));
+				}
+				dispatch(setter([`${key}File`, file]));
+			};
+		}
+	};
+}
+
+function get(state, id, defaultVal) {
+	let value;
+	if (id.includes(".")) {
+		value = d.get(state, id);
+	} else {
+		value = state[id];
+	}
+	if (value == undefined) {
+		value = defaultVal;
+	}
+	return value;
+}
+
+// function removeFile(name) {
+// 	return function(e) {
+// 		e.preventDefault();
+// 		dispatch(user.setProfileVal([name, ""]));
+// 		dispatch(user.setProfileVal([`${name}File`, ""]));
+// 	};
+// }
+
+module.exports = {
+	formFields: function formFields(setter, selector) {
+		function FormField({
+			type, id, name, className="", placeHolder="", fileType="", children=null,
+			options=null, inputProps={}, withPreview=true, showSize=false, maxSize=Infinity
+		}) {
+			const dispatch = Redux.useDispatch();
+			let state = Redux.useSelector(selector);
+			let {
+				onTextChange,
+				onCheckChange,
+				onFileChange
+			} = eventListeners(dispatch, setter, state);
+
+			let field;
+			let defaultLabel = true;
+			if (type == "text") {
+				field = <input type="text" id={id} value={get(state, id, "")} placeholder={placeHolder} className={className} onChange={onTextChange(id)} {...inputProps}/>;
+			} else if (type == "textarea") {
+				field = <textarea type="text" id={id} value={get(state, id, "")} placeholder={placeHolder} className={className} onChange={onTextChange(id)} rows={8} {...inputProps}/>;
+			} else if (type == "checkbox") {
+				field = <input type="checkbox" id={id} checked={get(state, id, false)} className={className} onChange={onCheckChange(id)} {...inputProps}/>;
+			} else if (type == "select") {
+				field = (
+					<select id={id} value={get(state, id, "")} className={className} onChange={onTextChange(id)} {...inputProps}>
+						{options}
+					</select>
+				);
+			} else if (type == "file") {
+				defaultLabel = false;
+				let file = get(state, `${id}File`);
+
+				let size = null;
+				if (showSize && file) {
+					size = `(${prettierBytes(file.size)})`;
+
+					if (file.size > maxSize) {
+						size = <span className="error-text">{size}</span>;
+					}
+				}
+
+				field = (
+					<>
+						<label htmlFor={id} className="file-input button">Browse</label>
+						<span>
+							{file ? file.name : "no file selected"} {size}
+						</span>
+						{/* <a onClick={removeFile("header")}>remove</a> */}
+						<input className="hidden" id={id} type="file" accept={fileType} onChange={onFileChange(id, withPreview)}  {...inputProps}/>
+					</>
+				);
+			} else {
+				defaultLabel = false;
+				field = `unsupported FormField ${type}, this is a developer error`;
+			}
+
+			let label = <label htmlFor={id}>{name}</label>;
+			return (
+				<div className={`form-field ${type}`}>
+					{defaultLabel ? label : null}	{field}
+					{children}
+				</div>
+			);
+		}
+
+		return {
+			TextInput: function(props) {
+				return <FormField type="text" {...props} />;
+			},
+	
+			TextArea: function(props) {
+				return <FormField type="textarea" {...props} />;
+			},
+	
+			Checkbox: function(props) {
+				return <FormField type="checkbox" {...props} />;
+			},
+	
+			Select: function(props) {
+				return <FormField type="select" {...props} />;
+			},
+	
+			File: function(props) {
+				return <FormField type="file" {...props} />;
+			},
+		};
+	},
+
+	eventListeners
+};
--- a/web/source/settings/components/languages.jsx
+++ b/web/source/settings/components/languages.jsx
@@ -0,0 +1,98 @@
+/*
+	GoToSocial
+	Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+"use strict";
+
+const React = require("react");
+
+module.exports = function Languages() {
+	return <React.Fragment>
+		<option value="AF">Afrikaans</option>
+		<option value="SQ">Albanian</option>
+		<option value="AR">Arabic</option>
+		<option value="HY">Armenian</option>
+		<option value="EU">Basque</option>
+		<option value="BN">Bengali</option>
+		<option value="BG">Bulgarian</option>
+		<option value="CA">Catalan</option>
+		<option value="KM">Cambodian</option>
+		<option value="ZH">Chinese (Mandarin)</option>
+		<option value="HR">Croatian</option>
+		<option value="CS">Czech</option>
+		<option value="DA">Danish</option>
+		<option value="NL">Dutch</option>
+		<option value="EN">English</option>
+		<option value="ET">Estonian</option>
+		<option value="FJ">Fiji</option>
+		<option value="FI">Finnish</option>
+		<option value="FR">French</option>
+		<option value="KA">Georgian</option>
+		<option value="DE">German</option>
+		<option value="EL">Greek</option>
+		<option value="GU">Gujarati</option>
+		<option value="HE">Hebrew</option>
+		<option value="HI">Hindi</option>
+		<option value="HU">Hungarian</option>
+		<option value="IS">Icelandic</option>
+		<option value="ID">Indonesian</option>
+		<option value="GA">Irish</option>
+		<option value="IT">Italian</option>
+		<option value="JA">Japanese</option>
+		<option value="JW">Javanese</option>
+		<option value="KO">Korean</option>
+		<option value="LA">Latin</option>
+		<option value="LV">Latvian</option>
+		<option value="LT">Lithuanian</option>
+		<option value="MK">Macedonian</option>
+		<option value="MS">Malay</option>
+		<option value="ML">Malayalam</option>
+		<option value="MT">Maltese</option>
+		<option value="MI">Maori</option>
+		<option value="MR">Marathi</option>
+		<option value="MN">Mongolian</option>
+		<option value="NE">Nepali</option>
+		<option value="NO">Norwegian</option>
+		<option value="FA">Persian</option>
+		<option value="PL">Polish</option>
+		<option value="PT">Portuguese</option>
+		<option value="PA">Punjabi</option>
+		<option value="QU">Quechua</option>
+		<option value="RO">Romanian</option>
+		<option value="RU">Russian</option>
+		<option value="SM">Samoan</option>
+		<option value="SR">Serbian</option>
+		<option value="SK">Slovak</option>
+		<option value="SL">Slovenian</option>
+		<option value="ES">Spanish</option>
+		<option value="SW">Swahili</option>
+		<option value="SV">Swedish </option>
+		<option value="TA">Tamil</option>
+		<option value="TT">Tatar</option>
+		<option value="TE">Telugu</option>
+		<option value="TH">Thai</option>
+		<option value="BO">Tibetan</option>
+		<option value="TO">Tonga</option>
+		<option value="TR">Turkish</option>
+		<option value="UK">Ukrainian</option>
+		<option value="UR">Urdu</option>
+		<option value="UZ">Uzbek</option>
+		<option value="VI">Vietnamese</option>
+		<option value="CY">Welsh</option>
+		<option value="XH">Xhosa</option>
+	</React.Fragment>;
+};
--- a/web/source/settings/components/login.jsx
+++ b/web/source/settings/components/login.jsx
@@ -0,0 +1,102 @@
+/*
+	GoToSocial
+	Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+  You should have received a copy of the GNU Affero General Public License
+  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+	
+"use strict";
+
+const Promise = require("bluebird");
+const React = require("react");
+const Redux = require("react-redux");
+
+const { setInstance } = require("../redux/reducers/oauth").actions;
+const api = require("../lib/api");
+
+module.exports = function Login({error}) {
+	const dispatch = Redux.useDispatch();
+	const [ instanceField, setInstanceField ] = React.useState("");
+	const [ errorMsg, setErrorMsg ] = React.useState();
+	const instanceFieldRef = React.useRef("");
+
+	React.useEffect(() => {
+		// check if current domain runs an instance
+		let currentDomain = window.location.origin;
+		Promise.try(() => {
+			return dispatch(api.instance.fetchWithoutStore(currentDomain));
+		}).then(() => {
+			if (instanceFieldRef.current.length == 0) { // user hasn't started typing yet
+				dispatch(setInstance(currentDomain));
+				instanceFieldRef.current = currentDomain;
+				setInstanceField(currentDomain);
+			}
+		}).catch((e) => {
+			console.log("Current domain does not host a valid instance: ", e);
+		});
+	}, []);
+
+	function tryInstance() {
+		let domain = instanceFieldRef.current;
+		Promise.try(() => {
+			return dispatch(api.instance.fetchWithoutStore(domain)).catch((e) => {
+				// TODO: clearer error messages for common errors
+				console.log(e);
+				throw e;
+			});
+		}).then(() => {
+			dispatch(setInstance(domain));
+
+			return dispatch(api.oauth.register()).catch((e) => {
+				console.log(e);
+				throw e;
+			});
+		}).then(() => {
+			return dispatch(api.oauth.authorize()); // will send user off-page
+		}).catch((e) => {
+			setErrorMsg(
+				<>
+					<b>{e.type}</b>
+					<span>{e.message}</span>
+				</>
+			);
+		});
+	}
+
+	function updateInstanceField(e) {
+		if (e.key == "Enter") {
+			tryInstance(instanceField);
+		} else {
+			setInstanceField(e.target.value);
+			instanceFieldRef.current = e.target.value;
+		}
+	}
+
+	return (
+		<section className="login">
+			<h1>OAUTH Login:</h1>
+			{error}
+			<form onSubmit={(e) => e.preventDefault()}>
+				<label htmlFor="instance">Instance: </label>
+				<input value={instanceField} onChange={updateInstanceField} id="instance"/>
+				{errorMsg && 
+				<div className="error">
+					{errorMsg}
+				</div>
+				}
+				<button onClick={tryInstance}>Authenticate</button>
+			</form>
+		</section>
+	);
+};
--- a/web/source/settings/components/nav-button.jsx
+++ b/web/source/settings/components/nav-button.jsx
@@ -0,0 +1,33 @@
+/*
+	GoToSocial
+	Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+"use strict";
+
+const React = require("react");
+const { Link, useRoute } = require("wouter");
+
+module.exports = function NavButton({href, name}) {
+	const [isActive] = useRoute(`${href}/:anything?`);
+	return (
+		<Link href={href}>
+			<a className={isActive ? "active" : ""} data-content={name}>
+				{name}
+			</a>
+		</Link>
+	);
+};
--- a/web/source/settings/components/submit.jsx
+++ b/web/source/settings/components/submit.jsx
@@ -0,0 +1,35 @@
+/*
+	GoToSocial
+	Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+"use strict";
+
+const React = require("react");
+
+module.exports = function Submit({onClick, label, errorMsg, statusMsg}) {
+	return (
+		<div className="messagebutton">
+			<button type="submit" onClick={onClick}>{ label }</button>
+			{errorMsg.length > 0 && 
+				<div className="error accent">{errorMsg}</div>
+			}
+			{statusMsg.length > 0 &&
+				<div className="accent">{statusMsg}</div>
+			}
+		</div>
+	);
+};