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

Added photos reducer.

Browse Source
This commit is contained in:
Patrick Fic
2020-11-12 15:47:47 -08:00
parent e2e6f0b510
commit e31f621a8f
12 changed files with 192 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
App.js
View File

@@ -1,15 +1,17 @@
import { ApolloProvider } from "@apollo/client";
import { Ionicons } from "@expo/vector-icons";
import { AppLoading } from "expo";
import * as FileSystem from "expo-file-system";
import * as Font from "expo-font";
import React from "react";
import { StatusBar as rnStatusBar, StyleSheet } from "react-native";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import ScreenMainComponent from "./components/screen-main/screen-main.component";
import { client } from "./graphql/client";
import { persistor, store } from "./redux/store";
import "./translations/i18n";
import { client } from "./graphql/client";
import { ApolloProvider } from "@apollo/client";
export default class App extends React.Component {
constructor(props) {
super(props);
@@ -25,6 +27,11 @@ export default class App extends React.Component {
...Ionicons.font,
});
this.setState({ isReady: true });
await FileSystem.makeDirectoryAsync(
FileSystem.documentDirectory + "photos"
).catch((e) => {
console.log(e, "Directory already exists");
});
}
render() {

46
components/screen-camera/screen-camera.component.jsx
View File

@@ -1,30 +1,31 @@
import React, { useState, useEffect, useRef } from "react";
import { Text, View, TouchableOpacity, SafeAreaView } from "react-native";
import { Camera } from "expo-camera";
import {
Ionicons,
FontAwesome,
Ionicons,
MaterialCommunityIcons,
} from "@expo/vector-icons";
import { useNavigation } from "@react-navigation/native";
import { Camera } from "expo-camera";
import * as FileSystem from "expo-file-system";
import * as Permissions from "expo-permissions";
import * as MediaLibrary from "expo-media-library";
import React, { useEffect, useRef, useState } from "react";
import { SafeAreaView, Text, TouchableOpacity, View } from "react-native";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import {
selectCurrentCameraJobId,
selectCurrentCameraJob,
selectCurrentCameraJobId,
} from "../../redux/app/app.selectors";
import { addPhoto } from "../../redux/photos/photos.actions";
const mapStateToProps = createStructuredSelector({
cameraJobId: selectCurrentCameraJobId,
cameraJob: selectCurrentCameraJob,
});
const mapDispatchToProps = (dispatch) => ({});
const mapDispatchToProps = (dispatch) => ({
addPhoto: (photo) => dispatch(addPhoto(photo)),
});
export function ScreenCamera({ cameraJobId, cameraJob }) {
export function ScreenCamera({ cameraJobId, cameraJob, addPhoto }) {
const navigation = useNavigation();
const [hasPermission, setHasPermission] = useState(null);
const [rollPermision, setRollPermission] = useState(null);
@@ -33,18 +34,6 @@ export function ScreenCamera({ cameraJobId, cameraJob }) {
useEffect(() => {
(async () => {
//Ensure local photo direcotry exists.
console.log(
"ScreenCamera -> FileSystem.documentDirectory ",
FileSystem.documentDirectory
);
await FileSystem.makeDirectoryAsync(
FileSystem.documentDirectory + "photos"
).catch((e) => {
console.log(e, "Directoryc already exists");
});
const { status } = await Camera.requestPermissionsAsync();
setHasPermission(status === "granted");
// camera roll
@@ -72,21 +61,16 @@ export function ScreenCamera({ cameraJobId, cameraJob }) {
let photo = await cameraRef.current.takePictureAsync(options);
console.log("ScreenCamera -> photo", photo);
const filename = new Date().getTime() + ".jpg";
const filename = photo.uri.substring(photo.uri.lastIndexOf("/") + 1);
const newUri = FileSystem.documentDirectory + "photos/" + filename;
await FileSystem.copyAsync({
from: photo.uri,
to: FileSystem.documentDirectory + "photos/" + filename,
to: newUri,
});
console.log(
"List of Files",
await FileSystem.readDirectoryAsync(FileSystem.documentDirectory),
await FileSystem.readDirectoryAsync(
FileSystem.documentDirectory + "photos"
)
);
//const asset = await MediaLibrary.createAssetAsync(photo.uri);
addPhoto({ ...photo, id: filename, uri: newUri, jobId: cameraJobId });
}
};

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

@@ -1,47 +1,44 @@
import * as FileSystem from "expo-file-system";
import React, { useEffect, useState } from "react";
import { Button, Text as NBText, Thumbnail, View } from "native-base";
import React from "react";
import { SafeAreaView, Text } from "react-native";
import { Button, Text as NBText } from "native-base";
export default function ScreenMediaCache() {
const [images, setImages] = useState([]);
useEffect(() => {
(async () => {
setImages(
(
await FileSystem.readDirectoryAsync(
FileSystem.documentDirectory + "photos"
)
).map((f) => {
return {
uri: FileSystem.documentDirectory + "photos/" + f,
dimensions: { width: 2142, height: 4224 },
};
})
);
})();
}, []);
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { removeAllPhotos } from "../../redux/photos/photos.actions";
import { selectPhotos } from "../../redux/photos/photos.selectors";
const mapStateToProps = createStructuredSelector({
photos: selectPhotos,
});
const mapDispatchToProps = (dispatch) => ({
//setUserLanguage: language => dispatch(setUserLanguage(language))
removeAllPhotos: () => dispatch(removeAllPhotos()),
});
export function ScreenMediaCache({ photos, removeAllPhotos }) {
return (
<SafeAreaView style={{ display: "flex", flex: 1 }}>
<Text>This is the media cache screen.</Text>
<Button
block
onPress={async () => {
const fps = (
await FileSystem.readDirectoryAsync(
FileSystem.documentDirectory + "photos"
)
).map((f) => {
return FileSystem.documentDirectory + "photos/" + f;
});
const all = [];
fps.forEach((f) => all.push(FileSystem.deleteAsync(f)));
await Promise.all(all);
console.log("All photos deleted.");
}}
>
<Button block onPress={() => removeAllPhotos()}>
<NBText>Delete all</NBText>
</Button>
<Text>{photos.length}</Text>
<View
style={{
flex: 1,
display: "flex",
direction: "row",
backgroundColor: "tomato",
}}
>
<Text>The View</Text>
{photos.map((i, idx) => (
<View>
<Text>{i.uri}</Text>
<Thumbnail square large key={idx} source={{ uri: i.uri }} />
</View>
))}
</View>
</SafeAreaView>
);
}
export default connect(mapStateToProps, mapDispatchToProps)(ScreenMediaCache);

1
package.json
View File

@@ -24,6 +24,7 @@
"expo-localization": "~9.0.0",
"expo-media-library": "~9.2.1",
"expo-permissions": "~9.3.0",
"expo-sqlite": "~8.4.0",
"expo-status-bar": "~1.0.2",
"firebase": "7.9.0",
"formik": "^2.2.3",

24
redux/photos/photos.actions.js Normal file
View File

@@ -0,0 +1,24 @@
import PhotosActionTypes from "./photos.types";
export const addPhoto = (photo) => ({
type: PhotosActionTypes.ADD_PHOTO,
payload: photo,
});
export const removePhotos = (photoIds) => ({
type: PhotosActionTypes.REMOVE_PHOTOS,
payload: photoIds,
});
export const removeAllPhotos = () => ({
type: PhotosActionTypes.REMOVE_ALL_PHOTOS,
});
export const uploadAllPhotos = () => ({
type: PhotosActionTypes.UPLOAD_ALL_PHOTOS_START,
});
export const uploadSelectedPhotos = (photoIds) => ({
type: PhotosActionTypes.UPLOAD_SELECTED_PHOTOS_START,
payload: photoIds,
});

44
redux/photos/photos.reducer.js Normal file
View File

@@ -0,0 +1,44 @@
import PhotosActionTypes from "./photos.types";
const INITIAL_STATE = {
photos: [],
uploadInProgress: false,
uploadError: null,
};
const photosReducer = (state = INITIAL_STATE, action) => {
switch (action.type) {
case PhotosActionTypes.ADD_PHOTO:
return {
...state,
photos: [...state.photos, action.payload],
};
case PhotosActionTypes.REMOVE_ALL_PHOTOS:
return {
...state,
photos: [],
};
case PhotosActionTypes.REMOVE_PHOTOS:
return {
...state,
photos: state.photos.filter((p) => !action.payload.includes(p.id)),
};
case PhotosActionTypes.UPLOAD_PHOTO_FAILURE:
return {
...state,
uploadInProgress: false,
uploadError: action.payload,
};
case PhotosActionTypes.UPLOAD_ALL_PHOTOS_START:
case PhotosActionTypes.UPLOAD_SELECTED_PHOTOS_START:
return {
...state,
uploadInProgress: true,
uploadError: null,
};
default:
return state;
}
};
export default photosReducer;

29
redux/photos/photos.sagas.js Normal file
View File

@@ -0,0 +1,29 @@
import { all, call, takeLatest } from "redux-saga/effects";
import PhotosActionTypes from "./photos.types";
export function* onRemoveAllPhotos() {
yield takeLatest(PhotosActionTypes.REMOVE_ALL_PHOTOS, removeAllPhotosAction);
}
export function* removeAllPhotosAction() {
try {
//Physically delete all photosSagas.
const fps = (yield FileSystem.readDirectoryAsync(
FileSystem.documentDirectory + "photos"
)).map((f) => {
return FileSystem.documentDirectory + "photos/" + f;
});
const all = [];
fps.forEach((f) => all.push(FileSystem.deleteAsync(f)));
yield Promise.all(all);
console.log("All photos deleted.");
} catch (error) {
console.log("Saga Error: onRemoveAllPhotos", error);
//yield put(signInFailure(error));
//logImEXEvent("redux_sign_in_failure", { user: email, error });
}
}
export function* photosSagas() {
yield all([call(onRemoveAllPhotos)]);
}

16
redux/photos/photos.selectors.js Normal file
View File

@@ -0,0 +1,16 @@
import { createSelector } from "reselect";
const selectPhotosState = (state) => state.photos;
export const selectPhotos = createSelector(
[selectPhotosState],
(photos) => photos.photos
);
export const selectUploadInProgress = createSelector(
[selectPhotosState],
(photos) => photos.uploadInProgress
);
export const selectUploadError = createSelector(
[selectPhotosState],
(photos) => photos.uploadError
);

10
redux/photos/photos.types.js Normal file
View File

@@ -0,0 +1,10 @@
const PhotosActionTypes = {
ADD_PHOTO: "ADD_PHOTO",
REMOVE_PHOTOS: "REMOVE_PHOTOS",
REMOVE_ALL_PHOTOS: "REMOVE_ALL_PHOTOS",
UPLOAD_SELECTED_PHOTOS_START: "UPLOAD_SELECTED_PHOTOS_START",
UPLOAD_ALL_PHOTOS_START: "UPLOAD_ALL_PHOTOS_START",
UPLOAD_PHOTO_SUCCESS: "UPLOAD_PHOTO_SUCCESS",
UPLOAD_PHOTO_FAILURE: "UPLOAD_PHOTO_FAILURE",
};
export default PhotosActionTypes;

4
redux/root.reducer.js
View File

@@ -2,12 +2,13 @@ import AsyncStorage from "@react-native-community/async-storage";
import { combineReducers } from "redux";
import { persistReducer } from "redux-persist";
import appReducer from "./app/app.reducer";
import photosReducer from "./photos/photos.reducer";
import userReducer from "./user/user.reducer";
const persistConfig = {
key: "root",
storage: AsyncStorage,
whitelist: [],
whitelist: ["photos"],
blacklist: ["user", "app"],
// whitelist: ["messaging", "tech", "application"],
// blacklist: ["user", "email", "modals"],
@@ -16,6 +17,7 @@ const persistConfig = {
const rootReducer = combineReducers({
user: userReducer,
app: appReducer,
photos: photosReducer,
});
export default persistReducer(persistConfig, rootReducer);

3
redux/root.saga.js
View File

@@ -1,7 +1,8 @@
import { all, call } from "redux-saga/effects";
import { appSagas } from "./app/app.sagas";
import { photosSagas } from "./photos/photos.sagas";
import { userSagas } from "./user/user.sagas";
export default function* rootSaga() {
yield all([call(userSagas), call(appSagas)]);
yield all([call(userSagas), call(appSagas), call(photosSagas)]);
}

11
redux/store.js
View File

@@ -10,12 +10,11 @@ const sagaMiddleWare = createSagaMiddleware();
const middlewares = [sagaMiddleWare];
if (process.env.NODE_ENV === "development") {
middlewares
.push
// createLogger({
// collapsed: true,
// })
();
middlewares.push(
createLogger({
collapsed: true,
})
);
}
//Add in for React Native Debugger.