From 6961f058dffd00b0d97e85123db35b66ca2a50f6 Mon Sep 17 00:00:00 2001 From: louiscklaw Date: Sun, 8 Jun 2025 19:06:46 +0800 Subject: [PATCH] update demo-list, --- 03_source/mobile/src/pages/DemoList/index.tsx | 699 ++++++++++-------- 1 file changed, 402 insertions(+), 297 deletions(-) diff --git a/03_source/mobile/src/pages/DemoList/index.tsx b/03_source/mobile/src/pages/DemoList/index.tsx index 80ba1af..a0444f6 100644 --- a/03_source/mobile/src/pages/DemoList/index.tsx +++ b/03_source/mobile/src/pages/DemoList/index.tsx @@ -49,42 +49,67 @@ import { apps, appsOutline, book, + bookOutline, + brushOutline, + calculatorOutline, car, cart, + cartOutline, cashOutline, chatbubbleEllipses, + chatbubbleEllipsesOutline, chatbubbleOutline, chevronBackOutline, chevronForward, chevronForwardOutline, + cloudOutline, + codeSlashOutline, + codeWorkingOutline, colorPaletteOutline, createOutline, document, documentTextOutline, + filmOutline, + flashOutline, gift, giftOutline, globeSharp, + gridOutline, heart, + imageOutline, + imagesOutline, keyOutline, languageOutline, layers, + layersOutline, list, listCircle, + listOutline, + logInOutline, + logoFacebook, mapOutline, menuOutline, + paperPlaneOutline, people, person, + personCircleOutline, + personOutline, + pizzaOutline, + qrCodeOutline, + refreshOutline, restaurant, + restaurantOutline, settingsOutline, shareSocialOutline, statsChart, sunny, swapHorizontal, trashOutline, + walkOutline, } from 'ionicons/icons'; import AboutPopover from '../../components/AboutPopover'; import { OverlayEventDetail } from '@ionic/react/dist/types/components/react-component-lib/interfaces'; -import paths from '../../paths'; +import PATHS from '../../PATHS'; import { logoutUser, setAccessToken, setIsLoggedIn } from '../../data/user/user.actions'; interface OwnProps {} @@ -102,7 +127,13 @@ interface DispatchProps { interface SettingsProps extends OwnProps, StateProps, DispatchProps {} -const SettingsPage: React.FC = ({ speakers, speakerSessions, logoutUser, setAccessToken, setIsLoggedIn }) => { +const DemoList: React.FC = ({ + speakers, + speakerSessions, + logoutUser, + setAccessToken, + setIsLoggedIn, +}) => { const [events, setEvents] = useState([]); const [showPopover, setShowPopover] = useState(false); const [popoverEvent, setPopoverEvent] = useState(); @@ -122,23 +153,23 @@ const SettingsPage: React.FC = ({ speakers, speakerSessions, logo } function handleLanguageClick() { - router.push(paths.CHANGE_LANGUAGE); + router.push(PATHS.CHANGE_LANGUAGE); } function handleNotImplementedClick() { - router.push(paths.NOT_IMPLEMENTED); + router.push(PATHS.NOT_IMPLEMENTED); } function handleDemoPageClick() { - router.push(paths.DEMO_PAGE); + router.push(PATHS.DEMO_PAGE); } function handleServiceAgreementClick() { - router.push(paths.SERVICE_AGREEMENT); + router.push(PATHS.SERVICE_AGREEMENT); } function handlePrivacyAgreementClick() { - router.push(paths.PRIVACY_AGREEMENT); + router.push(PATHS.PRIVACY_AGREEMENT); } const [showLogoutConfirmModal, setShowLogoutConfirmModal] = useState(false); @@ -158,12 +189,8 @@ const SettingsPage: React.FC = ({ speakers, speakerSessions, logo setShowLogoutConfirmModal(false); } - function handleDemoWeatherApp() { - router.push(paths.DEMO_WEATHER_APP); - } - function handleDemoReactShopClick() { - router.push(paths.DEMO_REACT_SHOP); + router.push(PATHS.DEMO_REACT_SHOP); } return ( @@ -192,263 +219,29 @@ const SettingsPage: React.FC = ({ speakers, speakerSessions, logo - handleDemoWeatherApp()}> + router.push(PATHS.DEMO_WEATHER_APP_UI)}> Weather App - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - - router.push(paths.DEMO_ACCORDION_TUTORIAL, 'forward')}> - - Demo Accordion Tutorial - - - - - - router.push(paths.DEMO_BANKING_UI, 'forward')}> - + router.push(PATHS.DEMO_2FA_EXAMPLE, 'forward')}> + - Demo Banking UI (in the middle, style outstanding) + Demo 2FA Example{' '} + layout only, not functioning - router.push(paths.DEMO_CAPACITOR_GOOGLE_MAPS_TUTORIAL, 'forward')}> - - - Demo Capacitor Google Maps Tutorial need a google map api key - - - - - - - router.push(paths.DEMO_COLOR_TUTORIAL, 'forward')}> - - Demo Color Tutorial - - - - - {/* - - - - router.push(paths.DEMO_ECOMMERCE_EXAMPLE, 'forward')}> - - Demo Ecommerce Example - - - - - - router.push(paths.DEMO_FACEBOOK_CLONE, 'forward')}> - - Demo Facebook Clone - - - - - - router.push(paths.DEMO_FAST_FOOD_APP, 'forward')}> - - Demo Fast Food App - - - - - - router.push(paths.DEMO_FLOATING_TABS, 'forward')}> - - Demo Floating Tabs - - - - - - router.push(paths.DEMO_INSTAGRAM_CLONE, 'forward')}> - - Demo Instagram Clone - - - - - - router.push(paths.DEMO_KANBAN_BOARD, 'forward')}> - - Demo Kanban Board - - - - - - router.push(paths.DEMO_ORDERING_APP, 'forward')}> - - Demo Ordering App - - - - - - router.push(paths.DEMO_PROFILE_EXAMPLE, 'forward')}> - - Demo Profile Example - - - - - - router.push(paths.DEMO_PULLSTATE_TUTORIAL, 'forward')}> - - Demo Pullstate Tutorial - - - - - - router.push(paths.DEMO_REACT_ADD_TO_CART, 'forward')}> - - Demo React Add to Cart - - - - - - router.push(paths.DEMO_REACT_CALCULATOR, 'forward')}> - - Demo React Calculator - - - - - - router.push(paths.DEMO_REACT_DRAWING_CANVAS, 'forward')}> - - Demo React Drawing Canvas - - - - - - router.push(paths.DEMO_REACT_HOOK_FORM_EXAMPLE, 'forward')}> - - Demo React Hook Form Example - - - - - - router.push(paths.DEMO_REACT_ITEM_LIST, 'forward')}> - - Demo React Item List - - - - - - router.push(paths.DEMO_REACT_LIFECYCLES, 'forward')}> - - Demo React Lifecycles - - - - - - router.push(paths.DEMO_REACT_LOGIN, 'forward')}> - - Demo React Login - - - - - - router.push(paths.DEMO_REACT_MARVEL_APP, 'forward')}> - - Demo React Marvel App - - - - - - router.push(paths.DEMO_REACT_MOVIE_APP_WITH_ALGOLIA, 'forward')}> - - Demo React Movie App with Algolia - - - - - - router.push(paths.DEMO_REACT_NOTES, 'forward')}> - - Demo React Notes - - - - - - router.push(paths.DEMO_REACT_ONBOARDING_UI, 'forward')}> - - Demo React Onboarding UI - - - - - - router.push(paths.DEMO_REACT_PROFILE_DASHBOARD_UI, 'forward')): - - Demo React Profile Dashboard UI - - - - - - router.push(paths.DEMO_REACT_QR_CODE, 'forward')}> - - Demo React QR Code - - - - - - router.push(paths.DEMO_REACT_QUOTES, 'forward')): - - Demo React Quotes - - - - - - router.push(paths.DEMO_REACT_SHOP_UI, 'forward')): - - Demo React Shop UI - - - - - - router.push(paths.DEMO_REACT_TABS_MENUS_CUSTOM, 'forward')): - - Demo React Tabs Menus Custom - - - - - - router.push(paths.DEMO_REACT_THEME_SWITCHER, 'forward')): + router.push(PATHS.DEMO_REACT_THEME_SWITCHER, 'forward')} + > Demo React Theme Switcher @@ -456,15 +249,7 @@ const SettingsPage: React.FC = ({ speakers, speakerSessions, logo - router.push(paths.DEMO_REACT_WHATSAPP_CLONE, 'forward')): - - Demo React WhatsApp Clone - - - - - - router.push(paths.DEMO_SKELETON_TEXT, 'forward')): + router.push(PATHS.DEMO_SKELETON_TEXT, 'forward')}> Demo Skeleton Text @@ -472,7 +257,10 @@ const SettingsPage: React.FC = ({ speakers, speakerSessions, logo - router.push(paths.DEMO_STICKY_BOTTOM_SHEET_EXAMPLE, 'forward')): + router.push(PATHS.DEMO_STICKY_BOTTOM_SHEET_EXAMPLE, 'forward')} + > Demo Sticky Bottom Sheet Example @@ -480,15 +268,21 @@ const SettingsPage: React.FC = ({ speakers, speakerSessions, logo - router.push(paths.DEMO_STORAGE_EXAMPLE, 'forward')): + router.push(PATHS.DEMO_STORAGE_EXAMPLE, 'forward')}> - Demo Storage Example + + Demo Storage Example{' '} + (need fix, message cannot display) + - router.push(paths.DEMO_SWIPERJS_TUTORIAL, 'forward')): + router.push(PATHS.DEMO_SWIPERJS_TUTORIAL, 'forward')} + > Demo SwiperJS Tutorial @@ -496,19 +290,241 @@ const SettingsPage: React.FC = ({ speakers, speakerSessions, logo - router.push(paths.DEMO_WEATHER_APP_UI, 'forward')): - - Demo Weather App UI + router.push(PATHS.DEMO_REACT_DRAWING_CANVAS, 'forward')} + > + + Demo React Drawing Canvas - */} + + router.push(PATHS.DEMO_REACT_HOOK_FORM_EXAMPLE, 'forward')} + > + + Demo React Hook Form Example + + + - router.push(paths.DEMO_2FA_EXAMPLE, 'forward')}> - - Demo 2FA Example + router.push(PATHS.DEMO_REACT_ITEM_LIST, 'forward')}> + + Demo React Item List + + + + + + router.push(PATHS.DEMO_REACT_LIFECYCLES, 'forward')} + > + + Demo React Lifecycles + + + + + + router.push(PATHS.DEMO_REACT_LOGIN, 'forward')}> + + + Demo React Login (missing back button) + + + + + + + router.push(PATHS.DEMO_REACT_MARVEL_APP, 'forward')} + > + + Demo React Marvel App + + + + + + router.push(PATHS.DEMO_REACT_MOVIE_APP_WITH_ALGOLIA, 'forward')} + > + + Demo React Movie App with Algolia + + + + + + router.push(PATHS.DEMO_REACT_NOTES, 'forward')}> + + + Demo React Notes{' '} + TODO: need update IonSlide + + + + + + + router.push(PATHS.DEMO_FACEBOOK_CLONE, 'forward')}> + + Demo Facebook Clone + + + + + + router.push(PATHS.DEMO_FAST_FOOD_APP, 'forward')}> + + + Demo Fast Food App ion-slide outstanding + + + + + + + router.push(PATHS.DEMO_FLOATING_TABS, 'forward')}> + + Demo Floating Tabs + + + + + + router.push(PATHS.DEMO_INSTAGRAM_CLONE, 'forward')}> + + Demo Instagram Clone + + + + + + router.push(PATHS.DEMO_KANBAN_BOARD, 'forward')}> + + + Demo Kanban Board{' '} + // TODO: fix missing ionslide in new ionic + + + + + + + router.push(PATHS.DEMO_ORDERING_APP, 'forward')}> + + + Demo Ordering App outstanding css + + + + + + + router.push(PATHS.DEMO_PROFILE_EXAMPLE, 'forward')}> + + Demo Profile Example + + + + + + router.push(PATHS.DEMO_PULLSTATE_TUTORIAL, 'forward')} + > + + Demo Pullstate Tutorial + + + + + + router.push(PATHS.DEMO_REACT_ADD_TO_CART, 'forward')} + > + + Demo React Add to Cart + + + + + + router.push(PATHS.DEMO_REACT_CALCULATOR, 'forward')} + > + + + Demo React Calculator css need fix + + + + + + + router.push(PATHS.DEMO_ACCORDION_TUTORIAL, 'forward')} + > + + Demo Accordion Tutorial + + + + + + router.push(PATHS.DEMO_BANKING_UI, 'forward')}> + + + Demo Banking UI{' '} + (in the middle, style outstanding) + + + + + + + router.push(PATHS.DEMO_CAPACITOR_GOOGLE_MAPS_TUTORIAL, 'forward')} + > + + + Demo Capacitor Google Maps Tutorial{' '} + need a google map api key + + + + + + + router.push(PATHS.DEMO_COLOR_TUTORIAL, 'forward')}> + + Demo Color Tutorial + + + + + + router.push(PATHS.DEMO_ECOMMERCE_EXAMPLE, 'forward')} + > + + + Demo Ecommerce Example{' '} + (fetch data not available at remote site) + @@ -526,27 +542,35 @@ const SettingsPage: React.FC = ({ speakers, speakerSessions, logo */} - router.push(paths.DEMO_REACT_POLL_APP, 'forward')}> + router.push(PATHS.DEMO_REACT_POLL_APP, 'forward')}> - Demo React Poll App (css temporary broken, ignored) + Demo React Poll App{' '} + (css temporary broken, ignored) - router.push(paths.DEMO_REACT_SWITCH_TABS, 'forward')}> + router.push(PATHS.DEMO_REACT_SWITCH_TABS, 'forward')} + > - Demo React Switch Tabs (hardcoded back button) + Demo React Switch Tabs{' '} + (hardcoded back button) - router.push(paths.DEMO_REACT_OVERLAY_HOOKS, 'forward')}> + router.push(PATHS.DEMO_REACT_OVERLAY_HOOKS, 'forward')} + > Demo React Overlay Hooks @@ -554,20 +578,28 @@ const SettingsPage: React.FC = ({ speakers, speakerSessions, logo - router.push(paths.DEMO_PINTEREST_FLOATING_TAB_BAR, 'forward')}> + router.push(PATHS.DEMO_PINTEREST_FLOATING_TAB_BAR, 'forward')} + > - Demo Pinterest Floating Tab Bar (css not work well) + Demo Pinterest Floating Tab Bar{' '} + (css not work well) - router.push(paths.DEMO_RESTAURANT_FINDER, 'forward')}> + router.push(PATHS.DEMO_RESTAURANT_FINDER, 'forward')} + > - Demo Restaurant Finder need server for map showing + Demo Restaurant Finder{' '} + need server for map showing @@ -585,7 +617,7 @@ const SettingsPage: React.FC = ({ speakers, speakerSessions, logo { - router.push(paths.DEMO_CLUB_HOUSE, 'forward'); + router.push(PATHS.DEMO_CLUB_HOUSE, 'forward'); }} > @@ -598,7 +630,7 @@ const SettingsPage: React.FC = ({ speakers, speakerSessions, logo { - router.push(paths.DEMO_SCORE_BOARD, 'forward'); + router.push(PATHS.DEMO_SCORE_BOARD, 'forward'); }} > @@ -611,7 +643,7 @@ const SettingsPage: React.FC = ({ speakers, speakerSessions, logo - router.push(paths.DEMO_QUOTE_APP, 'forward')}> + router.push(PATHS.DEMO_QUOTE_APP, 'forward')}> Demo Quote App @@ -619,7 +651,7 @@ const SettingsPage: React.FC = ({ speakers, speakerSessions, logo - router.push(paths.DEMO_QR_SCANNER, 'forward')}> + router.push(PATHS.DEMO_QR_SCANNER, 'forward')}> Demo Qr scanner @@ -627,7 +659,7 @@ const SettingsPage: React.FC = ({ speakers, speakerSessions, logo - router.push(paths.DEMO_SHOP_APP_UI, 'forward')}> + router.push(PATHS.DEMO_SHOP_APP_UI, 'forward')}> Demo Shop App UI @@ -635,7 +667,7 @@ const SettingsPage: React.FC = ({ speakers, speakerSessions, logo - router.push(paths.DEMO_DICTIONARY_APP, 'forward')}> + router.push(PATHS.DEMO_DICTIONARY_APP, 'forward')}> Demo Dictionary App @@ -643,7 +675,7 @@ const SettingsPage: React.FC = ({ speakers, speakerSessions, logo - router.push(paths.DEMO_RECIPE_APP, 'forward')}> + router.push(PATHS.DEMO_RECIPE_APP, 'forward')}> Demo Recipe App @@ -651,7 +683,7 @@ const SettingsPage: React.FC = ({ speakers, speakerSessions, logo - router.push(paths.DEMO_SLIDING_PROFILE, 'forward')}> + router.push(PATHS.DEMO_SLIDING_PROFILE, 'forward')}> Demo Sliding Profile @@ -659,7 +691,7 @@ const SettingsPage: React.FC = ({ speakers, speakerSessions, logo - router.push(paths.DEMO_QUIZ_APP, 'forward')}> + router.push(PATHS.DEMO_QUIZ_APP, 'forward')}> Demo Quiz App @@ -667,7 +699,7 @@ const SettingsPage: React.FC = ({ speakers, speakerSessions, logo - router.push(paths.DEMO_BLOG_POST_UI, 'forward')}> + router.push(PATHS.DEMO_BLOG_POST_UI, 'forward')}> Demo Blog Post UI @@ -675,7 +707,10 @@ const SettingsPage: React.FC = ({ speakers, speakerSessions, logo - router.push(paths.DEMO_REACT_TRAVEL_APP, 'forward')}> + router.push(PATHS.DEMO_REACT_TRAVEL_APP, 'forward')} + > Demo React Travel App (on hold) @@ -683,10 +718,80 @@ const SettingsPage: React.FC = ({ speakers, speakerSessions, logo + + + router.push(PATHS.DEMO_REACT_PROFILE_DASHBOARD_UI, 'forward')} + > + + Demo React Profile Dashboard UI + + + + + {/* TODO: */} + + + router.push(PATHS.DEMO_REACT_QR_CODE, 'forward')}> + + + Demo React QR Code need update + + + + + + + router.push(PATHS.DEMO_REACT_QUOTES, 'forward')}> + + Demo React Quotes + + + + + + router.push(PATHS.DEMO_REACT_SHOP_UI, 'forward')}> + + + Demo React Shop UI lower priority + + + + + + + router.push(PATHS.DEMO_REACT_TABS_MENUS_CUSTOM, 'forward')} + > + + Demo React Tabs Menus Custom + + + + + + router.push(PATHS.DEMO_REACT_ONBOARDING_UI, 'forward')} + > + + + Demo React Onboarding UI{' '} + TODO: update IonSlide + + + + {/* REQ0058/logout */} - + ({ setAccessToken, setIsLoggedIn, }, - component: React.memo(SettingsPage), + component: React.memo(DemoList), });