feat: add beanlink formatting

marcelblijleven · Jun 21, 2023 · 0fdafb9 · 0fdafb9 · vercel · Jun 21, 2023
1 parent 20aa61f
commit 0fdafb9
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 26 deletions.
diff --git a/src/app/beanconqueror/share/create/components/form.tsx b/src/app/beanconqueror/share/create/components/form.tsx
@@ -22,14 +22,14 @@ import {VarietyInformationFieldset} from "@/app/beanconqueror/share/create/compo
 import HorizontalGroup from "@/app/beanconqueror/share/create/components/horizontal-group";
 import {defaultVarietyInformation, formSchema} from "@/app/beanconqueror/share/create/form-schema";
 import {createUrlFromFormSchema} from "@/app/beanconqueror/share/create/util/proto-helpers";
-import {getBeanLink} from "@/app/beanconqueror/share/create/util/beanlink-helpers";
+import {BeanLinkResponse, getBeanLink} from "@/app/beanconqueror/share/create/util/beanlink-helpers";
 import ShareCard from "@/app/beanconqueror/share/create/components/share-card";
 
 
 const BeanInformationForm = () => {
     const [showQR, setShowQR] = useState(false);
     const [url, setUrl] = useState("");
-    const [beanLinkUrl, setBeanLinkUrl] = useState("");
+    const [beanLinkResponse, setBeanLinkResponse] = useState<BeanLinkResponse | undefined>();
 
     const form = useForm<formSchema>({
         resolver: zodResolver(formSchema),
@@ -60,7 +60,7 @@ const BeanInformationForm = () => {
         const shareUrl = createUrlFromFormSchema(values);
         setUrl(shareUrl);
         setShowQR(true);
-        getBeanLink(shareUrl).then(r => setBeanLinkUrl(r)).catch(err => {
+        getBeanLink(shareUrl).then(response => setBeanLinkResponse(response)).catch(err => {
             console.error(err);
         });
     }
@@ -214,7 +214,7 @@ const BeanInformationForm = () => {
                     </div>
                 </form>
             </Form>
-            {showQR && <ShareCard bcUrl={url} beanLinkUrl={beanLinkUrl}/>}
+            {showQR && <ShareCard bcUrl={url} beanLinkResponse={beanLinkResponse}/>}
 
         </>
     )

diff --git a/src/app/beanconqueror/share/create/components/share-card.tsx b/src/app/beanconqueror/share/create/components/share-card.tsx
@@ -1,17 +1,32 @@
 import QRCodeCard from "@/components/qrcode-card";
 import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
 import CopyContainer from "@/components/copy-container";
+import {BeanLinkResponse} from "@/app/beanconqueror/share/create/util/beanlink-helpers";
 
-const ShareCard = ({bcUrl, beanLinkUrl}: {bcUrl: string, beanLinkUrl: string}) => (
+const BeanLinkCard = ({response}: {response: BeanLinkResponse }) => (
+    <Card>
+        <CardHeader>
+            <CardTitle>{`🫘 ${response.name}, ${response.roaster || ""}`}</CardTitle>
+        </CardHeader>
+        <CardContent className={"flex flex-col space-y-2"}>
+            <CopyContainer value={response.link} />
+            <CopyContainer
+                value={`:beans: ${response.name} ${response.roaster} <${response.link}>`}
+                displayValue={"Copy for discord"}
+            />
+        </CardContent>
+    </Card>
+)
+
+
+const ShareCard = ({bcUrl, beanLinkResponse}: {bcUrl: string, beanLinkResponse: BeanLinkResponse | undefined}) => (
     <Card className={"w-full"}>
         <CardHeader>
             <CardTitle>Share or import</CardTitle>
         </CardHeader>
-        <CardContent>
-            <div className={"flex flex-col space-y-2"}>
-                <CopyContainer value={beanLinkUrl} />
-                <QRCodeCard value={bcUrl} />
-            </div>
+        <CardContent className={"flex flex-col space-y-2"}>
+            {beanLinkResponse?.link && <BeanLinkCard response={beanLinkResponse} />}
+            <QRCodeCard value={bcUrl} />
         </CardContent>
     </Card>
 );

diff --git a/src/app/beanconqueror/share/create/util/beanlink-helpers.ts b/src/app/beanconqueror/share/create/util/beanlink-helpers.ts
@@ -1,11 +1,11 @@
-interface BeanLinkResponse {
+export interface BeanLinkResponse {
     link: string;
     error?: string | undefined,
     name: string;
     roaster?: string | null;
 }
 
-export async function getBeanLink(link: string): Promise<string> {
+export async function getBeanLink(link: string): Promise<BeanLinkResponse> {
     const response = await fetch("https://beanl.ink/add", {
         method: "POST",
         body: JSON.stringify({"link": link})
@@ -16,7 +16,7 @@ export async function getBeanLink(link: string): Promise<string> {
         throw new Error(data.error);
     }
 
-    return data.link
+    return data
 }
 
 export async function followBeanLink(link: string): Promise<string> {

diff --git a/src/app/beanconqueror/share/view/components/shared-bean.tsx b/src/app/beanconqueror/share/view/components/shared-bean.tsx
@@ -17,6 +17,7 @@ import IBeanInformation = beanconqueror.IBeanInformation;
 import LabelledValue from "@/app/beanconqueror/share/view/components/labelled-value";
 import QRCodeCard from "@/components/qrcode-card";
 import {followBeanLink} from "@/app/beanconqueror/share/create/util/beanlink-helpers";
+import {useState} from "react";
 
 const GeneralTabsContent = ({decoded}: {decoded: BeanProto}) => (
     <>
@@ -48,7 +49,7 @@ const GeneralTabsContent = ({decoded}: {decoded: BeanProto}) => (
             <CardContent>
                 <div className={"grid grid-cols-1 md:grid-cols-2 gap-2"}>
                     <LabelledValue type={"number"} label={"Weight"} value={decoded.weight}/>
-                    <LabelledValue type={"boolean"} label={"Cost"} value={decoded.cost}/>
+                    <LabelledValue type={"number"} label={"Cost"} value={decoded.cost}/>
                     <LabelledValue
                         type={"string"} label={"Flavour profile"} value={decoded.aromatics} splitLabels
                     />
@@ -98,21 +99,28 @@ const VarietyTabsContent = ({decoded}: {decoded: BeanProto}) => (
 )
 
 const SharedBean = ({url, validUrl, isBeanLink}: { url: string | undefined, validUrl: boolean, isBeanLink: boolean }) => {
-    if (!url || !validUrl) {
+    const [viewUrl, setViewUrl] = useState<string | undefined>(url);
+
+    if (!url) {
         return null;
     }
 
     if (isBeanLink) {
         followBeanLink(url).then(response => {
-            url = response;
+            console.log(response)
+            setViewUrl(response);
         });
     }
 
+    if (!viewUrl || !validUrl) {
+        return null;
+    }
+
     let err;
     let decoded;
 
     try {
-        decoded = decodeMessage(url);
+        decoded = decodeMessage(viewUrl);
     } catch (e) {
         err = e;
     }
@@ -129,7 +137,7 @@ const SharedBean = ({url, validUrl, isBeanLink}: { url: string | undefined, vali
         )
     }
     return (
-        <Card>
+        <Card className={"w-full"}>
             <CardHeader>
                 <CardTitle>{getTextWithFlagSupport(decoded.name)}</CardTitle>
             </CardHeader>

diff --git a/src/app/beanconqueror/share/view/components/view-link.tsx b/src/app/beanconqueror/share/view/components/view-link.tsx
@@ -21,7 +21,7 @@ const ViewLink = () => {
     const ringColor = err ? "ring-red-500 focus-visible:ring-red-500" : "ring-green-500 focus-visible:ring-green-500";
 
     return (
-        <div className={"w-full max-w-xl space-y-4"}>
+        <div className={"w-full space-y-4"}>
             <div className={"flex gap-2"}>
                 <Input
                     type={"text"}

diff --git a/src/components/bc-card.tsx b/src/components/bc-card.tsx
@@ -32,11 +32,11 @@ const BeanconquerorCard = () => (
                 button={"View stats"}
                 href={"/beanconqueror/stats"}
             />
-            {/*<LinkDetail*/}
-            {/*    detail={"View contents of a share url"}*/}
-            {/*    button={"View share link"}*/}
-            {/*    href={"/beanconqueror/share/view"}*/}
-            {/*/>*/}
+            <LinkDetail
+                detail={"View contents of a share url"}
+                button={"View share link"}
+                href={"/beanconqueror/share/view"}
+            />
             <LinkDetail
                 detail={"Create a share url"}
                 button={"Create share link"}

diff --git a/src/components/copy-container.tsx b/src/components/copy-container.tsx
@@ -4,7 +4,7 @@ import {Button} from "@/components/ui/button";
 import {Check, Copy, LucideIcon} from "lucide-react";
 import {createElement, useState} from "react";
 
-const CopyContainer = ({value}: {value: string}) => {
+const CopyContainer = ({value, displayValue}: {value: string, displayValue?: string}) => {
     const [icon, setIcon] = useState<LucideIcon>(Copy);
 
     const onClick = () => {
@@ -19,7 +19,7 @@ const CopyContainer = ({value}: {value: string}) => {
 
     return (
         <div className={"flex items-center justify-between rounded-lg border bg-card text-card-foreground shadow-sm"}>
-            <div className={"text-sm p-2"}>{value}</div>
+            <div className={"text-sm p-2"}>{displayValue || value}</div>
             <Button variant={"ghost"} onClick={onClick}>
                 {createElement(icon)}
             </Button>