feat: destinations

Author: mstark5652

lib/components/Destination.tsx

@@ -27,8 +27,9 @@ export const Destination = ({ platform, value, onChange }: DestinationProps) =>
         <PlatformIcon />
       </Box>
 
-
       {platform === "web" && <Web value={value} onChange={onChange} />}
+      {platform === "ios" && <IOSDestination value={value} onChange={onChange} />}
+      {platform === "android" && <AndroidDestination value={value} onChange={onChange} />}
     </Box>
   )
 }
@@ -45,3 +46,27 @@ const Web = ({ value, onChange }: { value: string, onChange: (value: string) =>
     />
   )
 }
+
+const IOSDestination = ({ value, onChange }: { value: string, onChange: (value: string) => void }) => {
+  return (
+    <TextField
+      label="Destination"
+      value={value}
+      type="text"
+      helperText="Please provider the iOS Universal Link you would like to redirect to?"
+      onChange={(e) => onChange(e.target.value)}
+    />
+  )
+}
+
+const AndroidDestination = ({ value, onChange }: { value: string, onChange: (value: string) => void }) => {
+  return (
+    <TextField
+      label="Destination"
+      value={value}
+      type="text"
+      helperText="Please provider the Android App Link you would like to redirect to?"
+      onChange={(e) => onChange(e.target.value)}
+    />
+  )
+}

lib/components/LinkConfig/EditModal.tsx

@@ -12,7 +12,7 @@ import {
   CircularProgress,
   Box,
 } from "@mui/material"
-import { Close } from "@mui/icons-material"
+import { Android, Close, PhoneIphone, Public } from "@mui/icons-material"
 
 import { LinkConfig } from "@/lib/services/linkConfig"
 import { ConfirmButton } from "../ConfirmButton"
@@ -30,7 +30,9 @@ const EditModal = ({ open, onClose, config }: EditModalProps): JSX.Element => {
   const [seoTitle, setSeoTitle] = useState(config?.seo?.title || "")
   const [seoDescription, setSeoDescription] = useState(config?.seo?.description || "")
   const [seoMedia, setSeoMedia] = useState(config?.seo?.media || "")
-  const [destinationValue, setDestinationValue] = useState(config?.destinations?.[0]?.value || "")
+  const [webDestValue, setWebDestValue] = useState(config?.destinations?.find(dest => dest.platform === "web")?.value || "")
+  const [iosDestValue, setIosDestValue] = useState(config?.destinations?.find(dest => dest.platform === "ios")?.value || "")
+  const [androidDestValue, setAndroidDestValue] = useState(config?.destinations?.find(dest => dest.platform === "android")?.value || "")
 
   const [error, setError] = useState("")
   const [isLoading, setIsLoading] = useState(false)
@@ -42,6 +44,29 @@ const EditModal = ({ open, onClose, config }: EditModalProps): JSX.Element => {
     onClose && onClose()
   }
 
+  const buildDestinations = () => {
+    const destinations = []
+    if (webDestValue) {
+      destinations.push({
+        platform: "web",
+        value: webDestValue,
+      })
+    }
+    if (iosDestValue) {
+      destinations.push({
+        platform: "ios",
+        value: iosDestValue,
+      })
+    }
+    if (androidDestValue) {
+      destinations.push({
+        platform: "android",
+        value: androidDestValue,
+      })
+    }
+    return destinations
+  }
+
   const createNewConfig = async (): Promise<string | undefined> => {
     try {
       const res = await fetch("/api/linkConfigs", {
@@ -58,10 +83,7 @@ const EditModal = ({ open, onClose, config }: EditModalProps): JSX.Element => {
             description: seoDescription || "",
             media: seoMedia || "",
           },
-          destinations: [{
-            platform: "web",
-            value: destinationValue,
-          }],
+          destinations: buildDestinations(),
         }),
       })
 
@@ -102,7 +124,6 @@ const EditModal = ({ open, onClose, config }: EditModalProps): JSX.Element => {
     setIsLoading(false)
   }
 
-
   return (
     <Dialog open={open} onClose={handleClose} fullWidth>
       <AppBar sx={{ position: "relative" }} color="transparent" elevation={0}>
@@ -131,8 +152,14 @@ const EditModal = ({ open, onClose, config }: EditModalProps): JSX.Element => {
 
         <Box my={2}>
           <Typography variant="subtitle1">Destinations</Typography>
-          {/* <Repeater onAdd, onRemove, items={config.destinations}, renderChild /> */}
-          <Destination platform="web" value={destinationValue} onChange={val => setDestinationValue(val)} />
+          {/* todo: better check here */}
+          {!webDestValue && <IconButton onClick={() => setWebDestValue("https://")}><Public color="primary" /></IconButton>}
+          {!iosDestValue && <IconButton onClick={() => setIosDestValue("https://")}><PhoneIphone color="primary" /></IconButton>}
+          {!androidDestValue && <IconButton onClick={() => setAndroidDestValue("https://")}><Android color="primary" /></IconButton>}
+
+          {webDestValue && <Destination platform="web" value={webDestValue} onChange={val => setWebDestValue(val)} />}
+          {iosDestValue && <Destination platform="ios" value={iosDestValue} onChange={val => setIosDestValue(val)} />}
+          {androidDestValue && <Destination platform="android" value={androidDestValue} onChange={val => setAndroidDestValue(val)} />}
 
         </Box>
 

lib/components/PlatformRedirect.tsx

@@ -4,11 +4,25 @@ export interface PlatformRedirectProps {
 }
 
 const PlatformRedirect = ({ destinations }: PlatformRedirectProps) => {
+  if (navigator && /iPad|iPhone|iPod/i.test(navigator.userAgent)) {
+    console.log("on iOS")
+    const dest = destinations.find(dest => dest.platform === "ios")
+    window.location.href = dest?.value || "#"
+    return
+  }
+
+  if (navigator && /Android/i.test(navigator.userAgent)) {
+    console.log("on Android")
+    const dest = destinations.find(dest => dest.platform === "android")
+    window.location.href = dest?.value || "#"
+    return
+  }
 
   if (window && Array.isArray(destinations)) {
+    console.log("on web")
     const web = destinations.find(dest => dest.platform === "web")
     if (web && web.value) {
-      window.location.href = web.value
+      window.location.href = web.value || "#"
       return null
     }
   }

lib/components/Repeater/index.tsx

@@ -30,7 +30,6 @@ export default function Home({
 
   const handleCopy = (docId: string) => {
     if (navigator.clipboard) {
-      // todo: fix copy url
       navigator.clipboard.writeText(
         `${window.location.host}/link/${userId}/${docId}`
       )