Skip to content

Commit 8afc7c9

Browse files
aaronksaundersaaronksaunders
committed
refactor and updated
1 parent 78fa34b commit 8afc7c9

13 files changed

+574
-564
lines changed

‎package.json

-2
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

+56-42
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

-43
This file was deleted.

‎src/components/PrivateRoute.js

-22
This file was deleted.

‎src/components/TabContainer.js

-42
This file was deleted.

‎src/pages/AddItemModal2.js

+102
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;

0 commit comments

Comments
 (0)