Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 8afc7c9

Browse files
aaronksaundersaaronksaunders
committedAug 1, 2020
refactor and updated
1 parent 78fa34b commit 8afc7c9

File tree

13 files changed

+574
-564
lines changed

13 files changed

+574
-564
lines changed
 

‎package.json

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,6 @@
2020
"ionicons": "^5.0.0",
2121
"mobx": "^5.15.4",
2222
"mobx-react": "^6.2.2",
23-
"overmind": "^23.0.1",
24-
"overmind-react": "^24.0.1",
2523
"react": "^16.13.0",
2624
"react-dom": "^16.13.0",
2725
"react-hook-form": "^5.5.0",

‎src/App.js

Lines changed: 56 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,62 @@
1-
import React, { Component } from "react";
2-
import { Route, Switch, Redirect } from "react-router-dom";
1+
import React, { useEffect, useState } from "react";
2+
import { Route, Redirect } from "react-router-dom";
33

4-
import { IonApp, IonRouterOutlet, IonSpinner } from "@ionic/react";
4+
import { IonApp, IonSpinner, IonRouterOutlet } from "@ionic/react";
55
import { IonReactRouter } from "@ionic/react-router";
66

7-
import PrivateRoute from "./components/PrivateRoute";
87
import HomePage from "./pages/HomePage";
98
import LoginPage from "./pages/LoginPage";
109
import RegistrationPage from "./pages/RegistrationPage";
11-
import TabOneDetailPage from "./pages/TabOneDetailPage";
12-
13-
import { inject, observer } from "mobx-react";
14-
class App extends Component {
15-
render() {
16-
return !this.props.store.authCheckComplete ? (
17-
<div
18-
style={{
19-
position: "absolute",
20-
left: "50%",
21-
top: "50%",
22-
transform: "translate(-50%, -50%)",
23-
}}
24-
>
25-
<IonSpinner name="circles" />
26-
</div>
27-
) : (
28-
<IonReactRouter>
29-
<IonApp>
30-
<Switch>
31-
<Redirect exact from="/" to="home" />
32-
<Route path="/login" component={LoginPage} />
33-
<IonRouterOutlet>
34-
<Route path="/register" component={RegistrationPage} />
35-
<PrivateRoute name="home" path="/home" component={HomePage} />
36-
<PrivateRoute
37-
path="/tab1-detail/:id"
38-
component={TabOneDetailPage}
39-
/>
40-
</IonRouterOutlet>
41-
</Switch>
42-
</IonApp>
43-
</IonReactRouter>
44-
);
45-
}
46-
}
47-
48-
export default inject("store")(observer(App));
10+
11+
import { observer, MobXProviderContext } from "mobx-react";
12+
import { autorun } from "mobx";
13+
14+
const PrivateRoutes = () => {
15+
return (
16+
<IonReactRouter>
17+
<IonRouterOutlet>
18+
{/****** AUTH CREATE ACCOUNT */}
19+
<Route path="/login" component={LoginPage} exact={true} />
20+
<Route path="/register" component={RegistrationPage} exact={true} />
21+
<Route path="/" render={() => <Redirect to="/login" />} />
22+
</IonRouterOutlet>
23+
</IonReactRouter>
24+
);
25+
};
26+
const PublicRoutes = () => {
27+
return (
28+
<IonReactRouter>
29+
<Route path="/tabs" component={HomePage} />
30+
<Route path="/" render={() => <Redirect to="/tabs/home" />} />
31+
</IonReactRouter>
32+
);
33+
};
34+
35+
const App = () => {
36+
const { store } = React.useContext(MobXProviderContext);
37+
const [hasUser, setHasUser] = useState(false);
38+
useEffect(() => {
39+
autorun(() => {
40+
setHasUser(store.authenticatedUser !== null);
41+
});
42+
}, [store.authenticatedUser]);
43+
44+
console.log(hasUser);
45+
46+
return !store.authCheckComplete ? (
47+
<div
48+
style={{
49+
position: "absolute",
50+
left: "50%",
51+
top: "50%",
52+
transform: "translate(-50%, -50%)",
53+
}}
54+
>
55+
<IonSpinner name="circles" />
56+
</div>
57+
) : (
58+
<IonApp>{hasUser ? <PublicRoutes /> : <PrivateRoutes />}</IonApp>
59+
);
60+
};
61+
62+
export default observer(App);

‎src/components/BasicPage.js

Lines changed: 0 additions & 43 deletions
This file was deleted.

‎src/components/PrivateRoute.js

Lines changed: 0 additions & 22 deletions
This file was deleted.

‎src/components/TabContainer.js

Lines changed: 0 additions & 42 deletions
This file was deleted.

‎src/pages/AddItemModal2.js

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import React, { useState } from "react";
2+
import {
3+
IonModal,
4+
IonButton,
5+
IonHeader,
6+
IonToolbar,
7+
IonTitle,
8+
IonContent,
9+
IonItem,
10+
IonInput,
11+
IonLabel,
12+
IonTextarea,
13+
IonGrid,
14+
IonRow,
15+
IonCol,
16+
IonFooter,
17+
IonDatetime,
18+
} from "@ionic/react";
19+
20+
const AddItemModal2 = ({ showModal, onDidDismiss }) => {
21+
const [subject, setSubject] = useState("");
22+
const [body, setBody] = useState("");
23+
const [dueDate, setDueDate] = useState("");
24+
25+
return (
26+
<IonModal isOpen={showModal} onDidDismiss={() => onDidDismiss()}>
27+
<IonHeader>
28+
<IonToolbar color="primary">
29+
<IonTitle>Add Item</IonTitle>
30+
</IonToolbar>
31+
</IonHeader>
32+
<IonContent padding>
33+
<p>This is modal content</p>
34+
<IonItem>
35+
<IonLabel position="stacked">Subject</IonLabel>
36+
<IonInput
37+
type="text"
38+
onIonChange={(e) => setSubject(e.detail.value)}
39+
name="subject"
40+
/>
41+
</IonItem>
42+
<IonItem>
43+
<IonLabel position="stacked">Due Date</IonLabel>
44+
<IonDatetime
45+
display-format="MMM DD, YYYY"
46+
onIonChange={(e) => setDueDate(e.detail.value)}
47+
name="dueDate"
48+
/>
49+
</IonItem>
50+
<IonItem>
51+
<IonLabel position="stacked">Summary</IonLabel>
52+
<IonTextarea
53+
rows={6}
54+
onIonChange={(e) => setBody(e.detail.value)}
55+
name="body"
56+
/>
57+
</IonItem>
58+
</IonContent>
59+
<IonFooter>
60+
<IonToolbar>
61+
<IonGrid>
62+
<IonRow>
63+
<IonCol>
64+
<IonButton
65+
expand="full"
66+
onClick={() => {
67+
let returnValues = {
68+
dueDate,
69+
body,
70+
subject,
71+
};
72+
onDidDismiss({ result: returnValues });
73+
setDueDate("");
74+
setBody("");
75+
setSubject("");
76+
}}
77+
>
78+
Save
79+
</IonButton>
80+
</IonCol>
81+
<IonCol>
82+
<IonButton
83+
expand="full"
84+
onClick={() => {
85+
setDueDate("");
86+
setBody("");
87+
setSubject("");
88+
onDidDismiss();
89+
}}
90+
>
91+
Cancel
92+
</IonButton>
93+
</IonCol>
94+
</IonRow>
95+
</IonGrid>
96+
</IonToolbar>
97+
</IonFooter>
98+
</IonModal>
99+
);
100+
};
101+
102+
export default AddItemModal2;

‎src/pages/HomePage.js

Lines changed: 45 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,50 @@
1-
import React, { Component } from "react";
2-
import { withRouter } from "react-router-dom";
1+
import { Route, Redirect } from "react-router";
2+
import React from "react";
3+
4+
import TabOnePage from "../pages/TabOnePage";
5+
import TabTwoPage from "../pages/TabTwoPage";
36

47
import {
5-
IonPage,
6-
IonContent,
7-
IonHeader,
8-
IonButtons,
9-
IonToolbar,
10-
IonButton
8+
IonTabs,
9+
IonTabBar,
10+
IonTabButton,
11+
IonLabel,
12+
IonRouterOutlet,
1113
} from "@ionic/react";
1214

1315
// MOBX
14-
import { inject, observer } from "mobx-react";
15-
import TabContainer from "../components/TabContainer";
16-
// import CatalogHeader from "../components/CatalogHeader";
17-
18-
class HomePage extends Component {
19-
constructor(props) {
20-
super(props);
21-
this.state = {
22-
onListPage: true
23-
};
24-
}
25-
26-
27-
/**
28-
* determine if i need to show the add item modal
29-
*/
30-
_addItem = _value => {
31-
debugger;
32-
this.setState(() => ({ showAddItemModal: _value }));
33-
};
34-
35-
/**
36-
* determine if the tabs have changed so I can change the buttons
37-
* in the title bar
38-
*/
39-
_changedTabs = e => {
40-
if (e.currentTarget.attributes.tab.value === "tab1") {
41-
this.setState(() => ({ onListPage: true }));
42-
} else {
43-
this.setState(() => ({ onListPage: false }));
44-
}
45-
};
46-
47-
render() {
48-
let { onListPage } = this.state;
49-
return (
50-
<IonPage>
51-
<IonHeader>
52-
<IonToolbar color="primary">
53-
{onListPage ? (
54-
<IonButtons slot="end">
55-
<IonButton
56-
onClick={e => {
57-
this.setState(() => ({ showAddItemModal: true }));
58-
}}
59-
>
60-
ADD ITEM
61-
</IonButton>
62-
</IonButtons>
63-
) : null}
64-
</IonToolbar>
65-
</IonHeader>
66-
<IonContent>
67-
<TabContainer
68-
history={this.props.history}
69-
changedTabs={e => this._changedTabs(e)}
70-
addItem={this._addItem}
71-
showAddItemModal={this.state.showAddItemModal}
72-
/>
73-
</IonContent>
74-
</IonPage>
75-
);
76-
}
77-
}
78-
79-
export default withRouter(inject("store")(observer(HomePage)));
16+
import { observer } from "mobx-react";
17+
import TabOneDetailPage from "./TabOneDetailPage";
18+
19+
const HomePage = () => {
20+
return (
21+
<IonTabs>
22+
<IonRouterOutlet>
23+
<Route path="/tabs/home" exact={true}>
24+
<TabOnePage />
25+
</Route>
26+
27+
<Route path="/tabs/tab1-detail/:id" exact={true}>
28+
<TabOneDetailPage />
29+
</Route>
30+
31+
<Route path="/tabs/settings" exact={true}>
32+
<TabTwoPage />
33+
</Route>
34+
<Route path="/tabs" render={() => <Redirect to="/tabs/home" />} />
35+
</IonRouterOutlet>
36+
37+
<IonTabBar slot="bottom">
38+
<IonTabButton tab="tab1" href="/tabs/home">
39+
<IonLabel>Home</IonLabel>
40+
</IonTabButton>
41+
42+
<IonTabButton tab="tab2" href="/tabs/settings">
43+
<IonLabel>Settings</IonLabel>
44+
</IonTabButton>
45+
</IonTabBar>
46+
</IonTabs>
47+
);
48+
};
49+
50+
export default observer(HomePage);

‎src/pages/LoginPage.js

Lines changed: 92 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,128 +1,116 @@
1-
import React, { Component } from "react";
2-
import { Redirect } from "react-router-dom";
1+
import React, { useState } from "react";
32
import {
3+
IonButtons,
4+
IonButton,
5+
IonHeader,
6+
IonToolbar,
7+
IonTitle,
48
IonItem,
59
IonLabel,
6-
IonButton,
710
IonInput,
811
IonToast,
9-
IonText
12+
IonText,
13+
IonPage,
14+
IonContent,
1015
} from "@ionic/react";
11-
import BasicPage from "../components/BasicPage";
12-
13-
import { inject, observer } from "mobx-react";
14-
/**
15-
* sets the `title` and property hasMenu = true so that the menu for the side
16-
* drawer is displayed
17-
*
18-
* sets the `renderContent` propety to render the contents of the page
19-
*/
20-
//const LoginPage = ({ isAuth, doLogin }) => {
16+
import { useHistory } from "react-router";
2117

22-
class LoginPage extends Component {
23-
constructor(props) {
24-
super(props);
25-
this.state = {
26-
showErrorToast: false,
27-
errMsg: true
28-
};
18+
import { observer, MobXProviderContext } from "mobx-react";
2919

30-
// see - https://reactjs.org/docs/uncontrolled-components.html
31-
this.email = React.createRef();
32-
this.password = React.createRef();
33-
}
34-
35-
componentDidMount() {}
20+
const LoginPage = () => {
21+
const { store } = React.useContext(MobXProviderContext);
22+
let { isAuth, initializationError } = store;
23+
const history = useHistory();
24+
const [email, setEmail] = useState("test@test.com");
25+
const [password, setPassword] = useState("");
26+
const [errorInfo, setErrorInfo] = useState({});
3627

3728
/**
3829
*
3930
*/
40-
_doLogin = async history => {
31+
const _doLogin = async () => {
4132
try {
42-
let r = await this.props.store.doLogin(
43-
this.email.current.value,
44-
this.password.current.value
45-
);
46-
33+
let r = await store.doLogin(email, password);
4734
if (r.code) {
4835
throw r;
49-
}
36+
}
37+
setErrorInfo({});
38+
return history.push("/tabs/home");
5039
} catch (e) {
51-
this.setState(() => ({ showErrorToast: true, errMsg: e.message }));
40+
setErrorInfo({ showErrorToast: true, errMsg: e.message });
41+
return false;
5242
}
5343
};
5444

55-
render() {
56-
let { isAuth, initializationError, activeUser } = this.props.store;
45+
return (
46+
<IonPage>
47+
<IonHeader>
48+
<IonToolbar color="light">
49+
<IonButtons slot="start" />
50+
<IonTitle>Login</IonTitle>
51+
</IonToolbar>
52+
</IonHeader>
53+
<IonContent className="ion-padding">
54+
<IonText color="danger" padding style={{ fontWeight: "500" }}>
55+
{initializationError && initializationError.message}
56+
</IonText>
5757

58-
if (activeUser) {
59-
return <Redirect to="/home" />;
60-
} else {
61-
return (
62-
<>
63-
<IonText color="danger" padding style={{ fontWeight: "500" }}>
64-
{initializationError && initializationError.message}
65-
</IonText>
66-
<BasicPage
67-
title="Login Page"
68-
hasMenu
69-
renderContent={history => {
70-
return (
71-
<>
72-
<IonItem>
73-
<IonLabel position="floating">Email Address</IonLabel>
74-
<IonInput type="email" ref={this.email} name="email" />
75-
</IonItem>
76-
<IonItem>
77-
<IonLabel position="floating">Password</IonLabel>
78-
<IonInput
79-
type="password"
80-
ref={this.password}
81-
name="password"
82-
/>
83-
</IonItem>
84-
<div style={{ padding: 10, paddingTop: 20 }}>
85-
<IonButton
86-
expand="full"
87-
style={{ margin: 14 }}
88-
onClick={e => {
89-
if (!e.currentTarget) {
90-
return;
91-
}
92-
e.preventDefault();
93-
this._doLogin(history);
94-
}}
95-
>
96-
{isAuth ? "Logged In" : "Login"}
97-
</IonButton>
98-
<IonButton
99-
expand="full"
100-
style={{ margin: 14 }}
101-
onClick={e => {
102-
e.preventDefault();
103-
history.push("/register");
104-
}}
105-
>
106-
Create Account
107-
</IonButton>
108-
</div>
109-
</>
110-
);
58+
<IonItem>
59+
<IonLabel position="floating">Email Address</IonLabel>
60+
<IonInput
61+
type="email"
62+
onIonChange={(e) => {
63+
setEmail(e.detail.value);
11164
}}
65+
name="email"
66+
value="test@test.com"
11267
/>
113-
<IonToast
114-
color="danger"
115-
isOpen={this.state.showErrorToast}
116-
onDidDismiss={() =>
117-
this.setState(() => ({ showErrorToast: false }))
118-
}
119-
message={this.state.errMsg}
120-
duration={2000}
68+
</IonItem>
69+
<IonItem>
70+
<IonLabel position="floating">Password</IonLabel>
71+
<IonInput
72+
type="password"
73+
onIonChange={(e) => {
74+
setPassword(e.detail.value);
75+
}}
76+
name="password"
12177
/>
122-
</>
123-
);
124-
}
125-
}
126-
}
78+
</IonItem>
79+
<div style={{ padding: 10, paddingTop: 20 }}>
80+
<IonButton
81+
expand="full"
82+
style={{ margin: 14 }}
83+
onClick={(e) => {
84+
if (!e.currentTarget) {
85+
return;
86+
}
87+
e.preventDefault();
88+
_doLogin(history);
89+
}}
90+
>
91+
{isAuth ? "Logged In" : "Login"}
92+
</IonButton>
93+
<IonButton
94+
expand="full"
95+
style={{ margin: 14 }}
96+
onClick={(e) => {
97+
e.preventDefault();
98+
history.push("/register");
99+
}}
100+
>
101+
Create Account
102+
</IonButton>
103+
</div>
104+
<IonToast
105+
color="danger"
106+
isOpen={errorInfo.showErrorToast}
107+
onDidDismiss={() => setErrorInfo({ showErrorToast: false })}
108+
message={errorInfo.errMsg}
109+
duration={2000}
110+
/>
111+
</IonContent>
112+
</IonPage>
113+
);
114+
};
127115

128-
export default inject("store")(observer(LoginPage));
116+
export default observer(LoginPage);

‎src/pages/RegistrationPage.js

Lines changed: 115 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1,121 +1,136 @@
1-
import React, { Component } from "react";
2-
import { IonItem, IonLabel, IonButton, IonInput, IonToast } from "@ionic/react";
3-
import BasicPage from "../components/BasicPage";
1+
import React, { useState } from "react";
2+
import {
3+
IonItem,
4+
IonLabel,
5+
IonButton,
6+
IonInput,
7+
IonToast,
8+
IonPage,
9+
IonHeader,
10+
IonToolbar,
11+
IonContent,IonButtons, IonBackButton
12+
} from "@ionic/react";
413

5-
import { inject, observer } from "mobx-react";
6-
/**
7-
* sets the `title` and property hasMenu = true so that the menu for the side
8-
* drawer is displayed
9-
*
10-
* sets the `renderContent` propety to render the contents of the page
11-
*/
12-
//const LoginPage = ({ isAuth, doLogin }) => {
14+
import { MobXProviderContext, observer } from "mobx-react";
15+
import { useHistory } from "react-router";
1316

14-
class RegistrationPage extends Component {
15-
constructor(props) {
16-
super(props);
17-
this.state = {
18-
showErrorToast: false,
19-
errMsg: true
20-
};
17+
const RegistrationPage = () => {
18+
const { store } = React.useContext(MobXProviderContext);
19+
const history = useHistory();
20+
const [errorInfo, setErrorInfo] = useState({});
21+
const [email, setEmail] = useState({});
22+
const [password, setPassword] = useState({});
23+
const [firstName, setFirstName] = useState({});
24+
const [lastName, setLastName] = useState({});
2125

22-
// see - https://reactjs.org/docs/uncontrolled-components.html
23-
this.email = React.createRef();
24-
this.password = React.createRef();
25-
this.firstName = React.createRef();
26-
this.lastName = React.createRef();
27-
}
28-
29-
_doCreateAccount = async history => {
26+
const _doCreateAccount = async () => {
3027
try {
31-
let r = await this.props.store.doCreateUser({
32-
email: this.email.current.value,
33-
password: this.password.current.value,
34-
firstName: this.firstName.current.value,
35-
lastName: this.lastName.current.value
28+
let r = await store.doCreateUser({
29+
email,
30+
password,
31+
firstName,
32+
lastName,
3633
});
3734

3835
if (r.code) {
3936
throw r;
4037
} else {
41-
history.push("/home");
38+
history.replace("/tabs/home");
4239
}
4340
} catch (e) {
4441
console.log(e);
45-
this.setState(() => ({ showErrorToast: true, errMsg: e.message }));
42+
setErrorInfo({ showErrorToast: true, errMsg: e.message });
4643
}
4744
};
4845

49-
render() {
50-
return (
51-
<>
52-
<BasicPage
53-
title="Create Account Page"
54-
hasMenu
55-
backAction={() => {}}
56-
renderContent={history => {
57-
return (
58-
<>
59-
<IonItem>
60-
<IonLabel position="floating">Email Address</IonLabel>
61-
<IonInput type="email" ref={this.email} name="email" />
62-
</IonItem>
46+
return (
47+
<IonPage>
48+
<IonHeader>
49+
<IonToolbar color="primary">
50+
<IonButtons slot="start">
51+
<IonBackButton/>
52+
</IonButtons>
53+
</IonToolbar>
54+
</IonHeader>
55+
<IonContent className="ion-padding">
56+
<IonItem>
57+
<IonLabel position="floating">Email Address</IonLabel>
58+
<IonInput
59+
type="email"
60+
onIonChange={(e) => {
61+
setEmail(e.detail.value);
62+
}}
63+
name="email"
64+
/>
65+
</IonItem>
6366

64-
<IonItem>
65-
<IonLabel position="floating">First Name</IonLabel>
66-
<IonInput type="text" ref={this.firstName} name="firstName" />
67-
</IonItem>
67+
<IonItem>
68+
<IonLabel position="floating">First Name</IonLabel>
69+
<IonInput
70+
type="text"
71+
onIonChange={(e) => {
72+
setFirstName(e.detail.value);
73+
}}
74+
name="firstName"
75+
/>
76+
</IonItem>
77+
78+
<IonItem>
79+
<IonLabel position="floating">Last Name</IonLabel>
80+
<IonInput
81+
type="text"
82+
onIonChange={(e) => {
83+
setLastName(e.detail.value);
84+
}}
85+
name="lastName"
86+
/>
87+
</IonItem>
88+
<IonItem>
89+
<IonLabel position="floating">Password</IonLabel>
90+
<IonInput
91+
type="password"
92+
onIonChange={(e) => {
93+
setPassword(e.detail.value);
94+
}}
95+
name="password"
96+
/>
97+
</IonItem>
98+
<div style={{ padding: 8 }}>
99+
<IonButton
100+
expand="full"
101+
style={{ margin: 14 }}
102+
onClick={(e) => {
103+
if (!e.currentTarget) {
104+
return;
105+
}
106+
e.preventDefault();
107+
_doCreateAccount(history);
108+
}}
109+
>
110+
Create Account
111+
</IonButton>
112+
<IonButton
113+
expand="full"
114+
style={{ margin: 14 }}
115+
onClick={(e) => {
116+
e.preventDefault();
117+
history.goBack();
118+
}}
119+
>
120+
Cancel
121+
</IonButton>
122+
</div>
68123

69-
<IonItem>
70-
<IonLabel position="floating">Last Name</IonLabel>
71-
<IonInput type="text" ref={this.lastName} name="lastName" />
72-
</IonItem>
73-
<IonItem>
74-
<IonLabel position="floating">Password</IonLabel>
75-
<IonInput
76-
type="password"
77-
ref={this.password}
78-
name="password"
79-
/>
80-
</IonItem>
81-
<div style={{ padding: 8 }}>
82-
<IonButton
83-
expand="full"
84-
style={{ margin: 14 }}
85-
onClick={e => {
86-
if (!e.currentTarget) {
87-
return;
88-
}
89-
e.preventDefault();
90-
this._doCreateAccount(history);
91-
}}
92-
>
93-
Create Account
94-
</IonButton>
95-
<IonButton
96-
expand="full"
97-
style={{ margin: 14 }}
98-
onClick={e => {
99-
e.preventDefault();
100-
history.goBack();
101-
}}
102-
>
103-
Cancel
104-
</IonButton>
105-
</div>
106-
</>
107-
);
108-
}}
109-
/>
110124
<IonToast
111-
isOpen={this.state.showErrorToast}
112-
onDidDismiss={() => this.setState(() => ({ showErrorToast: false }))}
113-
message={this.state.errMsg}
125+
color="danger"
126+
isOpen={errorInfo.showErrorToast}
127+
onDidDismiss={() => setErrorInfo({ showErrorToast: false })}
128+
message={errorInfo.errMsg}
114129
duration={2000}
115130
/>
116-
</>
117-
);
118-
}
119-
}
131+
</IonContent>
132+
</IonPage>
133+
);
134+
};
120135

121-
export default inject("store")(observer(RegistrationPage));
136+
export default observer(RegistrationPage);

‎src/pages/TabOneDetailPage.js

Lines changed: 44 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,17 @@
11
import React from "react";
2-
import { IonItem, IonLabel, IonText } from "@ionic/react";
3-
import BasicPage from "../components/BasicPage";
4-
import { inject } from "mobx-react";
2+
import {
3+
IonItem,
4+
IonLabel,
5+
IonText,
6+
IonPage,
7+
IonHeader,
8+
IonToolbar,
9+
IonContent,
10+
IonButtons,
11+
IonBackButton,
12+
} from "@ionic/react";
13+
import { MobXProviderContext } from "mobx-react";
14+
import { useParams } from "react-router";
515
/**
616
* sets the `title` and property hasMenu = false so the menu for the side
717
* drawer is NOT displayed.
@@ -10,36 +20,39 @@ import { inject } from "mobx-react";
1020
*
1121
* sets the `renderContent` propety to render the contents of the page
1222
*/
13-
const TabOneDetailPage = (props) => {
14-
let { store, match} = props
15-
let value = store.itemByKey(match.params.id);
23+
const TabOneDetailPage = () => {
24+
25+
const { store } = React.useContext(MobXProviderContext);
26+
const params = useParams();
27+
let value = store.itemByKey(params.id);
1628

1729
return (
18-
<BasicPage
19-
title="Page One Detail"
20-
backAction={(e, history) => {}}
21-
renderContent={history => {
22-
return (
23-
<>
24-
<IonItem lines="none">
25-
<IonLabel>In Tab One Detail Page</IonLabel>
26-
</IonItem>
27-
<IonItem>
28-
<IonLabel text-wrap>
29-
<IonText color="primary">
30-
<h3>{value.content.subject}</h3>
31-
</IonText>
32-
<p>{value.content.body}</p>
33-
<IonText color="secondary">
34-
<p>{value.content.dueDate}</p>
35-
</IonText>
36-
</IonLabel>
37-
</IonItem>
38-
</>
39-
);
40-
}}
41-
/>
30+
<IonPage>
31+
<IonHeader>
32+
<IonToolbar color="primary">
33+
<IonButtons slot="start">
34+
<IonBackButton/>
35+
</IonButtons>
36+
</IonToolbar>
37+
</IonHeader>
38+
<IonContent className="ion-padding">
39+
<IonItem lines="none">
40+
<IonLabel>In Tab One Detail Page</IonLabel>
41+
</IonItem>
42+
<IonItem>
43+
<IonLabel text-wrap>
44+
<IonText color="primary">
45+
<h3>{value.content.subject}</h3>
46+
</IonText>
47+
<p>{value.content.body}</p>
48+
<IonText color="secondary">
49+
<p>{value.content.dueDate}</p>
50+
</IonText>
51+
</IonLabel>
52+
</IonItem>
53+
</IonContent>
54+
</IonPage>
4255
);
4356
};
4457

45-
export default inject("store")(TabOneDetailPage);
58+
export default TabOneDetailPage;

‎src/pages/TabOnePage.js

Lines changed: 68 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,43 @@
1-
import React, { Component } from "react";
1+
import React, { useState } from "react";
2+
import { useHistory } from "react-router";
23
import {
34
IonItem,
45
IonContent,
56
IonText,
67
IonList,
8+
IonPage,
9+
IonHeader,
10+
IonToolbar,
711
IonLabel,
8-
IonButton,
912
IonItemSliding,
1013
IonItemOption,
11-
IonItemOptions
14+
IonItemOptions,
15+
IonButtons,
16+
IonButton,
1217
} from "@ionic/react";
1318
import { IonRefresher, IonRefresherContent } from "@ionic/react";
1419

1520
// MOBX
16-
import { inject, observer } from "mobx-react";
17-
import AddItemModal from "./AddItemModal";
21+
import { MobXProviderContext, observer } from "mobx-react";
22+
import AddItemModal from "./AddItemModal2";
1823

19-
class TabOnePage extends Component {
20-
constructor(props) {
21-
super(props);
22-
this.state = {};
24+
const TabOnePage = ({ addItem }) => {
25+
const history = useHistory();
26+
const [refreshing, setRefreshing] = useState(false);
27+
const [showAddItemModal, setShowAddItemModal] = useState(false);
2328

24-
this.props.store.loadData();
25-
}
29+
const {store} = React.useContext(MobXProviderContext)
2630

2731
/**
2832
*
2933
*/
30-
_renderItems = () => {
31-
return this.props.store.itemEntries.map(([key, value]) => {
34+
const _renderItems = () => {
35+
return store.itemEntries.map(([key, value]) => {
3236
return (
3337
<IonItemSliding key={key}>
3438
<IonItem
35-
onClick={e => {
36-
if (!e.currentTarget) {
37-
return;
38-
}
39-
e.preventDefault();
40-
this.props.history.push("/tab1-detail/" + key);
39+
onClick={(e) => {
40+
history.push("/tabs/tab1-detail/" + key);
4141
}}
4242
>
4343
<IonLabel text-wrap>
@@ -52,7 +52,7 @@ class TabOnePage extends Component {
5252
</IonItem>
5353

5454
<IonItemOptions side="end">
55-
<IonItemOption onClick={e => this._delete(e, value)} color="danger">
55+
<IonItemOption onClick={(e) => _delete(e, value)} color="danger">
5656
Delete
5757
</IonItemOption>
5858
</IonItemOptions>
@@ -61,8 +61,7 @@ class TabOnePage extends Component {
6161
});
6262
};
6363

64-
_delete = async (_e, _item) => {
65-
let { store } = this.props;
64+
const _delete = async (_e, _item) => {
6665
// close the item
6766
await _e.target.parentElement.parentElement.closeOpened();
6867
let result = await store.deleteItem({ id: _item.id });
@@ -71,61 +70,68 @@ class TabOnePage extends Component {
7170
}
7271
};
7372

74-
_doRefresh = async event => {
73+
const _doRefresh = async (event) => {
7574
console.log("Begin async operation");
76-
this.setState(() => ({ refreshing: true }));
77-
78-
await this.props.store.loadData();
79-
75+
setRefreshing(true);
76+
await store.loadData();
77+
setRefreshing(false);
8078
console.log("Async operation has ended");
81-
//event.target.complete();
82-
//this.setState(() => ({ refreshing: false }));
8379
};
8480

85-
_renderList = () => {
81+
const _renderList = () => {
8682
return (
87-
<IonContent>
88-
<IonList>
89-
<IonRefresher onIonRefresh={e => this._doRefresh(e)}>
90-
<IonRefresherContent style={{ color: "black" }} refreshingText="Refreshing..." padding/>
91-
</IonRefresher>
92-
<div style={{paddingTop: this.state.refreshing ? 40 : 0}}>
93-
{this._renderItems()}
94-
</div>
95-
</IonList>
96-
</IonContent>
83+
<IonList>
84+
<IonRefresher onIonRefresh={(e) => _doRefresh(e)}>
85+
<IonRefresherContent
86+
style={{ color: "black" }}
87+
refreshingText="Refreshing..."
88+
padding
89+
/>
90+
</IonRefresher>
91+
<div style={{ paddingTop: refreshing ? 40 : 0 }}>{_renderItems()}</div>
92+
</IonList>
9793
);
9894
};
9995

100-
render() {
101-
let { store, showAddItemModal } = this.props;
102-
103-
if (!store.activeUser) return null;
96+
if (!store.activeUser) return null;
10497

105-
return (
106-
<>
98+
return (
99+
<IonPage>
100+
<IonHeader>
101+
<IonToolbar color="primary">
102+
<IonButtons slot="end">
103+
<IonButton
104+
onClick={(e) => {
105+
setShowAddItemModal(true);
106+
}}
107+
>
108+
ADD ITEM
109+
</IonButton>
110+
</IonButtons>
111+
</IonToolbar>
112+
</IonHeader>
113+
<IonContent padding>
107114
<AddItemModal
108115
showModal={showAddItemModal}
109-
onDidDismiss={_v => {
116+
onDidDismiss={(_v) => {
110117
if (_v) {
111118
console.log(_v.result);
112119
store.addItem({ ..._v.result });
113120
}
114-
this.props.addItem(false)
121+
setShowAddItemModal(false);
115122
}}
116123
/>
117-
<IonContent padding>
118-
<IonItem lines="none">
119-
<h1>Tab One Page</h1>
120-
</IonItem>
121-
<IonItem lines="none">
122-
<IonLabel>Current User: {store.activeUser.email}</IonLabel>
123-
</IonItem>
124-
{this._renderList()}
125-
</IonContent>{" "}
126-
</>
127-
);
128-
}
129-
}
130124

131-
export default inject("store")(observer(TabOnePage));
125+
<IonItem lines="none">
126+
<h1>Tab One Page</h1>
127+
</IonItem>
128+
<IonItem lines="none">
129+
<IonLabel>Current User: {store.activeUser.email}</IonLabel>
130+
</IonItem>
131+
{_renderList()}
132+
</IonContent>
133+
</IonPage>
134+
);
135+
};
136+
137+
export default observer(TabOnePage);

‎src/pages/TabTwoPage.js

Lines changed: 31 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,34 @@
1-
import React, { Component } from "react";
2-
import { IonItem, IonContent, IonButton, IonLabel } from "@ionic/react";
1+
import React from "react";
2+
import { useHistory } from "react-router";
3+
import {
4+
IonItem,
5+
IonContent,
6+
IonPage,
7+
IonLabel,
8+
IonButton,
9+
IonHeader,
10+
IonToolbar,
11+
} from "@ionic/react";
312
// MOBX
4-
import { inject } from "mobx-react";
13+
import { MobXProviderContext } from "mobx-react";
514

6-
class TabTwoPage extends Component {
7-
constructor(props) {
8-
super(props);
9-
this.state = {};
10-
}
15+
const TabTwoPage = () => {
16+
const history = useHistory();
17+
const { store } = React.useContext(MobXProviderContext);
1118

12-
_onLogoutClick = async e => {
19+
const _onLogoutClick = async (e) => {
1320
e.preventDefault();
14-
await this.props.store.doLogout();
15-
this.props.history.push("/login");
21+
await store.doLogout();
22+
return history.replace("/login");
1623
};
1724

18-
render() {
19-
let user = this.props.store.activeUser;
20-
return (
21-
<IonContent padding>
25+
let user = store.activeUser;
26+
return user ? (
27+
<IonPage>
28+
<IonHeader>
29+
<IonToolbar color="primary"></IonToolbar>
30+
</IonHeader>
31+
<IonContent className="ion-padding">
2232
<IonItem>
2333
<IonLabel position="fixed">Email</IonLabel>
2434
<IonLabel>{user.email}</IonLabel>
@@ -40,15 +50,15 @@ class TabTwoPage extends Component {
4050

4151
<IonButton
4252
expand="full"
43-
onClick={e => {
44-
this._onLogoutClick(e);
53+
onClick={(e) => {
54+
_onLogoutClick(e);
4555
}}
4656
>
4757
LOGOUT
4858
</IonButton>
4959
</IonContent>
50-
);
51-
}
52-
}
60+
</IonPage>
61+
) : null;
62+
};
5363

54-
export default inject("store")(TabTwoPage);
64+
export default TabTwoPage;

‎src/store/index.js

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export class Store {
1010
this.items = new Map();
1111
this.initializationError = null;
1212

13-
this.initializeStore().then(u => {
13+
this.initializeStore().then((u) => {
1414
this.activeUser = u;
1515
this.authCheckComplete = true;
1616
});
@@ -22,11 +22,13 @@ export class Store {
2222
* user
2323
* @param {*} _authUser
2424
*/
25-
handleAuthedUser = async _authUser => {
25+
handleAuthedUser = async (_authUser) => {
2626
if (_authUser) {
2727
let userAcctInfo = await firebaseService.getUserProfile();
2828
console.log("setting active user");
2929
this.activeUser = { ..._authUser, ...userAcctInfo };
30+
31+
await this.loadData();
3032
} else {
3133
this.activeUser = _authUser;
3234
}
@@ -39,10 +41,10 @@ export class Store {
3941
async initializeStore() {
4042
return firebaseService
4143
.authCheck(this.handleAuthedUser)
42-
.then(_user => {
44+
.then((_user) => {
4345
return _user;
4446
})
45-
.catch(e => {
47+
.catch((e) => {
4648
return runInAction(() => {
4749
this.initializationError = e;
4850
});
@@ -82,20 +84,18 @@ export class Store {
8284
* login using a username and password
8385
*/
8486
doLogin(_username, _password) {
85-
debugger;
8687
if (_username.length) {
8788
return firebaseService
8889
.loginWithEmail(_username, _password)
89-
.then(
90-
_result => {
91-
return true;
90+
.then( async (_result) => {
91+
return _result;
9292
},
93-
err => {
93+
(err) => {
9494
console.log(err);
9595
return err;
9696
}
9797
)
98-
.catch(e => {
98+
.catch((e) => {
9999
console.log(e);
100100
return e;
101101
});
@@ -111,7 +111,7 @@ export class Store {
111111
email: _params.email,
112112
password: _params.password,
113113
firstName: _params.firstName,
114-
lastName: _params.lastName
114+
lastName: _params.lastName,
115115
});
116116
return newUser;
117117
} catch (err) {
@@ -141,7 +141,7 @@ export class Store {
141141
return firebaseService
142142
.queryObjectCollection({ collection: "items" })
143143
.then(
144-
_result => {
144+
(_result) => {
145145
// create the user object based on the data retrieved...
146146
return runInAction(() => {
147147
let resultMap = _result.reduce((map, obj) => {
@@ -152,12 +152,12 @@ export class Store {
152152
return resultMap;
153153
});
154154
},
155-
err => {
155+
(err) => {
156156
console.log(err);
157157
return err;
158158
}
159159
)
160-
.catch(e => {
160+
.catch((e) => {
161161
console.log(e);
162162
return e;
163163
});
@@ -166,19 +166,19 @@ export class Store {
166166
return firebaseService
167167
.addObjectToCollection({ collection: "items", objectData: _data })
168168
.then(
169-
_result => {
169+
(_result) => {
170170
// create the user object based on the data retrieved...
171171
return runInAction(() => {
172172
set(this.items, _result.id, _result);
173173
return _result;
174174
});
175175
},
176-
err => {
176+
(err) => {
177177
console.log(err);
178178
return err;
179179
}
180180
)
181-
.catch(e => {
181+
.catch((e) => {
182182
console.log(e);
183183
return e;
184184
});
@@ -188,19 +188,19 @@ export class Store {
188188
return firebaseService
189189
.removeObjectFromCollection({ collection: "items", objectId: _data.id })
190190
.then(
191-
_result => {
191+
(_result) => {
192192
// create the user object based on the data retrieved...
193193
return runInAction(() => {
194194
remove(this.items, _data.id);
195195
return true;
196196
});
197197
},
198-
err => {
198+
(err) => {
199199
console.log(err);
200200
return err;
201201
}
202202
)
203-
.catch(e => {
203+
.catch((e) => {
204204
console.log(e);
205205
return e;
206206
});
@@ -227,5 +227,5 @@ decorate(Store, {
227227
loadData: action,
228228
itemByKey: action,
229229
addItem: action,
230-
deleteItem: action
230+
deleteItem: action,
231231
});

0 commit comments

Comments
 (0)
Please sign in to comment.