feat: web destinations

Author: mstark5652

lib/components/Destination.tsx

@@ -0,0 +1,47 @@
+import { Typography, TextField, Box } from "@mui/material"
+import { Public, Android, PhoneIphone } from "@mui/icons-material"
+
+export interface DestinationProps {
+  platform: "web" | "ios" | "android"
+  value: string
+  onChange: (value: string) => void
+}
+
+export const Destination = ({ platform, value, onChange }: DestinationProps) => {
+
+  const PlatformIcon = () => {
+    switch (platform) {
+      case "web":
+        return <Public />
+      case "android":
+        return <Android />
+      case "ios":
+        return <PhoneIphone />
+    }
+  }
+
+  return (
+    <Box m={1}>
+      <Box display="flex" alignItems="center" justifyContent="space-between">
+        <Typography variant="subtitle2">Platform: {platform}</Typography>
+        <PlatformIcon />
+      </Box>
+
+
+      {platform === "web" && <Web value={value} onChange={onChange} />}
+    </Box>
+  )
+}
+
+
+const Web = ({ value, onChange }: { value: string, onChange: (value: string) => void }) => {
+  return (
+    <TextField
+      label="Destination"
+      value={value}
+      type="text"
+      helperText="What URL should we send the user to?"
+      onChange={(e) => onChange(e.target.value)}
+    />
+  )
+}

lib/components/LinkConfig/EditModal.tsx

@@ -16,6 +16,7 @@ import { Close } from "@mui/icons-material"
 
 import { LinkConfig } from "@/lib/services/linkConfig"
 import { ConfirmButton } from "../ConfirmButton"
+import { Destination } from "../Destination"
 
 export interface EditModalProps {
   open: boolean
@@ -29,6 +30,7 @@ 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 [error, setError] = useState("")
   const [isLoading, setIsLoading] = useState(false)
@@ -56,7 +58,10 @@ const EditModal = ({ open, onClose, config }: EditModalProps): JSX.Element => {
             description: seoDescription || "",
             media: seoMedia || "",
           },
-          destinations: [],
+          destinations: [{
+            platform: "web",
+            value: destinationValue,
+          }],
         }),
       })
 
@@ -124,6 +129,13 @@ const EditModal = ({ open, onClose, config }: EditModalProps): JSX.Element => {
           onChange={(e) => setName(e.target.value)}
         />
 
+        <Box my={2}>
+          <Typography variant="subtitle1">Destinations</Typography>
+          {/* <Repeater onAdd, onRemove, items={config.destinations}, renderChild /> */}
+          <Destination platform="web" value={destinationValue} onChange={val => setDestinationValue(val)} />
+
+        </Box>
+
         <Box my={2}>
           <Typography variant="subtitle1">SEO Settings</Typography>
 

lib/components/PlatformRedirect.tsx

@@ -0,0 +1,22 @@
+
+export interface PlatformRedirectProps {
+  destinations: Array<{ platform: string, value: string }>
+}
+
+const PlatformRedirect = ({ destinations }: PlatformRedirectProps) => {
+
+  if (window && Array.isArray(destinations)) {
+    const web = destinations.find(dest => dest.platform === "web")
+    if (web && web.value) {
+      window.location.href = web.value
+      return null
+    }
+  }
+
+  return (
+    <>
+    </>
+  )
+}
+
+export default PlatformRedirect

lib/components/Repeater/index.tsx

@@ -0,0 +1,33 @@
+import { Box, IconButton } from "@mui/material"
+import { Add, Delete } from "@mui/icons-material"
+
+export interface RepeaterProps {
+  renderChild: (data: unknown, idx: number) => JSX.Element
+  items: { id?: string }[]
+  onAdd: () => void
+  onRemove: (id: string) => void
+}
+
+const Repeater = ({ onAdd, onRemove, items, renderChild }: RepeaterProps): JSX.Element => {
+  return (
+    <>
+      {items.map((item: { id?: string }, idx: number) => (
+        <Box key={item.id} m={1} display="flex" alignItems="center">
+          {renderChild(item, idx)}
+          <Box display="flex" justifyContent="flex-end">
+            <IconButton onClick={() => onRemove(item.id || "")}>
+              <Delete color="warning" />
+            </IconButton>
+          </Box>
+        </Box>
+      ))}
+      <Box display="flex" justifyContent="flex-end">
+        <IconButton onClick={onAdd}>
+          <Add color="primary" />
+        </IconButton>
+      </Box>
+    </>
+  )
+}
+
+export default Repeater

lib/services/linkConfig/index.ts

@@ -25,7 +25,6 @@ export interface LinkConfig {
   destinations: Array<Destination>
 }
 
-
 const buildCollectionDocPath = (userId: string, docId?: string): string => {
   const path = `${config.datastore.basePath}/${userId}/configs`
   if (docId) {

pages/link/[userId]/[id].tsx

@@ -1,7 +1,12 @@
 import { GetServerSideProps } from "next"
 import Head from "next/head"
+import dynamic from "next/dynamic"
 import Error from "next/error"
 
+const PlatformRedirect = dynamic(() => import("@/lib/components/PlatformRedirect"), {
+  ssr: false,
+})
+
 import { LinkConfig, fetchById } from "@/lib/services/linkConfig"
 
 
@@ -14,14 +19,15 @@ const LinkPage = ({ data }: LinkProps): JSX.Element => {
     return <Error statusCode={404} />
   }
 
+
   return (
     <>
       <Head>
         <title>{data?.seo?.title || "Link Config"}</title>
         <meta name="description" content={data?.seo?.description || "Link Config"} />
       </Head>
       <p>{data?.seo?.title || "Link Config"}</p>
-      <p>Todo: redirect</p>
+      <PlatformRedirect destinations={data?.destinations || []} />
     </>
   )
 }