From d1253fef925264b024a34e02f6dcdaa63b08cafd Mon Sep 17 00:00:00 2001 From: Alaister Young Date: Sun, 27 Mar 2022 22:07:19 +0200 Subject: [PATCH] Updates partner gallery for new supabase ui --- www/components/Partners/BecomeAPartners.tsx | 853 +++++++++++--------- www/components/Partners/TileGrid.tsx | 35 +- www/pages/partners/[slug].tsx | 76 +- www/pages/partners/experts/index.tsx | 36 +- www/pages/partners/integrations/index.tsx | 34 +- 5 files changed, 550 insertions(+), 484 deletions(-) diff --git a/www/components/Partners/BecomeAPartners.tsx b/www/components/Partners/BecomeAPartners.tsx index 91b2aa3e506..1cdf1745ba7 100644 --- a/www/components/Partners/BecomeAPartners.tsx +++ b/www/components/Partners/BecomeAPartners.tsx @@ -1,401 +1,490 @@ import { SupabaseClient } from '@supabase/supabase-js' -import { Select, Typography, Input, InputNumber, Button } from '@supabase/ui' -import { useState } from 'react' -import { Partner, PartnerContact } from '~/types/partners' +import { Button, Form, Input, InputNumber, Select } from '@supabase/ui' +import { FormEventHandler, useState } from 'react' +import { PartnerContact } from '~/types/partners' + +const INITIAL_VALUES = { + type: 'expert', + first: '', + last: '', + company: '', + size: '', + title: '', + email: '', + phone: '', + country: 'Singapore', + details: '', +} + +const validate = (values: any) => { + const errors: any = {} + + if (!values.first) { + errors.first = 'Required' + } + + if (!values.last) { + errors.last = 'Required' + } + + if (!values.email) { + errors.email = 'Required' + } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) { + errors.email = 'Invalid email address' + } + + return errors +} export default function BecomeAPartner({ supabase }: { supabase: SupabaseClient }) { const [formSubmitted, setFormSubmitted] = useState(false) - const handleFormSubmit: React.FormEventHandler = async (e) => { - e.preventDefault() - var formData = new FormData(document.getElementsByTagName('form')[0]) + const handleFormSubmit = async (values: any) => { const { error } = await supabase.from('partner_contacts').insert( [ { - type: formData.get('type') as 'expert' | 'technology', - first: formData.get('first') as string, - last: formData.get('last') as string, - company: formData.get('company') as string, - size: Number(formData.get('size')), - title: formData.get('title') as string, - email: formData.get('email') as string, - website: (formData.get('email') as string).split('@')[1], - phone: formData.get('phone') as string, - country: formData.get('country') as string, - details: formData.get('details') as string, + type: values.type, + first: values.first, + last: values.last, + company: values.company, + size: Number(values.size), + title: values.title, + email: values.email, + website: values.email.split('@')[1], + phone: values.phone, + country: values.country, + details: values.details, }, ], { returning: 'minimal' } ) - console.log(error) + + // TODO: handle error + console.log('error:', error) + setFormSubmitted(true) } return ( -
- Become a Partner -
- -
- - -
-
- - -
-
- - -
-
- - -
- -
- -
- - {formSubmitted && ( - Thanks, we'll reach out to you shortly 👁⚡️👁 - )} +
+

Become a Partner

+ +
+ {({ isSubmitting }: any) => ( +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ )} +
+ + {formSubmitted &&

Thanks, we'll reach out to you shortly 👁⚡️👁

}
) } diff --git a/www/components/Partners/TileGrid.tsx b/www/components/Partners/TileGrid.tsx index fb59e3b7244..d85e358fcf2 100644 --- a/www/components/Partners/TileGrid.tsx +++ b/www/components/Partners/TileGrid.tsx @@ -1,4 +1,3 @@ -import { Card, Space, Typography } from '@supabase/ui' import Link from 'next/link' import { Partner } from '~/types/partners' @@ -11,29 +10,23 @@ export default function TileGrid({ <> {Object.keys(partnersByCategory).map((category) => (
- {category} +

{category}

{partnersByCategory[category].map((p) => ( - - - -
-
- - {p.category} - - {p.title} -
- {p.title} -
- {p.description} - - + +
+
+ {p.category} +

{p.title}

+
+ {p.title} +
+ {p.description} ))} diff --git a/www/pages/partners/[slug].tsx b/www/pages/partners/[slug].tsx index 01cfa516dc7..68dca6ed3ad 100644 --- a/www/pages/partners/[slug].tsx +++ b/www/pages/partners/[slug].tsx @@ -1,5 +1,5 @@ import { createClient } from '@supabase/supabase-js' -import { IconChevronLeft, IconExternalLink, Typography } from '@supabase/ui' +import { IconChevronLeft, IconExternalLink } from '@supabase/ui' import { marked } from 'marked' import { GetStaticPaths, GetStaticProps } from 'next' import { NextSeo } from 'next-seo' @@ -34,39 +34,40 @@ function Partner({ partner }: { partner: Partner }) { ], }} /> + -
+
{/* Back button */} - - - - - Back - - - + + + + Back + +
{partner.title} - {partner.title} +

+ {partner.title} +

- Overview - + -
+
- Details - + -
+
- Developer - {partner.developer} + Developer + {partner.developer}
- Documentation + Documentation Read diff --git a/www/pages/partners/experts/index.tsx b/www/pages/partners/experts/index.tsx index 6f313e05c0e..81aa2dd5d1a 100644 --- a/www/pages/partners/experts/index.tsx +++ b/www/pages/partners/experts/index.tsx @@ -1,5 +1,5 @@ import { createClient } from '@supabase/supabase-js' -import { IconArrowRight, IconSearch, Input, Select, Typography } from '@supabase/ui' +import { IconArrowRight, IconSearch, Input, Select } from '@supabase/ui' import { NextSeo } from 'next-seo' import Link from 'next/link' import { useRouter } from 'next/router' @@ -66,38 +66,30 @@ function ExpertPartnersPage(props: Props) { {/* Horizontal link menu */} + {/* Title */} - Find an Expert +

Find an Expert

+ {/* Search Bar */}
Become a partner
+ {/* Partner Tiles */}
{partners.length ? ( ) : ( - No Experts Found +

No Partners Found

)}
+ {/* Become a partner form */} diff --git a/www/pages/partners/integrations/index.tsx b/www/pages/partners/integrations/index.tsx index 5796c094ff7..d6fe3e24dcc 100644 --- a/www/pages/partners/integrations/index.tsx +++ b/www/pages/partners/integrations/index.tsx @@ -1,5 +1,5 @@ import { createClient } from '@supabase/supabase-js' -import { IconArrowRight, IconLoader, IconSearch, Input, Select, Typography } from '@supabase/ui' +import { IconArrowRight, IconLoader, IconSearch, Input, Select } from '@supabase/ui' import { NextSeo } from 'next-seo' import Link from 'next/link' import { useRouter } from 'next/router' @@ -117,38 +117,28 @@ function IntegrationPartnersPage(props: Props) { {/* Horizontal link menu */} + {/* Title */} - Find an Integration +

Find an Integration

+ {/* Search Bar */}
Become a partner
+ {/* Partner Tiles */}
{partners.length ? ( ) : ( - No Partners Found +

No Partners Found

)}
+ {/* Become a partner form */}