feat(s3): upload img

MediaComem · Dec 5, 2022 · 6da30b0 · 6da30b0
1 parent f332df2
commit 6da30b0
Show file tree

Hide file tree

Showing 11 changed files with 111 additions and 52 deletions.
diff --git a/.env.example b/.env.example
@@ -0,0 +1,4 @@
+REACT_APP_ACCESS_KEY=
+REACT_APP_SECRET_KEY=
+REACT_APP_S3_BUCKET=
+REACT_APP_S3_REGION=
diff --git a/.gitignore b/.gitignore
@@ -15,6 +15,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

diff --git a/package.json b/package.json
@@ -18,11 +18,13 @@
     "@types/node": "^16.11.42",
     "@types/react": "^18.0.14",
     "@types/react-dom": "^18.0.5",
+    "buffer": "^6.0.3",
     "debounce": "^1.2.1",
     "framer-motion": "^6.3.16",
     "lodash": "^4.17.21",
     "re-resizable": "^6.9.9",
     "react": "^18.2.0",
+    "react-aws-s3": "^1.5.0",
     "react-dnd": "^16.0.1",
     "react-dom": "^18.2.0",
     "react-inlinesvg": "^3.0.1",

diff --git a/src/components/layout/ByteSimHeader.tsx b/src/components/layout/ByteSimHeader.tsx
@@ -5,6 +5,7 @@ import { useDispatch } from "react-redux";
 import { setName } from "../../features/project/projectSlice";
 import ButtonWithIconCustom from "./ButtonWithIconCustom";
 import SaveProjectButton from "../project/SaveProjectButton";
+import UploadButton from "../project/UploadButton";
 
 export default function BytesimeHeader() {
   const projectName = useAppSelector((state) => state.project.name);
@@ -15,31 +16,38 @@ export default function BytesimeHeader() {
       align="center"
       alignSelf="stretch"
       justify={"space-between"}
-      borderBottom='1px solid lightgray'
+      borderBottom="1px solid lightgray"
       id="header"
     >
-      <Flex p={2} gap={2} align='center'>
-        <Heading size={"md"}>■ ByteSim <Badge colorScheme='yellow' variant='outline'>Version alpha</Badge></Heading>
+      <Flex p={2} gap={2} align="center">
+        <Heading size={"md"}>
+          ■ ByteSim{" "}
+          <Badge colorScheme="yellow" variant="outline">
+            Version alpha
+          </Badge>
+        </Heading>
         <Heading size={"md"} fontWeight={"light"}>
           <Input
-          variant={"flushed"}
+            variant={"flushed"}
             value={value}
             onChange={(e) => {
               setValue(e.target.value);
             }}
             onBlur={() => dispatch(setName(value))}
-            width='auto'
+            width="auto"
           />
         </Heading>
         <SaveProjectButton />
+
+        <UploadButton />
       </Flex>
       <ButtonWithIconCustom
-            icon={<></>}
-            label={"Best practices"}
-            //subLabel={"Start with ByteSim"}
-            variant={'ghost'}
-            iconAfter
-          />
+        icon={<></>}
+        label={"Best practices"}
+        //subLabel={"Start with ByteSim"}
+        variant={"ghost"}
+        iconAfter
+      />
       {/* <ProjectSettingsModal /> */}
     </Flex>
   );

diff --git a/src/components/project/UploadButton.tsx b/src/components/project/UploadButton.tsx
@@ -1,6 +1,5 @@
 import {
   Button,
-  Flex,
   Input,
   Modal,
   ModalBody,
@@ -12,30 +11,23 @@ import {
 } from "@chakra-ui/react";
 import * as React from "react";
 import { useDispatch } from "react-redux";
-import { projectUpdated } from "../../features/project/projectSlice";
-import { ReactComponent as AddIcon } from "../../assets/BigPlus.svg";
-import { colorTheme } from "../../theme";
+
+import { useNavigate } from "react-router-dom";
+import { setIsNew } from "../../features/zones/zonesSlice";
+import { ReactS3Client } from "../../utils/s3Config";
+window.Buffer = window.Buffer || require("buffer").Buffer;
 
 export default function UploadButton() {
-  const dispatch = useDispatch();
   const { isOpen, onOpen, onClose } = useDisclosure();
-  const [file, setFile] = React.useState<string | undefined>();
+  const [file, setFile] = React.useState<File>();
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+
   return (
     <>
-      <Flex
-        grow={1}
-        direction={"column"}
-        align="center"
-        justifyContent={"center"}
-        alignSelf="stretch"
-        onClick={onOpen}
-        _hover={{ backgroundColor: colorTheme[50], cursor: 'pointer' }}
-      >
-        <Flex direction="column" align="center">
-          <AddIcon />
-          Import an Artwork
-        </Flex>
-      </Flex>
+      <Button onClick={onOpen} size={"sm"}>
+        Import an Artwork
+      </Button>
       <Modal isOpen={isOpen} onClose={onClose}>
         <ModalOverlay bg="blackAlpha.300" />
         <ModalContent>
@@ -46,7 +38,8 @@ export default function UploadButton() {
               accept="image/*"
               onChange={(e) => {
                 if (e.target.files) {
-                  setFile(URL.createObjectURL(e.target.files[0]));
+                  const newFile = e.target.files[0];
+                  setFile(newFile);
                 }
               }}
             />
@@ -59,11 +52,20 @@ export default function UploadButton() {
               variant="solid"
               colorScheme={"brand"}
               onClick={() => {
-                const newScreenshot = {
-                  screenshotBlob: file,
-                };
-                dispatch(projectUpdated(newScreenshot));
-                onClose();
+                ReactS3Client.uploadFile(file)
+                  .then((data: any) => {
+                    onClose();
+                    console.log("data", data);
+                    navigate(
+                      `/figma?bytesimBucket=${
+                        process.env.REACT_APP_S3_BUCKET
+                      }&region=${
+                        process.env.REACT_APP_S3_REGION
+                      }&key=${encodeURIComponent(data.key)}&new=true`
+                    );
+                    dispatch(setIsNew(true));
+                  })
+                  .catch((err: any) => console.error("S3 upload err:", err));
               }}
             >
               OK

diff --git a/src/components/zones/ZonesView.tsx b/src/components/zones/ZonesView.tsx
@@ -130,14 +130,6 @@ export default function ZonesView({
               </Flex>
             }
           />
-          <Route
-            path="/new"
-            element={
-              <Flex>
-                <UploadButton />
-              </Flex>
-            }
-          />
           <Route
             path="/*"
             element={

diff --git a/src/features/figma/components/FetchedSVG.tsx b/src/features/figma/components/FetchedSVG.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import { useRef } from "react";
 import SVG from "react-inlinesvg";
 import { useDispatch } from "react-redux";
 
@@ -78,15 +78,15 @@ const FetchedSVG = ({
 }: {
   url?: string;
 }) => {
-  const idsRefs = React.useRef<string[]>([]);
+  const idsRefs = useRef<string[]>([]);
   const dispatch = useDispatch();
 
   const zonesSlices = useAppSelector((store) => store.zonesSlice);
 
   const zones = zonesSlices?.zones.filter((z) => z.createdFrom === "figma");
   const firstChildrenTree = zonesSlices.tree?.[0]?.children;
 
-  const uniqueHash = `${hashCode(url)}`;
+  const uniqueHash = `svg_elements_to_parse`;
   const { isOpen: isModalOpen, onClose, onOpen } = useDisclosure();
 
   const onModalCloseValidate = () => {

diff --git a/src/features/figma/components/ModalSelectZonesContent.tsx b/src/features/figma/components/ModalSelectZonesContent.tsx
@@ -8,7 +8,7 @@ import {
 import { useEffect, useState } from "react";
 import { TreeZoneEl, Zone } from "../../../app/types/types";
 import { unfoldTree } from "../../../components/zones/MainGroupList";
-import { isNewImportSvg } from "./FetchedSVG";
+import { isNewImportSvg, useIsNewImportedSvg } from "./FetchedSVG";
 
 const ModalSelectZonesContent = ({
   zones,
@@ -19,6 +19,7 @@ const ModalSelectZonesContent = ({
 }) => {
   const [openedZoneIds, setOpenedZoneIds] = useState<string[]>([]);
   const [mounted, setMounted] = useState(false);
+  const isNewSvg = useIsNewImportedSvg();
   useEffect(() => {
     setTimeout(() => {
       setMounted(true);
@@ -49,7 +50,7 @@ const ModalSelectZonesContent = ({
           pl={2}
         ></AccordionButton>
         {mounted &&
-          isNewImportSvg() &&
+          isNewSvg &&
           firstChildrenTree &&
           unfoldTree(firstChildrenTree, zones, openedZoneIds, setOpenedZoneId)}
         {!mounted && (

diff --git a/src/utils/s3Config.ts b/src/utils/s3Config.ts
@@ -0,0 +1,9 @@
+import S3 from "react-aws-s3";
+
+const config = {
+  bucketName: process.env.REACT_APP_S3_BUCKET,
+  region: process.env.REACT_APP_S3_REGION,
+  accessKeyId: process.env.REACT_APP_ACCESS_KEY,
+  secretAccessKey: process.env.REACT_APP_SECRET_KEY,
+};
+export const ReactS3Client = new S3(config);
diff --git a/src/utils/typeDefinition.d.ts b/src/utils/typeDefinition.d.ts
@@ -0,0 +1 @@
+declare module "react-aws-s3";
diff --git a/yarn.lock b/yarn.lock
@@ -3627,6 +3627,11 @@ ansi-styles@^5.0.0:
   resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz"
   integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==
 
+any-base@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/any-base/-/any-base-1.1.0.tgz#ae101a62bc08a597b4c9ab5b7089d456630549fe"
+  integrity sha512-uMgjozySS8adZZYePpaWs8cxB9/kdzmpX6SgJZ+wbz1K5eYk5QMYDVJaZKhxyIHUdnnJkfR7SVgStgH7LkGUyg==
+
 anymatch@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz"
@@ -4009,7 +4014,7 @@ balanced-match@^1.0.0:
   resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
-base64-js@^1.0.2:
+base64-js@^1.0.2, base64-js@^1.3.1:
   version "1.5.1"
   resolved "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz"
   integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
@@ -4257,6 +4262,14 @@ buffer@^4.3.0:
     ieee754 "^1.1.4"
     isarray "^1.0.0"
 
+buffer@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-6.0.3.tgz#2ace578459cc8fbe2a70aaa8f52ee63b6a74c6c6"
+  integrity sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==
+  dependencies:
+    base64-js "^1.3.1"
+    ieee754 "^1.2.1"
+
 builtin-modules@^3.1.0:
   version "3.3.0"
   resolved "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.3.0.tgz"
@@ -4826,6 +4839,11 @@ crypto-browserify@^3.11.0:
     randombytes "^2.0.0"
     randomfill "^1.0.3"
 
+crypto-js@^3.1.9-1:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/crypto-js/-/crypto-js-3.3.0.tgz#846dd1cce2f68aacfa156c8578f926a609b7976b"
+  integrity sha512-DIT51nX0dCfKltpRiXV+/TVZq+Qq2NgF4644+K7Ttnla7zEzqc+kjJyiB96BHNyUTBxyjzRcZYpUdZa+QAqi6Q==
+
 crypto-random-string@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz"
@@ -6908,7 +6926,7 @@ identity-obj-proxy@^3.0.0:
   dependencies:
     harmony-reflect "^1.4.6"
 
-ieee754@^1.1.4:
+ieee754@^1.1.4, ieee754@^1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
@@ -9843,6 +9861,14 @@ react-app-rewired@^2.2.1:
   dependencies:
     semver "^5.6.0"
 
+react-aws-s3@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/react-aws-s3/-/react-aws-s3-1.5.0.tgz#bcc212014e50103d2d9ef974a4244ff539792ead"
+  integrity sha512-ib8JvNFlWaQyFfXvDXNeQCsGsHAHJswQgtA1MbpIU5sCSXZVeqoRVlvexyzjPjJGy8KDnbyYEB9PQ2Rw96g8Ug==
+  dependencies:
+    crypto-js "^3.1.9-1"
+    short-uuid "^3.1.0"
+
 react-clientside-effect@^1.2.6:
   version "1.2.6"
   resolved "https://registry.npmjs.org/react-clientside-effect/-/react-clientside-effect-1.2.6.tgz"
@@ -10701,6 +10727,14 @@ shell-quote@^1.7.3:
   resolved "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.3.tgz"
   integrity sha512-Vpfqwm4EnqGdlsBFNmHhxhElJYrdfcxPThu+ryKS5J8L/fhAwLazFZtq+S+TWZ9ANj2piSQLGj6NQg+lKPmxrw==
 
+short-uuid@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/short-uuid/-/short-uuid-3.1.1.tgz#3ff427074b5fa7822c3793994d18a7a82e2f73a4"
+  integrity sha512-7dI69xtJYpTIbg44R6JSgrbDtZFuZ9vAwwmnF/L0PinykbFrhQ7V8omKsQcVw1TP0nYJ7uQp1PN6/aVMkzQFGQ==
+  dependencies:
+    any-base "^1.1.0"
+    uuid "^3.3.2"
+
 side-channel@^1.0.4:
   version "1.0.4"
   resolved "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz"
@@ -11729,6 +11763,11 @@ [email protected]:
   resolved "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz"
   integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==
 
+uuid@^3.3.2:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
+  integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
+
 uuid@^8.3.2:
   version "8.3.2"
   resolved "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz"