Pull from main to Move-InsightsAndSettingsLogic-to-component

.github/workflows/ci.yml

@@ -11,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:
@@ -23,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'
+          node-version: "20"
 
       - name: Install dependencies
         run: npm install
 
       - name: Unit tests
-        run: npm run test
+        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"
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Lint
+        run: npm run lint

.github/workflows/format.yml

@@ -18,11 +18,10 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: '20'
+          node-version: "20"
 
       - name: Install dependencies
         run: npm install
 
       - name: Check formatting
         run: npm run prettier-check
-

.github/workflows/onpush.yml

@@ -11,7 +11,7 @@ jobs:
   ci:
     uses: ./.github/workflows/ci.yml
 
-  cd:
-    needs:
-      - ci
-    uses: ./.github/workflows/cd.yml
+  # cd:
+  #   needs:
+  #     - ci
+  #   uses: ./.github/workflows/cd.yml

.prettierignore

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

.vscode/extensions.json

@@ -1,12 +1,12 @@
 {
-  "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",
-  ]
-}
+	"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"
+	]
+}

components/AddToSlack.tsx

@@ -2,57 +2,89 @@ import { useState } from "react";
 import Modal, { hideModal, showModal } from "./Modal";
 import ClientApi from "@/lib/api/ClientApi";
 
-const SLACK_WEBHOOK_INSTALL_URL = "https://my.slack.com/services/new/incoming-webhook/";
+const SLACK_WEBHOOK_INSTALL_URL =
+	"https://my.slack.com/services/new/incoming-webhook/";
 
 const api = new ClientApi();
 
 function AddToSlackModal({ teamId }: { teamId: string }) {
-  const [webhookUrl, setWebhookUrl] = useState<string>();
-  const [errorMsg, setErrorMsg] = useState<string>("");
+	const [webhookUrl, setWebhookUrl] = useState<string>();
+	const [errorMsg, setErrorMsg] = useState<string>("");
 
-  function save() {
-    if (!webhookUrl) {
-      setErrorMsg("Webhook URL is required");
-      return;
-    }
+	function save() {
+		if (!webhookUrl) {
+			setErrorMsg("Webhook URL is required");
+			return;
+		}
 
-    api.setSlackWebhook(teamId, webhookUrl)
-      .catch((err) => setErrorMsg(err.message))
-      .then(() => hideModal("add-to-slack"));
-  }
+		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>
-  );
+	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} />
-    </>
-  );
-}
+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>
+	);
 }