Formation share ID (#63)

* setup new field * actually save the share id from the form * add copy formation share id button * better button placement and copy * PR feedback
KMontag42 · Dec 26, 2024 · f56e8ff · f56e8ff
1 parent bd807b6
commit f56e8ff
Show file tree

Hide file tree

Showing 9 changed files with 249 additions and 9 deletions.
diff --git a/components/Builder.tsx b/components/Builder.tsx
@@ -206,6 +206,7 @@ export default function Builder({ data, formation: _formation }: Props) {
               name={_formation?.name}
               id={_formation?.id}
               tags={tags}
+              formationShareId={_formation?.formationShareId}
             />
           )}
           <Button onClick={onDownloadButtonClick} className="h-8 px-2">

diff --git a/components/CopyFormationShareId.tsx b/components/CopyFormationShareId.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Copy } from "lucide-react";
+import { toast } from "sonner";
+
+export default function CopyFormationShareId({
+  formationShareId,
+}: {
+  formationShareId: string;
+}) {
+  return (
+    <Button
+      onClick={() => {
+        navigator.clipboard.writeText(formationShareId);
+        toast.success("Formation share ID copied to clipboard!");
+      }}
+    >
+      <Copy />
+      &nbsp;Copy import ID
+    </Button>
+  );
+}
diff --git a/components/FormationCard.tsx b/components/FormationCard.tsx
@@ -20,6 +20,7 @@ import LikeFormationButton from "@/components/LikeFormationButton";
 import DeleteFormationButton from "@/components/DeleteFormationButton";
 import ShareFormationButton from "@/components/ShareFormationButton";
 import { Edit2 } from "lucide-react";
+import CopyFormationShareId from "@/components/CopyFormationShareId";
 
 type FormationCardProps = {
   data: FormationData;
@@ -42,8 +43,17 @@ export default function FormationCard({
   isLink,
   currentUserId,
 }: FormationCardProps) {
-  const { id, formation, artifact, username, user_image, name, votes, tags } =
-    data;
+  const {
+    id,
+    formation,
+    artifact,
+    username,
+    user_image,
+    name,
+    votes,
+    tags,
+    formationShareId,
+  } = data;
 
   const layout = Math.trunc(data.layout);
 
@@ -59,11 +69,16 @@ export default function FormationCard({
     <>
       <CardHeader>
         <CardTitle>
-          <div className="flex flex-col">
-            <p>{name}</p>
-            <div>
-              {tags && tags.map((tag) => <Badge key={tag}>{tag}</Badge>)}
+          <div className="flex flex-row justify-between">
+            <div className="flex flex-col">
+              <p>{name}</p>
+              <div>
+                {tags && tags.map((tag) => <Badge key={tag}>{tag}</Badge>)}
+              </div>
             </div>
+            {formationShareId && (
+              <CopyFormationShareId formationShareId={formationShareId} />
+            )}
           </div>
         </CardTitle>
       </CardHeader>

diff --git a/components/SaveButton.tsx b/components/SaveButton.tsx
@@ -30,6 +30,7 @@ type SaveButtonProps = {
   name?: string;
   id?: number;
   tags?: string[];
+  formationShareId?: string;
 };
 
 export default function SaveButton({
@@ -40,17 +41,21 @@ export default function SaveButton({
   name,
   id,
   tags,
+  formationShareId,
 }: SaveButtonProps) {
   const [open, setOpen] = useState(false);
   const router = useRouter();
 
   const handleSave = async (e: FormEvent) => {
     e.preventDefault();
 
-    const { name } = e.target as typeof e.target & {
+    const { name, formationShareId } = e.target as typeof e.target & {
       name: { value: string };
+      formationShareId: { value: string };
     };
 
+    console.log("formationShareId", formationShareId);
+
     if (formation.filter((x) => x != "").length === 0) {
       toast.error("Formation is empty!");
       setOpen(false);
@@ -69,6 +74,7 @@ export default function SaveButton({
       user_id: user.id,
       name: name.value,
       tags,
+      formationShareId: formationShareId.value,
     };
 
     const requestUrl = id ? `/api/formations/${id}` : "/api/formations";
@@ -85,6 +91,7 @@ export default function SaveButton({
       formation: formation.join(","),
       id: id || -1,
       tags: JSON.stringify(formationData.tags),
+      formationShareId: formationData.formationShareId || "",
     };
 
     try {
@@ -120,6 +127,7 @@ export default function SaveButton({
             className="px-4"
             onSubmit={handleSave}
             name={name}
+            formationShareId={formationShareId}
           />
           <DrawerFooter className="pt-2">
             <DrawerClose asChild>
@@ -136,7 +144,8 @@ function SaveFormationForm({
   className,
   onSubmit,
   name,
-}: React.ComponentProps<"form">) {
+  formationShareId,
+}: React.ComponentProps<"form"> & { formationShareId?: string }) {
   return (
     <form
       className={cn("grid items-center gap-4", className)}
@@ -147,11 +156,23 @@ function SaveFormationForm({
         <Input
           type="text"
           id="name"
+          name="name"
           placeholder="f2p Team"
           defaultValue={name}
           required
         />
       </div>
+
+      <div className="grid gap-2">
+        <Label htmlFor="formationShareId">Formation Share ID</Label>
+        <Input
+          type="text"
+          id="formationShareId"
+          name="formationShareId"
+          placeholder="1a2a3a"
+          defaultValue={formationShareId}
+        />
+      </div>
       <Button type="submit">Save formation</Button>
     </form>
   );

diff --git a/drizzle/migrations/0003_red_nebula.sql b/drizzle/migrations/0003_red_nebula.sql
@@ -0,0 +1 @@
+ALTER TABLE `formations` ADD `formationShareId` text(255) DEFAULT '';
diff --git a/drizzle/migrations/meta/0003_snapshot.json b/drizzle/migrations/meta/0003_snapshot.json
@@ -0,0 +1,165 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "e7282cd4-6540-40c3-a421-4ad5d75bc115",
+  "prevId": "d46d90ae-6248-41cc-99cf-5270c94282af",
+  "tables": {
+    "formations": {
+      "name": "formations",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "formation": {
+          "name": "formation",
+          "type": "text(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "artifact": {
+          "name": "artifact",
+          "type": "text(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "layout": {
+          "name": "layout",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "tags": {
+          "name": "tags",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'[]'"
+        },
+        "formationShareId": {
+          "name": "formationShareId",
+          "type": "text(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "roster": {
+      "name": "roster",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "last_update": {
+          "name": "last_update",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "roster_user_id_unique": {
+          "name": "roster_user_id_unique",
+          "columns": ["user_id"],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "votes": {
+      "name": "votes",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "formation_id": {
+          "name": "formation_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "votes_formation_id_user_id_unique": {
+          "name": "votes_formation_id_user_id_unique",
+          "columns": ["formation_id", "user_id"],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {
+        "votes_formation_id_formations_id_fk": {
+          "name": "votes_formation_id_formations_id_fk",
+          "tableFrom": "votes",
+          "tableTo": "formations",
+          "columnsFrom": ["formation_id"],
+          "columnsTo": ["id"],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    }
+  },
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "indexes": {}
+  }
+}
diff --git a/drizzle/migrations/meta/_journal.json b/drizzle/migrations/meta/_journal.json
@@ -22,6 +22,13 @@
       "when": 1730151629218,
       "tag": "0002_medical_puck",
       "breakpoints": true
+    },
+    {
+      "idx": 3,
+      "version": "6",
+      "when": 1735074547469,
+      "tag": "0003_red_nebula",
+      "breakpoints": true
     }
   ]
 }
diff --git a/drizzle/schema.ts b/drizzle/schema.ts
@@ -8,6 +8,9 @@ export const formations = sqliteTable("formations", {
   userId: text("user_id", { length: 255 }).notNull(),
   name: text("name", { length: 255 }).notNull(),
   tags: text("tags", { mode: "json" }).$type<string[]>().default([]).notNull(),
+  formationShareId: text("formationShareId", { length: 255 })
+    .default("")
+    .notNull(),
 });
 
 export const votes = sqliteTable(
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		ALTER TABLE `formations` ADD `formationShareId` text(255) DEFAULT '';