IO-2035 LMS Media.

2022-08-30 12:26:22 -07:00
parent 64a31dc544
commit e25172f0bf
8 changed files with 1185 additions and 830 deletions
--- a/babel.config.js
+++ b/babel.config.js
@@ -2,5 +2,6 @@ module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
+    plugins: ["react-native-reanimated/plugin"],
  };
 };
--- a/components/job-documents/job-documents-local.component.jsx
+++ b/components/job-documents/job-documents-local.component.jsx
@@ -0,0 +1,115 @@
+import React, { useEffect, useMemo, useState } from "react";
+import {
+  FlatList,
+  Image,
+  RefreshControl,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import env from "../../env";
+import { DetermineFileType } from "../../util/document-upload.utility";
+import MediaCacheOverlay from "../media-cache-overlay/media-cache-overlay.component";
+
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import axios from "axios";
+import cleanAxios from "../../util/CleanAxios";
+import normalizeUrl from "normalize-url";
+
+export default function JobDocumentsLocalComponent({ bodyshop, job }) {
+  const [previewVisible, setPreviewVisible] = useState(false);
+  const [images, setImages] = useState([]);
+  const [imgIndex, setImgIndex] = useState(0);
+  useEffect(() => {
+    if (job.id) {
+      console.log("Getting Photos!");
+      getPhotos({ bodyshop, jobid: job.id, setImages });
+    }
+  }, [job.id, bodyshop]);
+
+  const onRefresh = async () => {
+    return getPhotos({ bodyshop, jobid: job.id, setImages });
+  };
+  console.log(images);
+  return (
+    <View style={{ flex: 1 }}>
+      <FlatList
+        refreshControl={
+          <RefreshControl refreshing={false} onRefresh={onRefresh} />
+        }
+        data={images}
+        numColumns={4}
+        style={{ flex: 1 }}
+        keyExtractor={(item) => item.id}
+        renderItem={(object) => (
+          <TouchableOpacity
+            style={{ flex: 1 / 4, aspectRatio: 1, margin: 4 }}
+            onPress={async () => {
+              setImgIndex(object.index);
+              setPreviewVisible(true);
+            }}
+          >
+            <Image
+              style={{ flex: 1 }}
+              resizeMode="cover"
+              source={{
+                uri: object.item.thumbUrl,
+                aspectRatio: 1,
+              }}
+            />
+          </TouchableOpacity>
+        )}
+      />
+      <Text>
+        {images?.filter((d) => d.type?.mime?.startsWith("image")).length}
+      </Text>
+
+      <MediaCacheOverlay
+        photos={images}
+        imgIndex={imgIndex}
+        setImgIndex={setImgIndex}
+        previewVisible={previewVisible}
+        setPreviewVisible={setPreviewVisible}
+      />
+    </View>
+  );
+}
+
+async function getPhotos({ bodyshop, jobid, setImages }) {
+  console.log("In Get Photos", bodyshop.localmediatoken);
+  const localmediaserverhttp = bodyshop.localmediaserverhttp.trim();
+  try {
+    const imagesFetch = await cleanAxios.post(
+      `${localmediaserverhttp}/jobs/list`,
+      {
+        jobid,
+      },
+      { headers: { ims_token: bodyshop.localmediatoken } }
+    );
+    console.log(
+      "🚀  ~ file: job-documents-local.component.jsx  ~ line 86  ~ imagesFetch",
+      imagesFetch
+    );
+
+    const normalizedImages = imagesFetch.data
+      .filter((d) => d.type?.mime?.startsWith("image"))
+      .map((d, idx) => {
+        return {
+          ...d,
+          // src: `${bodyshop.localmediaserverhttp}/${d.src}`.replace("//", "/"),
+
+          uri: `${bodyshop.localmediaserverhttp}/${d.src}`.replace("//", "/"),
+          thumbUrl: `${bodyshop.localmediaserverhttp}/${d.thumbnail}`.replace(
+            "//",
+            "/"
+          ),
+          id: idx,
+        };
+      });
+    setImages(normalizedImages);
+  } catch (error) {
+    console.log("error,", error);
+  }
+}
--- a/components/screen-job-detail/screen-job-detail.component.jsx
+++ b/components/screen-job-detail/screen-job-detail.component.jsx
@@ -13,6 +13,7 @@ import LoadingDisplay from "../loading-display/loading-display.component";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import JobDocumentsLocalComponent from "../job-documents/job-documents-local.component";
 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
 });
@@ -55,16 +56,21 @@ export function ScreenJobDetail({ bodyshop, route }) {
        loading: loading,
        refetch: refetch,
      }),
-    ...(bodyshop.uselocalmediaserver
-      ? {}
-      : {
-          documents: () =>
-            JobDocuments({
+
+    documents: () => {
+      return bodyshop.uselocalmediaserver
+        ? JobDocumentsLocalComponent({
+            job: data.jobs_by_pk,
+
+            bodyshop: bodyshop,
+          })
+        : JobDocuments({
            job: data.jobs_by_pk,
            loading: loading,
            refetch: refetch,
-            }),
-        }),
+          });
+    },
+
    notes: () =>
      JobNotes({
        job: data.jobs_by_pk,
@@ -77,9 +83,7 @@ export function ScreenJobDetail({ bodyshop, route }) {
  const [routes] = React.useState([
    { key: "job", title: t("jobdetail.labels.job") },
    { key: "lines", title: t("jobdetail.labels.lines") },
-    ...(bodyshop.uselocalmediaserver
-      ? []
-      : [{ key: "documents", title: t("jobdetail.labels.documents") }]),
+    { key: "documents", title: t("jobdetail.labels.documents") },
    { key: "notes", title: t("jobdetail.labels.notes") },
  ]);

--- a/components/screen-main/screen-main.component.jsx
+++ b/components/screen-main/screen-main.component.jsx
@@ -193,7 +193,7 @@ export default connect(
 )(ScreenMainComponent);

 function HasAccess({ features }) {
-  if (features.mobile === undefined) return true;
+  if (features.mobile === undefined || features.mobile === true) return true;
  if (features.mobile === false) return false;
  const d = moment(moment(features.mobile));
  if (d.isValid()) return d.isAfter(moment());
--- a/components/upload-progress/upload-progress.component.jsx
+++ b/components/upload-progress/upload-progress.component.jsx
@@ -13,8 +13,10 @@ import {
  View,
 } from "react-native";
 import { Divider, ProgressBar } from "react-native-paper";
+import Toast from "react-native-toast-message";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import * as Sentry from "sentry-expo";
 import { logImEXEvent } from "../../firebase/firebase.analytics";
 import { GET_DOC_SIZE_TOTALS } from "../../graphql/documents.queries";
 import {
@@ -26,8 +28,6 @@ import {
  selectCurrentUser,
 } from "../../redux/user/user.selectors";
 import { formatBytes, handleUpload } from "../../util/document-upload.utility";
-import Toast from "react-native-toast-message";
-import * as Sentry from "sentry-expo";

 const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser,
@@ -205,16 +205,49 @@ export function UploadProgress({
      try {
        console.log("Trying to Delete", filesToDelete);
        if (Platform.OS === "android") {
-          await Promise.all(
-            filesToDelete.map(async (f) =>
-              MediaLibrary.removeAssetsFromAlbumAsync(f, f.albumId)
-            )
+          //Create a new asset with the first file to delete.
+          console.log("Trying new delete.");
+
+          const delres = await MediaLibrary.removeAssetsFromAlbumAsync(
+            filesToDelete,
+            filesToDelete[0].albumId
          );
-        }
          console.log(
-          "Delete Result",
-          await MediaLibrary.deleteAssetsAsync(filesToDelete.map((f) => f.id))
+            "🚀  ~ file: upload-progress.component.jsx  ~ line 220  ~ delres",
+            delres
          );
+          // const album = await MediaLibrary.createAlbumAsync(
+          //   "Deleted",
+          //   filesToDelete.pop(),
+          //   false
+          // );
+          // console.log(
+          //   "🚀  ~ file: upload-progress.component.jsx  ~ line 215  ~ album",
+          //   album
+          // );
+          // //Move the rest.
+          // const moveResult = await MediaLibrary.addAssetsToAlbumAsync(
+          //   filesToDelete,
+          //   album.id,
+          //   false
+          // );
+          // console.log(
+          //   "🚀  ~ file: upload-progress.component.jsx  ~ line 221  ~ moveResult",
+          //   moveResult
+          // );
+          // //Delete the album.
+
+          // const deleteResult = await MediaLibrary.deleteAlbumsAsync(
+          //   album.id,
+          //   true
+          // );
+          // console.log(
+          //   "🚀  ~ file: upload-progress.component.jsx  ~ line 228  ~ deleteResult",
+          //   deleteResult
+          // );
+        } else {
+          await MediaLibrary.deleteAssetsAsync(filesToDelete.map((f) => f.id));
+        }
      } catch (error) {
        console.log("Unable to delete picture.", error);
        Sentry.Native.captureException(error);
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
  "dependencies": {
    "@apollo/client": "^3.7.0-alpha.3",
    "@expo/vector-icons": "^13.0.0",
-    "@react-native-async-storage/async-storage": "~1.17.6",
+    "@react-native-async-storage/async-storage": "~1.17.3",
    "@react-native-community/art": "^1.2.0",
    "@react-native-community/cli-debugger-ui": "^7.0.3",
    "@react-native-community/masked-view": "^0.1.11",
@@ -29,26 +29,26 @@
    "axios": "^0.27.2",
    "cloudinary-core": "^2.12.3",
    "dinero.js": "^1.9.1",
-    "expo": "^45.0.5",
-    "expo-app-loading": "~2.0.0",
-    "expo-application": "~4.1.0",
-    "expo-av": "~11.2.3",
-    "expo-camera": "~12.2.0",
-    "expo-constants": "~13.1.1",
-    "expo-dev-client": "~1.0.0",
-    "expo-device": "~4.2.0",
-    "expo-file-system": "~14.0.0",
-    "expo-firebase-analytics": "~7.0.0",
-    "expo-font": "~10.1.0",
-    "expo-image-manipulator": "~10.3.1",
+    "expo": "^46.0.0",
+    "expo-app-loading": "~2.1.0",
+    "expo-application": "~4.2.2",
+    "expo-av": "~12.0.4",
+    "expo-camera": "~12.3.0",
+    "expo-constants": "~13.2.3",
+    "expo-dev-client": "~1.2.1",
+    "expo-device": "~4.3.0",
+    "expo-file-system": "~14.1.0",
+    "expo-firebase-analytics": "~7.1.1",
+    "expo-font": "~10.2.0",
+    "expo-image-manipulator": "~10.4.0",
    "expo-images-picker": "^2.4.1",
-    "expo-localization": "~13.0.0",
-    "expo-media-library": "~14.1.0",
+    "expo-localization": "~13.1.0",
+    "expo-media-library": "~14.2.0",
    "expo-permissions": "~13.2.0",
-    "expo-status-bar": "~1.3.0",
-    "expo-system-ui": "~1.2.0",
-    "expo-updates": "~0.13.2",
-    "expo-video-thumbnails": "~6.3.0",
+    "expo-status-bar": "~1.4.0",
+    "expo-system-ui": "~1.3.0",
+    "expo-updates": "~0.14.4",
+    "expo-video-thumbnails": "~6.4.0",
    "firebase": "^9.8.3",
    "formik": "^2.2.9",
    "graphql": "^15.4.0",
@@ -59,35 +59,35 @@
    "mime": "^3.0.0",
    "moment": "^2.29.1",
    "normalize-url": "^7.0.3",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.0.0",
+    "react-dom": "18.0.0",
    "react-i18next": "^11.17.2",
-    "react-native": "0.68.2",
-    "react-native-gesture-handler": "~2.2.1",
+    "react-native": "0.69.4",
+    "react-native-gesture-handler": "~2.5.0",
    "react-native-image-gallery": "^2.1.5",
    "react-native-image-viewing": "^0.2.2",
    "react-native-indicators": "^0.17.0",
-    "react-native-pager-view": "5.4.15",
+    "react-native-pager-view": "5.4.24",
    "react-native-paper": "^4.11.2",
    "react-native-progress": "^5.0.0",
-    "react-native-reanimated": "~2.8.0",
-    "react-native-safe-area-context": "4.2.4",
-    "react-native-screens": "~3.11.1",
+    "react-native-reanimated": "~2.9.1",
+    "react-native-safe-area-context": "4.3.1",
+    "react-native-screens": "~3.15.0",
    "react-native-tab-view": "3.1.1",
    "react-native-toast-message": "^2.1.5",
-    "react-native-web": "0.17.7",
+    "react-native-web": "~0.18.7",
    "react-redux": "^7.2.6",
    "redux": "^4.1.2",
    "redux-logger": "^3.0.6",
    "redux-persist": "^6.0.0",
    "redux-saga": "^1.1.3",
    "reselect": "^4.1.6",
-    "sentry-expo": "^4.2.0",
+    "sentry-expo": "~5.0.0",
    "subscriptions-transport-ws": "^0.9.18"
  },
  "devDependencies": {
-    "@babel/core": "^7.12.9",
-    "babel-preset-expo": "~9.1.0",
+    "@babel/core": "^7.18.6",
+    "babel-preset-expo": "~9.2.0",
    "eslint": "^7.27.0",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-react-native": "^3.11.0"
--- a/redux/user/user.sagas.js
+++ b/redux/user/user.sagas.js
@@ -112,6 +112,7 @@ export function* signInSuccessSaga({ payload }) {

    const shop = yield client.query({ query: QUERY_BODYSHOP });
    logImEXEvent("imexmobile_sign_in_success", payload);
+    console.log(shop);
    yield put(setBodyshop(shop.data.bodyshops[0]));
    // yield put(
    //   setBodyshop({
--- a/yarn.lock
+++ b/yarn.lock