louiscklaw/HKSingleParty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update demo pull state,

Browse Source
This commit is contained in:
louiscklaw
2025-06-06 14:22:22 +08:00
parent e4b6c5e92d
commit d6c87e33f0
11 changed files with 282 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
03_source/mobile/src/pages/DemoPullstateTutorial/components/Person.tsx Normal file
View File

@@ -0,0 +1,24 @@
import { IonAvatar, IonButton, IonItem, IonLabel } from '@ionic/react';
import { toggleFollowing } from '../store/PeopleStore';
export const Person = ({ person }): React.JSX.Element => {
return (
<IonItem lines="full">
<IonAvatar>
<img src={person.avatar} alt="avatar" />
</IonAvatar>
<IonLabel className="ion-padding-start">
<h1>{person.name}</h1>
<p>{person.title}</p>
</IonLabel>
<IonButton
color="primary"
fill={person.following ? 'solid' : 'outline'}
onClick={() => toggleFollowing(person.id)}
>
{person.following ? 'Following' : 'Follow'}
</IonButton>
</IonItem>
);
};

45
03_source/mobile/src/pages/DemoPullstateTutorial/data/index.js Normal file
View File

@@ -0,0 +1,45 @@
export const people = [
{
id: 1,
name: "Alan Montgomery",
title: "Mobile Team Lead",
avatar: "https://pbs.twimg.com/profile_images/1420489989163524096/GwHdYSky_400x400.jpg",
following: false
},
{
id: 2,
name: "Max Lynch",
title: "CEO | Co Founder",
avatar: "https://pbs.twimg.com/profile_images/1318970727173885953/bln98FNj_400x400.jpg",
following: false
},
{
id: 3,
name: "Mike Hartington",
title: "Senior Dev Rel",
avatar: "https://pbs.twimg.com/profile_images/1084993841898446849/DJ8XtR6L_400x400.jpg",
following: false
},
{
id: 4,
name: "Matt Netkow",
title: "Head of Product Marketing",
avatar: "https://pbs.twimg.com/profile_images/1323383930150621187/GKc0nVzi_400x400.jpg",
following: false
},
{
id: 5,
name: "Ben Sperry",
title: "CDO | Co Founder",
avatar: "https://pbs.twimg.com/profile_images/1407747959345795072/McJb-RvC_400x400.jpg",
following: false
},
{
id: 6,
name: "Liam DeBeasi",
title: "Software Engineer",
avatar: "https://pbs.twimg.com/profile_images/1105953692669366273/ZNK4lRAJ_400x400.jpg",
following: false
}
];

18
03_source/mobile/src/pages/DemoPullstateTutorial/index.tsx
View File

@@ -1,16 +1,18 @@
import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
import { cloudOutline, searchOutline } from 'ionicons/icons';
import { list, people } from 'ionicons/icons';
import { Route, Redirect } from 'react-router';
import Tab1 from './AppPages/Tab1';
import Tab2 from './AppPages/Tab2';
// import Tab1 from './AppPages/Tab1';
// import Tab2 from './AppPages/Tab2';
import './style.scss';
import Tab1 from './pages/Tab1';
import Tab2 from './pages/Tab2';
function DemoPullstateTutorial() {
return (
<IonTabs>
<IonTabs className="demo-pullstate-tutorial">
<IonRouterOutlet>
<Route exact path="/demo-pullstate-tutorial/tab1">
<Tab1 />
@@ -25,12 +27,12 @@ function DemoPullstateTutorial() {
{/* */}
<IonTabBar slot="bottom">
<IonTabButton tab="tab1" href="/demo-pullstate-tutorial/tab1">
<IonIcon icon={cloudOutline} />
<IonLabel>Dashboard</IonLabel>
<IonIcon icon={list} />
<IonLabel>List</IonLabel>
</IonTabButton>
<IonTabButton tab="tab2" href="/demo-pullstate-tutorial/tab2">
<IonIcon icon={searchOutline} />
<IonLabel>Search</IonLabel>
<IonIcon icon={people} />
<IonLabel>Following</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>

0
03_source/mobile/src/pages/DemoPullstateTutorial/pages/Tab1.css Normal file
View File

63
03_source/mobile/src/pages/DemoPullstateTutorial/pages/Tab1.tsx Normal file
View File

@@ -0,0 +1,63 @@
import {
IonButton,
IonButtons,
IonContent,
IonHeader,
IonIcon,
IonPage,
IonTitle,
IonToolbar,
useIonRouter,
} from '@ionic/react';
import { PeopleStore } from '../store';
import { Person } from '../components/Person';
import './Tab1.css';
import { useStoreState } from 'pullstate';
import { getPeople } from '../store/Selectors';
import { chevronBackOutline } from 'ionicons/icons';
const Tab1 = (): React.JSX.Element => {
const people = useStoreState(PeopleStore, getPeople);
console.log(people);
const router = useIonRouter();
function handleBackClick() {
router.goBack();
}
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>List of People</IonTitle>
<IonButtons slot="start">
<IonButton onClick={() => handleBackClick()}>
<IonIcon icon={chevronBackOutline} color="primary" />
</IonButton>
</IonButtons>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">List of People</IonTitle>
<IonButtons slot="start">
<IonButton onClick={() => handleBackClick()}>
<IonIcon icon={chevronBackOutline} color="primary" />
</IonButton>
</IonButtons>
</IonToolbar>
</IonHeader>
{people.map((person, index) => {
return <Person person={person} key={index} />;
})}
</IonContent>
</IonPage>
);
};
export default Tab1;

0
03_source/mobile/src/pages/DemoPullstateTutorial/pages/Tab2.css Normal file
View File

34
03_source/mobile/src/pages/DemoPullstateTutorial/pages/Tab2.tsx Normal file
View File

@@ -0,0 +1,34 @@
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
import { useStoreState } from 'pullstate';
import { Person } from '../components/Person';
import { PeopleStore } from '../store';
import { getFollowing } from '../store/Selectors';
import './Tab2.css';
import React from 'react';
const Tab2 = (): React.JSX.Element => {
const people = useStoreState(PeopleStore, getFollowing);
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Following</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Following</IonTitle>
</IonToolbar>
</IonHeader>
{people.map((person, index) => {
return <Person person={person} key={index} />;
})}
</IonContent>
</IonPage>
);
};
export default Tab2;

19
03_source/mobile/src/pages/DemoPullstateTutorial/store/PeopleStore.js Normal file
View File

@@ -0,0 +1,19 @@
import { Store } from "pullstate";
import { people } from "../data";
const PeopleStore = new Store({
people: people
});
export const toggleFollowing = personId => {
PeopleStore.update(s => {
const personIndex = s.people.findIndex(person => person.id === personId);
s.people[personIndex].following = !s.people[personIndex].following;
});
}
export default PeopleStore;

7
03_source/mobile/src/pages/DemoPullstateTutorial/store/Selectors.js Normal file
View File

@@ -0,0 +1,7 @@
import { createSelector } from "reselect";
const getState = state => state;
// Gets
export const getPeople = createSelector(getState, state => state.people);
export const getFollowing = createSelector(getState, state => state.people.filter(person => person.following));

1
03_source/mobile/src/pages/DemoPullstateTutorial/store/index.js Normal file
View File

@@ -0,0 +1 @@
export { default as PeopleStore } from "./PeopleStore";

79
03_source/mobile/src/pages/DemoPullstateTutorial/theme/variables.scss Normal file
View File

@@ -0,0 +1,79 @@
.demo-pullstate-tutorial {
/* Ionic Variables and Theming. For more info, please see:
http://ionicframework.com/docs/theming/ */
/** Ionic CSS Variables **/
:root {
/** primary **/
--ion-color-primary: #3880ff;
--ion-color-primary-rgb: 56, 128, 255;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255, 255, 255;
--ion-color-primary-shade: #3171e0;
--ion-color-primary-tint: #4c8dff;
/** secondary **/
--ion-color-secondary: #3dc2ff;
--ion-color-secondary-rgb: 61, 194, 255;
--ion-color-secondary-contrast: #ffffff;
--ion-color-secondary-contrast-rgb: 255, 255, 255;
--ion-color-secondary-shade: #36abe0;
--ion-color-secondary-tint: #50c8ff;
/** tertiary **/
--ion-color-tertiary: #5260ff;
--ion-color-tertiary-rgb: 82, 96, 255;
--ion-color-tertiary-contrast: #ffffff;
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
--ion-color-tertiary-shade: #4854e0;
--ion-color-tertiary-tint: #6370ff;
/** success **/
--ion-color-success: #2dd36f;
--ion-color-success-rgb: 45, 211, 111;
--ion-color-success-contrast: #ffffff;
--ion-color-success-contrast-rgb: 255, 255, 255;
--ion-color-success-shade: #28ba62;
--ion-color-success-tint: #42d77d;
/** warning **/
--ion-color-warning: #ffc409;
--ion-color-warning-rgb: 255, 196, 9;
--ion-color-warning-contrast: #000000;
--ion-color-warning-contrast-rgb: 0, 0, 0;
--ion-color-warning-shade: #e0ac08;
--ion-color-warning-tint: #ffca22;
/** danger **/
--ion-color-danger: #eb445a;
--ion-color-danger-rgb: 235, 68, 90;
--ion-color-danger-contrast: #ffffff;
--ion-color-danger-contrast-rgb: 255, 255, 255;
--ion-color-danger-shade: #cf3c4f;
--ion-color-danger-tint: #ed576b;
/** dark **/
--ion-color-dark: #222428;
--ion-color-dark-rgb: 34, 36, 40;
--ion-color-dark-contrast: #ffffff;
--ion-color-dark-contrast-rgb: 255, 255, 255;
--ion-color-dark-shade: #1e2023;
--ion-color-dark-tint: #383a3e;
/** medium **/
--ion-color-medium: #92949c;
--ion-color-medium-rgb: 146, 148, 156;
--ion-color-medium-contrast: #ffffff;
--ion-color-medium-contrast-rgb: 255, 255, 255;
--ion-color-medium-shade: #808289;
--ion-color-medium-tint: #9d9fa6;
/** light **/
--ion-color-light: #f4f5f8;
--ion-color-light-rgb: 244, 245, 248;
--ion-color-light-contrast: #000000;
--ion-color-light-contrast-rgb: 0, 0, 0;
--ion-color-light-shade: #d7d8da;
--ion-color-light-tint: #f5f6f9;
}
}