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

Added MMS support for messaging. IO-538

Browse Source
This commit is contained in:
Patrick Fic
2021-02-19 13:40:56 -08:00
parent b152dd042f
commit 6c459965c4
30 changed files with 786 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.MD
View File

@@ -16,7 +16,7 @@ npx hasura migrate apply --endpoint https://db.imex.online/ --admin-secret 'Prod
NGROK TEsting:
./ngrok.exe http https://localhost:5000 -host-header="localhost:5000"
./ngrok.exe http http://localhost:5000 -host-header="localhost:5000"
Finding deadfiles - run from client directory
npx deadfile ./src/index.js --exclude build templates

42
bodyshop_translations.babel
View File

@@ -21831,6 +21831,27 @@
<folder_node>
<name>labels</name>
<children>
<concept_node>
<name>maxtenimages</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>messaging</name>
<definition_loaded>false</definition_loaded>
@@ -21936,6 +21957,27 @@
</translation>
</translations>
</concept_node>
<concept_node>
<name>selectmedia</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>sentby</name>
<definition_loaded>false</definition_loaded>

88
client/src/components/chat-media-selector/chat-media-selector.component.jsx Normal file
View File

@@ -0,0 +1,88 @@
import { PictureFilled } from "@ant-design/icons";
import { useQuery } from "@apollo/react-hooks";
import { Badge, Popover } from "antd";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { GET_DOCUMENTS_BY_JOB } from "../../graphql/documents.queries";
import AlertComponent from "../alert/alert.component";
import JobDocumentsGalleryExternal from "../jobs-documents-gallery/jobs-documents-gallery.external.component";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
const mapStateToProps = createStructuredSelector({
//currentUser: selectCurrentUser
});
const mapDispatchToProps = (dispatch) => ({
//setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(mapStateToProps, mapDispatchToProps)(ChatMediaSelector);
export function ChatMediaSelector({
selectedMedia,
setSelectedMedia,
conversation,
}) {
const { t } = useTranslation();
console.log("conversation", conversation);
const { loading, error, data, refetch } = useQuery(GET_DOCUMENTS_BY_JOB, {
variables: {
jobId:
conversation.job_conversations[0] &&
conversation.job_conversations[0].jobid,
},
fetchPolicy: "network-only",
skip:
!conversation.job_conversations ||
conversation.job_conversations.length === 0,
});
const [visible, setVisible] = useState(false);
const handleVisibleChange = (visible) => {
setVisible(visible);
};
useEffect(() => {
setSelectedMedia([]);
}, [setSelectedMedia, conversation]);
const content = (
<div>
{loading && <LoadingSpinner />}
{error && <AlertComponent message={error.message} type="error" />}
{selectedMedia.filter((s) => s.isSelected).length >= 10 ? (
<div style={{ color: "red" }}>{t("messaging.labels.maxtenimages")}</div>
) : null}
{data && (
<JobDocumentsGalleryExternal
data={data ? data.documents : []}
externalMediaState={[selectedMedia, setSelectedMedia]}
/>
)}
</div>
);
return (
<Popover
content={
conversation.job_conversations.length === 0 ? (
<div>{t("messaging.errors.noattachedjobs")}</div>
) : (
content
)
}
title={t("messaging.labels.selectmedia")}
trigger="click"
visible={visible}
onVisibleChange={handleVisibleChange}
>
<Badge
size="small"
count={selectedMedia.filter((s) => s.isSelected).length}
>
<PictureFilled style={{ margin: "0 .5rem" }} />
</Badge>
</Popover>
);
}

46
client/src/components/chat-messages-list/chat-message-list.component.jsx
View File

@@ -1,4 +1,6 @@
import Icon from "@ant-design/icons";
import i18n from "i18next";
import moment from "moment";
import React, { useEffect, useRef } from "react";
import { MdDone, MdDoneAll } from "react-icons/md";
import {
@@ -8,8 +10,6 @@ import {
List,
} from "react-virtualized";
import "./chat-message-list.styles.scss";
import i18n from "i18next";
import moment from "moment";
export default function ChatMessageListComponent({ messages }) {
const virtualizedListRef = useRef(null);
@@ -46,6 +46,16 @@ export default function ChatMessageListComponent({ messages }) {
{MessageRender(messages[index])}
{StatusRender(messages[index].status)}
</div>
{messages[index].isoutbound && (
<div style={{ fontSize: 10 }}>
{i18n.t("messaging.labels.sentby", {
by: messages[index].userid,
time: moment(messages[index].created_at).format(
"MM/DD/YYYY @ hh:mm a"
),
})}
</div>
)}
</div>
)}
</CellMeasurer>
@@ -74,27 +84,19 @@ export default function ChatMessageListComponent({ messages }) {
}
const MessageRender = (message) => {
if (message.image) {
return (
<a href={message.image_path} target="__blank">
<img alt="Received" className="message-img" src={message.image_path} />
</a>
);
} else {
return (
<div>
<div>{message.text}</div>
{message.isoutbound && (
<div style={{ color: "slategray", fontSize: 10 }}>
{i18n.t("messaging.labels.sentby", {
by: message.userid,
time: moment(message.created_at).format("MM/DD/YYYY @ hh:mm a"),
})}
return (
<div>
{message.image_path &&
message.image_path.map((i, idx) => (
<div key={idx} style={{ display: "flex", justifyContent: "center" }}>
<a href={i} target="__blank">
<img alt="Received" className="message-img" src={i} />
</a>
</div>
)}
</div>
);
}
))}
<div>{message.text}</div>
</div>
);
};
const StatusRender = (status) => {

5
client/src/components/chat-messages-list/chat-message-list.styles.scss
View File

@@ -34,9 +34,10 @@
//display: inline-block;
.message-img {
max-width: 3rem;
max-height: 3rem;
max-width: 10rem;
max-height: 10rem;
object-fit: contain;
margin: 0.2rem;
}
}

69
client/src/components/chat-send-message/chat-send-message.component.jsx
View File

@@ -1,6 +1,6 @@
import { LoadingOutlined, SendOutlined } from "@ant-design/icons";
import { Input, Spin } from "antd";
import React, { useEffect, useRef } from "react";
import React, { useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
@@ -14,6 +14,7 @@ import {
selectMessage,
} from "../../redux/messaging/messaging.selectors";
import { selectBodyshop } from "../../redux/user/user.selectors";
import ChatMediaSelector from "../chat-media-selector/chat-media-selector.component";
import ChatPresetsComponent from "../chat-presets/chat-presets.component";
const mapStateToProps = createStructuredSelector({
@@ -36,6 +37,7 @@ function ChatSendMessageComponent({
setMessage,
}) {
const inputArea = useRef(null);
const [selectedMedia, setSelectedMedia] = useState([]);
useEffect(() => {
inputArea.current.focus();
}, [isSending, setMessage]);
@@ -43,36 +45,55 @@ function ChatSendMessageComponent({
const { t } = useTranslation();
const handleEnter = () => {
if (message === "" || !message) return;
logImEXEvent("messaging_send_message");
sendMessage({
to: conversation.phone_num,
body: message,
messagingServiceSid: bodyshop.messagingservicesid,
conversationid: conversation.id,
});
const selectedImages = selectedMedia.filter((i) => i.isSelected);
if (selectedImages < 11) {
sendMessage({
to: conversation.phone_num,
body: message,
messagingServiceSid: bodyshop.messagingservicesid,
conversationid: conversation.id,
selectedMedia: selectedImages,
});
setSelectedMedia(
selectedMedia.map((i) => {
return { ...i, isSelected: false };
})
);
}
};
return (
<div className="imex-flex-row" style={{ width: "100%" }}>
<ChatPresetsComponent className="imex-flex-row__margin" />
<Input.TextArea
className="imex-flex-row__margin imex-flex-row__grow"
allowClear
autoFocus
ref={inputArea}
autoSize={{ minRows: 1, maxRows: 4 }}
value={message}
disabled={isSending}
placeholder={t("messaging.labels.typeamessage")}
onChange={(e) => setMessage(e.target.value)}
onPressEnter={(event) => {
event.preventDefault();
if (!!!event.shiftKey) handleEnter();
}}
<ChatMediaSelector
conversation={conversation}
selectedMedia={selectedMedia}
setSelectedMedia={setSelectedMedia}
/>
<span style={{ flex: 1 }}>
<Input.TextArea
className="imex-flex-row__margin imex-flex-row__grow"
allowClear
autoFocus
ref={inputArea}
autoSize={{ minRows: 1, maxRows: 4 }}
value={message}
disabled={isSending}
placeholder={t("messaging.labels.typeamessage")}
onChange={(e) => setMessage(e.target.value)}
onPressEnter={(event) => {
event.preventDefault();
if (!!!event.shiftKey) handleEnter();
}}
/>
</span>
<SendOutlined
className="imex-flex-row__margin"
disabled={message === "" || !message}
onClick={handleEnter}
/>
<SendOutlined className="imex-flex-row__margin" onClick={handleEnter} />
<Spin
style={{ display: `${isSending ? "" : "none"}` }}
indicator={

2
client/src/components/jobs-documents-gallery/jobs-documents-gallery.container.jsx
View File

@@ -1,5 +1,5 @@
import React from "react";
import { useQuery } from "@apollo/react-hooks";
import React from "react";
import { GET_DOCUMENTS_BY_JOB } from "../../graphql/documents.queries";
import AlertComponent from "../alert/alert.component";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";

58
client/src/components/jobs-documents-gallery/jobs-documents-gallery.external.component.jsx Normal file
View File

@@ -0,0 +1,58 @@
import React, { useEffect } from "react";
import Gallery from "react-grid-gallery";
import { useTranslation } from "react-i18next";
import { DetermineFileType } from "../documents-upload/documents-upload.utility";
function JobsDocumentGalleryExternal({
data,
externalMediaState,
}) {
const [galleryImages, setgalleryImages] = externalMediaState;
const { t } = useTranslation();
useEffect(() => {
let documents = data.reduce((acc, value) => {
if (value.type.startsWith("image")) {
acc.push({
src: `${
process.env.REACT_APP_CLOUDINARY_ENDPOINT
}/${DetermineFileType(value.type)}/upload/${value.key}`,
thumbnail: `${
process.env.REACT_APP_CLOUDINARY_ENDPOINT
}/${DetermineFileType(value.type)}/upload/${
process.env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS
}/${value.key}`,
thumbnailHeight: 225,
thumbnailWidth: 225,
isSelected: false,
key: value.key,
extension: value.extension,
id: value.id,
type: value.type,
tags: [{ value: value.type, title: value.type }],
});
}
return acc;
}, []);
setgalleryImages(documents);
}, [data, setgalleryImages, t]);
return (
<div className="clearfix">
<Gallery
images={galleryImages}
backdropClosesModal={true}
onSelectImage={(index, image) => {
setgalleryImages(
galleryImages.map((g, idx) =>
index === idx ? { ...g, isSelected: !g.isSelected } : g
)
);
}}
/>
</div>
);
}
export default JobsDocumentGalleryExternal;

2
client/src/translations/en_us/common.json
View File

@@ -1310,11 +1310,13 @@
"new": "New Conversation"
},
"labels": {
"maxtenimages": "You can only select up to a maximum of 10 images at a time.",
"messaging": "Messaging",
"noallowtxt": "This customer has not indicated their permission to be messaged.",
"nojobs": "Not associated to any job.",
"phonenumber": "Phone #",
"presets": "Presets",
"selectmedia": "Select Media",
"sentby": "Sent by {{by}} at {{time}}",
"typeamessage": "Send a message..."
}

2
client/src/translations/es/common.json
View File

@@ -1310,11 +1310,13 @@
"new": ""
},
"labels": {
"maxtenimages": "",
"messaging": "Mensajería",
"noallowtxt": "",
"nojobs": "",
"phonenumber": "",
"presets": "",
"selectmedia": "",
"sentby": "",
"typeamessage": "Enviar un mensaje..."
}

2
client/src/translations/fr/common.json
View File

@@ -1310,11 +1310,13 @@
"new": ""
},
"labels": {
"maxtenimages": "",
"messaging": "Messagerie",
"noallowtxt": "",
"nojobs": "",
"phonenumber": "",
"presets": "",
"selectmedia": "",
"sentby": "",
"typeamessage": "Envoyer un message..."
}

37
hasura/migrations/1613767928898_update_permission_user_public_table_messages/down.yaml Normal file
View File

@@ -0,0 +1,37 @@
- args:
role: user
table:
name: messages
schema: public
type: drop_insert_permission
- args:
permission:
check:
conversation:
bodyshop:
associations:
_and:
- user:
authid:
_eq: X-Hasura-User-Id
- active:
_eq: true
columns:
- conversationid
- created_at
- id
- image
- image_path
- isoutbound
- msid
- read
- status
- text
- updated_at
- userid
set: {}
role: user
table:
name: messages
schema: public
type: create_insert_permission

36
hasura/migrations/1613767928898_update_permission_user_public_table_messages/up.yaml Normal file
View File

@@ -0,0 +1,36 @@
- args:
role: user
table:
name: messages
schema: public
type: drop_insert_permission
- args:
permission:
check:
conversation:
bodyshop:
associations:
_and:
- user:
authid:
_eq: X-Hasura-User-Id
- active:
_eq: true
columns:
- conversationid
- created_at
- id
- image
- isoutbound
- msid
- read
- status
- text
- updated_at
- userid
set: {}
role: user
table:
name: messages
schema: public
type: create_insert_permission

38
hasura/migrations/1613767944643_update_permission_user_public_table_messages/down.yaml Normal file
View File

@@ -0,0 +1,38 @@
- args:
role: user
table:
name: messages
schema: public
type: drop_select_permission
- args:
permission:
allow_aggregations: true
columns:
- conversationid
- created_at
- id
- image
- image_path
- isoutbound
- msid
- read
- status
- text
- updated_at
- userid
computed_fields: []
filter:
conversation:
bodyshop:
associations:
_and:
- user:
authid:
_eq: X-Hasura-User-Id
- active:
_eq: true
role: user
table:
name: messages
schema: public
type: create_select_permission

37
hasura/migrations/1613767944643_update_permission_user_public_table_messages/up.yaml Normal file
View File

@@ -0,0 +1,37 @@
- args:
role: user
table:
name: messages
schema: public
type: drop_select_permission
- args:
permission:
allow_aggregations: true
columns:
- conversationid
- created_at
- id
- image
- isoutbound
- msid
- read
- status
- text
- updated_at
- userid
computed_fields: []
filter:
conversation:
bodyshop:
associations:
_and:
- user:
authid:
_eq: X-Hasura-User-Id
- active:
_eq: true
role: user
table:
name: messages
schema: public
type: create_select_permission

36
hasura/migrations/1613767953059_update_permission_user_public_table_messages/down.yaml Normal file
View File

@@ -0,0 +1,36 @@
- args:
role: user
table:
name: messages
schema: public
type: drop_update_permission
- args:
permission:
columns:
- image
- isoutbound
- read
- image_path
- msid
- status
- text
- created_at
- updated_at
- conversationid
- id
filter:
conversation:
bodyshop:
associations:
_and:
- user:
authid:
_eq: X-Hasura-User-Id
- active:
_eq: true
set: {}
role: user
table:
name: messages
schema: public
type: create_update_permission

35
hasura/migrations/1613767953059_update_permission_user_public_table_messages/up.yaml Normal file
View File

@@ -0,0 +1,35 @@
- args:
role: user
table:
name: messages
schema: public
type: drop_update_permission
- args:
permission:
columns:
- conversationid
- created_at
- id
- image
- isoutbound
- msid
- read
- status
- text
- updated_at
filter:
conversation:
bodyshop:
associations:
_and:
- user:
authid:
_eq: X-Hasura-User-Id
- active:
_eq: true
set: {}
role: user
table:
name: messages
schema: public
type: create_update_permission

10
hasura/migrations/1613767963376_alter_table_public_messages_drop_column_image_path/down.yaml Normal file
View File

@@ -0,0 +1,10 @@
- args:
cascade: false
read_only: false
sql: ALTER TABLE "public"."messages" ADD COLUMN "image_path" text;
type: run_sql
- args:
cascade: false
read_only: false
sql: ALTER TABLE "public"."messages" ALTER COLUMN "image_path" DROP NOT NULL;
type: run_sql

5
hasura/migrations/1613767963376_alter_table_public_messages_drop_column_image_path/up.yaml Normal file
View File

@@ -0,0 +1,5 @@
- args:
cascade: false
read_only: false
sql: ALTER TABLE "public"."messages" DROP COLUMN "image_path" CASCADE;
type: run_sql

5
hasura/migrations/1613767994173_alter_table_public_messages_add_column_image_path/down.yaml Normal file
View File

@@ -0,0 +1,5 @@
- args:
cascade: false
read_only: false
sql: ALTER TABLE "public"."messages" DROP COLUMN "image_path";
type: run_sql

5
hasura/migrations/1613767994173_alter_table_public_messages_add_column_image_path/up.yaml Normal file
View File

@@ -0,0 +1,5 @@
- args:
cascade: false
read_only: false
sql: ALTER TABLE "public"."messages" ADD COLUMN "image_path" jsonb NULL;
type: run_sql

36
hasura/migrations/1613768005234_update_permission_user_public_table_messages/down.yaml Normal file
View File

@@ -0,0 +1,36 @@
- args:
role: user
table:
name: messages
schema: public
type: drop_insert_permission
- args:
permission:
check:
conversation:
bodyshop:
associations:
_and:
- user:
authid:
_eq: X-Hasura-User-Id
- active:
_eq: true
columns:
- conversationid
- created_at
- id
- image
- isoutbound
- msid
- read
- status
- text
- updated_at
- userid
set: {}
role: user
table:
name: messages
schema: public
type: create_insert_permission

37
hasura/migrations/1613768005234_update_permission_user_public_table_messages/up.yaml Normal file
View File

@@ -0,0 +1,37 @@
- args:
role: user
table:
name: messages
schema: public
type: drop_insert_permission
- args:
permission:
check:
conversation:
bodyshop:
associations:
_and:
- user:
authid:
_eq: X-Hasura-User-Id
- active:
_eq: true
columns:
- conversationid
- created_at
- id
- image
- image_path
- isoutbound
- msid
- read
- status
- text
- updated_at
- userid
set: {}
role: user
table:
name: messages
schema: public
type: create_insert_permission

37
hasura/migrations/1613768012873_update_permission_user_public_table_messages/down.yaml Normal file
View File

@@ -0,0 +1,37 @@
- args:
role: user
table:
name: messages
schema: public
type: drop_select_permission
- args:
permission:
allow_aggregations: true
columns:
- conversationid
- created_at
- id
- image
- isoutbound
- msid
- read
- status
- text
- updated_at
- userid
computed_fields: []
filter:
conversation:
bodyshop:
associations:
_and:
- user:
authid:
_eq: X-Hasura-User-Id
- active:
_eq: true
role: user
table:
name: messages
schema: public
type: create_select_permission

38
hasura/migrations/1613768012873_update_permission_user_public_table_messages/up.yaml Normal file
View File

@@ -0,0 +1,38 @@
- args:
role: user
table:
name: messages
schema: public
type: drop_select_permission
- args:
permission:
allow_aggregations: true
columns:
- conversationid
- created_at
- id
- image
- image_path
- isoutbound
- msid
- read
- status
- text
- updated_at
- userid
computed_fields: []
filter:
conversation:
bodyshop:
associations:
_and:
- user:
authid:
_eq: X-Hasura-User-Id
- active:
_eq: true
role: user
table:
name: messages
schema: public
type: create_select_permission

35
hasura/migrations/1613768023989_update_permission_user_public_table_messages/down.yaml Normal file
View File

@@ -0,0 +1,35 @@
- args:
role: user
table:
name: messages
schema: public
type: drop_update_permission
- args:
permission:
columns:
- conversationid
- created_at
- id
- image
- isoutbound
- msid
- read
- status
- text
- updated_at
filter:
conversation:
bodyshop:
associations:
_and:
- user:
authid:
_eq: X-Hasura-User-Id
- active:
_eq: true
set: {}
role: user
table:
name: messages
schema: public
type: create_update_permission

36
hasura/migrations/1613768023989_update_permission_user_public_table_messages/up.yaml Normal file
View File

@@ -0,0 +1,36 @@
- args:
role: user
table:
name: messages
schema: public
type: drop_update_permission
- args:
permission:
columns:
- conversationid
- created_at
- id
- image
- image_path
- isoutbound
- msid
- read
- status
- text
- updated_at
filter:
conversation:
bodyshop:
associations:
_and:
- user:
authid:
_eq: X-Hasura-User-Id
- active:
_eq: true
set: {}
role: user
table:
name: messages
schema: public
type: create_update_permission

10
hasura/migrations/metadata.yaml
View File

@@ -3057,17 +3057,17 @@ tables:
- role: user
permission:
columns:
- conversationid
- created_at
- id
- image
- isoutbound
- read
- image_path
- isoutbound
- msid
- read
- status
- text
- created_at
- updated_at
- conversationid
- id
filter:
conversation:
bodyshop:

18
server/sms/receive.js
View File

@@ -29,11 +29,13 @@ exports.receive = (req, res) => {
phone: phone(req.body.From)[0],
})
.then((response) => {
console.log("re", req.body);
let newMessage = {
msid: req.body.SmsMessageSid,
text: req.body.Body,
image: !!req.body.MediaUrl0,
image_path: req.body.MediaUrl0 || null,
image_path: generateMediaArray(req.body),
};
if (response.bodyshops[0]) {
//Found a bodyshop - should always happen.
@@ -164,3 +166,17 @@ exports.receive = (req, res) => {
// [0] MediaContentType0: 'image/jpeg',
// MediaContentType0: 'video/3gpp',
const generateMediaArray = (body) => {
const { NumMedia } = body;
if (parseInt(NumMedia) > 0) {
//stuff
const ret = [];
for (var i = 0; i < parseInt(NumMedia); i++) {
ret.push(body[`MediaUrl${i}`]);
}
return ret;
} else {
return null;
}
};

34
server/sms/send.js
View File

@@ -17,7 +17,13 @@ const client = twilio(
const gqlClient = require("../graphql-client/graphql-client").client;
exports.send = (req, res) => {
const { to, messagingServiceSid, body, conversationid } = req.body;
const {
to,
messagingServiceSid,
body,
conversationid,
selectedMedia,
} = req.body;
console.log("[Sending Sms] " + conversationid + " | " + body);
if (!!to && !!messagingServiceSid && !!body && !!conversationid) {
client.messages
@@ -25,6 +31,7 @@ exports.send = (req, res) => {
body: body,
messagingServiceSid: messagingServiceSid,
to: phone(to)[0],
mediaUrl: selectedMedia.map((i) => i.src),
})
.then((message) => {
let newMessage = {
@@ -33,6 +40,11 @@ exports.send = (req, res) => {
conversationid,
isoutbound: true,
userid: req.user.email,
image: req.body.selectedMedia.length > 0,
image_path:
req.body.selectedMedia.length > 0
? selectedMedia.map((i) => i.src)
: [],
};
gqlClient
.request(queries.INSERT_MESSAGE, { msg: newMessage })
@@ -55,3 +67,23 @@ exports.send = (req, res) => {
.json({ success: false, message: "Missing required parameter(s)." });
}
};
// //Image
// acc.push({
// src: `${process.env.REACT_APP_CLOUDINARY_ENDPOINT}/${DetermineFileType(
// value.type
// )}/upload/${value.key}`,
// thumbnail: `${
// process.env.REACT_APP_CLOUDINARY_ENDPOINT
// }/${DetermineFileType(value.type)}/upload/${
// process.env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS
// }/${value.key}`,
// thumbnailHeight: 225,
// thumbnailWidth: 225,
// isSelected: false,
// key: value.key,
// extension: value.extension,
// id: value.id,
// type: value.type,
// tags: [{ value: value.type, title: value.type }],
// });