Update GCP test

.env.test

@@ -1 +1,3 @@
-NEXT_PUBLIC_API_URL=http://localhost:3000/api
+NEXT_PUBLIC_API_URL=http://localhost:3000/api
+
+DEVELOPER_EMAILS=["test@gmail.com"]

.github/workflows/cd.yml

@@ -1,15 +1,6 @@
 name: CD
 
-on:
-  workflow_call:
-    secrets:
-      SSL_KEY:
-        required: true
-      SSL_CERT:
-        required: true
-      ENV_FILE:
-        required: true
-  workflow_dispatch: # Allows manual triggering of the workflow
+on: [workflow_call, workflow_dispatch]
 
 permissions:
   packages: write
@@ -27,15 +18,6 @@ jobs:
 
       - name: Create certs directory
         run: mkdir certs
-
-      - name: Write SSL key
-        run: echo "${{ secrets.SSL_KEY }}" > certs/ssl.key
-
-      - name: Write SSL cert
-        run: echo "${{ secrets.SSL_CERT }}" > certs/ssl.cert
-
-      - name: Write ENV file
-        run: echo "${{ secrets.ENV_FILE }}" > .env
 
       - name: Build and export
         uses: docker/build-push-action@v6

.github/workflows/ci.yml

@@ -1,11 +1,6 @@
 name: CI
 
-on:
-  pull_request:
-    branches:
-      - main
-  workflow_call:
-  workflow_dispatch: # Allows manual triggering of the workflow
+on: [workflow_call, workflow_dispatch, pull_request]
 
 jobs:
   build:
@@ -16,7 +11,7 @@ jobs:
 
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
-        
+
       - name: Build and export
         uses: docker/build-push-action@v6
         with:
@@ -28,14 +23,31 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: "20"
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Unit tests
+        run: npm run test
+
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
       - name: Set up Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: '20'
+          node-version: "20"
 
       - name: Install dependencies
         run: npm install
 
-      - name: Unit Tests
-        run: npm run test
+      - name: Lint
+        run: npm run lint

.github/workflows/format.yml

@@ -0,0 +1,28 @@
+name: Check Formatting
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+  workflow_call:
+  workflow_dispatch:
+
+jobs:
+  check_formatting:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '20'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Check formatting
+        run: npm run prettier-check
+

.github/workflows/onpush.yml

@@ -4,17 +4,14 @@ on:
   push:
     branches:
       - main
-  workflow_dispatch: # Allows manual triggering of the workflow
+  workflow_call:
+  workflow_dispatch:
 
 jobs:
   ci:
     uses: ./.github/workflows/ci.yml
 
-  cd:
-    needs:
-      - ci
-    uses: ./.github/workflows/cd.yml
-    secrets:
-      SSL_KEY: ${{ secrets.SSL_KEY }}
-      SSL_CERT: ${{ secrets.SSL_CERT }}
-      ENV_FILE: ${{ secrets.ENV_FILE }}
+  # cd:
+  #   needs:
+  #     - ci
+  #   uses: ./.github/workflows/cd.yml

.prettierignore

@@ -0,0 +1,2 @@
+package-lock.json
+/node_modules

.prettierrc

@@ -1,4 +1,5 @@
 {
-  "tabWidth": 2,
-  "useTabs": false
+	"tabWidth": 2,
+	"useTabs": true,
+	"singleAttributePerLine": true
 }

.vscode/extensions.json

@@ -1,6 +1,12 @@
 {
-  "recommendations": [
-    "ms-azuretools.vscode-docker",
-    "formulahendry.docker-explorer"
-  ]
-}
+	"recommendations": [
+		"ms-azuretools.vscode-docker",
+		"formulahendry.docker-explorer",
+		"esbenp.prettier-vscode",
+		"github.vscode-github-actions",
+		"mongodb.mongodb-vscode",
+		"pmneo.tsimporter",
+		"austenc.tailwind-docs",
+		"bradlc.vscode-tailwindcss"
+	]
+}

.vscode/settings.json

@@ -1,4 +1,14 @@
 {
-  "editor.tabSize": 2,
-  "prettier.enable": false
+	"editor.tabSize": 2,
+	"prettier.enable": true,
+	"files.autoSave": "afterDelay",
+	"editor.defaultFormatter": "esbenp.prettier-vscode",
+	"editor.formatOnPaste": true,
+	"editor.formatOnSave": true,
+	"[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
+	"[typescriptreact]": {
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	},
+	"typescript.format.enable": false,
+	"prettier.configPath": ".prettierrc"
 }

components/AddToSlack.tsx

@@ -1,16 +1,90 @@
-import { useRouter } from "next/router";
+import { useState } from "react";
+import Modal, { hideModal, showModal } from "./Modal";
+import ClientApi from "@/lib/api/ClientApi";
 
-export default function AddToSlack() {
-  const host = window ? window.location.host : "4026.org";
+const SLACK_WEBHOOK_INSTALL_URL =
+	"https://my.slack.com/services/new/incoming-webhook/";
 
-  return (
-    <a className="link text-accent" href={`
-        https://slack.com/oauth/v2/authorize
-          ?client_id=${process.env.NEXT_PUBLIC_SLACK_CLIENT_ID}
-          &scope=chat:write,commands&user_scope=email,openid
-          &redirect_uri=https://${host}/api/addSlackBot
-    `}>
-      Add Gearbox to Slack
-    </a>
-  );
-}
+const api = new ClientApi();
+
+function AddToSlackModal({ teamId }: { teamId: string }) {
+	const [webhookUrl, setWebhookUrl] = useState<string>();
+	const [errorMsg, setErrorMsg] = useState<string>("");
+
+	function save() {
+		if (!webhookUrl) {
+			setErrorMsg("Webhook URL is required");
+			return;
+		}
+
+		api
+			.setSlackWebhook(teamId, webhookUrl)
+			.catch((err) => setErrorMsg(err.message))
+			.then(() => hideModal("add-to-slack"));
+	}
+
+	return (
+		<Modal
+			id="add-to-slack"
+			showCloseButton={false}
+			className="flex flex-col gap-4"
+		>
+			<h2 className="text-xl">Add Gearbox to Slack</h2>
+			<div>
+				Install the Incoming Webhooks app here:{" "}
+				<a
+					href={SLACK_WEBHOOK_INSTALL_URL}
+					target="_blank"
+					className="link link-accent"
+				>
+					{SLACK_WEBHOOK_INSTALL_URL}
+				</a>
+			</div>
+			<div>
+				Enter the Webhook URL here:
+				<input
+					value={webhookUrl}
+					onChange={(e) => setWebhookUrl(e.target.value)}
+					type="url"
+					placeholder="Webhook URL"
+					className="input input-bordered ml-2"
+				/>
+			</div>
+			<div className="flex gap-4 w-full justify-end">
+				<button
+					className="btn btn-primary"
+					onClick={save}
+				>
+					Save
+				</button>
+				<button
+					className="btn"
+					onClick={() => hideModal("add-to-slack")}
+				>
+					Cancel
+				</button>
+			</div>
+			{errorMsg && <div className="text-red-500">{errorMsg}</div>}
+		</Modal>
+	);
+}
+
+export default function AddToSlack({
+	edit,
+	teamId,
+}: {
+	edit: boolean;
+	teamId: string;
+}) {
+	return (
+		<>
+			<button
+				className="btn btn-accent btn-sm"
+				onClick={() => showModal("add-to-slack")}
+			>
+				{edit ? "Change Slack Webhook" : "Add Gearbox to Slack"}
+			</button>
+			<AddToSlackModal teamId={teamId} />
+		</>
+	);
+}

components/Avatar.tsx

@@ -4,38 +4,46 @@ import { levelToClassName } from "@/lib/Xp";
 import { BsGearFill } from "react-icons/bs";
 
 export default function Avatar(props: {
-  user?: User | undefined;
-  scale?: string | undefined;
-  imgHeightOverride?: string | undefined;
-  showLevel?: boolean | undefined;
-  borderThickness?: number | undefined;
-  onClick?: () => void | undefined;
-  className?: string | undefined;
-  online?: boolean;
+	user?: User | undefined;
+	scale?: string | undefined;
+	imgHeightOverride?: string | undefined;
+	showLevel?: boolean | undefined;
+	borderThickness?: number | undefined;
+	onClick?: () => void | undefined;
+	className?: string | undefined;
+	online?: boolean;
 }) {
-  const { session, status } = useCurrentSession();
-  const user = props.user ?? session?.user;
-  const image = user?.image ?? "/user.jpg";
-  const levelClass = levelToClassName(user?.level);
-  const admin = user?.admin;
+	const { session, status } = useCurrentSession();
+	const user = props.user ?? session?.user;
+	const image = user?.image ?? "/user.jpg";
+	const levelClass = levelToClassName(user?.level);
+	const admin = user?.admin;
 
-  return (
-    <div className={`avatar ${props.online && "online"} ${props.scale} ${props.className}`}>
-      { (props.showLevel ?? true) &&
-        <div className="absolute z-10 bg-base-100 rounded-tl-xl rounded-br-xl h-6 w-14 text-center text-sm font-semibold">
-          LVL: {user?.level}
-        </div>
-      }
-      <div className={`w-28 ${props.imgHeightOverride ?? "h-28"} rounded-xl border-${props.borderThickness ?? 4} ${levelClass}`}>
-        <img src={image} onClick={props.onClick}></img>
-      </div>
-      {admin ? (
-        <div className="absolute z-10 -bottom-2 -left-2 text-slate-300 animate-spin-slow">
-          <BsGearFill size={36}></BsGearFill>
-        </div>
-      ) : (
-        <></>
-      )}
-    </div>
-  );
+	return (
+		<div
+			className={`avatar ${props.online && "online"} ${props.scale} ${props.className}`}
+		>
+			{(props.showLevel ?? true) && (
+				<div className="absolute z-10 bg-base-100 rounded-tl-xl rounded-br-xl h-6 w-14 text-center text-sm font-semibold">
+					LVL: {user?.level}
+				</div>
+			)}
+			<div
+				className={`w-28 ${props.imgHeightOverride ?? "h-28"} rounded-xl border-${props.borderThickness ?? 4} ${levelClass}`}
+			>
+				<img
+					src={image}
+					alt={"Avatar"}
+					onClick={props.onClick}
+				></img>
+			</div>
+			{admin ? (
+				<div className="absolute z-10 -bottom-2 -left-2 text-slate-300 animate-spin-slow">
+					<BsGearFill size={36}></BsGearFill>
+				</div>
+			) : (
+				<></>
+			)}
+		</div>
+	);
 }