admin/imexmobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove all native base dependencies.

Browse Source
This commit is contained in:
Patrick Fic
2021-03-11 11:53:42 -07:00
parent 373f215ffa
commit 59f6605a40
19 changed files with 34349 additions and 7016 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
App.js
View File

@@ -1,9 +1,6 @@
import { ApolloProvider } from "@apollo/client";
import { Ionicons } from "@expo/vector-icons";
import AppLoading from "expo-app-loading";
//import * as FileSystem from "expo-file-system";
import * as Font from "expo-font";
import React from "react";
import { DefaultTheme, Provider as PaperProvider } from "react-native-paper";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import * as Sentry from "sentry-expo";
@@ -24,34 +21,41 @@ Sentry.init({
});
Sentry.Native.nativeCrash();
const theme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
primary: "tomato",
accent: "yellow",
},
};
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
isReady: false,
};
}
// constructor(props) {
// super(props);
// this.state = {
// isReady: false,
// };
// }
async componentDidMount() {
logImEXEvent("imexmobile_app_start");
await Font.loadAsync({
Roboto: require("native-base/Fonts/Roboto.ttf"),
Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
...Ionicons.font,
});
this.setState({ isReady: true });
//this.setState({ isReady: true });
}
render() {
if (!this.state.isReady) {
return <AppLoading />;
}
// if (!this.state.isReady) {
// return <AppLoading />;
// }
return (
<Provider store={store}>
<PersistGate persistor={persistor}>
<ApolloProvider client={client}>
<PaperProvider theme={theme}>
<ScreenMainComponent />
</PaperProvider>
</ApolloProvider>
</PersistGate>
</Provider>

120
components/camera-select-job/camera-select-job.component.jsx
View File

@@ -1,14 +1,16 @@
import { useQuery } from "@apollo/client";
import { Picker } from "native-base";
import React from "react";
import { useTranslation } from "react-i18next";
import { View } from "react-native";
import { FlatList, RefreshControl } from "react-native";
import { Button, List, Modal, Portal, Provider } from "react-native-paper";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { logImEXEvent } from "../../firebase/firebase.utils";
import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
import { setCameraJob, setCameraJobId } from "../../redux/app/app.actions";
import { selectCurrentCameraJobId } from "../../redux/app/app.selectors";
import {
selectCurrentCameraJob,
selectCurrentCameraJobId,
} from "../../redux/app/app.selectors";
import { selectBodyshop } from "../../redux/user/user.selectors";
import ErrorDisplay from "../error-display/error-display.component";
import LoadingDisplay from "../loading-display/loading-display.component";
@@ -16,6 +18,7 @@ import LoadingDisplay from "../loading-display/loading-display.component";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
cameraJobId: selectCurrentCameraJobId,
cameraJob: selectCurrentCameraJob,
});
const mapDispatchToProps = (dispatch) => ({
@@ -27,9 +30,10 @@ export function CameraSelectJob({
bodyshop,
cameraJobId,
setCameraJobId,
cameraJob,
setCameraJob,
}) {
const { loading, error, data } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
const { loading, error, data, refetch } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
variables: {
statuses: bodyshop.md_ro_statuses.active_statuses || ["Open", "Open*"],
},
@@ -39,47 +43,83 @@ export function CameraSelectJob({
if (loading) return <LoadingDisplay />;
if (error) return <ErrorDisplay errorMessage={error.message} />;
console.log("Picker Render");
const [visible, setVisible] = React.useState(false);
const showModal = () => setVisible(true);
const hideModal = () => setVisible(false);
const containerStyle = { backgroundColor: "white", padding: 20 };
const onRefresh = async () => {
return refetch();
};
return (
<View
style={{
marginHorizontal: 10,
}}
<Provider>
<Portal>
<Modal
visible={visible}
onDismiss={hideModal}
contentContainerStyle={containerStyle}
>
<Picker
selectedValue={cameraJobId}
onValueChange={(value, idx) => {
logImEXEvent("imexmobile_setcamerajobid");
setCameraJobId(value);
setCameraJob(data.jobs[idx]);
<FlatList
refreshControl={
<RefreshControl refreshing={loading} onRefresh={onRefresh} />
}
data={data.jobs}
keyExtractor={(item) => item.id}
renderItem={(object) => (
<List.Item
onPress={() => {
setCameraJobId(object.item.id);
setCameraJob(object.item);
hideModal();
}}
>
<Picker.Item
label={t("mediabrowser.labels.selectjob")}
value={null}
key="null"
description={`${
object.item.ro_number ? `${object.item.ro_number} - ` : ``
}${object.item.ownr_fn || ""} ${object.item.ownr_ln || ""} ${
object.item.ownr_co_nm || ""
} - ${object.item.v_model_yr || ""} ${
object.item.v_make_desc || ""
} ${object.item.v_model_desc || ""}`}
key={object.item.id}
/>
<Picker.Item
label={t("mediabrowser.labels.temporarystorage")}
value="temp"
key="temp"
/>
{data.jobs.map((j) => {
return (
<Picker.Item
label={`${j.ro_number ? `${j.ro_number} - ` : ``}${
j.ownr_fn || ""
} ${j.ownr_ln || ""} ${j.ownr_co_nm || ""} - ${
j.v_model_yr || ""
} ${j.v_make_desc || ""} ${j.v_model_desc || ""}`}
value={j.id}
key={j.id}
)}
/>
</Modal>
</Portal>
<Button style={{ marginTop: 30 }} onPress={showModal}>
{cameraJobId
? `${cameraJob.ro_number ? `${cameraJob.ro_number} - ` : ``}${
cameraJob.ownr_fn || ""
} ${cameraJob.ownr_ln || ""} ${cameraJob.ownr_co_nm || ""} - ${
cameraJob.v_model_yr || ""
} ${cameraJob.v_make_desc || ""} ${cameraJob.v_model_desc || ""}`
: t("mediabrowser.labels.selectjob")}
</Button>
</Provider>
);
})}
</Picker>
</View>
);
// return (
// <View
// style={{
// marginHorizontal: 10,
// }}
// >
// <Picker
// selectedValue={cameraJobId}
// onValueChange={(value, idx) => {
// logImEXEvent("imexmobile_setcamerajobid");
// setCameraJobId(value);
// setCameraJob(data.jobs[idx]);
// }}
// >
// <Picker.Item
// label={t("mediabrowser.labels.selectjob")}
// value={null}
// key="null"
// />
// </Picker>
// </View>
// );
}
export default connect(mapStateToProps, mapDispatchToProps)(CameraSelectJob);

26
components/data-label/data-label.component.jsx
View File

@@ -1,15 +1,13 @@
import { DateTime } from "luxon";
import { Input, Item, Label } from "native-base";
import React from "react";
import { StyleSheet } from "react-native";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
const mapStateToProps = createStructuredSelector({
//currentUser: selectCurrentUser
});
const mapDispatchToProps = (dispatch) => ({});
import { Text, TextInput, View } from "react-native";
export function DataLabelComponent({ label, content, dateTime, ...restProps }) {
export default function DataLabelComponent({
label,
content,
dateTime,
...restProps
}) {
let theContent = content;
if (dateTime && content)
@@ -18,11 +16,9 @@ export function DataLabelComponent({ label, content, dateTime, ...restProps }) {
);
return (
<Item stackedLabel {...restProps}>
<Label>{label}</Label>
<Input disabled placeholder={theContent} />
</Item>
<View {...restProps}>
<Text>{label}</Text>
<TextInput disabled placeholder={theContent} />
</View>
);
}
const localStyles = StyleSheet.create({});
export default connect(mapStateToProps, mapDispatchToProps)(DataLabelComponent);

12
components/job-documents/job-documents.component.jsx
View File

@@ -1,7 +1,7 @@
import { Thumbnail } from "native-base";
import React, { useState } from "react";
import {
FlatList,
Image,
RefreshControl,
StyleSheet,
Text,
@@ -33,15 +33,15 @@ export default function JobDocumentsComponent({ job, loading, refetch }) {
renderItem={(object) => (
<TouchableOpacity
onPress={() => {
// setImgIndex(object.index);
// setPreviewVisible(true);
setImgIndex(object.index);
setPreviewVisible(true);
}}
>
<Thumbnail
square
large
<Image
style={{ margin: 5 }}
source={{
width: 100,
height: 100,
uri: `${REACT_APP_CLOUDINARY_IMAGE_ENDPOINT}/${REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS}/${object.item.key}`,
}}
/>

12
components/job-lines/job-lines.component.jsx
View File

@@ -1,8 +1,8 @@
import Dinero from "dinero.js";
import { Card, CardItem, Text } from "native-base";
import React from "react";
import { useTranslation } from "react-i18next";
import { FlatList, RefreshControl, StyleSheet, View } from "react-native";
import { FlatList, RefreshControl, StyleSheet, Text, View } from "react-native";
import { Card } from "react-native-paper";
export default function JobLines({ job, loading, refetch }) {
const { t } = useTranslation();
@@ -27,7 +27,7 @@ export default function JobLines({ job, loading, refetch }) {
keyExtractor={(item) => item.id}
renderItem={(object) => (
<Card>
<CardItem style={localStyles.flexRow}>
<Card.Content style={localStyles.flexRow}>
<Text style={localStyles.growWithEllipsis}>{`${
object.item.line_desc
}${
@@ -43,14 +43,14 @@ export default function JobLines({ job, loading, refetch }) {
amount: Math.round((object.item.act_price || 0) * 100),
}).toFormat()}
</Text>
</CardItem>
<CardItem style={localStyles.flexRow}>
</Card.Content>
<Card.Content style={localStyles.flexRow}>
{object.item.mod_lbr_ty && (
<Text>
{t(`jobdetail.lbr_types.${object.item.mod_lbr_ty}`)}
</Text>
)}
</CardItem>
</Card.Content>
</Card>
)}
/>

23
components/job-list-item/job-list-item.component.jsx
View File

@@ -1,11 +1,11 @@
import { Ionicons } from "@expo/vector-icons";
import { useNavigation } from "@react-navigation/native";
import { Body, H3, Icon, ListItem, Right } from "native-base";
import React, { useRef } from "react";
import { useTranslation } from "react-i18next";
import { Animated, Text } from "react-native";
import { Animated } from "react-native";
import { TouchableOpacity } from "react-native-gesture-handler";
import Swipeable from "react-native-gesture-handler/Swipeable";
import { List } from "react-native-paper";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { logImEXEvent } from "../../firebase/firebase.utils";
@@ -65,22 +65,15 @@ export function JobListItem({ setCameraJob, setCameraJobId, item }) {
renderRightActions={RenderRightAction}
shouldCancelWhenOutside
>
<TouchableOpacity onPress={onPress}>
<ListItem>
<H3>{item.ro_number || t("general.labels.na")}</H3>
<Body style={{ marginLeft: 10 }}>
<Text>{`${item.ownr_fn || ""} ${item.ownr_ln || ""} ${
<List.Item
onPress={onPress}
title={item.ro_number || t("general.labels.na")}
description={`${item.ownr_fn || ""} ${item.ownr_ln || ""} ${
item.ownr_co_nm || ""
} - ${item.v_model_yr || ""} ${item.v_make_desc || ""} ${
item.v_model_desc || ""
}`}</Text>
</Body>
<Right>
<Icon active name="arrow-forward" />
</Right>
</ListItem>
</TouchableOpacity>
}`}
/>
</Swipeable>
);
}

8
components/job-notes-item/job-notes-item.component.jsx
View File

@@ -1,12 +1,12 @@
import { AntDesign } from "@expo/vector-icons";
import { DateTime } from "luxon";
import { Card, CardItem, Text, View } from "native-base";
import React from "react";
import { Text, View } from "react-native";
import { Card } from "react-native-paper";
export default function NoteListItem({ item }) {
return (
<Card>
<CardItem bordered>
<Card.Content>
<View style={{ display: "flex", flex: 1 }}>
<Text>{item.text}</Text>
<View
@@ -40,7 +40,7 @@ export default function NoteListItem({ item }) {
</Text>
</View>
</View>
</CardItem>
</Card.Content>
</Card>
);
}

11
components/job-notes/job-notes.component.jsx
View File

@@ -1,9 +1,8 @@
import { Card, CardItem, H3, Text } from "native-base";
import React from "react";
import { useTranslation } from "react-i18next";
import { FlatList, RefreshControl } from "react-native";
import { FlatList, RefreshControl, Text } from "react-native";
import JobNotesItem from "../job-notes-item/job-notes-item.component";
import { Card } from "react-native-paper";
export default function JobNotes({ job, loading, refetch }) {
const { t } = useTranslation();
if (!job) {
@@ -18,9 +17,9 @@ export default function JobNotes({ job, loading, refetch }) {
if (job.notes.length === 0)
return (
<Card>
<CardItem>
<H3>{t("jobdetail.labels.nojobnotes")}</H3>
</CardItem>
<Card.Content>
<Text>{t("jobdetail.labels.nojobnotes")}</Text>
</Card.Content>
</Card>
);

107
components/job-tombstone/job-tombstone.component.jsx
View File

@@ -1,16 +1,13 @@
import {
Card,
CardItem,
Container,
Content,
Form,
H2,
H3,
Text,
} from "native-base";
import { Card } from "react-native-paper";
import React from "react";
import { useTranslation } from "react-i18next";
import { RefreshControl, StyleSheet } from "react-native";
import {
RefreshControl,
StyleSheet,
ScrollView,
Text,
View,
} from "react-native";
import DataLabelComponent from "../data-label/data-label.component";
export default function JobTombstone({ job, loading, refetch }) {
@@ -25,35 +22,32 @@ export default function JobTombstone({ job, loading, refetch }) {
};
return (
<Container>
<Content
<ScrollView
padder
refreshControl={
<RefreshControl refreshing={loading} onRefresh={onRefresh} />
}
>
<Card>
<CardItem bordered style={localStyles.status}>
<H2>{job.status}</H2>
</CardItem>
<Card.Content bordered style={localStyles.status}>
<Text>{job.status}</Text>
</Card.Content>
{job.inproduction && (
<CardItem bordered style={localStyles.inproduction}>
<Card.Content bordered style={localStyles.inproduction}>
<Text>{t("objects.jobs.labels.inproduction")}</Text>
</CardItem>
</Card.Content>
)}
{job.inproduction &&
job.production_vars &&
!!job.production_vars.note && (
<CardItem bordered style={localStyles.inproduction}>
{job.inproduction && job.production_vars && !!job.production_vars.note && (
<Card.Content bordered style={localStyles.inproduction}>
<Text>{job.production_vars.note}</Text>
</CardItem>
</Card.Content>
)}
</Card>
<Card>
<CardItem bordered style={localStyles.status}>
<H3>{t("jobdetail.labels.claiminformation")}</H3>
</CardItem>
<Form>
<Card.Content bordered style={localStyles.status}>
<Text>{t("jobdetail.labels.claiminformation")}</Text>
</Card.Content>
<View>
<DataLabelComponent
label={t("objects.jobs.fields.owner")}
content={`${job.ownr_fn || ""} ${job.ownr_ln || ""} ${
@@ -74,18 +68,17 @@ export default function JobTombstone({ job, loading, refetch }) {
label={t("objects.jobs.fields.clm_no")}
content={job.clm_no}
/>
</Form>
</View>
</Card>
<Card>
<CardItem bordered style={localStyles.status}>
<H3>{t("jobdetail.labels.employeeassignments")}</H3>
</CardItem>
<Form>
<Card.Content bordered style={localStyles.status}>
<Text>{t("jobdetail.labels.employeeassignments")}</Text>
</Card.Content>
<View>
<DataLabelComponent
label={t("objects.jobs.fields.employee_body")}
content={`${
(job.employee_body_rel && job.employee_body_rel.first_name) ||
""
(job.employee_body_rel && job.employee_body_rel.first_name) || ""
} ${
(job.employee_body_rel && job.employee_body_rel.last_name) || ""
}`}
@@ -93,8 +86,7 @@ export default function JobTombstone({ job, loading, refetch }) {
<DataLabelComponent
label={t("objects.jobs.fields.employee_prep")}
content={`${
(job.employee_prep_rel && job.employee_prep_rel.first_name) ||
""
(job.employee_prep_rel && job.employee_prep_rel.first_name) || ""
} ${
(job.employee_prep_rel && job.employee_prep_rel.last_name) || ""
}`}
@@ -111,10 +103,10 @@ export default function JobTombstone({ job, loading, refetch }) {
""
}`}
/>
</Form>
</View>
</Card>
<Card style={localStyles.twoColumnCard}>
<Form style={localStyles.twoColumnCardColumn}>
<View style={localStyles.twoColumnCardColumn}>
<DataLabelComponent
label={t("objects.jobs.fields.scheduled_in")}
content={job.scheduled_in}
@@ -125,8 +117,8 @@ export default function JobTombstone({ job, loading, refetch }) {
content={job.actual_in}
dateTime
/>
</Form>
<Form style={localStyles.twoColumnCardColumn}>
</View>
<View style={localStyles.twoColumnCardColumn}>
<DataLabelComponent
label={t("objects.jobs.fields.scheduled_completion")}
content={job.scheduled_completion}
@@ -137,10 +129,9 @@ export default function JobTombstone({ job, loading, refetch }) {
content={job.scheduled_delivery}
dateTime
/>
</Form>
</View>
</Card>
</Content>
</Container>
</ScrollView>
);
}
@@ -159,33 +150,3 @@ const localStyles = StyleSheet.create({
justifyContent: "center",
},
});
// <Card>
// <CardItem bordered style={localStyles.ins_card}>
// <View style={{ flex: 3, marginright: 10 }}>
// <Text numberOfLines={1}>{job.ins_co_nm || ""}</Text>
// <Text numberOfLines={1}>{job.clm_no || ""}</Text>
// </View>
// <View style={{ flex: 1, marginLeft: 10 }}>
// <Text numberOfLines={1}>{job.ded_status || ""}</Text>
// <Text numberOfLines={1}>
// {Dinero({ amount: (job.ded_amt || 0) * 100 }).toFormat()}
// </Text>
// </View>
// </CardItem>
// <CardItem bordered style={localStyles.owner_card}>
// <View style={{ flex: 1 }}>
// <Text numberOfLines={1}>{`${job.ownr_fn || ""} ${job.ownr_ln || ""}${
// job.ownr_co_nm || ""
// }`}</Text>
// <Text>{job.ownr_ph1 || ""}</Text>
// </View>
// <View style={{ flex: 1 }}>
// <Text numberOfLines={2}>{`${job.v_model_yr || ""} ${
// job.v_make_desc || ""
// } ${job.v_model_desc || ""} ${job.v_vin || ""}`}</Text>
// </View>
// </CardItem>
// <CardItem></CardItem>
// </Card>;

3
components/media-cache-overlay/media-cache-overlay.component.jsx
View File

@@ -1,6 +1,5 @@
import { Button, View } from "native-base";
import React from "react";
import { Alert, Modal, StyleSheet, Text } from "react-native";
import { Alert, Modal, StyleSheet, Text, Button, View } from "react-native";
import ImageViewer from "react-native-image-zoom-viewer";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";

66
components/screen-job-detail/screen-job-detail.component.jsx
View File

@@ -1,7 +1,8 @@
import { useQuery } from "@apollo/client";
import { Tab, Tabs } from "native-base";
import React from "react";
import { useTranslation } from "react-i18next";
import { useWindowDimensions } from "react-native";
import { SceneMap, TabView } from "react-native-tab-view";
import { GET_JOB_BY_PK } from "../../graphql/jobs.queries";
import ErrorDisplay from "../error-display/error-display.component";
import JobDocuments from "../job-documents/job-documents.component";
@@ -15,7 +16,7 @@ export default function ScreenJobDetail({ route }) {
params: { jobId },
} = route;
const { t } = useTranslation();
const layout = useWindowDimensions();
const { loading, error, data, refetch } = useQuery(GET_JOB_BY_PK, {
variables: {
id: jobId,
@@ -23,31 +24,50 @@ export default function ScreenJobDetail({ route }) {
skip: !jobId,
});
const renderScene = SceneMap({
job: () =>
JobTombstone({
job: data.jobs_by_pk,
loading: loading,
refetch: refetch,
}),
lines: () =>
JobLines({
job: data.jobs_by_pk,
loading: loading,
refetch: refetch,
}),
documents: () =>
JobDocuments({
job: data.jobs_by_pk,
loading: loading,
refetch: refetch,
}),
notes: () =>
JobNotes({
job: data.jobs_by_pk,
loading: loading,
refetch: refetch,
}),
});
const [index, setIndex] = React.useState(0);
const [routes] = React.useState([
{ key: "job", title: t("jobdetail.labels.job") },
{ key: "lines", title: t("jobdetail.labels.lines") },
{ key: "documents", title: t("jobdetail.labels.documents") },
{ key: "notes", title: t("jobdetail.labels.notes") },
]);
if (loading) return <LoadingDisplay />;
if (error) return <ErrorDisplay errorMessage={error.message} />;
return (
<Tabs>
<Tab heading={t("jobdetail.labels.job")}>
<JobTombstone
job={data.jobs_by_pk}
loading={loading}
refetch={refetch}
<TabView
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={{ width: layout.width }}
/>
</Tab>
<Tab heading={t("jobdetail.labels.lines")}>
<JobLines job={data.jobs_by_pk} loading={loading} refetch={refetch} />
</Tab>
<Tab heading={t("jobdetail.labels.documents")}>
<JobDocuments
job={data.jobs_by_pk}
loading={loading}
refetch={refetch}
/>
</Tab>
<Tab heading={t("jobdetail.labels.notes")}>
<JobNotes job={data.jobs_by_pk} loading={loading} refetch={refetch} />
</Tab>
</Tabs>
);
}

3
components/screen-media-browser/screen-media-browser.component.jsx
View File

@@ -2,7 +2,6 @@ import { Ionicons } from "@expo/vector-icons";
import { AssetsSelector } from "expo-images-picker";
import * as MediaLibrary from "expo-media-library";
import _ from "lodash";
import { H3 } from "native-base";
import plimit from "p-limit";
import React, { useCallback, useState } from "react";
import { useTranslation } from "react-i18next";
@@ -112,7 +111,7 @@ export function ImageBrowserScreen({
alignItems: "center",
}}
>
<H3>{t("mediabrowser.labels.selectjobassetselector")}</H3>
<Text>{t("mediabrowser.labels.selectjobassetselector")}</Text>
</View>
)}
{selectedCameraJobId && (

10
components/screen-media-cache/screen-media-cache.component.jsx
View File

@@ -1,15 +1,17 @@
import _ from "lodash";
import { Button, Spinner, Text as NBText, View } from "native-base";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import {
ActivityIndicator,
FlatList,
Image,
SafeAreaView,
StyleSheet,
Text,
TouchableOpacity,
View,
} from "react-native";
import { Button } from "react-native-paper";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import {
@@ -82,11 +84,11 @@ export function ScreenMediaCache({
<SafeAreaView style={styles.container}>
<View style={styles.actions}>
<Button onPress={() => removeAllPhotos()}>
<NBText>{t("mediacache.actions.deleteall")}</NBText>
<Text>{t("mediacache.actions.deleteall")}</Text>
</Button>
<Button onPress={() => uploadAllphotos()}>
<NBText>{t("mediacache.actions.uploadall")}</NBText>
{uploadInProgress && <Spinner />}
<Text>{t("mediacache.actions.uploadall")}</Text>
{uploadInProgress && <ActivityIndicator />}
</Button>
</View>
<FlatList

43
components/screen-sign-in/screen-sign-in.component.jsx
View File

@@ -1,17 +1,7 @@
import { Formik } from "formik";
import {
Button,
Container,
Content,
H1,
Input,
Item,
Label,
Text,
} from "native-base";
import React from "react";
import { useTranslation } from "react-i18next";
import { ActivityIndicator, Image, StyleSheet, View } from "react-native";
import { ActivityIndicator, Image, StyleSheet, View, Text } from "react-native";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import Logo from "../../assets/logo192.png";
@@ -22,6 +12,7 @@ import {
} from "../../redux/user/user.selectors";
import SignInErrorAlertComponent from "../sign-in-error-alert/sign-in-error-alert.component";
import styles from "../styles";
import { TextInput, Button, Subheading } from "react-native-paper";
const mapStateToProps = createStructuredSelector({
currentUser: selectCurrentUser,
@@ -42,42 +33,37 @@ export function SignIn({ emailSignInStart, signingIn }) {
};
return (
<Container>
<Content
<View
scrollEnabled={false}
padder
contentContainerStyle={styles.contentContainer__centered}
style={localStyles.content}
>
<View style={styles.evenlySpacedRow}>
<Image style={localStyles.logo} source={Logo} />
<H1>{t("app.title")}</H1>
<Text>{t("app.title")}</Text>
</View>
<Formik
initialValues={{ email: "", password: "" }}
onSubmit={formSubmit}
>
<Formik initialValues={{ email: "", password: "" }} onSubmit={formSubmit}>
{({ handleChange, handleBlur, handleSubmit, values }) => (
<View>
<Item>
<Label>{t("signin.fields.email")}</Label>
<Input
<View>
<Subheading>{t("signin.fields.email")}</Subheading>
<TextInput
autoCapitalize="none"
keyboardType="email-address"
onChangeText={handleChange("email")}
onBlur={handleBlur("email")}
value={values.email}
/>
</Item>
<Item>
<Label>{t("signin.fields.password")}</Label>
<Input
</View>
<View>
<Subheading>{t("signin.fields.password")}</Subheading>
<TextInput
secureTextEntry={true}
onChangeText={handleChange("password")}
onBlur={handleBlur("password")}
value={values.password}
/>
</Item>
</View>
<SignInErrorAlertComponent />
<Button full onPress={handleSubmit}>
<Text>{t("signin.actions.signin")}</Text>
@@ -86,8 +72,7 @@ export function SignIn({ emailSignInStart, signingIn }) {
</View>
)}
</Formik>
</Content>
</Container>
</View>
);
}

12
components/screen-splash/screen-splash.component.jsx
View File

@@ -1,26 +1,24 @@
import { Container, Content, H1 } from "native-base";
import React from "react";
import { useTranslation } from "react-i18next";
import { Image, StyleSheet } from "react-native";
import { Image, StyleSheet, View } from "react-native";
import { BarIndicator } from "react-native-indicators";
import { Title } from "react-native-paper";
import Logo from "../../assets/logo192.png";
import styles from "../styles";
export default function ScreenSplash() {
const { t } = useTranslation();
return (
<Container>
<Content
<View
contentContainerStyle={[
styles.contentContainer__centered,
localStyles.middleAlign,
]}
>
<Image style={localStyles.logo} source={Logo} />
<H1>{t("app.title")}</H1>
<Title>{t("app.title")}</Title>
<BarIndicator count={5} color="dodgerblue" />
</Content>
</Container>
</View>
);
}
const localStyles = StyleSheet.create({

4
components/sign-in-error-alert/sign-in-error-alert.component.jsx
View File

@@ -1,4 +1,4 @@
import { Text } from "native-base";
import { Title } from "react-native-paper";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { StyleSheet, View } from "react-native";
@@ -36,7 +36,7 @@ export function SignInErrorAlertComponent({ signInError }) {
}, [signInError, setErrorText]);
return (
<View>
{errorText ? <Text style={localStyles.alert}>{errorText}</Text> : null}
{errorText ? <Title style={localStyles.alert}>{errorText}</Title> : null}
</View>
);
}

27339
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@@ -38,7 +38,6 @@
"i18next": "^19.8.4",
"lodash": "^4.17.20",
"luxon": "^1.25.0",
"native-base": "^2.13.15",
"p-limit": "^3.1.0",
"react": "16.13.1",
"react-dom": "16.13.1",
@@ -48,9 +47,12 @@
"react-native-gesture-handler": "~1.8.0",
"react-native-image-zoom-viewer": "^3.0.1",
"react-native-indicators": "^0.17.0",
"react-native-pager-view": "^5.1.0",
"react-native-paper": "^4.7.2",
"react-native-progress": "^4.1.2",
"react-native-reanimated": "~1.13.0",
"react-native-screens": "~2.15.0",
"react-native-tab-view": "^3.0.0",
"react-native-web": "~0.13.12",
"react-redux": "^7.2.2",
"redux": "^4.0.5",

13268
yarn.lock
View File

File diff suppressed because it is too large Load Diff