\n \n \n \n {title}\n

\n {content(setOpen)}\n

\n \n \n \n );\n}\n\nfunction BottomDrawer({ trigger, title, content, initialOpen = false }: {\n trigger: React.JSX.Element;\n title: string;\n content: (setOpen: React.Dispatch>) => React.JSX.Element;\n initialOpen?: boolean;\n}) {\n const [open, setOpen] = React.useState(initialOpen);\n\n return (\n \n {trigger}\n \n \n \n

\n \n

\n \n \n \n

\n {title}\n

\n {content(setOpen)}\n

\n \n \n \n );\n}\n\nconst useAuthenticatedFetch = () => {\n const { getToken } = useAuth();\n\n return async ({ endpoint, data = \"\" }: { endpoint: string; data?: any }) => {\n const token = await getToken();\n\n return await fetch(`https://www.thegluechat.com${endpoint}`, {\n method: \"POST\",\n body: JSON.stringify(data),\n headers: { Authorization: `Bearer ${token}` },\n });\n };\n};\n\nconst QuantitySelector = ({ db, cart, product }: { db: any; cart: any; product: any }) => {\n const getQuantity = () => product?.cartItems?.[0]?.quantity || 0;\n\n const handleDecreaseQuantity = async (e: React.MouseEvent) => {\n e.stopPropagation();\n\n const currentQuantity = getQuantity();\n\n if (currentQuantity <= 1) {\n if (product?.cartItems?.[0]?.id) {\n await db.transact([\n db.tx.cartItems[product.cartItems[0].id].delete(),\n db.tx.carts[cart.id].update({ itemCount: cart.itemCount - 1 }),\n ]);\n }\n return;\n }\n\n const newQuantity = currentQuantity - 1;\n if (product?.cartItems?.[0]?.id) {\n await db.transact([\n db.tx.cartItems[product.cartItems[0].id].update({ quantity: newQuantity }),\n db.tx.carts[cart.id].update({ itemCount: cart.itemCount - 1 }),\n ]);\n }\n };\n\n const handleIncreaseQuantity = async (e: React.MouseEvent) => {\n e.stopPropagation();\n\n const currentQuantity = getQuantity();\n const newQuantity = currentQuantity + 1;\n\n if (product?.cartItems?.[0]?.id) {\n await db.transact([\n db.tx.cartItems[product.cartItems[0].id].update({ quantity: newQuantity }),\n db.tx.carts[cart.id].update({ itemCount: cart.itemCount + 1 }),\n ]);\n }\n\n if (!product?.cartItems?.length) {\n await db.transact([\n db.tx.cartItems[id()].update({ quantity: 1 })\n .link({ carts: cart?.id })\n .link({ products: product.id }),\n db.tx.carts[cart.id].update({ itemCount: cart.itemCount + 1 }),\n ]);\n }\n };\n\n const quantity = getQuantity();\n\n return (\n

\n \n {quantity === 1\n ? \n : }\n \n \n {quantity}\n \n \n \n \n

\n );\n};\n\nconst Product = ({ db, cart, product }: { db: any; cart: any; product: any }) => {\n const [activeProductId, setActiveProductId] = useState(\"\");\n\n const { isLoading, error, data } = db.useQuery({\n categories: {\n $: {\n where: {\n \"name\": { $in: product.categories.map((category: any) => category.name) },\n },\n },\n products: {\n cartItems: {},\n categories: {},\n },\n },\n });\n\n if (isLoading)\n return (\n

\n );\n\n if (error) console.log(error); // return

Error: {error.message}

;\n\n const { categories } = data;\n\n if (!categories) return

No categories found

;\n if (!product) return

Product not found

;\n\n return (\n

\n {[...Array(5)].map((_, index) => (\n \n {index < Math.floor(product.rating) ? \"★\" : \"☆\"}\n \n ))}\n {product.rating} ({product.ratingsTotal})\n

{product.title}

{product.dimensions}

\n {categories.map((category: any) => (\n

{category.name}

\n \n {category.products.map((product: any) => (\n

\n \n

\n ))}\n \n

\n ))}\n

{product.display}

\n \n

\n );\n};\n\nfunction ProductCard(\n { db, cart, product, activeProductId, setActiveProductId }: {\n db: any;\n cart: any;\n product: any;\n activeProductId: string | null;\n setActiveProductId: React.Dispatch>;\n },\n) {\n const isActive = activeProductId === product.id;\n\n const getQuantity = () => product?.cartItems?.[0]?.quantity || 0;\n\n useEffect(() => {\n const handleGlobalClick = () => {\n if (isActive) {\n setActiveProductId(\"\");\n }\n };\n\n if (isActive) {\n const timeoutId = setTimeout(() => {\n document.addEventListener(\"click\", handleGlobalClick);\n }, 10);\n\n return () => {\n clearTimeout(timeoutId);\n document.removeEventListener(\"click\", handleGlobalClick);\n };\n }\n }, [isActive, setActiveProductId]);\n\n const handleButtonClick = async (e: React.MouseEvent) => {\n e.stopPropagation();\n\n if (!product?.cartItems?.length) {\n await db.transact([\n db.tx.cartItems[id()].update({ quantity: 1 })\n .link({ carts: cart?.id })\n .link({ products: product.id }),\n db.tx.carts[cart.id].update({ itemCount: cart.itemCount + 1 }),\n ]);\n }\n\n setActiveProductId(isActive ? \"\" : product.id);\n };\n\n const handleQuantitySelectorClick = (e: React.MouseEvent) => {\n e.stopPropagation();\n };\n\n const handleDecreaseQuantity = async (e: React.MouseEvent) => {\n e.stopPropagation();\n\n const currentQuantity = getQuantity();\n\n if (currentQuantity <= 1) {\n if (product?.cartItems?.[0]?.id) {\n await db.transact([\n db.tx.cartItems[product.cartItems[0].id].delete(),\n db.tx.carts[cart.id].update({ itemCount: cart.itemCount - 1 }),\n ]);\n }\n setActiveProductId(\"\");\n return;\n }\n\n const newQuantity = currentQuantity - 1;\n if (product?.cartItems?.[0]?.id) {\n await db.transact([\n db.tx.cartItems[product.cartItems[0].id].update({ quantity: newQuantity }),\n db.tx.carts[cart.id].update({ itemCount: cart.itemCount - 1 }),\n ]);\n }\n };\n\n const handleIncreaseQuantity = async (e: React.MouseEvent) => {\n e.stopPropagation();\n\n const currentQuantity = getQuantity();\n const newQuantity = currentQuantity + 1;\n\n if (product?.cartItems?.[0]?.id) {\n await db.transact([\n db.tx.cartItems[product.cartItems[0].id].update({ quantity: newQuantity }),\n db.tx.carts[cart.id].update({ itemCount: cart.itemCount + 1 }),\n ]);\n }\n };\n\n return (\n }\n title={\"\"}\n trigger={\n

\n \n {isActive\n ? (\n \n \n {getQuantity() === 1\n ? \n : }\n \n {getQuantity()}\n \n \n \n

\n )\n : (\n \n \n {product?.cartItems?.length > 0\n ? product.cartItems[0].quantity\n : }\n \n \n )}\n \n \n \n e.stopPropagation()}\n >\n \n \n \n \n \n \n \n

{product.display}

{product.title}

\n \n }\n />\n );\n}\n\nfunction ProductCarousel({ children }: { children: React.ReactNode }) {\n const [emblaRef, emblaApi] = useEmblaCarousel({\n axis: \"x\",\n loop: false,\n align: \"start\",\n dragFree: false,\n containScroll: \"trimSnaps\",\n slidesToScroll: 1,\n });\n\n const scrollByRef = useRef((delta: number) => {});\n const isScrollingRef = useRef(false);\n\n const onWheel = useCallback(\n (event: WheelEvent) => {\n if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {\n event.preventDefault();\n scrollByRef.current(event.deltaX);\n } else if (!isScrollingRef.current) {\n const container = event.currentTarget as HTMLElement;\n }\n },\n [scrollByRef],\n );\n\n useEffect(() => {\n if (emblaApi) {\n scrollByRef.current = (delta: number) => {\n isScrollingRef.current = true;\n const scrollResult = emblaApi.scrollTo(emblaApi.selectedScrollSnap() + Math.sign(delta));\n\n if (scrollResult && typeof scrollResult.then === \"function\") {\n scrollResult.then(() => {\n isScrollingRef.current = false;\n });\n } else {\n isScrollingRef.current = false;\n }\n };\n\n const rootNode = emblaApi.rootNode();\n rootNode.addEventListener(\"wheel\", onWheel, { passive: false });\n rootNode.style.overflowY = \"auto\";\n rootNode.style.overflowX = \"hidden\";\n\n return () => {\n rootNode.removeEventListener(\"wheel\", onWheel);\n };\n }\n }, [emblaApi, onWheel]);\n\n return (\n \n

\n {children}\n

\n \n );\n}\n\nconst Home = ({ db, cart }: { db: any; cart: any }) => {\n const [category, setCategory] = useState(\"%\");\n const [activeProductId, setActiveProductId] = useState(\"\");\n\n const { isLoading, error, data } = db.useQuery({\n categories: {},\n brands: {\n $: {\n where: {\n \"categories.name\": { $ilike: category },\n },\n },\n products: {\n cartItems: {\n $: {\n where: {\n \"carts.id\": cart && cart.id,\n },\n },\n },\n categories: {},\n },\n },\n });\n\n if (isLoading)\n return (\n

\n );\n\n if (error) console.log(error); // return

Error: {error.message}

;\n\n const { categories, brands } = data;\n\n if (!categories) return

No categories found

;\n\n return (\n

setCategory(\"%\")}>\n

\n All\n

\n {categories.map((c: any) => (\n

setCategory(c.name)}>\n

\n \n {c.name}\n

\n ))}\n

\n {brands.map((brand: any) => (\n

{brand.name}

\n \n {brand.products.map((product: any) => (\n

\n \n

\n ))}\n \n

\n ))}\n

\n \n );\n};\n\nconst Cart = ({ db, cart }: { db: any; cart: any }) => {\n const { isLoading, error, data } = db.useQuery({\n products: {\n $: {\n where: {\n \"cartItems.carts.id\": cart && cart.id,\n },\n },\n cartItems: {},\n },\n });\n\n if (isLoading)\n return (\n

\n );\n\n if (error) return

Error: {error.message}

;\n\n const { products } = data;\n\n console.log(products);\n\n if (!products || products.length === 0) {\n return (\n

Cart

\n No items found\n

\n );\n }\n\n return (\n

Cart

\n {products.map((product: any) => (\n

\n \n

{product.title}

\n\n

\n {product.display}\n

\n \n

\n ))}\n

\n \n

\n );\n};\n\nconst Address = (\n { db, address, onSelectAddress }: { db: any; address?: any; onSelectAddress?: (address: any) => void },\n) => {\n const [inputValue, setInputValue] = useState(address?.fullAddress || \"\");\n const [isLoading, setIsLoading] = useState(false);\n const autocompleteRef = useRef(null);\n const inputRef = useRef(null);\n const [addresses, setAddresses] = useState([]);\n\n // Load addresses from the database\n const { data } = db.useQuery({\n addresses: {\n $: {\n order: {\n lastUpdated: \"desc\",\n },\n },\n },\n });\n\n useEffect(() => {\n if (data && data.addresses) {\n setAddresses(data.addresses);\n }\n }, [data]);\n\n // Load Google Maps script\n useEffect(() => {\n // Check if the script is already loaded\n if (window.google && window.google.maps) return;\n\n const script = document.createElement(\"script\");\n script.src = `https://maps.googleapis.com/maps/api/js?key=AIzaSyAOtUMb5jLTjTVM7iKzIx2SJ3HgMKNcM7U&libraries=places`;\n script.async = true;\n script.defer = true;\n script.onload = initAutocomplete;\n document.head.appendChild(script);\n\n return () => {\n // Clean up script if component unmounts before script loads\n if (document.head.contains(script)) {\n document.head.removeChild(script);\n }\n };\n }, []);\n\n const initAutocomplete = () => {\n if (!window.google || !window.google.maps || !inputRef.current) return;\n\n autocompleteRef.current = new window.google.maps.places.Autocomplete(inputRef.current, {\n componentRestrictions: { country: \"us\" },\n fields: [\"address_components\", \"formatted_address\", \"geometry\"],\n types: [\"address\"],\n });\n\n autocompleteRef.current.addListener(\"place_changed\", handlePlaceSelect);\n };\n\n const handlePlaceSelect = () => {\n console.log(\"hi\");\n if (!autocompleteRef.current) return;\n\n const place = autocompleteRef.current.getPlace();\n if (!place.geometry) return;\n\n // Extract address components\n let addressComponents = {\n fullAddress: place.formatted_address,\n street: \"\",\n city: \"\",\n state: \"\",\n postalCode: \"\",\n country: \"\",\n lat: place.geometry.location.lat(),\n lng: place.geometry.location.lng(),\n };\n\n place.address_components.forEach(component => {\n const types = component.types;\n\n if (types.includes(\"street_number\")) {\n addressComponents.street = component.long_name + \" \";\n }\n\n if (types.includes(\"route\")) {\n addressComponents.street += component.long_name;\n }\n\n if (types.includes(\"locality\")) {\n addressComponents.city = component.long_name;\n }\n\n if (types.includes(\"administrative_area_level_1\")) {\n addressComponents.state = component.short_name;\n }\n\n if (types.includes(\"postal_code\")) {\n addressComponents.postalCode = component.long_name;\n }\n\n if (types.includes(\"country\")) {\n addressComponents.country = component.long_name;\n }\n });\n\n setInputValue(addressComponents.fullAddress);\n\n // Pass the formatted address back to parent component\n if (onSelectAddress) {\n onSelectAddress(addressComponents);\n }\n console.log(places);\n console.log(addressComponents);\n // Save to database if needed\n if (db && db.insert) {\n saveAddress(addressComponents);\n }\n };\n\n const saveAddress = async (addressData) => {\n try {\n setIsLoading(true);\n await db.insert({\n addresses: {\n fullAddress: addressData.fullAddress,\n street: addressData.street,\n city: addressData.city,\n state: addressData.state,\n postalCode: addressData.postalCode,\n country: addressData.country,\n coordinates: {\n lat: addressData.lat,\n lng: addressData.lng,\n },\n lastUpdated: new Date().toISOString(),\n isDefault: addresses.length === 0, // Make it default if this is the first address\n },\n });\n } catch (error) {\n console.error(\"Error saving address:\", error);\n } finally {\n setIsLoading(false);\n }\n };\n\n const handleInputChange = (e) => {\n setInputValue(e.target.value);\n };\n\n const useCurrentLocation = () => {\n if (navigator.geolocation) {\n navigator.geolocation.getCurrentPosition(async (position) => {\n try {\n setIsLoading(true);\n // Reverse geocode the coordinates to get an address\n const response = await fetch(\n `https://maps.googleapis.com/maps/api/geocode/json?latlng=${position.coords.latitude},${position.coords.longitude}&key=AIzaSyAOtUMb5jLTjTVM7iKzIx2SJ3HgMKNcM7U`,\n );\n const data = await response.json();\n\n if (data.results && data.results[0]) {\n setInputValue(data.results[0].formatted_address);\n\n if (autocompleteRef.current) {\n // Trigger place_changed event manually\n const geocoder = new window.google.maps.Geocoder();\n geocoder.geocode({\n placeId: data.results[0].place_id,\n }, (results, status) => {\n if (status === \"OK\" && results[0]) {\n autocompleteRef.current.set(\"place\", results[0]);\n handlePlaceSelect();\n }\n });\n }\n }\n } catch (error) {\n console.error(\"Error getting current location:\", error);\n } finally {\n setIsLoading(false);\n }\n });\n }\n };\n\n const selectAddress = (selectedAddress) => {\n setInputValue(selectedAddress.fullAddress);\n if (onSelectAddress) {\n onSelectAddress(selectedAddress);\n }\n };\n\n return (\n

\n {/* Search Bar - Always Visible */}\n

\n \n

\n \n {isLoading && (\n

\n )}\n

\n\n {/* Explore Nearby Section */}\n

Explore nearby

\n \n \n

Use current location

Quick delivery to where you are

\n\n {/* Saved Addresses Section */}\n {addresses.length > 0 && (\n

Saved addresses

\n {addresses.map((savedAddress, index) => (\n selectAddress(savedAddress)}\n >\n

{savedAddress.fullAddress}

\n {savedAddress.street && (\n

\n {savedAddress.street}, {savedAddress.city}\n

\n )}\n

\n {savedAddress.isDefault && (\n Default\n )}\n

\n ))}\n

\n )}\n \n );\n};\n\nconst App = () => {\n const db = useMemo(() => init({ appId: \"880cb820-b987-4019-9b0a-7805721e74d2\" }), []);\n const { isLoaded, isSignedIn, user: userClerk } = useUser();\n const { getToken } = useAuth();\n const { isLoading, user: userInstant, error: instantError } = db.useAuth();\n const [showBorder, setShowBorder] = useState(false);\n\n const { data, error } = db.useQuery({\n addresses: {\n $: {\n limit: 10,\n order: {\n lastUpdated: \"desc\",\n },\n },\n },\n carts: {\n $: {\n where: {\n archived: false,\n },\n },\n },\n });\n\n const { carts, addresses } = data || [];\n\n useEffect(() => {\n const handleScroll = () => setShowBorder(window.scrollY > 0);\n window.addEventListener(\"scroll\", handleScroll);\n return () => window.removeEventListener(\"scroll\", handleScroll);\n }, []);\n\n useEffect(() => {\n const signInToInstantWithClerkToken = async () => {\n if (!isSignedIn) return;\n const idToken = await getToken();\n if (!idToken) return;\n db.auth.signInWithIdToken({\n clientName: \"clerk\",\n idToken: idToken,\n });\n };\n\n isSignedIn ? signInToInstantWithClerkToken() : db.auth.signOut();\n }, [isSignedIn]);\n\n if (typeof window === \"undefined\" || isLoading || !isLoaded) {\n return

;\n }\n\n const SearchBar = () => (\n \n

\n \n

\n );\n\n return (\n

\n \n

\n {!showBorder && (\n

\n \n \n AFOLABI'S\n

\n \n \n \n

\n 233 Sussexvale Drive\n

\n \n

\n }\n title=\"Addresses\"\n content={(setOpen) =>

}\n />\n \n

\n )}\n

\n {!showBorder && (\n <>\n \n \n \n \n \n \n \n }\n title={`${userClerk?.firstName} ${userClerk?.lastName && userClerk?.lastName.at(0)}.`}\n content={(setOpen) =>

}\n />\n \n \n )}\n

\n {showBorder && }\n \n \n \n \n \n \n \n \n {carts && carts[0] && carts[0]?.itemCount > 0 && (\n \n {carts[0].itemCount}\n \n )}\n

\n }\n title=\"\"\n content={(setOpen) => }\n />\n \n

\n {!showBorder && }\n \n \n

\n }\n title=\"Chat\"\n content={() => <>}\n initialOpen={window.location.pathname !== \"/\"}\n />\n \n \n

\n );\n};\n\n// Client-side rendering\nfunction client() {\n const root = document.getElementById(\"root\");\n if (root) {\n createRoot(root).render(\n \n \n \n \n ,\n );\n }\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nconst app = new Hono();\n\n// Server-side rendering function\nconst renderPage = () => {\n const content = renderToString(\n \n \n \n \n Afolabi's\n \n \n \n \n \n

\n \n \n ,\n );\n return `${content}`;\n};\n\napp.use(\"*\", clerkMiddleware());\n\napp.get(\"/c/:chatId/join\", async (c) => {\n const auth = getAuth(c);\n const clerkClient = c.get(\"clerk\");\n const { chatId } = c.req.param();\n const method = c.req.method;\n\n return c.redirect(`/c/${chatId}`);\n});\n\napp.get(\"/hi\", async (c) => {\n console.log(c.req.body);\n return c.html(

);\n});\n\napp.get(\"*\", async (c) => {\n const { id, init, lookup, tx } = await import(\"https://esm.sh/@instantdb/admin@0.19.2?bundle-deps&deps=react@18.2.0\");\n const db = init({\n appId: \"880cb820-b987-4019-9b0a-7805721e74d2\",\n adminToken: Deno.env.get(\"INSTANTDB_ADMIN_TOKEN\"),\n });\n const auth = getAuth(c);\n const clerkClient = c.get(\"clerk\");\n\n if (auth && auth.userId) {\n const userClerk = await clerkClient.users.getUser(auth.userId);\n const userInstant = await db.auth.getUser({ email: userClerk.emailAddresses[0].emailAddress });\n\n const data = await db.query({\n carts: {\n $: {\n where: {\n and: [\n { archived: false },\n { \"users.id\": userInstant.id },\n ],\n },\n },\n },\n });\n\n if (!data.carts[0]) {\n await db.transact(\n [\n db.tx.users[userInstant.id].update({ email: userInstant.email, lastVisited: Date.now() }),\n db.tx.carts[id()].update({ archived: false, itemCount: 0 }).link({ users: userInstant.id }),\n ],\n );\n } else {\n await db.transact(db.tx.users[userInstant.id].update({ email: userInstant.email, lastVisited: Date.now() }));\n }\n }\n\n return c.html(renderPage());\n});\n\nexport default app.fetch;","deleted","label",[172,155],"src","permalink","https://www.val.town/x/vawogbemi/sss/code/src/main.tsx","extension","actionData","errors"]