feat: addlint-wip

.eslintignore

@@ -0,0 +1,3 @@
+.astro/
+dist/
+src/env.d.ts

.eslintrc.cjs

@@ -0,0 +1,64 @@
+module.exports = {
+	extends: [
+		'eslint:recommended',
+		'plugin:@typescript-eslint/recommended',
+		'plugin:astro/recommended',
+		'plugin:jsx-a11y/recommended',
+		'plugin:typescript-sort-keys/recommended',
+	],
+	overrides: [
+		{
+			extends: [
+				'plugin:@typescript-eslint/recommended-requiring-type-checking',
+				'plugin:@typescript-eslint/strict',
+			],
+			files: ['*.astro'],
+			parser: 'astro-eslint-parser',
+			parserOptions: {
+				parser: '@typescript-eslint/parser',
+				extraFileExtensions: ['.astro'],
+			},
+			rules: {
+				// TODO: Investigate?? :(
+				'@typescript-eslint/no-unsafe-assignment': 'off',
+				'deprecation/deprecation': 'off',
+			},
+		},
+		{
+			files: ['*.ts', '*.tsx'],
+			extends: ['plugin:@typescript-eslint/recommended-requiring-type-checking'],
+		},
+	],
+	parser: '@typescript-eslint/parser',
+	parserOptions: {
+		project: true,
+		tsconfigRootDir: __dirname,
+	},
+	plugins: [
+		'@typescript-eslint',
+		'astro',
+		'deprecation',
+		'jsx-a11y',
+		'simple-import-sort',
+		'typescript-sort-keys',
+	],
+	root: true,
+	rules: {
+		'simple-import-sort/imports': 'error',
+		'simple-import-sort/exports': 'error',
+		'deprecation/deprecation': 'error',
+
+		'@typescript-eslint/no-misused-promises': 'off',
+		'@typescript-eslint/consistent-type-definitions': 'off',
+		'@typescript-eslint/no-floating-promises': 'off',
+		'typescript-sort-keys/interface': 'off',
+
+		// Stylistic concerns that don't interfere with Prettier
+		'padding-line-between-statements': 'off',
+
+		'@typescript-eslint/padding-line-between-statements': [
+			'error',
+			{ blankLine: 'always', next: '*', prev: 'block-like' },
+		],
+	},
+};

package.json

@@ -7,7 +7,10 @@
     "start": "astro dev",
     "build": "astro check && tsc --noEmit && astro build",
     "preview": "astro preview",
+    "lint": "eslint . --max-warnings 0 --report-unused-disable-directives",
     "fmt": "prettier --write --ignore-unknown .",
+    "fix": "yarn lint:fix; yarn fmt",
+    "lint:fix": "yarn lint --fix",
     "migrate": "tsx src/db/scripts/migrate",
     "astro": "astro"
   },
@@ -34,6 +37,7 @@
     "cookie": "^0.5.0",
     "drizzle-kit": "^0.17.6",
     "drizzle-orm": "^0.25.4",
+    "eslint": "^8.40.0",
     "fogbender-react": "^0.2.11",
     "js-cookie": "^3.0.5",
     "jsonwebtoken": "^9.0.0",
@@ -49,6 +53,14 @@
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.9",
+    "@typescript-eslint/eslint-plugin": "^5.59.6",
+    "@typescript-eslint/parser": "^5.59.6",
+    "eslint-plugin-astro": "^0.27.0",
+    "eslint-plugin-deprecation": "^1.4.1",
+    "eslint-plugin-jsonc": "^2.8.0",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
+    "eslint-plugin-typescript-sort-keys": "^2.3.0",
     "tailwindcss": "^3.3.2"
   }
 }

src/components/Account.tsx

@@ -0,0 +1,122 @@
+import { AuthProvider, useAuthInfo, useLogoutFunction, useRedirectFunctions } from './propelauth';
+
+import '@propelauth/base-elements/dist/default.css';
+import { useEffect, useState } from 'react';
+import { env } from '../config';
+
+export function Account() {
+	return (
+		<AuthProvider authUrl={env.PUBLIC_AUTH_URL}>
+			<AccountInteral />
+		</AuthProvider>
+	);
+}
+
+function AccountInteral() {
+	const auth = useAuthInfo();
+	const logoutFn = useLogoutFunction();
+	const { redirectToCreateOrgPage, redirectToOrgPage } = useRedirectFunctions();
+
+	const [selectedOrgId, setSelectedOrgId] = useState('');
+
+	if (auth.loading) {
+		return <>Loading...</>;
+	}
+	if (auth.user === null) {
+		return (
+			<>
+				<h1 className="text-2xl font-bold text-center">Not logged in</h1>
+				<a href="/login" className="px-4 py-2 bg-blue-500 text-white rounded">
+					Login
+				</a>
+				<a href="/signup" className="ml-2 px-4 py-2 bg-blue-500 text-white rounded">
+					Sign up
+				</a>
+			</>
+		);
+	}
+	return (
+		<>
+			<p>The User is logged in</p>
+			<button className="px-4 py-2 bg-blue-500 text-white rounded" onClick={() => logoutFn(true)}>
+				Click here to log out
+			</button>
+			<button
+				className="px-4 py-2 bg-blue-500 text-white rounded ml-2"
+				onClick={() => redirectToOrgPage()}
+			>
+				Manage orgs
+			</button>
+			<button
+				className="px-4 py-2 bg-blue-500 text-white rounded ml-2"
+				onClick={() => redirectToCreateOrgPage()}
+			>
+				Create org
+			</button>
+			<div>
+				My orgs:
+				{auth.orgHelper.getOrgs().map((org) => {
+					console.log(org);
+					return (
+						<div key={org.orgId} className="ml-2">
+							<button
+								onClick={() => {
+									setSelectedOrgId(org.orgId);
+								}}
+							>
+								Select <b>{org.orgName}</b>
+							</button>
+							<br />
+						</div>
+					);
+				})}
+				{selectedOrgId && <Organizations token={auth.accessToken} orgId={selectedOrgId} />}
+			</div>
+			<details>
+				<summary className="cursor-pointer">Debug</summary>
+				{JSON.stringify(auth)}
+			</details>
+		</>
+	);
+}
+
+type User = {
+	userId: string;
+	email: string;
+};
+
+const Organizations = (props: { token: string; orgId: string }) => {
+	const [users, setUsers] = useState<User[]>([]);
+	const [status, setStatus] = useState<'loading' | 'error' | 'success'>('loading');
+	useEffect(() => {
+		setStatus('loading');
+		setUsers([]);
+		fetch('/api/orgs/' + props.orgId, {
+			headers: {
+				Authorization: 'Bearer ' + props.token,
+			},
+		})
+			.then(
+				(res) =>
+					res.json() as Promise<{
+						users: User[];
+					}>
+			)
+			.then((res) => res.users)
+			.then(setUsers)
+			.then(() => setStatus('success'))
+			.catch(() => {
+				setStatus('error');
+			});
+	}, [props.orgId]);
+	return (
+		<div>
+			Users: {status === 'loading' && 'Loading...'}
+			{status === 'error' && 'Error'}
+			{status === 'success' &&
+				users.map((user) => {
+					return <div key={user.userId}>{user.email}</div>;
+				})}
+		</div>
+	);
+};