From b43dfa4bb9ff61343bc141559f13f1df725191ff Mon Sep 17 00:00:00 2001 From: jefn76 Date: Sun, 9 Oct 2022 18:33:39 +0800 Subject: [PATCH 01/13] SSG-Test --- .../EventPageComponents/BottomBar.tsx | 12 +- .../EventPageComponents/EventSection.tsx | 8 +- apps/happin-web/pages/post/[event_id].tsx | 357 ++++++++++++++---- apps/happin-web/styles/pages.scss | 2 +- 4 files changed, 288 insertions(+), 91 deletions(-) diff --git a/apps/happin-web/components/page_components/EventPageComponents/BottomBar.tsx b/apps/happin-web/components/page_components/EventPageComponents/BottomBar.tsx index 3867bed..0d932e1 100644 --- a/apps/happin-web/components/page_components/EventPageComponents/BottomBar.tsx +++ b/apps/happin-web/components/page_components/EventPageComponents/BottomBar.tsx @@ -76,13 +76,13 @@ const BottomBar = ({ return ( <>
-
+
- {/*
*/} - {/* */} - {/*
*/} - {/*
*/} +
+ +
+
{/*
*/} {/*
diff --git a/apps/happin-web/pages/post/[event_id].tsx b/apps/happin-web/pages/post/[event_id].tsx index 992d43e..3a6d530 100644 --- a/apps/happin-web/pages/post/[event_id].tsx +++ b/apps/happin-web/pages/post/[event_id].tsx @@ -1,9 +1,9 @@ import React, { useEffect, useState } from 'react'; import ReactDom from 'react-dom'; -import { GetServerSidePropsResult } from 'next'; +import { GetStaticPaths } from 'next'; import Head from 'next/head'; import { useRouter } from 'next/router'; -import { Box, Button } from '@chakra-ui/react'; +import { Box, Button, Spinner } from '@chakra-ui/react'; import classnames from 'classnames'; import { ArrowDownIcon } from '@chakra-ui/icons'; import { PRODUCTION_URL } from 'utils/constants'; @@ -18,23 +18,40 @@ import ChatWithFans from '@components/page_components/EventPageComponents/ChatWi import Modal from '@components/reusable/Modal'; import { getEventDetail, getGroupEvents } from 'lib/api'; import { EventData } from 'lib/model/event'; - +import { Transition } from '@headlessui/react'; // third party event website that set x-frame-option to origin, can't open in iframe -const forbidDomain = [ - 'veeps.com' -] +const forbidDomain = ['veeps.com']; const ThirdPartyIframe = (props: any) => { return ( -
- { props.closeIframe() }}> - + - ) -} + ); +}; -const Post = (props: EventData) => { +const Post = (props: EventData & { eventId: string }) => { const router = useRouter(); const [hideSigninBar, setHideSigninBar] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false); @@ -43,13 +60,22 @@ const Post = (props: EventData) => { const [isChatModalOpen, setIsChatModalOpen] = useState(false); const [preventScrolling, setPreventScrolling] = useState(false); const { setEventDeepLink, user } = useUserState(); - const [tokenExist, setTokenExist] = useState(true) + const [tokenExist, setTokenExist] = useState(true); const [isOpen, setIsOpen] = useState(false); const eventData = props; const groupEvents = props.groupEvents; - const [queryParams, setQueryParams] = useState<{ code: string, affiliate: string, organizer_token: string }>({ affiliate: '', code: '', organizer_token: '' }); - let eventLocation = 'Stream Via Happin' - let eventDescription = ' - You can watch livestream on https://livestream.happin.app or download Happin App' + const [queryParams, setQueryParams] = useState<{ + code: string; + affiliate: string; + organizer_token: string; + }>({ + affiliate: '', + code: '', + organizer_token: '', + }); + let eventLocation = 'Stream Via Happin'; + let eventDescription = + ' - You can watch livestream on https://livestream.happin.app or download Happin App'; const [openIframe, setOpenIframe] = useState(false); const [thirdPartyUrl, setThirdPartyUrl] = useState(); @@ -57,36 +83,60 @@ const Post = (props: EventData) => { const [iframePortal, setIframePortal] = useState(<>); useEffect(() => { - setIframePortal(ReactDom.createPortal(, document.querySelector('#third_party_event_iframe') as Element)) - }, [openIframe, thirdPartyUrl]) + console.log(111); + setIframePortal( + ReactDom.createPortal( + , + document.querySelector('#third_party_event_iframe') as Element, + ), + ); + }, [openIframe, thirdPartyUrl]); + + useEffect(() => { + console.log(router.isFallback); + }, [router.isFallback]); const closeIframe = () => { setOpenIframe(false); setPreventScrolling(false); - } + }; useEffect(() => { + console.log(props); if (eventData.event.sourceUrl) { setThirdPartyUrl(eventData.event.sourceUrl); if (eventData.event.sourceUrlAllowIframe) { - setCanUseIframe(true) + setCanUseIframe(true); } else { - setCanUseIframe(false) + setCanUseIframe(false); } } - }, []) + }, []); useEffect(() => { if (router.query.affiliate) { - setQueryParams((x) => { x.affiliate = router.query.affiliate as string; return { ...x } }) + setQueryParams(x => { + x.affiliate = router.query.affiliate as string; + return { ...x }; + }); } if (router.query.sharecode) { - setQueryParams((x) => { x.code = router.query.sharecode as string; return { ...x } }) + setQueryParams(x => { + x.code = router.query.sharecode as string; + return { ...x }; + }); } if (router.query.token) { - setQueryParams((x) => { x.organizer_token = router.query.token as string; return { ...x } }) + setQueryParams(x => { + x.organizer_token = router.query.token as string; + return { ...x }; + }); } - }, []) + }, []); useEffect(() => { const hideSigninBar = localStorage.getItem('hide_signin_bar'); @@ -94,26 +144,34 @@ const Post = (props: EventData) => { if (eventData) { setEventDeepLink(eventData.event.deepLink); } - }, []) + }, []); const firstTimeVisitHandler = () => { localStorage.setItem('hide_signin_bar', '1'); setHideSigninBar(s => !s); - } - + }; (() => { if (eventData) { - if (eventData.event.acInfo.location !== 'happin.app' && eventData.event.acInfo.eventType !== 'hybrid') { - eventLocation = eventData.event.acInfo.venueName || eventData.event.acInfo.location; - eventDescription = ` - You can attend event @ ${eventData.event.acInfo.venueName || eventData.event.acInfo.location}`; + if ( + eventData.event.acInfo.location !== 'happin.app' && + eventData.event.acInfo.eventType !== 'hybrid' + ) { + eventLocation = + eventData.event.acInfo.venueName || eventData.event.acInfo.location; + eventDescription = ` - You can attend event @ ${ + eventData.event.acInfo.venueName || eventData.event.acInfo.location + }`; } else if (eventData.event.acInfo.eventType === 'hybrid') { - eventLocation = eventData.event.acInfo.venueName || eventData.event.acInfo.location + ' and Stream Via Happin'; - eventDescription = ` - You can attend event @ ${eventData.event.acInfo.venueName || eventData.event.acInfo.location} and watch livestream on https://happin.app or download Happin App` + eventLocation = + eventData.event.acInfo.venueName || + eventData.event.acInfo.location + ' and Stream Via Happin'; + eventDescription = ` - You can attend event @ ${ + eventData.event.acInfo.venueName || eventData.event.acInfo.location + } and watch livestream on https://happin.app or download Happin App`; } } - })() - + })(); const seoProps = { description: eventData?.event?.title + eventDescription, @@ -121,40 +179,83 @@ const Post = (props: EventData) => { title: eventData?.event?.title + ' @ ' + eventLocation, ogImage: eventData?.event?.socialImg || eventData?.event?.cover, ogUrl: `${PRODUCTION_URL}${router.asPath}`, - twitterImage: eventData?.event?.socialImg || eventData?.event?.cover - } + twitterImage: eventData?.event?.socialImg || eventData?.event?.cover, + }; useEffect(() => { - if (localStorage.getItem('happin_web_jwt') && localStorage.getItem('happin_refresh_token')) { - setTokenExist(true) - } else setTokenExist(false) + if ( + localStorage.getItem('happin_web_jwt') && + localStorage.getItem('happin_refresh_token') + ) { + setTokenExist(true); + } else setTokenExist(false); if (user) { - setTokenExist(true) + setTokenExist(true); } - }, [user]) + }, [user]); return ( <> - + {seoProps.title} - + - + - - - - + + + + {iframePortal}
+ + + {/* Top Popups for First-Time Visitors */} - {(!hideSigninBar && !tokenExist) && ( + {!hideSigninBar && !tokenExist && ( )} @@ -165,7 +266,11 @@ const Post = (props: EventData) => { isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} > - + )} {/* redeem modal */} @@ -176,7 +281,11 @@ const Post = (props: EventData) => { setIsModalOpen={setIsRedeemModalOpen} >
- +
)} @@ -188,16 +297,20 @@ const Post = (props: EventData) => { setIsModalOpen={setRedeemComplete} >
-

Check your tickets by clicking the button below

+

+ Check your tickets by clicking the button below +

@@ -217,7 +330,12 @@ const Post = (props: EventData) => {
)} -
+
{/* { w="100%" h="100%" position="absolute" - style={{ filter: "blur(40px)", transform: "scale(1.5)" }} + style={{ filter: 'blur(40px)', transform: 'scale(1.5)' }} backgroundImage={`url('${eventData?.event?.cover}')`} backgroundPosition="center" backgroundRepeat="no-repeat" @@ -245,17 +363,38 @@ const Post = (props: EventData) => {
{/* Event Texts */} -
+
- +
- +
- +

- Meet,
Chat,
+ Meet,
+ Chat,
Experience

@@ -263,8 +402,17 @@ const Post = (props: EventData) => {
- - App Store + + App Store
@@ -272,7 +420,11 @@ const Post = (props: EventData) => {
- Google Play + Google Play
@@ -282,32 +434,77 @@ const Post = (props: EventData) => { }; export default Post; -// fetch data on server upon every request. not using static page pre render -export async function getServerSideProps(context: { params: { event_id: string } }): Promise> { +export const getStaticPaths: GetStaticPaths = async () => { + // const data = await getData(); + // const pathsWithParams = data.stars.map((star: starInterface) => ({ params: { something: star.id }})) + + return { + paths: [ + { + params: { + event_id: 'yorkfest-virtual-concert-61399548c281030008b712dd', + }, + }, + ], + fallback: 'blocking', + }; +}; + +export async function getStaticProps({ + params, +}: { + params: { event_id: string }; +}) { try { - const titleWithACID = context.params.event_id + const titleWithACID = params.event_id; const tokens = titleWithACID.split('-'); const acid = tokens[tokens.length - 1]; - const res = await getEventDetail(acid, 'both') - const props = res.data + const res = await getEventDetail(acid, 'both'); + const props = res.data; if (res.data?.event?.groupAcid) { - props.groupEvents = await getGroupEvents(res.data.event.groupAcid || ""); - } - if (!res.data) { - throw new Error('Event not found'); + props.groupEvents = await getGroupEvents(res.data.event.groupAcid || ''); } return { - props, - } + props: { + ...props, + eventId: acid, + }, + }; } catch (err) { return { redirect: { permanent: false, - destination: "/404", + destination: '/404', }, props: {}, }; } } - +// fetch data on server upon every request. not using static page pre render +// export async function getServerSideProps(context: { params: { event_id: string } }): Promise> { +// try { +// const titleWithACID = context.params.event_id +// const tokens = titleWithACID.split('-'); +// const acid = tokens[tokens.length - 1]; +// const res = await getEventDetail(acid, 'both') +// const props = res.data +// if (res.data?.event?.groupAcid) { +// props.groupEvents = await getGroupEvents(res.data.event.groupAcid || ""); +// } +// if (!res.data) { +// throw new Error('Event not found'); +// } +// return { +// props, +// } +// } catch (err) { +// return { +// redirect: { +// permanent: false, +// destination: "/404", +// }, +// props: {}, +// }; +// } +// } diff --git a/apps/happin-web/styles/pages.scss b/apps/happin-web/styles/pages.scss index 678f722..de832fa 100644 --- a/apps/happin-web/styles/pages.scss +++ b/apps/happin-web/styles/pages.scss @@ -84,7 +84,7 @@ @apply relative flex-1 h-0 text-gray-50 z-0; } .event-details__container { - @apply w-full px-4 sm:px-8 md:px-10 lg:px-14 mx-auto lg:m-0; + @apply w-full px-4 sm:px-8 md:px-10 lg:px-14 mx-auto lg:m-0 lg:min-h-full; //padding-right: 4.5rem; //padding-left: 3.5rem; @media (min-width: 640px) { From d89e0aefb76eddd7fdb37ce73a4f2a7194d99800 Mon Sep 17 00:00:00 2001 From: jefn76 Date: Wed, 12 Oct 2022 16:05:49 +0800 Subject: [PATCH 02/13] update next.js to 12 --- .../EventPageComponents/EventDates.tsx | 8 +- .../EventPageComponents/EventSEO.tsx | 91 +++++++++ .../EventPageComponents/EventSection.tsx | 139 +++++--------- apps/happin-web/next-env.d.ts | 4 +- apps/happin-web/next.config.js | 3 +- apps/happin-web/package.json | 2 +- apps/happin-web/pages/post/[event_id].tsx | 174 ++---------------- yarn.lock | 137 ++++++++++++++ 8 files changed, 304 insertions(+), 254 deletions(-) create mode 100644 apps/happin-web/components/page_components/EventPageComponents/EventSEO.tsx diff --git a/apps/happin-web/components/page_components/EventPageComponents/EventDates.tsx b/apps/happin-web/components/page_components/EventPageComponents/EventDates.tsx index df580d3..3b0047e 100644 --- a/apps/happin-web/components/page_components/EventPageComponents/EventDates.tsx +++ b/apps/happin-web/components/page_components/EventPageComponents/EventDates.tsx @@ -2,15 +2,13 @@ import GroupEventCard from "./GroupEventCard"; import { GroupEvent } from "lib/model/groupEvent"; import { EventData } from "lib/model/event"; type EventDatesProp = { - groupEvents?: GroupEvent[]; setIsModalOpen: (arg0: boolean) => void eventData: EventData } -const EventDates = ({ groupEvents = [], setIsModalOpen, eventData } : EventDatesProp) => { - - groupEvents = groupEvents.filter(e => e._id !== eventData.event.eid) - +const EventDates = ({ setIsModalOpen, eventData } : EventDatesProp) => { + const groupEvents = eventData.groupEvents?.filter(e => e._id !== eventData.event.eid) || []; + console.log(groupEvents); return ( <> {/* List and Calendar Toggle */} diff --git a/apps/happin-web/components/page_components/EventPageComponents/EventSEO.tsx b/apps/happin-web/components/page_components/EventPageComponents/EventSEO.tsx new file mode 100644 index 0000000..4e0eb4f --- /dev/null +++ b/apps/happin-web/components/page_components/EventPageComponents/EventSEO.tsx @@ -0,0 +1,91 @@ +import React, { useEffect, useState } from 'react'; +import Head from 'next/head'; +import { EventData } from 'lib/model/event'; +import { PRODUCTION_URL } from 'utils/constants'; +import { useRouter } from 'next/router'; + +type EventSEOProps = { + eventData: EventData +} +const EventSEO = ({ eventData }: EventSEOProps) => { + const router = useRouter(); + const [location, setLocation] = useState('Stream Via Happin'); + const [description, setDescription] = useState( + ' - You can watch livestream on https://livestream.happin.app or download Happin App', + ); + const [seo, setSeo] = useState({ + description: '', + keywords: '', + title: '', + ogImage: '', + ogUrl: '', + twitterImage: '', + }); + + useEffect(() => { + const acInfo = eventData.event.acInfo; + if (acInfo.location !== 'happin.app' && acInfo.eventType !== 'hybrid') { + setLocation(acInfo.venueName || acInfo.location); + setDescription( + ` - You can attend event @ ${acInfo.venueName || acInfo.location}`, + ); + } + if (acInfo.eventType === 'hybrid') { + setLocation( + acInfo.venueName || acInfo.location + ' and Stream Via Happin', + ); + setDescription( + ` - You can attend event @ ${ + acInfo.venueName || acInfo.location + } and watch livestream on https://happin.app or download Happin App`, + ); + } + }, [eventData.event.acInfo]); + + useEffect(() => { + setSeo({ + description: eventData.event.title + description, + keywords: `${eventData.event?.tags.toString()}, Happin livestream`, + title: eventData.event.title + ' @ ' + location, + ogImage: eventData.event?.socialImg || eventData.event?.cover, + ogUrl: `${PRODUCTION_URL}${router.asPath}`, + twitterImage: eventData.event?.socialImg || eventData.event?.cover, + }); + }, [location, description, eventData, router.asPath]); + + return ( + + + + {seo.title} + + + + + + + + + + + + ); +}; + +export default EventSEO; diff --git a/apps/happin-web/components/page_components/EventPageComponents/EventSection.tsx b/apps/happin-web/components/page_components/EventPageComponents/EventSection.tsx index c15eae1..f9b4a95 100644 --- a/apps/happin-web/components/page_components/EventPageComponents/EventSection.tsx +++ b/apps/happin-web/components/page_components/EventPageComponents/EventSection.tsx @@ -1,81 +1,83 @@ import React from 'react'; import EventTitle from './EventTitle'; import EventDescription from './EventDescription'; -// import EventLineUp from "./EventLineUp"; import EventHost from './EventHost'; import { EventData } from 'lib/model/event'; import EventAttendees from './EventAttendees'; -import EventGallery from './EventGallery'; -import EventInterested from './EventInterested'; +// import EventGallery from './EventGallery'; +// import EventInterested from './EventInterested'; const EventSection = ({ setIsModalOpen, eventData, - groupEvents, setIsRedeemModalOpen, setOpenIframe, canUseIframe, - setPreventScrolling + setPreventScrolling, }: { - setIsModalOpen: (arg: boolean) => void, - eventData: EventData, groupEvents: any, - setIsRedeemModalOpen: (arg: boolean) => void, - setPreventScrolling: (arg: any) => void, - setOpenIframe: (arg: any) => void, - canUseIframe: boolean, + setIsModalOpen: (arg: boolean) => void; + eventData: EventData; + setIsRedeemModalOpen: (arg: boolean) => void; + setPreventScrolling: (arg: any) => void; + setOpenIframe: (arg: any) => void; + canUseIframe: boolean; }) => { //const [firstActive, setFirstActive] = useState(true) //const [tabCur, setTabCur] = useState(0) // const [isActive, setActive] = useState(0); - const galleryOriginalData = [ + /*const galleryOriginalData = [ { id: '0', - src: 'https://images.unsplash.com/photo-1645828694012-307875ab3761?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=300&q=80' + src: 'https://images.unsplash.com/photo-1645828694012-307875ab3761?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=300&q=80', }, { id: '1', - src: 'https://images.unsplash.com/photo-1627483297886-49710ae1fc22?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=300&q=80' + src: 'https://images.unsplash.com/photo-1627483297886-49710ae1fc22?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=300&q=80', }, { id: '2', - src: 'https://images.unsplash.com/photo-1645839449196-62bde406052e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=300&q=80' + src: 'https://images.unsplash.com/photo-1645839449196-62bde406052e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=300&q=80', }, { id: '3', - src: 'https://images.unsplash.com/photo-1645771845014-7077d5d0f058?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=300&q=80' + src: 'https://images.unsplash.com/photo-1645771845014-7077d5d0f058?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=300&q=80', }, { id: '4', - src: 'https://images.unsplash.com/photo-1640622659787-d15655c3a2ce?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=300&q=80' + src: 'https://images.unsplash.com/photo-1640622659787-d15655c3a2ce?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=300&q=80', }, { id: '5', - src: 'https://images.unsplash.com/photo-1645742175891-9207e6a52e6f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=300&q=80' + src: 'https://images.unsplash.com/photo-1645742175891-9207e6a52e6f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=300&q=80', }, { id: '6', - src: 'https://images.unsplash.com/photo-1645810809381-97f6fd2f7d10?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=300&q=80' + src: 'https://images.unsplash.com/photo-1645810809381-97f6fd2f7d10?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=300&q=80', }, { id: '7', - src: 'https://images.unsplash.com/photo-1645542444755-bc554393084a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=300&q=80' - } + src: 'https://images.unsplash.com/photo-1645542444755-bc554393084a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=300&q=80', + }, ]; const interestedList = [ { _id: '01', link: '/', title: 'Willson Fisher: Back to Abnormal World Standup', - cover: 'https://images.unsplash.com/photo-1645817745517-163a655a0606?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80', - avatar: 'https://p6.toutiaoimg.com/origin/tos-cn-i-qvj2lq49k0/54043582bdb04811ae3e4877ab079157?from=pc', + cover: + 'https://images.unsplash.com/photo-1645817745517-163a655a0606?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80', + avatar: + 'https://p6.toutiaoimg.com/origin/tos-cn-i-qvj2lq49k0/54043582bdb04811ae3e4877ab079157?from=pc', username: 'JeesieJe123', }, { _id: '02', link: '/', title: 'exposing my family drama ⛄', - cover: 'https://images.unsplash.com/photo-1645737522838-02ff9b9b39be?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80', - avatar: 'https://p19-sign.tiktokcdn-us.com/tos-useast5-avt-0068-tx/2716efc7e6cb8fa3b28ea4660009aaaa~c5_100x100.webp?x-expires=1640588400&x-signature=KgeyUInhRAcg2BxeLwAjMi2u6oI%3D', + cover: + 'https://images.unsplash.com/photo-1645737522838-02ff9b9b39be?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80', + avatar: + 'https://p19-sign.tiktokcdn-us.com/tos-useast5-avt-0068-tx/2716efc7e6cb8fa3b28ea4660009aaaa~c5_100x100.webp?x-expires=1640588400&x-signature=KgeyUInhRAcg2BxeLwAjMi2u6oI%3D', username: 'Shahad', members: 134, }, @@ -83,16 +85,20 @@ const EventSection = ({ _id: '03', link: '/', title: 'Merry Christmas guys!', - cover: 'https://images.unsplash.com/photo-1645815431270-7a0f9e676ae2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80', - avatar: 'https://p6.toutiaoimg.com/origin/tos-cn-i-qvj2lq49k0/54043582bdb04811ae3e4877ab079157?from=pc', - username: 'JeesieJe123' + cover: + 'https://images.unsplash.com/photo-1645815431270-7a0f9e676ae2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80', + avatar: + 'https://p6.toutiaoimg.com/origin/tos-cn-i-qvj2lq49k0/54043582bdb04811ae3e4877ab079157?from=pc', + username: 'JeesieJe123', }, { _id: '04', link: '/', title: 'exposing my family drama ⛄', - cover: 'https://images.unsplash.com/photo-1555918001-e20d10c2bc1c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80', - avatar: 'https://p19-sign.tiktokcdn-us.com/tos-useast5-avt-0068-tx/2716efc7e6cb8fa3b28ea4660009aaaa~c5_100x100.webp?x-expires=1640588400&x-signature=KgeyUInhRAcg2BxeLwAjMi2u6oI%3D', + cover: + 'https://images.unsplash.com/photo-1555918001-e20d10c2bc1c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80', + avatar: + 'https://p19-sign.tiktokcdn-us.com/tos-useast5-avt-0068-tx/2716efc7e6cb8fa3b28ea4660009aaaa~c5_100x100.webp?x-expires=1640588400&x-signature=KgeyUInhRAcg2BxeLwAjMi2u6oI%3D', username: 'Shahad', members: 34, }, @@ -100,12 +106,14 @@ const EventSection = ({ _id: '05', link: '/', title: 'exposing my family drama ⛄', - cover: 'https://images.unsplash.com/photo-1645810798586-08e892108d67?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80', - avatar: 'https://p19-sign.tiktokcdn-us.com/tos-useast5-avt-0068-tx/2716efc7e6cb8fa3b28ea4660009aaaa~c5_100x100.webp?x-expires=1640588400&x-signature=KgeyUInhRAcg2BxeLwAjMi2u6oI%3D', + cover: + 'https://images.unsplash.com/photo-1645810798586-08e892108d67?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80', + avatar: + 'https://p19-sign.tiktokcdn-us.com/tos-useast5-avt-0068-tx/2716efc7e6cb8fa3b28ea4660009aaaa~c5_100x100.webp?x-expires=1640588400&x-signature=KgeyUInhRAcg2BxeLwAjMi2u6oI%3D', username: 'Shahad', - members: 26 + members: 26, }, - ]; + ];*/ return ( <> + setIsRedeemModalOpen={setIsRedeemModalOpen} + />
*/}
- {/* About and Agenda links */} - {/*
-
- {setActive(0)}} - to="about" - //spy={true} - smooth={true} - offset={-50} - duration={500} - > - About - - {setActive(1)}} - activeClass="active" - containerId="scroll-body" - to="agenda" - //spy={true} - smooth={true} - offset={-50} - duration={500} - > - Agenda - -
-
*/} - {/*
-
{ setTabCur(0) }}> - About -
-
{ setTabCur(1) }}> - Agenda -
-
*/} - {/*{tabCur === 0 &&*/} - {/* */}
- {/*
*/} - {/*
+ {/*
-
*/} - {/**/} - {/*}*/} - - {/*{tabCur === 1 &&*/} - {/* - - - */} - {/*}*/} +
*/} ); }; diff --git a/apps/happin-web/next-env.d.ts b/apps/happin-web/next-env.d.ts index c6643fd..4f11a03 100644 --- a/apps/happin-web/next-env.d.ts +++ b/apps/happin-web/next-env.d.ts @@ -1,3 +1,5 @@ /// -/// /// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/apps/happin-web/next.config.js b/apps/happin-web/next.config.js index 8c61311..ed8e3d3 100644 --- a/apps/happin-web/next.config.js +++ b/apps/happin-web/next.config.js @@ -1,4 +1,3 @@ module.exports = { - target: 'serverless', - webpack5: true, + // target: 'serverless', } diff --git a/apps/happin-web/package.json b/apps/happin-web/package.json index 2438a93..14c2e7b 100644 --- a/apps/happin-web/package.json +++ b/apps/happin-web/package.json @@ -28,7 +28,7 @@ "lodash": "^4.17.21", "moment": "^2.29.1", "moment-timezone": "^0.5.33", - "next": "11.0.1", + "next": "12", "randomcolor": "^0.6.2", "rc-upload": "^4.3.3", "react": "17.0.2", diff --git a/apps/happin-web/pages/post/[event_id].tsx b/apps/happin-web/pages/post/[event_id].tsx index 3a6d530..2e71189 100644 --- a/apps/happin-web/pages/post/[event_id].tsx +++ b/apps/happin-web/pages/post/[event_id].tsx @@ -1,12 +1,10 @@ import React, { useEffect, useState } from 'react'; import ReactDom from 'react-dom'; import { GetStaticPaths } from 'next'; -import Head from 'next/head'; import { useRouter } from 'next/router'; -import { Box, Button, Spinner } from '@chakra-ui/react'; +import { Box, Button } from '@chakra-ui/react'; import classnames from 'classnames'; import { ArrowDownIcon } from '@chakra-ui/icons'; -import { PRODUCTION_URL } from 'utils/constants'; import { useUserState } from 'contexts/user-state'; import SignInBar from '@components/SignInBar'; import PopUpModal from '@components/reusable/PopUpModal'; @@ -18,7 +16,7 @@ import ChatWithFans from '@components/page_components/EventPageComponents/ChatWi import Modal from '@components/reusable/Modal'; import { getEventDetail, getGroupEvents } from 'lib/api'; import { EventData } from 'lib/model/event'; -import { Transition } from '@headlessui/react'; +import EventSEO from '@components/page_components/EventPageComponents/EventSEO'; // third party event website that set x-frame-option to origin, can't open in iframe const forbidDomain = ['veeps.com']; @@ -51,7 +49,7 @@ const ThirdPartyIframe = (props: any) => { ); }; -const Post = (props: EventData & { eventId: string }) => { +const Post = ({ eventData }: { eventData: EventData }) => { const router = useRouter(); const [hideSigninBar, setHideSigninBar] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false); @@ -62,8 +60,6 @@ const Post = (props: EventData & { eventId: string }) => { const { setEventDeepLink, user } = useUserState(); const [tokenExist, setTokenExist] = useState(true); const [isOpen, setIsOpen] = useState(false); - const eventData = props; - const groupEvents = props.groupEvents; const [queryParams, setQueryParams] = useState<{ code: string; affiliate: string; @@ -73,9 +69,6 @@ const Post = (props: EventData & { eventId: string }) => { code: '', organizer_token: '', }); - let eventLocation = 'Stream Via Happin'; - let eventDescription = - ' - You can watch livestream on https://livestream.happin.app or download Happin App'; const [openIframe, setOpenIframe] = useState(false); const [thirdPartyUrl, setThirdPartyUrl] = useState(); @@ -83,7 +76,6 @@ const Post = (props: EventData & { eventId: string }) => { const [iframePortal, setIframePortal] = useState(<>); useEffect(() => { - console.log(111); setIframePortal( ReactDom.createPortal( { }, [openIframe, thirdPartyUrl]); useEffect(() => { - console.log(router.isFallback); + if (!router.isFallback) { + if (eventData.event.sourceUrl) { + setThirdPartyUrl(eventData.event.sourceUrl); + if (eventData.event.sourceUrlAllowIframe) { + setCanUseIframe(true); + } else { + setCanUseIframe(false); + } + } + setEventDeepLink(eventData?.event.deepLink); + } }, [router.isFallback]); const closeIframe = () => { @@ -105,18 +107,6 @@ const Post = (props: EventData & { eventId: string }) => { setPreventScrolling(false); }; - useEffect(() => { - console.log(props); - if (eventData.event.sourceUrl) { - setThirdPartyUrl(eventData.event.sourceUrl); - if (eventData.event.sourceUrlAllowIframe) { - setCanUseIframe(true); - } else { - setCanUseIframe(false); - } - } - }, []); - useEffect(() => { if (router.query.affiliate) { setQueryParams(x => { @@ -141,9 +131,6 @@ const Post = (props: EventData & { eventId: string }) => { useEffect(() => { const hideSigninBar = localStorage.getItem('hide_signin_bar'); setHideSigninBar(!!hideSigninBar); - if (eventData) { - setEventDeepLink(eventData.event.deepLink); - } }, []); const firstTimeVisitHandler = () => { @@ -151,37 +138,6 @@ const Post = (props: EventData & { eventId: string }) => { setHideSigninBar(s => !s); }; - (() => { - if (eventData) { - if ( - eventData.event.acInfo.location !== 'happin.app' && - eventData.event.acInfo.eventType !== 'hybrid' - ) { - eventLocation = - eventData.event.acInfo.venueName || eventData.event.acInfo.location; - eventDescription = ` - You can attend event @ ${ - eventData.event.acInfo.venueName || eventData.event.acInfo.location - }`; - } else if (eventData.event.acInfo.eventType === 'hybrid') { - eventLocation = - eventData.event.acInfo.venueName || - eventData.event.acInfo.location + ' and Stream Via Happin'; - eventDescription = ` - You can attend event @ ${ - eventData.event.acInfo.venueName || eventData.event.acInfo.location - } and watch livestream on https://happin.app or download Happin App`; - } - } - })(); - - const seoProps = { - description: eventData?.event?.title + eventDescription, - keywords: `${eventData?.event?.tags.toString()}, Happin livestream`, - title: eventData?.event?.title + ' @ ' + eventLocation, - ogImage: eventData?.event?.socialImg || eventData?.event?.cover, - ogUrl: `${PRODUCTION_URL}${router.asPath}`, - twitterImage: eventData?.event?.socialImg || eventData?.event?.cover, - }; - useEffect(() => { if ( localStorage.getItem('happin_web_jwt') && @@ -197,63 +153,9 @@ const Post = (props: EventData & { eventId: string }) => { return ( <> - - - - {seoProps.title} - - - - - - - - - - - + {iframePortal}
- - - {/* Top Popups for First-Time Visitors */} {!hideSigninBar && !tokenExist && ( @@ -266,11 +168,7 @@ const Post = (props: EventData & { eventId: string }) => { isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} > - + )} {/* redeem modal */} @@ -372,7 +270,6 @@ const Post = (props: EventData & { eventId: string }) => { setIsRedeemModalOpen={setIsRedeemModalOpen} setIsModalOpen={setIsModalOpen} eventData={eventData} - groupEvents={groupEvents} />
> { -// try { -// const titleWithACID = context.params.event_id -// const tokens = titleWithACID.split('-'); -// const acid = tokens[tokens.length - 1]; -// const res = await getEventDetail(acid, 'both') -// const props = res.data -// if (res.data?.event?.groupAcid) { -// props.groupEvents = await getGroupEvents(res.data.event.groupAcid || ""); -// } -// if (!res.data) { -// throw new Error('Event not found'); -// } -// return { -// props, -// } -// } catch (err) { -// return { -// redirect: { -// permanent: false, -// destination: "/404", -// }, -// props: {}, -// }; -// } -// } diff --git a/yarn.lock b/yarn.lock index ec23120..e38115f 100755 --- a/yarn.lock +++ b/yarn.lock @@ -1875,6 +1875,11 @@ resolved "https://registry.npmmirror.com/@next/env/-/env-11.0.1.tgz#6dc96ac76f1663ab747340e907e8933f190cc8fd" integrity sha512-yZfKh2U6R9tEYyNUrs2V3SBvCMufkJ07xMH5uWy8wqcl5gAXoEw6A/1LDqwX3j7pUutF9d1ZxpdGDA3Uag+aQQ== +"@next/env@12.3.1": + version "12.3.1" + resolved "https://registry.npmmirror.com/@next/env/-/env-12.3.1.tgz#18266bd92de3b4aa4037b1927aa59e6f11879260" + integrity sha512-9P9THmRFVKGKt9DYqeC2aKIxm8rlvkK38V1P1sRE7qyoPBIs8l9oo79QoSdPtOWfzkbDAVUqvbQGgTMsb8BtJg== + "@next/eslint-plugin-next@11.0.1": version "11.0.1" resolved "https://registry.npmmirror.com/@next/eslint-plugin-next/-/eslint-plugin-next-11.0.1.tgz#5dd3264a40fadcf28eba00d914d69103422bb7e6" @@ -1934,6 +1939,71 @@ resolved "https://registry.npmmirror.com/@next/react-refresh-utils/-/react-refresh-utils-11.0.1.tgz#a7509f22b6f70c13101a26573afd295295f1c020" integrity sha512-K347DM6Z7gBSE+TfUaTTceWvbj0B6iNAsFZXbFZOlfg3uyz2sbKpzPYYFocCc27yjLaS8OfR8DEdS2mZXi8Saw== +"@next/swc-android-arm-eabi@12.3.1": + version "12.3.1" + resolved "https://registry.npmmirror.com/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.3.1.tgz#b15ce8ad376102a3b8c0f3c017dde050a22bb1a3" + integrity sha512-i+BvKA8tB//srVPPQxIQN5lvfROcfv4OB23/L1nXznP+N/TyKL8lql3l7oo2LNhnH66zWhfoemg3Q4VJZSruzQ== + +"@next/swc-android-arm64@12.3.1": + version "12.3.1" + resolved "https://registry.npmmirror.com/@next/swc-android-arm64/-/swc-android-arm64-12.3.1.tgz#85d205f568a790a137cb3c3f720d961a2436ac9c" + integrity sha512-CmgU2ZNyBP0rkugOOqLnjl3+eRpXBzB/I2sjwcGZ7/Z6RcUJXK5Evz+N0ucOxqE4cZ3gkTeXtSzRrMK2mGYV8Q== + +"@next/swc-darwin-arm64@12.3.1": + version "12.3.1" + resolved "https://registry.npmmirror.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.3.1.tgz#b105457d6760a7916b27e46c97cb1a40547114ae" + integrity sha512-hT/EBGNcu0ITiuWDYU9ur57Oa4LybD5DOQp4f22T6zLfpoBMfBibPtR8XktXmOyFHrL/6FC2p9ojdLZhWhvBHg== + +"@next/swc-darwin-x64@12.3.1": + version "12.3.1" + resolved "https://registry.npmmirror.com/@next/swc-darwin-x64/-/swc-darwin-x64-12.3.1.tgz#6947b39082271378896b095b6696a7791c6e32b1" + integrity sha512-9S6EVueCVCyGf2vuiLiGEHZCJcPAxglyckTZcEwLdJwozLqN0gtS0Eq0bQlGS3dH49Py/rQYpZ3KVWZ9BUf/WA== + +"@next/swc-freebsd-x64@12.3.1": + version "12.3.1" + resolved "https://registry.npmmirror.com/@next/swc-freebsd-x64/-/swc-freebsd-x64-12.3.1.tgz#2b6c36a4d84aae8b0ea0e0da9bafc696ae27085a" + integrity sha512-qcuUQkaBZWqzM0F1N4AkAh88lLzzpfE6ImOcI1P6YeyJSsBmpBIV8o70zV+Wxpc26yV9vpzb+e5gCyxNjKJg5Q== + +"@next/swc-linux-arm-gnueabihf@12.3.1": + version "12.3.1" + resolved "https://registry.npmmirror.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.3.1.tgz#6e421c44285cfedac1f4631d5de330dd60b86298" + integrity sha512-diL9MSYrEI5nY2wc/h/DBewEDUzr/DqBjIgHJ3RUNtETAOB3spMNHvJk2XKUDjnQuluLmFMloet9tpEqU2TT9w== + +"@next/swc-linux-arm64-gnu@12.3.1": + version "12.3.1" + resolved "https://registry.npmmirror.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.3.1.tgz#8863f08a81f422f910af126159d2cbb9552ef717" + integrity sha512-o/xB2nztoaC7jnXU3Q36vGgOolJpsGG8ETNjxM1VAPxRwM7FyGCPHOMk1XavG88QZSQf+1r+POBW0tLxQOJ9DQ== + +"@next/swc-linux-arm64-musl@12.3.1": + version "12.3.1" + resolved "https://registry.npmmirror.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.3.1.tgz#0038f07cf0b259d70ae0c80890d826dfc775d9f3" + integrity sha512-2WEasRxJzgAmP43glFNhADpe8zB7kJofhEAVNbDJZANp+H4+wq+/cW1CdDi8DqjkShPEA6/ejJw+xnEyDID2jg== + +"@next/swc-linux-x64-gnu@12.3.1": + version "12.3.1" + resolved "https://registry.npmmirror.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.3.1.tgz#c66468f5e8181ffb096c537f0dbfb589baa6a9c1" + integrity sha512-JWEaMyvNrXuM3dyy9Pp5cFPuSSvG82+yABqsWugjWlvfmnlnx9HOQZY23bFq3cNghy5V/t0iPb6cffzRWylgsA== + +"@next/swc-linux-x64-musl@12.3.1": + version "12.3.1" + resolved "https://registry.npmmirror.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.3.1.tgz#c6269f3e96ac0395bc722ad97ce410ea5101d305" + integrity sha512-xoEWQQ71waWc4BZcOjmatuvPUXKTv6MbIFzpm4LFeCHsg2iwai0ILmNXf81rJR+L1Wb9ifEke2sQpZSPNz1Iyg== + +"@next/swc-win32-arm64-msvc@12.3.1": + version "12.3.1" + resolved "https://registry.npmmirror.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.3.1.tgz#83c639ee969cee36ce247c3abd1d9df97b5ecade" + integrity sha512-hswVFYQYIeGHE2JYaBVtvqmBQ1CppplQbZJS/JgrVI3x2CurNhEkmds/yqvDONfwfbttTtH4+q9Dzf/WVl3Opw== + +"@next/swc-win32-ia32-msvc@12.3.1": + version "12.3.1" + resolved "https://registry.npmmirror.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.3.1.tgz#52995748b92aa8ad053440301bc2c0d9fbcf27c2" + integrity sha512-Kny5JBehkTbKPmqulr5i+iKntO5YMP+bVM8Hf8UAmjSMVo3wehyLVc9IZkNmcbxi+vwETnQvJaT5ynYBkJ9dWA== + +"@next/swc-win32-x64-msvc@12.3.1": + version "12.3.1" + resolved "https://registry.npmmirror.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.3.1.tgz#27d71a95247a9eaee03d47adee7e3bd594514136" + integrity sha512-W1ijvzzg+kPEX6LAc+50EYYSEo0FVu7dmTE+t+DM4iOLqgGHoW9uYSz9wCVdkXOEEMP9xhXfGpcSxsfDucyPkA== + "@nodelib/fs.scandir@2.1.5": version "2.1.5" resolved "https://registry.npmmirror.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5" @@ -2293,6 +2363,13 @@ resolved "https://registry.npmmirror.com/@stripe/stripe-js/-/stripe-js-1.26.0.tgz#45670924753c01e18d0544ea1f1067b474aaa96f" integrity sha512-4R1vC75yKaCVFARW3bhelf9+dKt4NP4iZY/sIjGK7AAMBVvZ47eG74NvsAIUdUnhOXSWFMjdFWqv+etk5BDW4g== +"@swc/helpers@0.4.11": + version "0.4.11" + resolved "https://registry.npmmirror.com/@swc/helpers/-/helpers-0.4.11.tgz#db23a376761b3d31c26502122f349a21b592c8de" + integrity sha512-rEUrBSGIoSFuYxwBYtlUFMlE2CwGhmW+w9355/5oduSw8e5h2+Tj4UrAGNNgP9915++wj5vkQo0UuOBqOAq4nw== + dependencies: + tslib "^2.4.0" + "@tailwindcss/aspect-ratio@^0.4.0": version "0.4.0" resolved "https://registry.npmmirror.com/@tailwindcss/aspect-ratio/-/aspect-ratio-0.4.0.tgz#c635dd7331cbcc1b111cebdc2647dd3493ebdd3e" @@ -3187,6 +3264,11 @@ caniuse-lite@^1.0.30001202, caniuse-lite@^1.0.30001219, caniuse-lite@^1.0.300012 resolved "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001324.tgz#e17c3a8b34822b02d5d15639d570057550074884" integrity sha512-/eYp1J6zYh1alySQB4uzYFkLmxxI8tk0kxldbNHXp8+v+rdMKdUBNjRLz7T7fz6Iox+1lIdYpc7rq6ZcXfTukg== +caniuse-lite@^1.0.30001406: + version "1.0.30001418" + resolved "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001418.tgz#5f459215192a024c99e3e3a53aac310fc7cf24e6" + integrity sha512-oIs7+JL3K9JRQ3jPZjlH6qyYDp+nBTCais7hjh0s+fuBwufc7uZ7hPYMXrDOJhV360KGMTcczMRObk0/iMqZRg== + caseless@~0.12.0: version "0.12.0" resolved "https://registry.npmmirror.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc" @@ -6184,6 +6266,11 @@ nanoid@^3.1.22, nanoid@^3.3.1: resolved "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.2.tgz#c89622fafb4381cd221421c69ec58547a1eec557" integrity sha512-CuHBogktKwpm5g2sRgv83jEy2ijFzBwMoYA60orPDR7ynsLijJDqgsi4RDGj3OJpy3Ieb+LYwiRmIOGyytgITA== +nanoid@^3.3.4: + version "3.3.4" + resolved "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab" + integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw== + native-url@0.3.4: version "0.3.4" resolved "https://registry.npmmirror.com/native-url/-/native-url-0.3.4.tgz#29c943172aed86c63cee62c8c04db7f5756661f8" @@ -6318,6 +6405,32 @@ next@11.0.1: vm-browserify "1.1.2" watchpack "2.1.1" +next@12: + version "12.3.1" + resolved "https://registry.npmmirror.com/next/-/next-12.3.1.tgz#127b825ad2207faf869b33393ec8c75fe61e50f1" + integrity sha512-l7bvmSeIwX5lp07WtIiP9u2ytZMv7jIeB8iacR28PuUEFG5j0HGAPnMqyG5kbZNBG2H7tRsrQ4HCjuMOPnANZw== + dependencies: + "@next/env" "12.3.1" + "@swc/helpers" "0.4.11" + caniuse-lite "^1.0.30001406" + postcss "8.4.14" + styled-jsx "5.0.7" + use-sync-external-store "1.2.0" + optionalDependencies: + "@next/swc-android-arm-eabi" "12.3.1" + "@next/swc-android-arm64" "12.3.1" + "@next/swc-darwin-arm64" "12.3.1" + "@next/swc-darwin-x64" "12.3.1" + "@next/swc-freebsd-x64" "12.3.1" + "@next/swc-linux-arm-gnueabihf" "12.3.1" + "@next/swc-linux-arm64-gnu" "12.3.1" + "@next/swc-linux-arm64-musl" "12.3.1" + "@next/swc-linux-x64-gnu" "12.3.1" + "@next/swc-linux-x64-musl" "12.3.1" + "@next/swc-win32-arm64-msvc" "12.3.1" + "@next/swc-win32-ia32-msvc" "12.3.1" + "@next/swc-win32-x64-msvc" "12.3.1" + node-fetch@2.6.1: version "2.6.1" resolved "https://registry.npmmirror.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052" @@ -7087,6 +7200,15 @@ postcss@8.2.13: nanoid "^3.1.22" source-map "^0.6.1" +postcss@8.4.14: + version "8.4.14" + resolved "https://registry.npmmirror.com/postcss/-/postcss-8.4.14.tgz#ee9274d5622b4858c1007a74d76e42e56fd21caf" + integrity sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig== + dependencies: + nanoid "^3.3.4" + picocolors "^1.0.0" + source-map-js "^1.0.2" + postcss@^8.4.6: version "8.4.12" resolved "https://registry.npmmirror.com/postcss/-/postcss-8.4.12.tgz#1e7de78733b28970fa4743f7da6f3763648b1905" @@ -8587,6 +8709,11 @@ styled-jsx@3.3.2: stylis "3.5.4" stylis-rule-sheet "0.0.10" +styled-jsx@5.0.7: + version "5.0.7" + resolved "https://registry.npmmirror.com/styled-jsx/-/styled-jsx-5.0.7.tgz#be44afc53771b983769ac654d355ca8d019dff48" + integrity sha512-b3sUzamS086YLRuvnaDigdAewz1/EFYlHpYBP5mZovKEdQQOIIYq8lApylub3HHZ6xFjV051kkGU7cudJmrXEA== + stylis-rule-sheet@0.0.10: version "0.0.10" resolved "https://registry.npmmirror.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430" @@ -8920,6 +9047,11 @@ tslib@^2.0.3, tslib@^2.1.0: resolved "https://registry.npmmirror.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01" integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw== +tslib@^2.4.0: + version "2.4.0" + resolved "https://registry.npmmirror.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3" + integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ== + tsutils@^3.21.0: version "3.21.0" resolved "https://registry.npmmirror.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623" @@ -9127,6 +9259,11 @@ use-subscription@^1.3.0: resolved "https://registry.npmmirror.com/use-subscription/-/use-subscription-1.6.0.tgz#86ace4f60675a4c360712975c4933ac95c7e7f35" integrity sha512-0Y/cTLlZfw547tJhJMoRA16OUbVqRm6DmvGpiGbmLST6BIA5KU5cKlvlz8DVMrACnWpyEjCkgmhLatthP4jUbA== +use-sync-external-store@1.2.0: + version "1.2.0" + resolved "https://registry.npmmirror.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a" + integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA== + util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1: version "1.0.2" resolved "https://registry.npmmirror.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf" From db0b212850b4deaa530d3688289b179090e7e994 Mon Sep 17 00:00:00 2001 From: jefn76 Date: Wed, 12 Oct 2022 16:19:46 +0800 Subject: [PATCH 03/13] update NODE_VERSION to "12.22.0" --- apps/happin-web/netlify.toml | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/happin-web/netlify.toml b/apps/happin-web/netlify.toml index 144b4e7..e2db65e 100644 --- a/apps/happin-web/netlify.toml +++ b/apps/happin-web/netlify.toml @@ -6,6 +6,7 @@ package = "@netlify/plugin-nextjs" [context.deploy-preview.environment] + NODE_VERSION="12.22.0" NEXT_PUBLIC_HAPPIN_SERVER_HOST="https://api.happin.app/prod" NEXT_PUBLIC_CROWD_CORE_HOST="https://api.crowdcore.com/prod" NEXT_PUBLIC_HAPPIN_SSO="https://sso.happin.app" From 7aa95ded071ef7fb97db12416f6dca8727bdcb45 Mon Sep 17 00:00:00 2001 From: jefn76 Date: Thu, 13 Oct 2022 14:30:15 +0800 Subject: [PATCH 04/13] remove icon-park plugin, add IconPark component --- apps/happin-web/alltypes.d.ts | 29 ++++++++++ apps/happin-web/components/Header.tsx | 10 ++-- apps/happin-web/components/IconPark.tsx | 58 +++++++++++++++++++ apps/happin-web/components/Layout.tsx | 1 - apps/happin-web/components/SignInBar.tsx | 6 +- .../CheckoutPageComponents/BundleSidebar.tsx | 8 ++- .../CheckoutPageComponents/CheckoutHead.tsx | 14 ++--- .../CheckoutPageComponents/Merch.tsx | 12 ++-- .../CheckoutPageComponents/MerchSideBar.tsx | 4 +- .../EventPageComponents/ActionSideBar.tsx | 12 ++-- .../EventPageComponents/EventAttendees.tsx | 6 +- .../EventPageComponents/EventDescription.tsx | 4 +- .../EventPageComponents/EventGallery.tsx | 6 +- .../EventPageComponents/EventHost.tsx | 4 +- .../LiveStreamComponents/LiveList.tsx | 4 +- .../LiveStreamComponents/Sender.tsx | 6 +- .../MyEventDetailsHead.tsx | 4 +- .../PaymentPageComponents/PaymentHead.tsx | 4 +- .../ThirdPartyEvent.tsx | 4 +- apps/happin-web/components/reusable/Modal.tsx | 4 +- .../components/reusable/NumberInput.tsx | 6 +- .../components/reusable/PopUpModal.tsx | 4 +- .../happin-web/components/reusable/Select.tsx | 4 +- apps/happin-web/pages/appreward/index.tsx | 32 +++++----- apps/happin-web/pages/campaign/index.tsx | 8 +-- .../pages/checkout/payment/index.tsx | 8 +-- apps/happin-web/pages/index.tsx | 4 +- .../pages/live-stream/[event_id].tsx | 14 +++-- .../pages/my-event-collections/index.tsx | 5 +- apps/happin-web/pages/playback/[event_id].tsx | 9 ++- apps/happin-web/pages/reward/index.tsx | 8 +-- .../pages/transactionHistory/index.tsx | 6 +- 32 files changed, 202 insertions(+), 106 deletions(-) create mode 100644 apps/happin-web/components/IconPark.tsx diff --git a/apps/happin-web/alltypes.d.ts b/apps/happin-web/alltypes.d.ts index 384fc80..1bcc644 100644 --- a/apps/happin-web/alltypes.d.ts +++ b/apps/happin-web/alltypes.d.ts @@ -1,3 +1,32 @@ declare module 'react-plx' declare module 'tim-js-sdk' declare module 'randomcolor' + +/** + * if you are using React JSX with typescript + * e.g. + * + * include below type declaration in your project (don't forget to import React from 'react') + * + */ +declare global { + interface IconParkIconAttributes extends React.HTMLAttributes { + // 包含打包的图标id + 'icon-id'?: string; + // 包含打包的图标标识 + name?: string; + size?: string; + width?: string; + height?: string; + color?: string; + stroke?: string; + fill?: string; + rtl?: string; + spin?: string; + } + namespace JSX { + interface IntrinsicElements { + 'iconpark-icon': React.DetailedHTMLProps, HTMLElement>; + } + } +} diff --git a/apps/happin-web/components/Header.tsx b/apps/happin-web/components/Header.tsx index 8f0a253..c6be304 100644 --- a/apps/happin-web/components/Header.tsx +++ b/apps/happin-web/components/Header.tsx @@ -3,13 +3,13 @@ import Link from 'next/link'; import { useRouter } from 'next/router' import { Avatar, HStack, useToast } from '@chakra-ui/react'; import { SearchIcon } from "@chakra-ui/icons"; -import { DownTwo, HamburgerButton, International, More, Search } from '@icon-park/react'; import { Menu, Transition } from '@headlessui/react' import classNames from 'classnames'; import { useSSOState } from 'contexts/sso-state'; import { useUserState } from 'contexts/user-state'; import { exchangeDashboardEventHostToken } from 'lib/api'; import classnames from 'classnames'; +import IconPark from '@components/IconPark'; export default function Header({ children, checkingWhiteLable, whiteLabelLogo, whiteLabelHome }: { children?: any, checkingWhiteLable: any, whiteLabelLogo: any, whiteLabelHome: any }) { const { user, clearUser } = useUserState(); @@ -110,7 +110,7 @@ export default function Header({ children, checkingWhiteLable, whiteLabelLogo, w {({ open }) => ( <> - + ( <> - + {!user && } {user && } @@ -196,13 +196,13 @@ export default function Header({ children, checkingWhiteLable, whiteLabelLogo, w
- + Organizer Dashboard { window.location.href = process.env.NEXT_PUBLIC_HAPPIN_APP_APPLE_STORE as string}}> - + Download App diff --git a/apps/happin-web/components/IconPark.tsx b/apps/happin-web/components/IconPark.tsx new file mode 100644 index 0000000..08b39c5 --- /dev/null +++ b/apps/happin-web/components/IconPark.tsx @@ -0,0 +1,58 @@ +import React from 'react'; +import Script from 'next/script'; + +type IconParkProps = { + 'icon-id'?: string; + name: + | 'international' + | 'down-two' + | 'down-two-thin' + | 'hamburger-button' + | 'more' + | 'search' + | 'delete' + | 'left' + | 'check' + | 'right' + | 'like' + | 'share-two' + | 'share-two-thin' + | 'play-one' + | 'grinning-face-with-open-mouth' + | 'minus' + | 'plus' + | 'down' + | 'arrow-right' + | 'help' + | 'lightning' + | 'lightning-filled' + | 'stopwatch' + | 'switch' + | 'cosmetic-brush' + | 'up' + | 'close-small' + | 'close-small-thin' + | 'like-filled' + | 'like-thin'; + size?: string | number; + width?: string; + height?: string; + color?: string; + stroke?: string; + fill?: string; + rtl?: string; + spin?: string; + className?: string; + style?: CSSStyleDeclaration; +}; +const IconPark = (props: IconParkProps) => { + const { name, color = 'currentColor' } = props; + return ( + <> +