-
-
-
- Schedule
-
-
-
-
- Speakers
-
-
-
-
- Map
-
-
-
-
- About
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- All
-
-
- Favorites
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- No Sessions Found
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default connect
-
- Loading...
-
-
-
- );
-}
-
-export default connect
-
-
-
-
-
- You have not saved yet
-
- To add your favourites,
- simply take a look here -
- - simply take a look here -
{session.name}
-- {session.timeStart} — - {session.timeEnd}: - {session.location} -
-{speaker.name}
-{speaker.title}
-{session.name}
-About {speaker.name}
-
- *
- * );
- */
-type UseSetStateReturnName: {state.name}
- *Age: {state.age}
- * - * - *
- {/* Instead of loading an image each time the select changes, use opacity to transition them */}
-
-
-
-
-
-
-
-
- setLocation(e.detail.value as any)}
- >
- Madison, WI
- Austin, TX
- Chicago, IL
- Seattle, WA
-
-
-
- Date
- {displayDate(conferenceDate, 'MMM dd, yyyy')}
-
- setConferenceDate(e.detail.value! as string)}
- presentation="date"
- >
-
-
-
-
-
-
- Wifi network
- ica{displayDate(conferenceDate, 'y')}
-
-
- Password
- makegoodthings
-
-
-
- About
- -- The Ionic Conference is a one-day event happening on{' '} - {displayDate(conferenceDate, 'MMM dd, yyyy')}, featuring talks from the Ionic team. The - conference focuses on building applications with Ionic Framework, including topics such - as app migration to the latest version, React best practices, Webpack, Sass, and other - technologies commonly used in the Ionic ecosystem. Tickets are completely sold out, and - we're expecting over 1,000 developers — making this the largest Ionic conference to - date! -
- -Details
- -Internet
- -
- 
-
- clicked('Update Picture')}>Update Picture
- setShowAlert(true)}>Change Username
- clicked('Change Password')}>Change Password
-
- Support
-
-
- Logout
-
-
-
- )}
-
- {username}
-
- Change Language
-
-
-
-
- Confirm change language
-
-
- Change language to Chinese
-
-
-
-
-
-
-
- Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
- 
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {keypadButtons.map((keypadRow, index) => {
- const isDisabled = parseInt(activeIndex) === parseInt(amount);
-
- return (
-
- {keypadRow.map((button, index2) => {
- return (
-
- );
- })}
-
- );
-};
-
-export default Keypad;
diff --git a/03_source/mobile.trunk.1/src/pages/Demo2FaExample/components/KeypadButton.module.scss b/03_source/mobile.trunk.1/src/pages/Demo2FaExample/components/KeypadButton.module.scss
deleted file mode 100644
index 400a722..0000000
--- a/03_source/mobile.trunk.1/src/pages/Demo2FaExample/components/KeypadButton.module.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-.logo {
- height: 4rem;
- width: auto;
-}
-
-.keypadButton {
- --background: none;
- --color: black;
- font-size: 2rem;
- font-weight: 700;
- --outline: none;
- --border: none;
- --box-shadow: none;
- padding: none;
- margin: none;
- --background-hover: rgb(245, 245, 245) !important;
- --background-focused: rgb(245, 245, 245) !important;
- --background-activated: rgb(245, 245, 245) !important;
-}
-
-.smallKeypadButton {
- font-size: 1.4rem;
- margin-top: 1rem;
-}
-
-.keypad {
- bottom: 0;
- position: absolute;
- width: 100%;
-}
diff --git a/03_source/mobile.trunk.1/src/pages/Demo2FaExample/components/KeypadButton.tsx b/03_source/mobile.trunk.1/src/pages/Demo2FaExample/components/KeypadButton.tsx
deleted file mode 100644
index 1188e6f..0000000
--- a/03_source/mobile.trunk.1/src/pages/Demo2FaExample/components/KeypadButton.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { IonButton, IonCol, IonIcon } from '@ionic/react';
-import { backspaceOutline } from 'ionicons/icons';
-import styles from './KeypadButton.module.scss';
-
-const KeypadButton = (props: any): JSX.Element => {
- const { small, value, remove, handleClick, isDisabled = false, correct } = props;
-
- return (
-
- {value}
- {!isFilled && '0'}
-
- Verification required
-Enter your 4 digit verification code
-
- Awesome! You may continue.
-
-
- Continue
-
Wrong code entered
} -Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -Transactions
-No transactions found
-- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
- );
-};
-
-export default DebitCard;
diff --git a/03_source/mobile.trunk.1/src/pages/DemoBankingUi/components/DebitCard.module.css b/03_source/mobile.trunk.1/src/pages/DemoBankingUi/components/DebitCard.module.css
deleted file mode 100644
index b2064a5..0000000
--- a/03_source/mobile.trunk.1/src/pages/DemoBankingUi/components/DebitCard.module.css
+++ /dev/null
@@ -1,188 +0,0 @@
-@import url('https://fonts.googleapis.com/css?family=Space+Mono:400,400i,700,700i');
-
-.card {
- box-sizing: border-box;
- font-family: 'Space Mono', monospace;
- margin: 0 auto;
-}
-
-.title {
- margin-bottom: 30px;
- color: #162969;
-}
-
-.card {
- width: 320px;
- height: 190px;
- -webkit-perspective: 600px;
- -moz-perspective: 600px;
- perspective: 600px;
-}
-
-.card__part {
- box-shadow: 1px 1px #aaa3a3;
- top: 0;
- position: absolute;
- z-index: 1000;
- left: 0;
- display: inline-block;
- width: 320px;
- height: 190px;
- background-repeat: no-repeat;
- background-position: center;
- background-size: cover;
- border-radius: 8px;
-
- -webkit-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
- -moz-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
- -ms-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
- -o-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
- transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
- -webkit-transform-style: preserve-3d;
- -moz-transform-style: preserve-3d;
- -webkit-backface-visibility: hidden;
- -moz-backface-visibility: hidden;
-}
-
-.card_orange {
- background: linear-gradient(to right bottom, #fd696b, #fa616e, #f65871, #c74261, #d62158);
-}
-
-.card_blue {
- background: linear-gradient(to right bottom, #699dfd, #61b5fa, #58aff6, #4b86c9, #2151d6);
-}
-
-.card_black {
- background: linear-gradient(to right bottom, #292929, #363636, #555555, #444444, #0f0f0f);
-}
-
-.card_purple {
- background: linear-gradient(to right bottom, #7a43df, #644897, #8964cf, #633cac, #512c96);
-}
-
-.card__front {
- padding: 18px;
- -webkit-transform: rotateY(0);
- -moz-transform: rotateY(0);
-}
-
-.card__back {
- padding: 18px 0;
- -webkit-transform: rotateY(-180deg);
- -moz-transform: rotateY(-180deg);
-}
-
-.card__black_line {
- margin-top: 5px;
- height: 38px;
- background-color: #303030;
-}
-
-.card__logo {
- height: 16px !important;
-}
-
-.card__front_chip {
- left: 1.2rem;
- height: 1.5rem !important;
- position: absolute;
-}
-
-.card__front_logo {
- position: absolute;
- top: 18px;
- right: 18px;
-}
-
-.card__square {
- border-radius: 5px;
- height: 30px !important;
-}
-
-.card_number {
- display: block;
- width: 100%;
- word-spacing: 4px;
- font-size: 20px;
- letter-spacing: 2px;
- color: #fff;
- text-align: center;
- margin-bottom: 20px;
- margin-top: 20px;
-}
-
-.card__space_75 {
- width: 75%;
- float: left;
-}
-
-.card__space_25 {
- width: 25%;
- float: left;
-}
-
-.card__label {
- font-size: 10px;
- text-transform: uppercase;
- color: rgba(255, 255, 255, 0.8);
- letter-spacing: 1px;
-}
-
-.card__info {
- margin-bottom: 0;
- margin-top: 5px;
- font-size: 16px;
- line-height: 18px;
- color: #fff;
- letter-spacing: 1px;
- text-transform: uppercase;
-}
-
-.card__back_content {
- padding: 15px 15px 0;
-}
-.card__secret__last {
- color: #303030;
- text-align: right;
- margin: 0;
- font-size: 14px;
-}
-
-.card__secret {
- padding: 5px 12px;
- background-color: #fff;
- position: relative;
-}
-
-.card__secret:before {
- content: '';
- position: absolute;
- top: -3px;
- left: -3px;
- height: calc(100% + 6px);
- width: calc(100% - 42px);
- border-radius: 4px;
- background: repeating-linear-gradient(45deg, #ededed, #ededed 5px, #f9f9f9 5px, #f9f9f9 10px);
-}
-
-.card__back_logo {
- position: absolute;
- bottom: 15px;
- right: 15px;
-}
-
-.card__back_square {
- position: absolute;
- bottom: 15px;
- left: 15px;
-}
-
-.card:hover .card__front {
- -webkit-transform: rotateY(180deg);
- -moz-transform: rotateY(180deg);
-}
-
-.card:hover .card__back {
- -webkit-transform: rotateY(0deg);
- -moz-transform: rotateY(0deg);
-}
diff --git a/03_source/mobile.trunk.1/src/pages/DemoBankingUi/components/SkeletonDashboard/index.tsx b/03_source/mobile.trunk.1/src/pages/DemoBankingUi/components/SkeletonDashboard/index.tsx
deleted file mode 100644
index ae39e44..0000000
--- a/03_source/mobile.trunk.1/src/pages/DemoBankingUi/components/SkeletonDashboard/index.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import {
- IonCard,
- IonCardContent,
- IonCardSubtitle,
- IonCardTitle,
- IonCol,
- IonGrid,
- IonIcon,
- IonNote,
- IonRow,
- IonSkeletonText,
- IonText,
- IonThumbnail,
-} from '@ionic/react';
-import { pulseOutline, sunnyOutline, thermometerOutline } from 'ionicons/icons';
-import React from 'react';
-
-export const SkeletonDashboard = (): React.JSX.Element => (
-
- 
- 
- 
-
-
-
-
- **** **** **** {lastFourCardNumbers}
-
- Card holder
-
- {`${profile.firstname} ${profile.surname}`}
-
- Expires
-
- {expiry}
-
-
-
-
-
-
-
-
-
-
- {secret}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {getContactNameInitials(name)}
-
- {name}
-- {deposit ? '+' : '-'} - £{formatBalance(amount)} -
-{`${profile.firstname} ${profile.surname}`}
-{cards.length} current cards
-
- {cards.map((card, index) => {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
- })}
-
- {card.description}
-£{formatBalance(card.balance)}
-
-
-
-
-
-
-
-
-
- {post.category}
-
-
- {post.content}
- -
-
-
-
-
-
-
-
-
- {post.category}
-
-
- Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
- Ready to create an app?
-
- );
-};
-
-export default ExploreContainer;
diff --git a/03_source/mobile.trunk.1/src/pages/DemoCapacitorGoogleMapsTutorial/components/MarkerInfoWindow.jsx b/03_source/mobile.trunk.1/src/pages/DemoCapacitorGoogleMapsTutorial/components/MarkerInfoWindow.jsx
deleted file mode 100644
index cc2ea78..0000000
--- a/03_source/mobile.trunk.1/src/pages/DemoCapacitorGoogleMapsTutorial/components/MarkerInfoWindow.jsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import {
- IonButton,
- IonCol,
- IonContent,
- IonGrid,
- IonIcon,
- IonLabel,
- IonNote,
- IonRow,
-} from '@ionic/react';
-import {
- globeOutline,
- heartOutline,
- locationOutline,
- navigateOutline,
- phonePortraitOutline,
-} from 'ionicons/icons';
-
-export const MarkerInfoWindow = ({ marker, dismiss }) => {
- return (
- - Start with Ionic{' '} - - UI Components - -
-{marker.title}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Upcoming
-Happening Now
- setShowModal(true)}
- >
-
- {speakers.map((speaker, index) => {
- return (
-
- )}
-
- {upcoming && (
-
-
-
-
- {talkCategory.name} talks
-
-
-
-
-
-
- {!upcoming && (
- {talk.title}
-
- 
-
- );
- })}
-
- {talk.time}
-
- )}
-
- {!upcoming && (
-
-
-
-
- )}
-
-
-
-
-
-
- {category.name} talks
-
- {talk.title}
-
-
-
-
-
- {speaker.name.split(' ')[0]}
-
-
-
- )
-
- {people[Math.floor(Math.random() * 30)].name.split(' ')[0]}
-- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {name}
-
- );
-};
-
-export default ExploreContainer;
diff --git a/03_source/mobile.trunk.1/src/pages/DemoColorTutorial/index.tsx b/03_source/mobile.trunk.1/src/pages/DemoColorTutorial/index.tsx
deleted file mode 100644
index 714ef07..0000000
--- a/03_source/mobile.trunk.1/src/pages/DemoColorTutorial/index.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-// REQ0119/demo-color-tutorial
-//
-// RULES:
-// T.B.A.
-//
-
-import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
-
-import { cloudOutline, ellipse, searchOutline, square, triangle } from 'ionicons/icons';
-import { Route, Redirect } from 'react-router';
-
-// import Tab1 from './AppPages/Tab1';
-// import Tab2 from './AppPages/Tab2';
-
-import Tab1 from './pages/Tab1';
-import Tab2 from './pages/Tab2';
-import Tab3 from './pages/Tab3';
-
-import './style.scss';
-
-function DemoColorTutorial() {
- return (
- - Explore{' '} - - UI Components - -
-Based on the English language
-There are 171, 146 words in the English language!
-You don't have any favourites yet!
-- Any time you see the heart icon, press it to add the related word to your favourites and - quickly access it from here. -
-Search for a word in the English language
-- This app will give you word meaninigs, phonetics, origin and also an audio clip so you can - hear what it sounds like. -
-
- {word.meanings &&
- word.meanings.map((meaning, index) => {
- return (
-
- {meaning.partOfSpeech}
-
-
- );
- })}
-
-
- no results
- found
-
-
-
-
-
-);
\ No newline at end of file
diff --git a/03_source/mobile.trunk.1/src/pages/DemoDictionaryApp/components/WordMeaning.jsx b/03_source/mobile.trunk.1/src/pages/DemoDictionaryApp/components/WordMeaning.jsx
deleted file mode 100644
index 1f5d3b7..0000000
--- a/03_source/mobile.trunk.1/src/pages/DemoDictionaryApp/components/WordMeaning.jsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { IonBadge } from '@ionic/react';
-
-export const WordMeaning = ({ meaning, index }) => (
- { text }
- 0 ? 'ion-padding-top' : ''}>
-
- {meaning.partOfSpeech}
-
-
- {meaning.definitions.map((definition, index2) => { - return ( -
-);
diff --git a/03_source/mobile.trunk.1/src/pages/DemoDictionaryApp/components/WordModal.jsx b/03_source/mobile.trunk.1/src/pages/DemoDictionaryApp/components/WordModal.jsx
deleted file mode 100644
index 0896a4b..0000000
--- a/03_source/mobile.trunk.1/src/pages/DemoDictionaryApp/components/WordModal.jsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import {
- IonBadge,
- IonButton,
- IonButtons,
- IonCard,
- IonCardContent,
- IonCardHeader,
- IonCardSubtitle,
- IonCardTitle,
- IonCol,
- IonContent,
- IonGrid,
- IonHeader,
- IonIcon,
- IonNote,
- IonPage,
- IonRow,
- IonText,
- IonTitle,
- IonToolbar,
-} from '@ionic/react';
-import { heart, heartOutline, play } from 'ionicons/icons';
-import { useStoreState } from 'pullstate';
-import { WordStore } from '../store';
-import { getFavourites } from '../store/Selectors';
-import { addToFavourites } from '../store/WordStore';
-import { WordCardHeading } from './WordCardHeading';
-import { WordMeaning } from './WordMeaning';
-
-const WordModal = ({ dismiss, word }) => {
- const favourites = useStoreState(WordStore, getFavourites);
- const isFavourite = favourites.includes(word);
- const audio = word.phonetics[0] ? word.phonetics[0].audio : false;
-
- const playAudio = () => {
- const audioElement = new Audio(`https:${audio}`);
- audioElement.play();
- };
-
- return (
- - {meaning.definitions.map((definition, index2) => { - return ( -
0 ? 'ion-padding-top' : ''}> - {index2 + 1}. - {definition.definition} -
- ); - })} -
- {word.meanings &&
- word.meanings.map((meaning, index) => {
- return (
-
-
- {meaning.partOfSpeech}
-
-
-
- );
- })}
-
- Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- addProductToFavourites(e, category.slug, product.id)}
- />
-
- {product.name}
-
-
- {product.price}
-
- addProductToCart(e, category.slug, product.id)}>
-
-
-
- {product.category.name}
-{product.product.name}
-
- {product.product.price}
-
-
- £{total.toFixed(2)}
-
-
-
-
-
- addProductToFavourites(e, category.slug, product.id)}
- />
-
- {product.name}
-
-
- {product.price}
-
- addProductToCart(e, category.slug, product.id)}
- >
-
-
-
- Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {name}
-
- );
-};
-
-export default ExploreContainer;
diff --git a/03_source/mobile.trunk.1/src/pages/DemoFacebookClone/components/Post.tsx b/03_source/mobile.trunk.1/src/pages/DemoFacebookClone/components/Post.tsx
deleted file mode 100644
index 275e4ad..0000000
--- a/03_source/mobile.trunk.1/src/pages/DemoFacebookClone/components/Post.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import {
- IonAvatar,
- IonButton,
- IonCol,
- IonIcon,
- IonImg,
- IonItem,
- IonLabel,
- IonRow,
- IonText,
-} from '@ionic/react';
-import {
- arrowRedoOutline,
- chatboxOutline,
- ellipsisHorizontal,
- globe,
- heart,
- thumbsUp,
- thumbsUpOutline,
-} from 'ionicons/icons';
-import '../pages/Tab2.css';
-import React from 'react';
-
-const Post = (props): React.JSX.Element => {
- const { post } = props;
-
- return (
- - Explore{' '} - - UI Components - -
-
-
-
-
-
-
-
-
-
-
-
-
-
- {post.image &&
- {post.name}
-
- {post.sponsored ? 'Sponsored' : post.time}
-
-
{post.message}
-
-
-
-
- Learn more
-
- )}
-
- ionicframework.com
-Start building apps today!
-
-
-
-
-
-
- {post.sponsored && {post.views} Views
} -
-
- Like
-
-
-
- Comment
-
-
-
- Share
-
-
- {props.message.name}
-This is a test message for a messenger item
-
- {props.message.new_message_count}
- )}
-
- {props.message.last_message_sent} min
- {props.message.new_message_count > 0 && ( -
-
-
*/
\ No newline at end of file
diff --git a/03_source/mobile.trunk.1/src/pages/DemoFacebookClone/pages/Tab2.tsx b/03_source/mobile.trunk.1/src/pages/DemoFacebookClone/pages/Tab2.tsx
deleted file mode 100644
index 9b7f202..0000000
--- a/03_source/mobile.trunk.1/src/pages/DemoFacebookClone/pages/Tab2.tsx
+++ /dev/null
@@ -1,242 +0,0 @@
-import {
- IonAvatar,
- IonButton,
- IonButtons,
- IonCol,
- IonContent,
- IonGrid,
- IonHeader,
- IonIcon,
- IonImg,
- IonInput,
- IonItem,
- IonLabel,
- IonPage,
- IonRouterLink,
- IonRow,
- IonSearchbar,
- IonText,
- IonTitle,
- IonToolbar,
- useIonRouter,
-} from '@ionic/react';
-import {
- searchOutline,
- chatboxOutline,
- playCircleOutline,
- bagOutline,
- homeOutline,
- menuOutline,
- flagOutline,
- notificationsOutline,
- homeSharp,
- home,
- videocam,
- images,
- globe,
- ellipse,
- ellipsisHorizontal,
- thumbsUp,
- heart,
- thumbsUpOutline,
- shareOutline,
- arrowRedoOutline,
- chevronBackOutline,
-} from 'ionicons/icons';
-import ExploreContainer from '../components/ExploreContainer';
-import Post from '../components/Post';
-import { messages, posts } from '../main/messages';
-import './Tab2.css';
-import React from 'react';
-
-const Tab2 = (): React.JSX.Element => {
- const router = useIonRouter();
-
- function handleBackClick() {
- router.goBack();
- }
-
- return (
- ionicbook
- -
-
-
-
- Create
-
- Room -
-
- - Room -
- {messages.map((message, index) => {
- if (index > 1) {
- return (
-
-
-
-
- {message.online && }
-
- );
- }
- })}
-
-
-
-
-
-
-
-
-
-
-
-
-
- {/* */}
- */}
-
-
- Ionic Framework
-
- Sponsored
-
Build cross-platform web native mobile apps with one codebase! 🎉
-
-
-
-
- Learn more
-
-
- ionicframework.com
-Start building apps today!
-
-
-
-
-
-
- 16K Views
-
-
- Like
-
-
-
- Comment
-
-
-
- Share
-
-
- Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {name}
-// -//
- addProductToFavourites(e, category.slug, product.id)}
- />
-
- {product.name}
-
-
- {product.price}
-
- addProductToCart(e, category.slug, product.id)}>
-
-
-
- 
- {product.category.name}
-{product.product.name}
-
- {product.product.price}
-
-
- £{total.toFixed(2)}
-
-
-
-
- 
- Kids eat free on any orders over £20.00
-
- Order for a collection or get a local delivery
-
- addProductToFavourites(e, category.slug, product.id)}
- />
-
- {product.name}
-
-
- {product.price}
-
- addProductToCart(e, category.slug, product.id)}
- >
-
-
-
- Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {name}
-
- );
-};
-
-export default ExploreContainer;
diff --git a/03_source/mobile.trunk.1/src/pages/DemoFloatingTabs/index.tsx b/03_source/mobile.trunk.1/src/pages/DemoFloatingTabs/index.tsx
deleted file mode 100644
index 71a067d..0000000
--- a/03_source/mobile.trunk.1/src/pages/DemoFloatingTabs/index.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { IonIcon, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
-
-import { cogOutline, homeOutline, listOutline } from 'ionicons/icons';
-import { Route, Redirect } from 'react-router';
-
-import Tab1 from './pages/Tab1';
-import Tab2 from './pages/Tab2';
-import Tab3 from './pages/Tab3';
-
-import './theme/style.scss';
-import './theme/floating-tab-bar.scss';
-
-function DemoFloatingTabs() {
- return (
- - Explore{' '} - - UI Components - -
-Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {name}
-
- );
-};
-
-export default ExploreContainer;
diff --git a/03_source/mobile.trunk.1/src/pages/DemoInstagramClone/components/Feed.module.scss b/03_source/mobile.trunk.1/src/pages/DemoInstagramClone/components/Feed.module.scss
deleted file mode 100644
index 4854d16..0000000
--- a/03_source/mobile.trunk.1/src/pages/DemoInstagramClone/components/Feed.module.scss
+++ /dev/null
@@ -1,221 +0,0 @@
-.postsContainer {
-
- margin-top: 1.5rem;
- margin-bottom: 1.5rem;
-}
-
-.postContainer {
-
- display: flex;
- flex-direction: column;
- margin-top: 1rem;
-}
-
-.postProfile {
-
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- align-content: center;
- padding-right: 0.75rem;
- padding-left: 0.75rem;
-}
-
-.postProfile ion-router-link {
-
- display: flex !important;
- flex-direction: row !important;
-}
-
-.postProfileInfo ion-avatar {
-
- height: 2.2rem;
- width: 2.2rem;
-}
-
-.postProfileInfo p {
-
- margin: 0;
- padding: 0;
- margin-left: 0.5rem;
- font-weight: 500;
- font-size: 0.9rem;
- color: black;
-}
-
-.postProfileInfo {
-
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- align-content: center;
-}
-
-.postImage {
-
- border-top: 1px solid rgb(216, 216, 216);
- margin-top: 0.5rem;
- height: 20rem;
- width: 100%;
-}
-
-.postImageLike {
-
- font-size: 10rem;
- color: rgb(231, 231, 231);
- position: absolute;
- left: 32vmin;
- margin-top: 20vmin;
- display: none;
-}
-
-.postActionsContainer {
-
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- align-content: center;
- padding-right: 0.75rem;
- padding-left: 0.75rem;
- margin-top: 0.5rem;
-}
-
-.postActions {
-
- display: flex;
- flex-direction: row;
- justify-content: space-between;
-}
-
-.postActions ion-icon,
-.postBookmark ion-icon {
-
- font-size: 1.5rem;
-}
-
-.postActions ion-icon:not(:first-child) {
-
- padding-left: 0.7rem;
-}
-
-.postLikesContainer {
-
- padding-left: 0.75rem;
- margin-top: 0.5rem;
-}
-
-.postLikesContainer p {
-
- margin: 0;
- padding: 0;
- font-weight: 200 !important;
- font-size: 0.8rem;
-}
-
-.postLikedName {
-
- font-weight: 600;
-}
-
-.postCaption {
-
- padding-left: 0.75rem;
- padding-right: 0.75rem;
- margin-top: 0.3rem;
-}
-
-.postCaption p {
-
- margin: 0;
- padding: 0;
- font-weight: 200 !important;
- font-size: 0.8rem;
-}
-
-.postName {
-
- color: black !important;
- font-weight: 600 !important;
-}
-
-.postName ion-router-link {
-
- color: black;
-}
-
-.postComments {
-
- padding-left: 0.75rem;
- padding-right: 0.75rem;
- margin-top: 0.5rem;
-}
-
-.postComments p {
-
- margin: 0;
- padding: 0;
- color:rgb(175, 175, 175);
- font-size: 0.8rem;
-}
-
-.postAddComment {
-
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- align-content: center;
- padding-left: 0.75rem;
- padding-right: 0.75rem;
-}
-
-.postAddCommentProfile {
-
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-content: center;
- align-items: center;
- margin-top: 0.5rem;
-}
-
-.postAddCommentProfile ion-avatar {
-
- height: 1.9rem;
- width: 1.9rem;
-}
-
-.postAddCommentProfile p {
-
- padding-left: 0.75rem;
- font-size: 0.8rem;
- color: rgb(175, 175, 175);
-}
-
-.postAddCommentActions {
-
-
-}
-
-.postAddCommentActions ion-icon {
-
- padding-left: 0.5rem;
-}
-
-.postTime {
-
- padding-left: 0.75rem;
- padding-right: 0.75rem;
- margin-top: 0rem;
-}
-
-.postTime p {
-
- margin: 0;
- padding: 0;
- color: rgb(175, 175, 175);
- font-size: 0.6rem;
-}
\ No newline at end of file
diff --git a/03_source/mobile.trunk.1/src/pages/DemoInstagramClone/components/Feed.tsx b/03_source/mobile.trunk.1/src/pages/DemoInstagramClone/components/Feed.tsx
deleted file mode 100644
index dbcfeff..0000000
--- a/03_source/mobile.trunk.1/src/pages/DemoInstagramClone/components/Feed.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import { IonAvatar, IonIcon, IonRouterLink } from '@ionic/react';
-import {
- addCircleOutline,
- bookmarkOutline,
- chatbubbleOutline,
- ellipsisVertical,
- heart,
- heartOutline,
- paperPlaneOutline,
-} from 'ionicons/icons';
-import { likePost } from '../pages/PostStore';
-import { ProfilesStore } from '../pages/ProfilesStore';
-import { ProfileStore } from '../pages/ProfileStore';
-import styles from './Feed.module.scss';
-
-const Feed = (props): React.JSX.Element => {
- const { posts } = props;
- const profile = ProfileStore.useState((s) => s.profile);
- const profiles = ProfilesStore.useState((s) => s.profiles);
-
- const addLike = (event, postID, liked) => {
- likePost(event, postID, liked);
- };
-
- return (
- - Explore{' '} - - UI Components - -
-
- {posts.map((post, index) => {
- const postProfile = profiles.filter((p) => p.id === post.profile_id)[0];
-
- return (
-
- );
-};
-
-export default Feed;
diff --git a/03_source/mobile.trunk.1/src/pages/DemoInstagramClone/components/Stories.module.scss b/03_source/mobile.trunk.1/src/pages/DemoInstagramClone/components/Stories.module.scss
deleted file mode 100644
index aeb99cb..0000000
--- a/03_source/mobile.trunk.1/src/pages/DemoInstagramClone/components/Stories.module.scss
+++ /dev/null
@@ -1,98 +0,0 @@
-$border: linear-gradient(to bottom, #d82b7e, #f57939);
-
-.stories {
-
- height: fit-content;
- margin-top: -0.7rem;
-}
-
-.storiesContainer {
-
- overflow-x: scroll;
- overflow-y: hidden;
- -webkit-overflow-scrolling: touch;
- display: flex;
- flex-direction: row;
- width: 100%;
-}
-
-.storiesContainer::-webkit-scrollbar {
-
- display: none;
-}
-
-.story,
-.yourStory {
-
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- align-content: center;
- margin: 0 auto;
- width: 4rem !important;
- margin-left: 1rem;
-}
-
-.story:first-child,
-.yourStory:first-child {
-
- margin-left: 0.75rem;
-}
-
-.story p,
-.yourStory p {
-
- text-align: center;
- margin: 0;
- padding: 0;
- margin-top: 0.2rem;
- color: rgb(95, 95, 95);
- font-size: 0.7rem;
- font-weight: 400;
- width: 120%;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- position: relative;
- margin-top: 5rem;
-}
-
-.story img,
-.yourStory img {
-
- height: 3.5rem !important;
- width: 3.5rem !important;
- position: absolute;
- border-radius: 500px;
- background: $border;
- padding: 0.1rem;
-}
-
-.yourStory img {
-
- background:rgb(214, 214, 214);
-}
-
-.storyAdd {
-
- position: absolute;
- color: white;
- background-color: var(--ion-color-primary);
- width: 1rem;
- height: 1rem;
- text-align: center;
- margin: 0 auto;
- display: flex;
- flex-direction: row;
- align-items: center;
- align-content: center;
- justify-content: center;
- border-radius: 500px;
- border: 2px solid white;
-
- bottom: 20px;
- right: 0;
- padding: 0.5rem;
- font-size: 0.9rem;
-}
\ No newline at end of file
diff --git a/03_source/mobile.trunk.1/src/pages/DemoInstagramClone/components/Stories.tsx b/03_source/mobile.trunk.1/src/pages/DemoInstagramClone/components/Stories.tsx
deleted file mode 100644
index c902b30..0000000
--- a/03_source/mobile.trunk.1/src/pages/DemoInstagramClone/components/Stories.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { IonCol, IonRouterLink, IonRow } from '@ionic/react';
-import styles from './Stories.module.scss';
-
-const Stories = (props): React.JSX.Element => {
- const { profiles } = props;
-
- return (
-
-
- );
- })}
-
-
-
-
-
-
- 
-
-
-
-
-
-
-
- {postProfile.username}
-
-
-
-
-
-
-
-
-
- addLike(e, post.id, post.liked)}
- />
-
-
-
-
-
-
-
- - Liked by alanmontgomery and{' '} - 2 others -
-
-
-
-
-
-
-
-
- View all {post.comments.length} comments
-
-
-
-
-
- 
-
-
-
- Add a comment...
-
-
-
-
- {post.time}
-
- {profiles.map((story, index) => {
- return (
-
- 
- {index === 0 &&
-
-
- );
- })}
-
- +
}
-
- {index === 0 ? 'Your story' : story.username}
-
-
- {profile.username}
-
- {profile.firstname} {profile.surname} -
-{profile.title}
-{profile.bio}
- - {profile.link} - -
-
- {profile.username}
-
- {profile.username} -
- - )} -- {profile.firstname} {profile.surname} -
-{profile.title}
-{profile.bio}
- - {profile.link} - -
- Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {item.name}
-{item.summary}
-
- {item.labels.map((label, index2) => {
- return (
-
- {label}
-
-
- );
- })}
-
-
-
- {id !== 1 && moveToggled && (
-
- handleMove(e, 'Left', id, id - 1, item.id)}
- >
-
- )}
-
- {id !== 3 && moveToggled && (
- handleMove(e, 'Right', id, id + 1, item.id)}
- >
-
- )}
-
-
-
-
- {item.name}
-{item.summary}
-
- Setting
-
- - (IonCard problem) -
-
-
-
-
- Logout
-
-
- Unable to receive notifications after logging out
-
-
-
-
- Cancel
-
-
- Logout
-
-
- Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ${coffee.price}
-
-
-
- {offer.title}
-
- {offer.description}
-{coffee.description}
- -
-
- {coffee.name}
-
- ${coffee.price}
-
-
- ${total.toFixed(2)}
-
-
-
-
- router.goBack()}
- >
- 0 ? 'yellow-icon' : 'gray-icon'} />
-
-
-
-
- 
-
-
- Find the best coffee near you
-Popular
- -Special Offers
- router.goBack()}>
-
- addCoffeeToFavourites(e, coffee.id)}
- >
-
- {coffee.name}
-{coffee.description}
-
- addCoffeeToCart(e, coffee.id)}
- disabled={!selectedSize}
- expand="block"
- color="main"
- >
- Add to cart
-
-
-
-
- Price
-
- ${selectedSize ? getPrice() : '0.00'}
-
-
- router.goBack()}>
-
- router.push('/tabs/cart')}
- >
- 0 ? 'yellow-icon' : 'gray-icon'} />
-
- View Full Range
-
- {name}
-
- );
-};
-
-export default ExploreContainer;
diff --git a/03_source/mobile.trunk.1/src/pages/DemoPinterestFloatingTabBar/custom-tab-bar.scss b/03_source/mobile.trunk.1/src/pages/DemoPinterestFloatingTabBar/custom-tab-bar.scss
deleted file mode 100644
index 1aa74fb..0000000
--- a/03_source/mobile.trunk.1/src/pages/DemoPinterestFloatingTabBar/custom-tab-bar.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-.custom-tab-bar {
- * {
- /* --ion-background-color: white; */
- --ion-tab-bar-color: var(--tab-color);
- --ion-tab-bar-color-selected: var(--tab-color-selected);
- }
-
- ion-tab-bar {
- --background: var(--tab-background);
- box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.4);
- border-radius: 50px !important;
-
- height: 50px;
- width: 50%;
- padding-top: 5px;
- padding-bottom: 5px;
- padding-left: 10px;
- padding-right: 10px;
-
- bottom: 20px;
- position: relative;
- margin: 0 auto !important;
- border-top: none;
- }
-
- ion-tab-button {
- border-radius: 16px !important;
- }
-}
diff --git a/03_source/mobile.trunk.1/src/pages/DemoPinterestFloatingTabBar/index.tsx b/03_source/mobile.trunk.1/src/pages/DemoPinterestFloatingTabBar/index.tsx
deleted file mode 100644
index 6ccb3e7..0000000
--- a/03_source/mobile.trunk.1/src/pages/DemoPinterestFloatingTabBar/index.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
-
-import { chatbubble, cloudOutline, home, person, search, searchOutline } from 'ionicons/icons';
-import { Route, Redirect } from 'react-router';
-
-import Tab1 from './AppPages/Tab1';
-import Tab2 from './AppPages/Tab2';
-import Tab3 from './AppPages/Tab3';
-import Tab4 from './AppPages/Tab4';
-
-import './style.scss';
-import './custom-tab-bar.scss';
-
-function DemoPinterestFloatingTabBar() {
- return (
- - Explore{' '} - - UI Components - -
-Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {props.count}
-{props.title}
-
-
-
-
-
-
-
-
-
-);
diff --git a/03_source/mobile.trunk.1/src/pages/DemoProfileExample/index.tsx b/03_source/mobile.trunk.1/src/pages/DemoProfileExample/index.tsx
deleted file mode 100644
index 392e5a6..0000000
--- a/03_source/mobile.trunk.1/src/pages/DemoProfileExample/index.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { IonRouterOutlet, IonTabs } from '@ionic/react';
-
-import { Route, Redirect } from 'react-router';
-
-// import Tab1 from './AppPages/Tab1';
-// import Tab2 from './AppPages/Tab2';
-
-import './style.scss';
-import Home from './pages/Home';
-
-function DemoProfileExample(): React.JSX.Element {
- return (
-
-
-
- {props.post.date}
-@93alan
-{props.post.text}
- -
-
-
-
- {props.post.comments}
-
-
-
- {props.post.likes}
-
-
-
-
-
-
-
- Posts by @93alan
-Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {person.name}
-{person.title}
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-It looks like you don't have any QR codes stored.
-
-
-
- Click the
{code.text ? code.text : code}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {quote.text}
-- {quote.author}
-You haven't saved any bookmarks yet.
-{quote.text}
-{quote.author}
--
Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {!icon && 'Add to cart'}
- {icon &&
-
-
-
-
- );
-};
-
-export default AddToCartButton;
diff --git a/03_source/mobile.trunk.1/src/pages/DemoReactAddToCart/components/Product.module.css b/03_source/mobile.trunk.1/src/pages/DemoReactAddToCart/components/Product.module.css
deleted file mode 100644
index fa0f815..0000000
--- a/03_source/mobile.trunk.1/src/pages/DemoReactAddToCart/components/Product.module.css
+++ /dev/null
@@ -1,19 +0,0 @@
-.priceContainer {
-
- display: flex;
- flex-direction: row;
- align-content: center;
- justify-content: space-between;
- align-items: center;
-}
-
-.price {
-
- margin-top: 0.7rem;
- border: 1px solid var(--ion-color-primary);
- color: var(--ion-color-primary);
- width: fit-content;
- padding: 1rem;
- border-radius: 10px;
- font-weight: 600;
-}
\ No newline at end of file
diff --git a/03_source/mobile.trunk.1/src/pages/DemoReactAddToCart/components/Product.tsx b/03_source/mobile.trunk.1/src/pages/DemoReactAddToCart/components/Product.tsx
deleted file mode 100644
index 272efcb..0000000
--- a/03_source/mobile.trunk.1/src/pages/DemoReactAddToCart/components/Product.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import {
- IonCard,
- IonCardContent,
- IonCardHeader,
- IonCardSubtitle,
- IonCardTitle,
- IonCol,
- IonGrid,
- IonRow,
- IonText,
-} from '@ionic/react';
-import AddToCartButton from './AddToCartButton';
-
-import styles from './Product.module.css';
-
-const Product = ({ product }): React.JSX.Element => {
- const handleAdd = (product) => {
- console.log(`Product added: ${product.name}`);
- console.log({ product });
-
- // Do something
- // Update Main Cart
- // Global State Stuff
- // API Call
- // etc etc
- };
-
- return (
- {feature}
; - })} -{product.price}
- Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {showTitle &&
- {showTitle}
} -{sumHistory}
-- {sum.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')} -
-Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Ready to create an app?
-
- );
-};
-
-export default ExploreContainer;
diff --git a/03_source/mobile.trunk.1/src/pages/DemoReactDrawingCanvas/index.tsx b/03_source/mobile.trunk.1/src/pages/DemoReactDrawingCanvas/index.tsx
deleted file mode 100644
index cb105e1..0000000
--- a/03_source/mobile.trunk.1/src/pages/DemoReactDrawingCanvas/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { IonRouterOutlet, IonTabs } from '@ionic/react';
-
-import { Route, Redirect } from 'react-router';
-
-import Home from './pages/Home';
-
-function DemoReactDrawingCanvas() {
- return (
- - Start with Ionic{' '} - - UI Components - -
-
-
-
-
- setShowColorPicker(!showColorPicker)}
- >
-
-
- {showColorPicker && (
-
-
- {!showColorPicker && (
- <>
-
-
- Size
- setBrushSize(parseInt(e.target.value))}
- />
-
-
-
-
- canvasRef.undo()}>
-
-
-
-
- canvasRef.clear()}>
-
-
-
- )}
-
-
-
- Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Ready to create an app?
-
- );
-};
-
-export default ExploreContainer;
diff --git a/03_source/mobile.trunk.1/src/pages/DemoReactItemList/index.tsx b/03_source/mobile.trunk.1/src/pages/DemoReactItemList/index.tsx
deleted file mode 100644
index 3fabe7c..0000000
--- a/03_source/mobile.trunk.1/src/pages/DemoReactItemList/index.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { IonRouterOutlet, IonTabs } from '@ionic/react';
-
-import { Route, Redirect } from 'react-router';
-
-import './theme/variables.scss';
-import Home from './pages/Home';
-import Movies from './pages/Movies';
-
-function DemoReactItemList() {
- return (
- - Start with Ionic{' '} - - UI Components - -
-
-
- {results.length} {results.legnth === 1 ? 'employee' : 'employees'} found
-
- search(e)}
- onKeyPress={(e) => search(e)}
- placeholder="Search..."
- icon={search}
- slot="end"
- />
-
-
- {results.map((employee, index) => {
- return (
-
- 
-
-
-
-
- remove(employee.id)}>
-
-
- );
- })}
-
-
- {employee.name}
-{employee.title}
-
-
- {totalResults} {totalResults === 1 ? 'movie' : 'movies'} found
-
- search(e)}
- onKeyPress={(e) => search(e)}
- placeholder="Search..."
- icon={search}
- slot="end"
- />
-
- {movie.title}
-{movie.overview}
-Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {name}
-
- );
-};
-
-export default ExploreContainer;
diff --git a/03_source/mobile.trunk.1/src/pages/DemoReactLifecycles/components/Menu.css b/03_source/mobile.trunk.1/src/pages/DemoReactLifecycles/components/Menu.css
deleted file mode 100644
index 0ca47a2..0000000
--- a/03_source/mobile.trunk.1/src/pages/DemoReactLifecycles/components/Menu.css
+++ /dev/null
@@ -1,113 +0,0 @@
-ion-menu ion-content {
- --background: var(--ion-item-background, var(--ion-background-color, #fff));
-}
-
-ion-menu.md ion-content {
- --padding-start: 8px;
- --padding-end: 8px;
- --padding-top: 20px;
- --padding-bottom: 20px;
-}
-
-ion-menu.md ion-list {
- padding: 20px 0;
-}
-
-ion-menu.md ion-note {
- margin-bottom: 30px;
-}
-
-ion-menu.md ion-list-header, ion-menu.md ion-note {
- padding-left: 10px;
-}
-
-ion-menu.md ion-list#inbox-list {
- border-bottom: 1px solid var(--ion-color-step-150, #d7d8da);
-}
-
-ion-menu.md ion-list#inbox-list ion-list-header {
- font-size: 22px;
- font-weight: 600;
- min-height: 20px;
-}
-
-ion-menu.md ion-list#labels-list ion-list-header {
- font-size: 16px;
- margin-bottom: 18px;
- color: #757575;
- min-height: 26px;
-}
-
-ion-menu.md ion-item {
- --padding-start: 10px;
- --padding-end: 10px;
- border-radius: 4px;
-}
-
-ion-menu.md ion-item.selected {
- --background: rgba(var(--ion-color-primary-rgb), 0.14);
-}
-
-ion-menu.md ion-item.selected ion-icon {
- color: var(--ion-color-primary);
-}
-
-ion-menu.md ion-item ion-icon {
- color: #616e7e;
-}
-
-ion-menu.md ion-item ion-label {
- font-weight: 500;
-}
-
-ion-menu.ios ion-content {
- --padding-bottom: 20px;
-}
-
-ion-menu.ios ion-list {
- padding: 20px 0 0 0;
-}
-
-ion-menu.ios ion-note {
- line-height: 24px;
- margin-bottom: 20px;
-}
-
-ion-menu.ios ion-item {
- --padding-start: 16px;
- --padding-end: 16px;
- --min-height: 50px;
-}
-
-ion-menu.ios ion-item ion-icon {
- font-size: 24px;
- color: #73849a;
-}
-
-ion-menu.ios ion-item .selected ion-icon {
- color: var(--ion-color-primary);
-}
-
-ion-menu.ios ion-list#labels-list ion-list-header {
- margin-bottom: 8px;
-}
-
-ion-menu.ios ion-list-header,
-ion-menu.ios ion-note {
- padding-left: 16px;
- padding-right: 16px;
-}
-
-ion-menu.ios ion-note {
- margin-bottom: 8px;
-}
-
-ion-note {
- display: inline-block;
- font-size: 16px;
- color: var(--ion-color-medium-shade);
-}
-
-ion-item.selected {
- --color: var(--ion-color-primary);
-}
\ No newline at end of file
diff --git a/03_source/mobile.trunk.1/src/pages/DemoReactLifecycles/components/Menu.tsx b/03_source/mobile.trunk.1/src/pages/DemoReactLifecycles/components/Menu.tsx
deleted file mode 100644
index 7024a26..0000000
--- a/03_source/mobile.trunk.1/src/pages/DemoReactLifecycles/components/Menu.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import {
- IonContent,
- IonIcon,
- IonItem,
- IonLabel,
- IonList,
- IonListHeader,
- IonMenu,
- IonMenuToggle,
- IonNote,
-} from '@ionic/react';
-
-import { useLocation } from 'react-router-dom';
-import { archiveOutline, archiveSharp, bookmarkOutline, heartOutline, heartSharp, mailOutline, mailSharp, paperPlaneOutline, paperPlaneSharp, trashOutline, trashSharp, warningOutline, warningSharp } from 'ionicons/icons';
-import './Menu.css';
-
-interface AppPage {
- url: string;
- iosIcon: string;
- mdIcon: string;
- title: string;
-}
-
-const appPages: AppPage[] = [
- {
- title: 'Inbox',
- url: '/page/Inbox',
- iosIcon: mailOutline,
- mdIcon: mailSharp
- },
- {
- title: 'Outbox',
- url: '/page/Outbox',
- iosIcon: paperPlaneOutline,
- mdIcon: paperPlaneSharp
- },
- {
- title: 'Favorites',
- url: '/page/Favorites',
- iosIcon: heartOutline,
- mdIcon: heartSharp
- },
- {
- title: 'Archived',
- url: '/page/Archived',
- iosIcon: archiveOutline,
- mdIcon: archiveSharp
- },
- {
- title: 'Trash',
- url: '/page/Trash',
- iosIcon: trashOutline,
- mdIcon: trashSharp
- },
- {
- title: 'Spam',
- url: '/page/Spam',
- iosIcon: warningOutline,
- mdIcon: warningSharp
- }
-];
-
-const labels = ['Family', 'Friends', 'Notes', 'Work', 'Travel', 'Reminders'];
-
-const Menu: React.FC = () => {
- const location = useLocation();
-
- return (
- Explore UI Components
-Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {props.message}
-
-
- {field.label}
- {error &&
-
- );
-};
-
-export default CustomField;
diff --git a/03_source/mobile.trunk.1/src/pages/DemoReactLogin/components/Wave.tsx b/03_source/mobile.trunk.1/src/pages/DemoReactLogin/components/Wave.tsx
deleted file mode 100644
index 6e7c821..0000000
--- a/03_source/mobile.trunk.1/src/pages/DemoReactLogin/components/Wave.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-export const Wave = (): React.JSX.Element => (
-
-);
diff --git a/03_source/mobile.trunk.1/src/pages/DemoReactLogin/data/fields.tsx b/03_source/mobile.trunk.1/src/pages/DemoReactLogin/data/fields.tsx
deleted file mode 100644
index a5a3399..0000000
--- a/03_source/mobile.trunk.1/src/pages/DemoReactLogin/data/fields.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { useFormInput } from './utils';
-
-export const useSignupFields = () => {
- return [
- {
- id: 'name',
- label: 'Name',
- required: true,
- input: {
- props: {
- type: 'text',
- placeholder: 'Joe Bloggs',
- },
- state: useFormInput(''),
- },
- },
- {
- id: 'email',
- label: 'Email',
- required: true,
- input: {
- props: {
- type: 'email',
- placeholder: 'joe@bloggs.com',
- },
- state: useFormInput(''),
- },
- },
- {
- id: 'password',
- label: 'Password',
- required: true,
- input: {
- props: {
- type: 'password',
- placeholder: '*********',
- },
- state: useFormInput(''),
- },
- },
- ];
-};
-
-export const useLoginFields = () => {
- return [
- {
- id: 'email',
- label: 'Email',
- required: true,
- input: {
- props: {
- type: 'email',
- placeholder: 'joe@bloggs.com',
- },
- state: useFormInput(''),
- },
- },
- {
- id: 'password',
- label: 'Password',
- required: true,
- input: {
- props: {
- type: 'password',
- placeholder: '*******',
- },
- state: useFormInput(''),
- },
- },
- ];
-};
diff --git a/03_source/mobile.trunk.1/src/pages/DemoReactLogin/data/utils.tsx b/03_source/mobile.trunk.1/src/pages/DemoReactLogin/data/utils.tsx
deleted file mode 100644
index 0388ed6..0000000
--- a/03_source/mobile.trunk.1/src/pages/DemoReactLogin/data/utils.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { useState } from 'react';
-
-export const useFormInput = (initialValue = '') => {
- const [value, setValue] = useState(initialValue);
-
- const handleChange = async (e) => {
- const tempValue = await e.currentTarget.value;
- setValue(tempValue);
- };
-
- return {
- value,
- reset: (newValue) => setValue(newValue),
- onIonChange: handleChange,
- onKeyUp: handleChange,
- };
-};
-
-export const validateForm = (fields) => {
- let errors = [];
-
- fields.forEach((field) => {
- if (field.required) {
- const fieldValue = field.input.state.value;
-
- if (fieldValue === '') {
- const error = {
- id: field.id,
- message: `Please check your ${field.id}`,
- };
-
- errors.push(error);
- }
- }
- });
-
- return errors;
-};
diff --git a/03_source/mobile.trunk.1/src/pages/DemoReactLogin/index.tsx b/03_source/mobile.trunk.1/src/pages/DemoReactLogin/index.tsx
deleted file mode 100644
index 3c4c4dc..0000000
--- a/03_source/mobile.trunk.1/src/pages/DemoReactLogin/index.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { IonRouterOutlet, IonTabs } from '@ionic/react';
-
-import { Route, Redirect } from 'react-router';
-
-import './theme/variables.scss';
-
-import Home from './pages/Home';
-import Login from './pages/Login';
-import Signup from './pages/Signup';
-
-function DemoReactLogin() {
- return (
- {errorMessage}
} -
-
-
-
-
- Join millions of other people discovering their creative side
-
-
-
-
-
-
-
-
- Get started →
-
-
-
-
-
-
- Welcome back, hope you're doing well
-Lets get to know each other
-Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {details.name}
-
-
- {profile.name}
-
- {profile.bio}
-
- {character.name}
-
-
- {character.name}
-
- {character.description}
-
- {character.comics.available}
- comics
-
-
- {character.stories.available}
- stories
-
-
- {character.series.available}
- series
-
-
- {comic.name}
-
- Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-export default connectInfiniteHits(CustomInfiniteHits);
diff --git a/03_source/mobile.trunk.1/src/pages/DemoReactMovieAppWithAlgolia/components/CustomInfiniteHits.tsx b/03_source/mobile.trunk.1/src/pages/DemoReactMovieAppWithAlgolia/components/CustomInfiniteHits.tsx
deleted file mode 100644
index e0e5f2c..0000000
--- a/03_source/mobile.trunk.1/src/pages/DemoReactMovieAppWithAlgolia/components/CustomInfiniteHits.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import {
- IonCardSubtitle,
- IonCardTitle,
- IonCol,
- IonInfiniteScroll,
- IonInfiniteScrollContent,
- IonList,
- IonRow,
-} from '@ionic/react';
-import { connectInfiniteHits } from 'react-instantsearch-core';
-import CustomSearchHit from './CustomSearchHit';
-
-const CustomInfiniteHits = ({ hits, hasMore, refineNext }): React.JSX.Element => {
- const getMore = (e, refine) => {
- refine();
- e.target.complete();
- };
-
- return (
-
-
- {hits.map((hit) => (
-
- No results found
- Try something else
-
- )}
-
-
- getMore(e, refineNext)}>
-
-
-
-
-
-
- );
-};
-
-export default connectInfiniteHits(CustomInfiniteHits);
diff --git a/03_source/mobile.trunk.1/src/pages/DemoReactMovieAppWithAlgolia/components/CustomSearchHit.js b/03_source/mobile.trunk.1/src/pages/DemoReactMovieAppWithAlgolia/components/CustomSearchHit.js
deleted file mode 100644
index 4c76d2f..0000000
--- a/03_source/mobile.trunk.1/src/pages/DemoReactMovieAppWithAlgolia/components/CustomSearchHit.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { IonCol, IonRouterLink } from '@ionic/react';
-import { Link } from 'react-router-dom';
-import styles from '../pages/Movies.module.scss';
-
-const CustomSearchHit = ({ hit }) => {
- // Any movies without an image, lets just exclude them
- // So the UI looks nicer.
- // When I scraped the data, I put a placeholder URL image in
- // But after more thought, it looks cleaner without including these.
- if (
- hit &&
- hit.image !== 'https://critics.io/img/movies/poster-placeholder.png' &&
- hit.backdrop_path !== null
- ) {
- return (
-
-
- {hits.map((hit) => (
-
- No results found
- Try something else
-
- )}
-
-
- getMore(e, refineNext)}>
-
-
-
- 
-
-
- {hit.title}
-
-
-
-
- {hit.title}
-- {movie.overview - ? movie.overview - : `No overview to show unfortunately. Try doing a google search for '${movie.title}.`} -
-- {movie.overview - ? movie.overview - : `No overview to show unfortunately. Try doing a google search for '${movie.title}.`} -
-
- Movie List
- with algolia search
- addToHomeScreen()}
- >
-
-
-
- Movie List
- with algolia search
- addToHomeScreen()}
- >
-
-
- Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Ready to create an app?
-
- );
-};
-
-export default ExploreContainer;
diff --git a/03_source/mobile.trunk.1/src/pages/DemoReactNotes/index.tsx b/03_source/mobile.trunk.1/src/pages/DemoReactNotes/index.tsx
deleted file mode 100644
index 8891e53..0000000
--- a/03_source/mobile.trunk.1/src/pages/DemoReactNotes/index.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { IonRouterOutlet, IonTabs } from '@ionic/react';
-
-import { Route, Redirect } from 'react-router';
-
-// import Tab1 from './AppPages/Tab1';
-// import Tab2 from './AppPages/Tab2';
-
-import './theme/variables.scss';
-import Home from './pages/Home';
-import Add from './pages/Add';
-
-function DemoReactNotes() {
- return (
- - Start with Ionic{' '} - - UI Components - -
-Add a note
-Hello, Alan!
-
-
- - {noteCount} {noteCount === 1 ? 'note' : 'notes'}{' '} -
-
-
- {category.name}
-
- {notes.map((note, index) => {
- return (
-
-
-
- markNote(note.id)}
- />
-
-
-
- );
- })}
-
- - {note.note} -
-Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {title}
-{text}
- - {mainSlide && ( -- In Ionic React 5.6, the team packaged up a new set of hooks for controlling overlay - components that they thought we might like. What is an overlay you ask? It’s the - term that Ionic give components that display over your current content, such as - alerts, modals, toasts, etc. -
--
- All of the code is taken from the Ionic Framework docs. You can find the blog post - outlining these new overlay hooks{' '} - - here. - -
--
Check out the samples by navigating to a respective one in the side menu.
-
-
- Count: {count}
-
- onIncrement()}>
- Increment Count
-
- onDismiss()}>
- Close
-
-
- );
-
- const [count, setCount] = useState(0);
-
- const handleIncrement = () => {
- setCount(count + 1);
- };
-
- const handleDismiss = () => {
- dismiss();
- };
-
- const [present, dismiss] = useIonModal(Body, {
- count,
- onDismiss: handleDismiss,
- onIncrement: handleIncrement,
- });
-
- return (
- Count: {count}
- Selected Value: {value}
}
- - In Ionic React 5.6, the team packaged up a new set of hooks for controlling overlay - components that they thought we might like. What is an overlay you ask? It’s the - term that Ionic give components that display over your current content, such as - alerts, modals, toasts, etc. -
--
- All of the code is taken from the Ionic Framework docs. You can find the blog post - outlining these new overlay hooks{' '} - - here. - -
--
Check out the samples by navigating to a respective one in the side menu.
-
-
- Count: {count}
-
- onIncrement()}>
- Increment Count
-
- onDismiss()}>
- Close
-
-
- );
-
- const [count, setCount] = useState(0);
-
- const handleIncrement = () => {
- setCount(count + 1);
- };
-
- const handleDismiss = () => {
- dismiss();
- };
-
- const [present, dismiss] = useIonModal(Body, {
- count,
- onDismiss: handleDismiss,
- onIncrement: handleIncrement,
- });
-
- return (
- Count: {count}
- Selected Value: {value}
}
- There are currenty no answers added for this poll.
-Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -{poll.totalVotes} votes already
-- {poll.voted - ? 'You have voted on this poll' - : "You haven't voted on this poll"} -
-{poll.totalVotes} votes already
-
- {poll.answers.map((answer, index) => {
- const answerPercentage = getAnswerPercentage(poll.totalVotes, answer.votes);
-
- return (
-
-
- {!poll.voted && (
- (answerRefs.current[index] = ref)}
- expand="block"
- fill={answer.voted ? 'solid' : 'outline'}
- style={answer.voted ? colors.votedButtonStyle : colors.notVotedbuttonStyle}
- onClick={() => vote(answer.id)}
- >
- {answer.answer}
- {poll.voted && ` (${answerPercentage}%)`}
-
- )}
-
- {poll.voted && (
-
-
- );
- })}
-
-
-
-
- )}
- - {answer.answer} ({answerPercentage})% -
- {showVotes && ( -- {answer.votes} of {poll.totalVotes} total votes -
- )} -Option {index + 1}
-Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 
- Alan Montgomery
-Mobile Team Lead
-- I love posting content related to Ionic React! Make sure to check out the - Ionic React Hub! -
-Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {quote.text}
-{quote.author}
-{quote.text}
-- {quote.author}
-You haven't saved any bookmarks yet.
-
- 
-
- - {capitalize(category)} -
-
- 
-
- {capitalize(product)}
-{product.title}
-{product.price}
-No favourites yet
-
- Add some by clicking the
-
- Filter
-
- {product.title}
-{product.price}
-{cart.length} products in your cart
-Review products and checkout
-{item.title}
-{item.price}
-Total
-£{totalPrice.toFixed(2)}
-
-
-
-
- shop
- {category ? category : 'Favourite'}
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elit felis, molestie id
- venenatis at, commodo ac tortor. Pellentesque tempus aliquet purus, sed vulputate elit
- tempus ut.
-
-
-
- Product Description
-Product Specifications
-{label}
-{cartCount}
- Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {cart.length} products in your cart
-Review products and checkout
-{item.title}
-{item.price}
-Total
-£{totalPrice.toFixed(2)}
-
-
-
-
- shop
- {category ? category : 'Favourite'}
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elit felis, molestie id
- venenatis at, commodo ac tortor. Pellentesque tempus aliquet purus, sed vulputate elit
- tempus ut.
-
-
-
- Product Description
-Product Specifications
-{label}
-
-
-
- {capitalize(category)}
-
-
-
- {capitalize(product)}
-{product.title}
-{product.price}
-No favourites yet
-
- Add some by clicking the
-
- Filter
-
- {product.title}
-{product.price}
-
- {name}
-
- );
-};
-
-export default ExploreContainer;
diff --git a/03_source/mobile.trunk.1/src/pages/DemoReactSwitchTabs/TestComponents/SwitchTabBar.tsx b/03_source/mobile.trunk.1/src/pages/DemoReactSwitchTabs/TestComponents/SwitchTabBar.tsx
deleted file mode 100644
index 08fdc46..0000000
--- a/03_source/mobile.trunk.1/src/pages/DemoReactSwitchTabs/TestComponents/SwitchTabBar.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-import {
- CreateAnimation,
- IonIcon,
- IonLabel,
- IonRouterOutlet,
- IonTabBar,
- IonTabButton,
- IonTabs,
-} from '@ionic/react';
-import { IonReactRouter } from '@ionic/react-router';
-import { home, person, settings } from 'ionicons/icons';
-import Tab1 from '../AppPages/Tab1';
-import Tab2 from '../AppPages/Tab2';
-import Tab3 from '../AppPages/Tab3';
-import { useRef } from 'react';
-import { useEffect, useState } from 'react';
-import { Redirect, Route } from 'react-router';
-
-interface TabItem {
- label: string;
- url: string;
- icon: string;
- color: string;
- backgroundColor: string;
- component: React.ComponentType;
-}
-
-interface AnimationConfig {
- property: string;
- fromValue: string;
- toValue: string;
-}
-
-const SwitchTabBar = (): React.JSX.Element => {
- const [activeTab, setActiveTab] = useState('tab0');
- const switchRefs = useRef<(CreateAnimation | null)[]>([]);
-
- const tabs = [
- {
- label: 'Home',
- url: '/home',
- icon: home,
- color: '#76b140',
- backgroundColor: '#ddf7c5',
- component: Tab1,
- },
- {
- label: 'Profile',
- url: '/profile',
- icon: person,
- color: '#e46062',
- backgroundColor: '#fcddde',
- component: Tab2,
- },
- {
- label: 'Settings',
- url: '/settings',
- icon: settings,
- color: '#3578e5',
- backgroundColor: '#e7f0ff',
- component: Tab3,
- },
- ];
-
- const revealAnimation = {
- property: 'transform',
- fromValue: 'translateX(-30px)',
- toValue: 'translateX(0px)',
- };
-
- const switchAnimation = {
- duration: 200,
- direction: 'normal',
- iterations: '1',
- fromTo: [revealAnimation],
- easing: 'ease-in-out',
- };
-
- const getTabButtonStyle = (tab: TabItem): React.CSSProperties => {
- const tabStyle: React.CSSProperties = {
- backgroundColor: tab.backgroundColor,
- color: tab.color,
- transition: '0.5s all ease-in-out',
- };
-
- return tabStyle;
- };
-
- useEffect(() => {
- const tabIndex = activeTab.match(/\d+/)[0];
- switchRefs.current[tabIndex].animation.play();
- }, [activeTab]);
-
- return (
-
- {name}
-
- );
-};
-
-export default ExploreContainer;
diff --git a/03_source/mobile.trunk.1/src/pages/DemoReactSwitchTabs/components/SwitchTabBar.tsx b/03_source/mobile.trunk.1/src/pages/DemoReactSwitchTabs/components/SwitchTabBar.tsx
deleted file mode 100644
index c0db928..0000000
--- a/03_source/mobile.trunk.1/src/pages/DemoReactSwitchTabs/components/SwitchTabBar.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import {
- CreateAnimation,
- IonIcon,
- IonLabel,
- IonRouterOutlet,
- IonTabBar,
- IonTabButton,
- IonTabs,
-} from '@ionic/react';
-import { IonReactRouter } from '@ionic/react-router';
-import { home, person, settings } from 'ionicons/icons';
-import Tab1 from '../pages/Tab1';
-import Tab2 from '../pages/Tab2';
-import Tab3 from '../pages/Tab3';
-import { useRef } from 'react';
-import { useEffect, useState } from 'react';
-import { Redirect, Route } from 'react-router';
-
-const SwitchTabBar = () => {
- const [activeTab, setActiveTab] = useState('tab0');
- const switchRefs = useRef([]);
-
- const tabs = [
- {
- label: 'Home',
- url: '/home',
- icon: home,
- color: '#76b140',
- backgroundColor: '#ddf7c5',
- component: Tab1,
- },
- {
- label: 'Profile',
- url: '/profile',
- icon: person,
- color: '#e46062',
- backgroundColor: '#fcddde',
- component: Tab2,
- },
- {
- label: 'Settings',
- url: '/settings',
- icon: settings,
- color: '#3578e5',
- backgroundColor: '#e7f0ff',
- component: Tab3,
- },
- ];
-
- const revealAnimation = {
- property: 'transform',
- fromValue: 'translateX(-30px)',
- toValue: 'translateX(0px)',
- };
-
- const switchAnimation = {
- duration: 200,
- direction: 'normal',
- iterations: '1',
- fromTo: [revealAnimation],
- easing: 'ease-in-out',
- };
-
- const getTabButtonStyle = (tab) => {
- const tabStyle = {
- backgroundColor: tab.backgroundColor,
- color: tab.color,
- transition: '0.5s all ease-in-out',
- };
-
- return tabStyle;
- };
-
- useEffect(() => {
- const tabIndex = activeTab.match(/\d+/)[0];
- switchRefs.current[tabIndex].animation.play();
- }, [activeTab]);
-
- return (
- Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {props.modalOptions.name}
--
{description}
- - ); -}; diff --git a/03_source/mobile.trunk.1/src/pages/DemoReactTabsMenusCustom/main/nav/AllRoutes.tsx b/03_source/mobile.trunk.1/src/pages/DemoReactTabsMenusCustom/main/nav/AllRoutes.tsx deleted file mode 100644 index d62880a..0000000 --- a/03_source/mobile.trunk.1/src/pages/DemoReactTabsMenusCustom/main/nav/AllRoutes.tsx +++ /dev/null @@ -1,94 +0,0 @@ -// Main Tabs -import Tab1 from '../../pages/Tab1'; -import Tab2 from '../../pages/Tab2'; -import Tab3 from '../../pages/Tab3'; - -// Side Menus -import { tab1SideMenu, tab2SideMenu, tab3SideMenu } from '../PageSideMenus'; - -// Main tab children -import Settings from '../../pages/Settings'; - -// Sub pages -import InboxItem from '../../pages/InboxItem'; - -// Tab icons -import { personOutline, mailOutline, mapOutline } from 'ionicons/icons'; - -// Import custom tab menu -import TabMenu from '../TabMenu'; -import SubRoutes from './SubRoutes'; - -// Array of objects representing tab pages -// These will be the main tabs across the app - -// * PARAMS per tab object * -// isTab = true will make the tab appear -// default = the default tab page to open and be redirected to at "/" -// NOTE: there should only be one default tab (default: true) -// label = the label to show with the tab -// component = the component related to this tab page -// icon = icon to show on the tab bar menu -// path = the path which the tab is accessible -export const tabRoutes = [ - { - label: 'Profile', - component: Tab1, - icon: personOutline, - path: '/tabs/tab1', - default: true, - isTab: true, - sideMenu: true, - sideMenuOptions: tab1SideMenu, - }, - { - label: 'Inbox', - component: Tab2, - icon: mailOutline, - path: '/tabs/tab2', - default: false, - isTab: true, - sideMenu: true, - sideMenuOptions: tab2SideMenu, - }, - { - label: 'Places', - component: Tab3, - icon: mapOutline, - path: '/tabs/tab3', - default: false, - isTab: true, - sideMenu: true, - sideMenuOptions: tab3SideMenu, - }, -]; - -// Array of objects representing children pages of tabs - -// * PARAMS per tab object * -// isTab = should always be set to false for these -// component = the component related to this tab page -// path = the path which the tab is accessible - -// These pages should be related to tab pages and be held within the same path -// E.g. /tabs/tab1/child -const tabChildrenRoutes = [{ component: InboxItem, path: '/tabs/tab2/:id', isTab: false }]; - -// Array of objects representing sub pages - -// * PARAMS per tab object * -// component = the component related to this sub page -// path = the path which the sub page is accessible - -// This array should be sub pages which are not directly related to a tab page -// E.g. /child -const subPageRoutes = [{ component: Settings, path: '/settings' }]; - -// Let's combine these together as they need to be controlled within the same IonRouterOutlet -const tabsAndChildrenRoutes = [...tabRoutes, ...tabChildrenRoutes]; - -// Render sub routes -export const SubPages = () =>
- {inboxItem.sender}
-
- {inboxItem.time}
-
-
-
- To: Me
-
-
-
-
- ) : (
- {inboxItem.subject}
-{inboxItem.message}
-Message not found
- )}
- Sub page
-Author
-
- Alan Montgomery
-
- Mobile Team Lead
-
-
- - Hey there, I'm Alan! Hopefully you can take something away from this little sample - app. Or even if it's to have a poke around and see how I personally like to do things, - that's OK too 👏🏻. Check out each page, side menu and have a look at how things work. -
-Contact me on twitter if you need anything else :)
- - Tweet to @93alan - -Check out Mobile DevCast
-- A podcast dedicated to mobile app development and web native technology like ionic - & capacitor! -
-{item.sender}
-{item.subject}
-{item.message}
-{item.name}
-
- {name}
-
- );
-};
-
-export default ExploreContainer;
diff --git a/03_source/mobile.trunk.1/src/pages/DemoReactThemeSwitcher/index.tsx b/03_source/mobile.trunk.1/src/pages/DemoReactThemeSwitcher/index.tsx
deleted file mode 100644
index fa21f90..0000000
--- a/03_source/mobile.trunk.1/src/pages/DemoReactThemeSwitcher/index.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
-
-import {
- brushOutline,
- cloudOutline,
- handLeftOutline,
- informationCircle,
- searchOutline,
-} from 'ionicons/icons';
-
-import { Route, Redirect } from 'react-router';
-
-import './theme/variables.scss';
-
-import ThemeStore from './store/ThemeStore';
-import Info from './pages/Info';
-import Themes from './pages/Themes';
-import Examples from './pages/Examples';
-
-function DemoReactThemeSwitcher() {
- const theme = ThemeStore.useState((s) => s.currentTheme);
-
- return (
- - Explore{' '} - - UI Components - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Info
-
-
- Themes
-
-
- Examples
-
-
-
-
- );
-}
-
-export default DemoReactThemeSwitcher;
diff --git a/03_source/mobile.trunk.1/src/pages/DemoReactThemeSwitcher/pages/Examples.scss b/03_source/mobile.trunk.1/src/pages/DemoReactThemeSwitcher/pages/Examples.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/03_source/mobile.trunk.1/src/pages/DemoReactThemeSwitcher/pages/Examples.tsx b/03_source/mobile.trunk.1/src/pages/DemoReactThemeSwitcher/pages/Examples.tsx
deleted file mode 100644
index d47b976..0000000
--- a/03_source/mobile.trunk.1/src/pages/DemoReactThemeSwitcher/pages/Examples.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import {
- IonBadge,
- IonButton,
- IonCardSubtitle,
- IonCardTitle,
- IonCol,
- IonContent,
- IonGrid,
- IonHeader,
- IonIcon,
- IonItem,
- IonLabel,
- IonPage,
- IonRange,
- IonRow,
- IonSelect,
- IonSelectOption,
- IonSpinner,
- IonText,
- IonTitle,
- IonToggle,
- IonToolbar,
-} from '@ionic/react';
-import { star, sunny } from 'ionicons/icons';
-import { useGetSelectedTheme } from '../store/ThemeStore';
-
-import './Examples.scss';
-
-const Examples = (): React.JSX.Element => {
- const currentTheme = useGetSelectedTheme();
-
- return (
- Here are a few examples of how the theme looks on stock Ionic components.
-
- This is an example showing how to easily implement dynamic themes into an Ionic
- app. We could use the setProperty method, but you'll notice that we can pass a
- style object into the IonApp component - I feel like we have more control this
- way. With this in mind, we can utilise all of the Ionic color CSS variables and
- custom variables.
-
-
- Check out the setTheme function
-
-
I haven't over-rode every possible Ionic CSS variable, just a few of the
- core visually noticeable ones for this example.
-
- We now know that our overall theme is controlled via a style object, so we can - easily store this in state. In this example I'm using Pullstate, and updating the - "currentTheme" on each change. I've mimicked an API call from local JSON data, as - if it were a customer/client theme or branding. -
-
-
- )}
- Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -
- {name}
-
- );
-};
-
-export default ExploreContainer;
diff --git a/03_source/mobile.trunk.1/src/pages/DemoReactTravelApp/components/LongPlaceCard.jsx b/03_source/mobile.trunk.1/src/pages/DemoReactTravelApp/components/LongPlaceCard.jsx
deleted file mode 100644
index f7e9a92..0000000
--- a/03_source/mobile.trunk.1/src/pages/DemoReactTravelApp/components/LongPlaceCard.jsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { IonCard, IonCardTitle, IonNote } from '@ionic/react';
-import styles from '../styles/Home.module.scss';
-
-export const LongPlaceCard = ({ place = false }) => (
- - Explore{' '} - - UI Components - -
-
- 
-
-
-
- {place.name}
- {place.destination}
-
-
- 
- {place && (
-
-
- handleAddFavourite(e, place)}>
-
-
-
- )}
- When viewing a recipe, press the bookmark icon to add it
-
- router.push('/search')}
- />
-
-
-
- {name}
-
-
-
- 
-
-
-
-
- {recipe.label}
-{recipe.dishType && recipe.dishType[0]}
-
-
-
-
-
-
-
- Search
-
-
-
-
-
-
- {searchResults.length > 0 && (
- For development purposes, only 20 results will be returned
-{ingredient.text}
-{ingredient.weight.toFixed(2)}g
-{recipe.label}
-{recipe.dishType && recipe.dishType[0]}
-{ingredient.text}
-{ingredient.weight.toFixed(2)}g
-{recipe.label}
-{recipe.dishType && recipe.dishType[0]}
-When viewing a recipe, press the bookmark icon to add it
-
- router.push('/search')}
- />
-
-
-
- {name}
-
-
-
-
-
-
-
-
- {recipe.label}
-{recipe.dishType && recipe.dishType[0]}
-
-
-
-
-
-
-
- Search
-
-
-
-
-
-
- {searchResults.length > 0 && (
- For development purposes, only 20 results will be returned
-
- setSearchTerm(e.target.value)}
- />
-
-
-
-
-
-
-
-
-
- {record.name}
-
- {record.distance} miles away
-
-
-
-
-
- {Array.apply(null, { length: 5 }).map((e, i) => (
- i} small={true} />
- ))}
-
-
- {review.text}
-
- Current Location
-
- Click on the lightning button then choose a new point on the map to view places around that
- point.
-
-
-);
diff --git a/03_source/mobile.trunk.1/src/pages/DemoRestaurantFinder/components/ExploreContainer.css b/03_source/mobile.trunk.1/src/pages/DemoRestaurantFinder/components/ExploreContainer.css
deleted file mode 100644
index e99f514..0000000
--- a/03_source/mobile.trunk.1/src/pages/DemoRestaurantFinder/components/ExploreContainer.css
+++ /dev/null
@@ -1,24 +0,0 @@
-.container {
- text-align: center;
- position: absolute;
- left: 0;
- right: 0;
- top: 50%;
- transform: translateY(-50%);
-}
-
-.container strong {
- font-size: 20px;
- line-height: 26px;
-}
-
-.container p {
- font-size: 16px;
- line-height: 22px;
- color: #8c8c8c;
- margin: 0;
-}
-
-.container a {
- text-decoration: none;
-}
\ No newline at end of file
diff --git a/03_source/mobile.trunk.1/src/pages/DemoRestaurantFinder/components/ExploreContainer.jsx b/03_source/mobile.trunk.1/src/pages/DemoRestaurantFinder/components/ExploreContainer.jsx
deleted file mode 100644
index 799b82a..0000000
--- a/03_source/mobile.trunk.1/src/pages/DemoRestaurantFinder/components/ExploreContainer.jsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import './ExploreContainer.css';
-
-const ExploreContainer = ({ name }) => {
- return (
-
- {name}
-
- );
-};
-
-export default ExploreContainer;
diff --git a/03_source/mobile.trunk.1/src/pages/DemoRestaurantFinder/components/ListModal.jsx b/03_source/mobile.trunk.1/src/pages/DemoRestaurantFinder/components/ListModal.jsx
deleted file mode 100644
index 161c0ad..0000000
--- a/03_source/mobile.trunk.1/src/pages/DemoRestaurantFinder/components/ListModal.jsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import {
- IonButton,
- IonCard,
- IonCardHeader,
- IonCardSubtitle,
- IonCol,
- IonGrid,
- IonIcon,
- IonNote,
- IonRow,
- IonSearchbar,
- IonText,
-} from '@ionic/react';
-import { RatingStar } from './RatingStar';
-
-import styles from '../styles/ViewAll.module.scss';
-import { arrowForward, navigateOutline } from 'ionicons/icons';
-
-export const ListModal = ({ records, searchTerm, search, hideModal }) => {
- return (
- - Explore{' '} - - UI Components - -
-
- {records.map((record, index) => {
- const rating = Math.floor(record.rating).toFixed(0);
-
- return (
-
-
- {Array.apply(null, { length: 5 }).map((e, i) => (
- i} />
- ))}
-
- {record.name}
- {record.displayAddress}
-
-
-
-
-
-
-
-
-
-
- );
- })}
-
-
-
- {record.name}
- {record.displayAddress}
- {record.rating} star rating
-
-
-
-
- View →
-
-
-
-
-
- {record.phone && (
-
-
-
-
- )}
-
-
-
-
-
-
-
-);
diff --git a/03_source/mobile.trunk.1/src/pages/DemoRestaurantFinder/components/RatingStar.jsx b/03_source/mobile.trunk.1/src/pages/DemoRestaurantFinder/components/RatingStar.jsx
deleted file mode 100644
index 0f43670..0000000
--- a/03_source/mobile.trunk.1/src/pages/DemoRestaurantFinder/components/RatingStar.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { IonIcon } from '@ionic/react';
-import { star, starOutline } from 'ionicons/icons';
-import styles from '../styles/RatingStar.module.scss';
-
-export const RatingStar = ({ rated = false, small = false }) => (
-
-
-
- 
-
-
-
-
-
-
-
- router.goBack()}>
-
-
-
-
-
-
-
- {activeScoreboard.title}
-
-
-
-
-
-
- {activeScoreboard.players.length} players
-Game has finished.
-
- Track scores easily for games!
-{activeScoreboard.title}
-{activeScoreboard.players.length}
-
- {scoreboard.title}
-{scoreboard.players && scoreboard.players.length}
-No scoreboards to show
-You can easily add a new one
-
- {winner.name}
-
-
- 
-
- Shop now →
-
-
-
- Hang on there!
-Your cart is empty
-
-
-
-
-
- £{product.price.toFixed(2)}
-
- {product.title}
- -
-
-
-
- Product Categories
-
-
-
-
-
- {categories.map((category, index) => {
- return (
- goToCategory(category)} key={index} color="primary">
- {capitalizeWords(category)}
-
- );
- })}
-
-
-
-
- );
-};
diff --git a/03_source/mobile.trunk.1/src/pages/DemoShopAppUi/components/Heading.jsx b/03_source/mobile.trunk.1/src/pages/DemoShopAppUi/components/Heading.jsx
deleted file mode 100644
index b6e943d..0000000
--- a/03_source/mobile.trunk.1/src/pages/DemoShopAppUi/components/Heading.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { IonButton, IonCol, IonRow } from '@ionic/react';
-import styles from './Heading.module.scss';
-
-export const Heading = ({ heading, buttonClick = false, buttonText }) => (
- {heading}
- {buttonClick && ( -
- 
-
-
-
-
- {heading}
-{text}
-
-
-
- {product.title}
- -
-
-
- £{product.price.toFixed(2)}
-
-
-
-
-
- {product.rating.rate}
-
-
- 
-
-
-
- {capitalizeWords(product.category)}
-
- {product.title}
-
-
-
- Product Description
-{product.description}
-
-
- Product Rating
-
-
- - {product.rating.count} people have bought this item from the IonShop and - have rated an average of {product.rating.rate}. -
-
- Buy now for
-
- £{product.price.toFixed(2)}
-
-
- helloworld
- // Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {post.title}
-{post.blurb}
-{post.date}
-
-
-
-
-
{person.name}
-{person.location}
-
- 
-
-
-
-
-
- router.goBack()}>
-
-
-
-
-
- 
-
-
- {profile.name}
-
-
- Purchased
- {profile.purchased}
-
-
-
- Wished
- {profile.wished}
-
-
-
- Likes
- {profile.likes}
-
-
-
-
-
-
-
-
- {profile.location}
- -
-
- {collections.map((collection, index) => {
- return (
-
-
- 
-
-
-
- );
- })}
-
-
-
-
- {collection.name}
- {collection.no} wardrobes
-
-
- {name}
-
- );
-};
-
-export default ExploreContainer;
diff --git a/03_source/mobile.trunk.1/src/pages/DemoSlidingProfile/data/index.js b/03_source/mobile.trunk.1/src/pages/DemoSlidingProfile/data/index.js
deleted file mode 100644
index 5f50286..0000000
--- a/03_source/mobile.trunk.1/src/pages/DemoSlidingProfile/data/index.js
+++ /dev/null
@@ -1,87 +0,0 @@
-export const people = [
- {
- id: 1,
- name: 'Jane Doe',
- image: '/assets/DemoSlidingProfile/avatar1.png',
- cover: '/assets/DemoSlidingProfile/flower.jpeg',
- location: 'Belfast, Northern Ireland',
- purchased: 120,
- wished: 271,
- likes: '12K',
- },
- {
- id: 2,
- name: 'Joe Bloggs',
- image: '/assets/DemoSlidingProfile/avatar2.png',
- cover: '/assets/DemoSlidingProfile/cover4.jpeg',
- location: 'New York City, America',
- purchased: 91,
- wished: 811,
- likes: '102K',
- },
- {
- id: 3,
- name: 'Antonio Romero',
- image: '/assets/DemoSlidingProfile/avatar4.png',
- cover: '/assets/DemoSlidingProfile/cover1.jpeg',
- location: 'Cambodia, Asia',
- purchased: 91,
- wished: 811,
- likes: '102K',
- },
- {
- id: 4,
- name: 'Aditi Conner',
- image: '/assets/DemoSlidingProfile/avatar3.png',
- cover: '/assets/DemoSlidingProfile/cover5.jpeg',
- location: 'Antartica',
- purchased: 91,
- wished: 811,
- likes: '102K',
- },
- {
- id: 5,
- name: 'Martina Salas',
- image: '/assets/DemoSlidingProfile/avatar5.png',
- cover: '/assets/DemoSlidingProfile/cover2.jpeg',
- location: 'South Africa',
- purchased: 91,
- wished: 811,
- likes: '102K',
- },
- {
- id: 6,
- name: 'Dayna Grimes',
- image: '/assets/DemoSlidingProfile/avatar6.png',
- cover: '/assets/DemoSlidingProfile/cover6.jpeg',
- location: 'China',
- purchased: 91,
- wished: 811,
- likes: '102K',
- },
-];
-
-export const collections = [
- {
- name: 'Winter',
- image: '/assets/DemoSlidingProfile/winter.png',
- no: 95,
- },
- {
- name: 'Summer',
- image: '/assets/DemoSlidingProfile/summer.png',
- no: 73,
- },
- {
- name: 'Autumn',
- image: '/assets/DemoSlidingProfile/autumn.png',
- no: 32,
- },
- {
- name: 'Spring',
- image: '/assets/DemoSlidingProfile/spring.png',
- no: 18,
- },
-];
-
-export const tags = ['Jackets', 'Shirts', 'Jeans', 'Sweaters', 'Coats'];
diff --git a/03_source/mobile.trunk.1/src/pages/DemoSlidingProfile/index.tsx b/03_source/mobile.trunk.1/src/pages/DemoSlidingProfile/index.tsx
deleted file mode 100644
index 228f5b8..0000000
--- a/03_source/mobile.trunk.1/src/pages/DemoSlidingProfile/index.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
-
-import { cloudOutline, home, menu, notifications, search, searchOutline } from 'ionicons/icons';
-import { Route, Redirect } from 'react-router';
-
-import Tab2 from './AppPages/Tab2';
-import Home from './AppPages/Home';
-import Profile from './AppPages/Profile';
-
-function DemoSlidingProfile() {
- return (
- - Explore{' '} - - UI Components - -
-
- Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {children}
-
- );
-};
diff --git a/03_source/mobile.trunk.1/src/pages/DemoStickyBottomSheetExample/components/DummyItem.tsx b/03_source/mobile.trunk.1/src/pages/DemoStickyBottomSheetExample/components/DummyItem.tsx
deleted file mode 100644
index cbb9dc5..0000000
--- a/03_source/mobile.trunk.1/src/pages/DemoStickyBottomSheetExample/components/DummyItem.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { IonCard, IonCardContent, IonLabel } from '@ionic/react';
-
-interface DummyItemProps {
- number: number;
-}
-
-export const DummyItem: React.FCItem number {number}
-This is a dummy item
-Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {contacts.filter((c: any) => parseInt(c.id) === parseInt(message.fromId))[0].name}
-
- {message.date}
-
-
- {message.subject}
-{message.body}
-To: Me
-
-
- Subject
- handleChange('subject', e.currentTarget.value)}
- style={{ fontSize: '1.5rem', fontWeight: '400' }}
- />
-
-
-
- -
- Body
- handleChange('body', (e.target as HTMLInputElement).value)}
- />
-
-
-
- ) : (
- - -
Message not found
- )}
- Here's your location based weather
-
- {currentWeather ? (
-
-
- {currentWeather ? (
-
- Your search result will appear here
- )} -- {currentWeather.location.region},{' '} - {currentWeather.location.country} -
-
-
-
-
-
-
-
-
-
-
- {currentWeather.current.condition.text}
-{new Date(currentWeather.location.localtime).toDateString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {avatars.slice(0, 3).map((m_avatar, idx) => (
-
-
- );
-};
-
-export default AvatarRow;
diff --git a/03_source/mobile.trunk.1/src/pages/EventDetail/TestContent.tsx b/03_source/mobile.trunk.1/src/pages/EventDetail/TestContent.tsx
deleted file mode 100644
index 39fd43b..0000000
--- a/03_source/mobile.trunk.1/src/pages/EventDetail/TestContent.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { format } from 'date-fns';
-
-export const TestContent = {
- eventDate: format(new Date(), 'yyyy-MM-dd'),
- title: 'helloworld',
- price: 123,
- currency: 'HKD',
- duration_m: 480,
- ageBottom: 12,
- ageTop: 48,
- location: 'Hong Kong Island',
- avatar: 'https://www.ionics.io/img/ionic-logo.png',
-};
diff --git a/03_source/mobile.trunk.1/src/pages/EventDetail/index.tsx b/03_source/mobile.trunk.1/src/pages/EventDetail/index.tsx
deleted file mode 100644
index efc740a..0000000
--- a/03_source/mobile.trunk.1/src/pages/EventDetail/index.tsx
+++ /dev/null
@@ -1,296 +0,0 @@
-// REQ0042/event-detail
-//
-// PURPOSE:
-// - Provides functionality view event detail
-//
-// RULES:
-// - T.B.A.
-//
-import React, { useEffect, useState } from 'react';
-import {
- IonHeader,
- IonToolbar,
- IonContent,
- IonPage,
- IonButtons,
- IonMenuButton,
- IonButton,
- IonIcon,
- IonDatetime,
- IonSelectOption,
- IonList,
- IonItem,
- IonLabel,
- IonSelect,
- IonPopover,
- IonText,
- IonFooter,
- useIonRouter,
- IonAvatar,
-} from '@ionic/react';
-import './style.scss';
-import {
- accessibility,
- accessibilityOutline,
- chevronBackOutline,
- ellipsisHorizontal,
- ellipsisVertical,
- heart,
- locationOutline,
- locationSharp,
- logoIonic,
- man,
- manOutline,
- people,
- peopleOutline,
- timer,
- timerOutline,
- timerSharp,
- wallet,
- walletOutline,
- walletSharp,
- woman,
- womanOutline,
-} from 'ionicons/icons';
-import AboutPopover from '../../components/AboutPopover';
-import { format, parseISO } from 'date-fns';
-import { TestContent } from './TestContent';
-import { Helloworld } from '../../api/Helloworld';
-import { getEventById } from '../../api/getEventById';
-import { connect } from '../../data/connect';
-import * as selectors from '../../data/selectors';
-import { Event } from '../../models/Event';
-import { RouteComponentProps } from 'react-router';
-import AvatarRow from './AvatarRow';
-
-const leftShift: number = -25;
-
-interface OwnProps extends RouteComponentProps {
- event_detail?: Event;
-}
-
-interface StateProps {}
-
-interface DispatchProps {}
-
-interface EventDetailProps extends OwnProps, StateProps, DispatchProps {}
-
-const showJoinedMembers = (joinMembers: Record
-
- 
-
-
- ))}
-
- {' '}
- +{avatars.length - 3} going{' '}
-
-
-
-
-
-
-
-
-
-
-
-
-
- {format(new Date(event_detail.eventDate), 'EEE, dd MMM yyyy, hh:mm a')}
-
-
- {event_detail.title}
-
-
-
- {event_detail.joinMembers && event_detail.joinMembers.length > 0 ? (
- showJoinedMembers(event_detail.joinMembers)
- ) : (
- <>join fast !
- )}
-
-
-
-
-
-
-
-
- {event_detail.currency}
- {event_detail.price}
- per person
-
-
-
-
- {event_detail.duration_m}
-
- mins
-
-
-
-
-
- {event_detail.ageBottom}
~{event_detail.ageTop}
- years old
-
-
-
-
-
- {totalJoinMembers}
-
- {maleMembers}
-
- {femaleMembers}
-
-
- Join
-
-
- {joinMembers.filter((jm: any) => jm.sex == 'F').length}
-
- );
-}
diff --git a/03_source/mobile.trunk.1/src/pages/EventList/NumOfMaleMemberJoin.tsx b/03_source/mobile.trunk.1/src/pages/EventList/NumOfMaleMemberJoin.tsx
deleted file mode 100644
index b6ff01b..0000000
--- a/03_source/mobile.trunk.1/src/pages/EventList/NumOfMaleMemberJoin.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { IonIcon } from '@ionic/react';
-import { man } from 'ionicons/icons';
-import React from 'react';
-
-export function NumOfMaleMemberJoin({ joinMembers }: { joinMembers: any }) {
- return (
- <>
- {joinMembers.filter((jm: any) => jm.sex == 'M').length}
-
- );
-}
diff --git a/03_source/mobile.trunk.1/src/pages/EventList/NumOfMemberJoin.tsx b/03_source/mobile.trunk.1/src/pages/EventList/NumOfMemberJoin.tsx
deleted file mode 100644
index fa770d7..0000000
--- a/03_source/mobile.trunk.1/src/pages/EventList/NumOfMemberJoin.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { IonIcon } from '@ionic/react';
-import { accessibility } from 'ionicons/icons';
-import React from 'react';
-
-export function NumOfMemberJoin({ joinMembers }: { joinMembers: any }) {
- return (
- <>
- {joinMembers.length}
-
- );
-}
diff --git a/03_source/mobile.trunk.1/src/pages/EventList/TestContent.tsx b/03_source/mobile.trunk.1/src/pages/EventList/TestContent.tsx
deleted file mode 100644
index 39fd43b..0000000
--- a/03_source/mobile.trunk.1/src/pages/EventList/TestContent.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { format } from 'date-fns';
-
-export const TestContent = {
- eventDate: format(new Date(), 'yyyy-MM-dd'),
- title: 'helloworld',
- price: 123,
- currency: 'HKD',
- duration_m: 480,
- ageBottom: 12,
- ageTop: 48,
- location: 'Hong Kong Island',
- avatar: 'https://www.ionics.io/img/ionic-logo.png',
-};
diff --git a/03_source/mobile.trunk.1/src/pages/EventList/index.tsx b/03_source/mobile.trunk.1/src/pages/EventList/index.tsx
deleted file mode 100644
index 7848766..0000000
--- a/03_source/mobile.trunk.1/src/pages/EventList/index.tsx
+++ /dev/null
@@ -1,228 +0,0 @@
-// REQ0041/home_discover_event_tab
-
-import React, { useRef } from 'react';
-import {
- IonHeader,
- IonToolbar,
- IonTitle,
- IonContent,
- IonPage,
- IonButtons,
- IonGrid,
- IonRow,
- IonCol,
- useIonRouter,
- IonButton,
- IonIcon,
- IonModal,
- IonRefresher,
- IonRefresherContent,
- RefresherEventDetail,
-} from '@ionic/react';
-import { connect } from '../../data/connect';
-import * as selectors from '../../data/selectors';
-import '../SpeakerList.scss';
-import { format } from 'date-fns';
-
-// import { Event } from './types';
-import { chevronDownCircleOutline, menuOutline } from 'ionicons/icons';
-import Loading from '../../components/Loading';
-import { Event } from '../../models/Event';
-//
-import { NumOfMemberJoin } from './NumOfMemberJoin';
-import { NumOfMaleMemberJoin } from './NumOfMaleMemberJoin';
-import { NumOfFemaleMemberJoin } from './NumOfFemaleMemberJoin';
-
-interface OwnProps {}
-
-interface StateProps {
- fetchEventResult: any;
-}
-
-interface DispatchProps {}
-
-interface SpeakerListProps extends OwnProps, StateProps, DispatchProps {}
-
-const EventList: React.FC handleShowPartyEventDetail(event.id)}
- >
-
-
-
-
-
- {/*
- {format(new Date(event.eve ntDate), 'yyyy-MM-dd')}
*/}
-
- {format(new Date(event.eventDate), 'EEE, dd MMM yyyy, hh:mm a')}
-
- {event.name}
- {event.price}
-
-
-
-
-
- Apply
-
-
-
- Filter
-
-
- Maximum number of participant
-
-
- 2-10
- 12-40
- All
-
-
- Held date
-
-
- Weekly
- Monthly
- All
-
-
-
-
- Browse Events
-
-
-
- ) : (
- <>
- )}
-
- handleShowPartyEventDetail(event.id)}
- >
-
-
-
-
- {format(new Date(event.eventDate), 'yyyy-MM-dd')}
- {event.title}
- {event.currency}
- {event.price}
-
- {40} {20} {20}
-
-
-
- Apply
-
-
-
- Filter
-
-
- Maximum number of participant
-
-
- 2-10
- 12-40
- All
-
-
- Held date
-
-
- Weekly
- Monthly
- All
-
-
-
- 
-
-
-
-
-
-
-
-
-
-
-
-
-
- {memberDetail.greetings} {memberDetail.name} {memberDetail.age}
-
-
-
-
-
-
- {memberDetail.gender}
- {memberDetail.tall_cm}
- {memberDetail.weight_kg}
- {memberDetail.occupation}
- {memberDetail.language}
- {memberDetail.education}
-
-
-
- About Me
- {memberDetail.self_introduction}
-
-
-
- Music
- {memberDetail.music}
-
-
-
- Pets
- {memberDetail.pets}
-
-
- Character
- {memberDetail.character}
-
-
- Chat
-
-
-
-
- 
-
-
-
-
- );
-}
-
-const MembersNearByList: React.FC
-
-
-
-
- {member.name}
- {member.age}
- {member.rank}
- {member.verified}
-
-
- {member.hobbies[0]},
- {member.hobbies[1]},
- {member.hobbies[2]}
-
- {SampleMember.distance}, {SampleMember.location_area}
-
-
- {/* TODO: need to resume WarningIconSvg */}
- {/* */}
- {/* TODO: resume using svg, temporary using IonIcon for build */}
-
-
-
-
-
- Apply
-
-
-
- Filter
-
-
- Maximum number of participant
-
-
- 2-10
- 12-40
- All
-
-
- Held date
-
-
- Weekly
- Monthly
- All
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- not login yet,
- please login or sign up -
- - please login or sign up -
-
- Login
-
-
-
-
-
-
- 
-
-
-
-
-
-
-
- {profile.name}
- {profile.rank}
- {profile.verified}
-
-
-
-
-
-
-
-
- Membership
- 7 of the exclusive privileges
-
-
- Unlock
-
-
-
-
- Privileges Unlocked
-
-
-
-
- Unlock participant list
-
-
- Exclusive vip logo
-
-
- View visitors
-
-
- Tips of message read
-
-
- Voice and images transmission
-
-
- Pinned to the top of nearby list every 24 hours
-
-
- Unlimited chat
-
-
- Filter verified users
-
-
- Apply
-
-
-
- Filter
-
-
- Maximum number of participant
-
-
- 2-10
- 12-40
- All
-
-
- Held date
-
-
- Weekly
- Monthly
- All
-
-
-
-
- Sorry this feature
-
Not implemented -
-
-
- Not implemented -
-
-
-
- Total
- {order.totalAmount}
-
-
-
-
- created at:
- {order.createdAt}
-
-
- updated at:
- {order.updatedAt}
-
-
-
- History
-Delivery
-
-
-
- {order.history?.timeline.map((t) => (
-
-
-
- ))}
- {t.title}
- {t.time}
-
-
- 擇要
-
-
-
-
-
- Order time
- 29 May 2025 4:01 pm
-
-
-
- Payment time
- 29 May 2025 4:01 pm
-
-
-
- Delivery time for the carrier
- 29 May 2025 4:01 pm
-
-
- Completion time
- 29 May 2025 4:01 pm
-
-
-
- Delivery
- -
-
-
- Ship by
- {order.delivery.shipBy}
-
-
-
- Speedy
- {order.delivery.speedy}
-
-
- Tracking No.
- {order.delivery.trackingNumber}
-
-
-
- Shipping
- -
-
-
- Address
- {order.shippingAddress.fullAddress}
-
-
- Phone Number
- {order.shippingAddress.phoneNumber}
-
-
- Payment
- -
-
-
- Card Type
- {order.payment.cardType}
-
-
- Card Number
- {order.payment.cardNumber}
-
-
- );
-};
-
-const NumApplicants: React.FC<{ amount: number }> = ({ amount }) => {
- return (
- #Rem:
- {amount}
-
-
- );
-};
-
-const TotalAmount: React.FC<{ amount: number }> = ({ amount }) => {
- return (
- #app. :
- {amount}
-
-
- );
-};
-
-// Subtotal HK$83.74
-const Subtotal: React.FC<{ amount: number }> = ({ amount }) => {
- return (
-
-
- Total:
-
- {amount}{' '}
-
-
-
- );
-};
-
-// Shipping - HK$10
-const Shipping: React.FC<{ amount: number }> = ({ amount }) => {
- return (
- Subtotal:
-
- {amount}{' '}
-
-
-
- );
-};
-
-// Discount - HK$10
-const Discount: React.FC<{ amount: number }> = ({ amount }) => {
- return (
-
-
- Shipping:
-
- {amount}{' '}
-
-
-
- );
-};
-
-// Taxes HK$10
-const Tax: React.FC<{ amount: number }> = ({ amount }) => {
- return (
-
-
- Discount:
-
- {amount}{' '}
-
-
-
- );
-};
-
-const OrderList: React.FC
-
- Tax:
-
- {amount}{' '}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {order.orderNumber}
-
-
-
-
-
- Order time:
- {order.createdAt.split('T')[0]}
-
-
- Last payment date:
- {order.last_payment_date}
-
-
-
- {markdown}
-
-
-
- end
-
- {markdown}
-
-
-
- end
- Session not found
;
- }
-
- const isFavorite = favoriteSessions.indexOf(session.id) > -1;
-
- const toggleFavorite = () => {
- isFavorite ? removeFavorite(session.id) : addFavorite(session.id);
- };
- const shareSession = () => {};
- const sessionClick = (text: string) => {
- console.log(`Clicked ${text}`);
- };
-
- return (
-
-
- {session.timeStart} – {session.timeEnd}
-
- {session.location} -
-
- {session.name}
- {session.tracks.map((track) => ( - - {track} - - ))} -{session.description}
-- {session.location} -
- Setting
-
-
-
- Logout
-
-
-
-
-
-
-
- Logout
-
-
- Unable to receive notifications after logging out
-
-
-
-
- Cancel
-
-
- Logout
-
-
-
-
-
-
-
-
-
-
- Speaker not found
;
- }
-
- return (
-
- 
-
-
- {speaker.name}
-
-
- - openExternalUrl(`https://twitter.com/${speaker.twitter}`)}
- >
- Twitter
-
-
- openExternalUrl('https://github.com/ionic-team/ionic-framework')}
- >
- GitHub
-
-
- openExternalUrl('https://instagram.com/ionicframework')}
- >
- Instagram
-
-
- {speaker.about} Say hello on social media!
- -- -
-
-
-
-
-
-
-
-
- {/* */}
-
-
- {/* */}
-
-
- {/* */}
-
-
- {/* */}
-
-
-
-
- 
-
-
- - Welcome to ICA -
-- The ionic conference app is a practical preview of the ionic framework in - action, and a demonstration of proper code use. -
-
- 
-
-
- What is Ionic?
-- Ionic Framework is an open source SDK that enables developers to build high - quality mobile apps with web technologies like HTML, CSS, and JavaScript. -
-
- 
-
-
- What is Ionic Appflow?
-- Ionic Appflow is a powerful set of services and features built on top of - Ionic Framework that brings a totally new level of app development agility to mobile - dev teams. -
-
- 
-
- Continue
-
-
-
-