feat: import google sheet dataset (#14)

* Import google sheet icon * Add import from google drive option * Add import from google drive second view * import google script * Add sheet file icon * Add additional/optional parameters to assets card * Add importing google sheet graphQL changes * Add google sheet import * Fix params * save chages * save changes * Fix scopes * fix picker function * Fix permissions * re-sync dataset data * close modal after import * Change default icon color * Fix typo * abstract styles * Fix message * No need for initial values * Fix conflict * No need for isImage * Add types * re-export type * Remove isImage property Co-authored-by: basel.issmail <[email protected]>
reearth · Jul 8, 2021 · 21b167f · 21b167f
1 parent 51de778
commit 21b167f
Show file tree

Hide file tree

Showing 47 changed files with 10,086 additions and 9,304 deletions.
diff --git a/package.json b/package.json
@@ -151,6 +151,10 @@
         "@reduxjs/toolkit": "^1.5.0",
         "@rot1024/use-transition": "^1.0.0",
         "@sentry/browser": "^6.7.1",
+        "@types/gapi.auth2": "^0.0.54",
+        "@types/gapi.client": "^1.0.4",
+        "@types/gapi.client.sheets": "^4.0.20201029",
+        "@types/google.picker": "^0.0.37",
         "@types/tinycolor2": "^1.4.2",
         "apollo-link-sentry": "^3.0.2",
         "apollo-upload-client": "^14.1.3",

diff --git a/src/components/atoms/AdditionButton/index.tsx b/src/components/atoms/AdditionButton/index.tsx
@@ -15,24 +15,24 @@ export interface Props {
 const AdditionButton: React.FC<Props> = ({ className, children, disabled, onClick }) => {
   const referenceElement = useRef<HTMLDivElement>(null);
   const popperElement = useRef<HTMLDivElement>(null);
-  const {
-    styles,
-    attributes,
-    update: updatePopper,
-  } = usePopper(referenceElement.current, popperElement.current, {
-    placement: "bottom",
-    strategy: "fixed",
-    modifiers: [
-      {
-        name: "eventListeners",
-        enabled: false,
-        options: {
-          scroll: false,
-          resize: false,
+  const { styles, attributes, update: updatePopper } = usePopper(
+    referenceElement.current,
+    popperElement.current,
+    {
+      placement: "bottom",
+      strategy: "fixed",
+      modifiers: [
+        {
+          name: "eventListeners",
+          enabled: false,
+          options: {
+            scroll: false,
+            resize: false,
+          },
         },
-      },
-    ],
-  });
+      ],
+    },
+  );
 
   const handleClick = useCallback(() => {
     if (disabled) return;

diff --git a/src/components/atoms/Icon/Icons/sheet-file.svg b/src/components/atoms/Icon/Icons/sheet-file.svg
diff --git a/src/components/atoms/Icon/icons.ts b/src/components/atoms/Icon/icons.ts
@@ -23,6 +23,8 @@ import Dataset from "./Icons/datasetIcon.svg";
 import DatasetAdd from "./Icons/datasetAdd.svg";
 import File from "./Icons/fileIcon.svg";
 import PcIcon from "./Icons/pcIcon.svg";
+import GoogleDriveIcon from "./Icons/googleDriveIcon.svg";
+import SheetFileIcon from "./Icons/sheet-file.svg";
 
 // Asset
 import AssetGrid from "./Icons/assetGrid.svg";
@@ -132,6 +134,8 @@ export default {
   dataset: Dataset,
   datasetAdd: DatasetAdd,
   file: File,
+  googleDrive: GoogleDriveIcon,
+  sheetFile: SheetFileIcon,
   computer: PcIcon,
   assetGrid: AssetGrid,
   assetGridSmall: AssetGridSmall,

diff --git a/src/components/atoms/InsertionBar/index.tsx b/src/components/atoms/InsertionBar/index.tsx
@@ -22,24 +22,24 @@ const InsertionBar: React.FC<Props> = ({
 }) => {
   const referenceElement = useRef<HTMLDivElement>(null);
   const popperElement = useRef<HTMLDivElement>(null);
-  const {
-    styles,
-    attributes,
-    update: updatePopper,
-  } = usePopper(referenceElement.current, popperElement.current, {
-    placement: "bottom",
-    strategy: "fixed",
-    modifiers: [
-      {
-        name: "eventListeners",
-        enabled: false,
-        options: {
-          scroll: false,
-          resize: false,
+  const { styles, attributes, update: updatePopper } = usePopper(
+    referenceElement.current,
+    popperElement.current,
+    {
+      placement: "bottom",
+      strategy: "fixed",
+      modifiers: [
+        {
+          name: "eventListeners",
+          enabled: false,
+          options: {
+            scroll: false,
+            resize: false,
+          },
         },
-      },
-    ],
-  });
+      ],
+    },
+  );
 
   const handleClick = useCallback(() => {
     if (mode !== "visible") return;

diff --git a/src/components/atoms/Markdown/index.tsx b/src/components/atoms/Markdown/index.tsx
@@ -25,10 +25,9 @@ const Markdown: React.FC<Props> = ({
   onClick,
   onDoubleClick,
 }) => {
-  const dark = useMemo(
-    () => (backgroundColor ? isDark(backgroundColor) : false),
-    [backgroundColor],
-  );
+  const dark = useMemo(() => (backgroundColor ? isDark(backgroundColor) : false), [
+    backgroundColor,
+  ]);
 
   return (
     <Wrapper

diff --git a/src/components/atoms/Select/index.tsx b/src/components/atoms/Select/index.tsx
@@ -60,36 +60,36 @@ const Select = <Value extends string | number>(
   const wrapperRef = useRef<HTMLDivElement>(null);
   const listRef = useRef<HTMLUListElement>(null);
   const mergedRef = useMergeRefs(ref ? [ref, wrapperRef] : [wrapperRef]);
-  const {
-    styles,
-    attributes,
-    update: updatePopper,
-  } = usePopper(wrapperRef.current, listRef.current, {
-    placement: "bottom",
-    modifiers: [
-      {
-        name: "flip",
-        enabled: true,
-        options: {
-          fallbackPlacements: ["top"],
+  const { styles, attributes, update: updatePopper } = usePopper(
+    wrapperRef.current,
+    listRef.current,
+    {
+      placement: "bottom",
+      modifiers: [
+        {
+          name: "flip",
+          enabled: true,
+          options: {
+            fallbackPlacements: ["top"],
+          },
         },
-      },
-      {
-        name: "offset",
-        options: {
-          offset: [0, 4],
+        {
+          name: "offset",
+          options: {
+            offset: [0, 4],
+          },
         },
-      },
-      {
-        name: "eventListeners",
-        enabled: !open,
-        options: {
-          scroll: false,
-          resize: false,
+        {
+          name: "eventListeners",
+          enabled: !open,
+          options: {
+            scroll: false,
+            resize: false,
+          },
         },
-      },
-    ],
-  });
+      ],
+    },
+  );
 
   const isValidElement = (object: {} | null | undefined): object is OptionElement<Value> =>
     React.isValidElement(object);

diff --git a/src/components/molecules/Common/AssetModal/AssetCard/index.tsx b/src/components/molecules/Common/AssetModal/AssetCard/index.tsx
@@ -10,7 +10,9 @@ type CardSize = "small" | "medium" | "large";
 export type Props = {
   className?: string;
   name: string;
-  url: string;
+  url?: string;
+  icon?: string;
+  iconSize?: string;
   cardSize?: CardSize;
   checked?: boolean;
   selected?: boolean;
@@ -21,6 +23,8 @@ const AssetCard: React.FC<Props> = ({
   className,
   name,
   url,
+  icon,
+  iconSize,
   cardSize,
   checked,
   selected,
@@ -34,10 +38,10 @@ const AssetCard: React.FC<Props> = ({
       cardSize={cardSize}
       onClick={() => onCheck?.(!check)}>
       <ImgWrapper cardSize={cardSize}>
-        {/\.(jpg|jpeg|png|gif|svg|webp|GIF|JPG|JPEG|PNG|SVG|WEBP)$/.test(url) ? (
+        {url && /\.(jpg|jpeg|png|gif|svg|webp|GIF|JPG|JPEG|PNG|SVG|WEBP)$/.test(url) ? (
           <PreviewImage url={url} />
         ) : (
-          <Icon icon="file" />
+          <Icon icon={icon} size={iconSize} />
         )}
       </ImgWrapper>
       <FileName size={cardSize === "large" ? "m" : "xs"} cardSize={cardSize} customColor>

diff --git a/src/components/molecules/Common/AssetModal/AssetListItem/index.stories.tsx b/src/components/molecules/Common/AssetModal/AssetListItem/index.stories.tsx
@@ -33,7 +33,6 @@ export const CheckedAndSelected: Story<Props> = args => <Component {...args} />;
 Image.args = {
   checked: false,
   asset: imageAsset,
-  isImage: true,
 };
 
 File.args = {
@@ -44,6 +43,5 @@ File.args = {
 CheckedAndSelected.args = {
   checked: true,
   asset: imageAsset,
-  isImage: true,
   selected: true,
 };
diff --git a/src/components/molecules/Common/AssetModal/AssetListItem/index.tsx b/src/components/molecules/Common/AssetModal/AssetListItem/index.tsx
@@ -10,18 +10,17 @@ import { metricsSizes } from "@reearth/theme/metrics";
 
 export type Asset = {
   id: string;
-  teamId: string;
+  teamId?: string;
   name: string;
-  size: number;
-  url: string;
-  contentType: string;
+  size?: number;
+  url?: string;
+  contentType?: string;
 };
 
 export type Props = {
   asset: Asset;
   selected?: boolean;
   checked?: boolean;
-  isImage?: boolean;
   onCheck?: (checked: boolean) => void;
 };
 
@@ -33,7 +32,8 @@ const AssetListItem: React.FC<Props> = ({ asset, selected, checked, onCheck }) =
         icon={
           checked
             ? "checkCircle"
-            : /\.(jpg|jpeg|png|gif|svg|webp|GIF|JPG|JPEG|PNG|SVG|WEBP)$/.test(asset.url)
+            : asset.url &&
+              /\.(jpg|jpeg|png|gif|svg|webp|GIF|JPG|JPEG|PNG|SVG|WEBP)$/.test(asset.url)
             ? "image"
             : "file"
         }
@@ -43,9 +43,11 @@ const AssetListItem: React.FC<Props> = ({ asset, selected, checked, onCheck }) =
       <ListItemName size="m" customColor>
         {asset.name}
       </ListItemName>
-      <ListItemSize size="m" customColor>
-        {parseFloat((asset.size / 1000).toFixed(2))} KB
-      </ListItemSize>
+      {asset.size && (
+        <ListItemSize size="m" customColor>
+          {parseFloat((asset.size / 1000).toFixed(2))} KB
+        </ListItemSize>
+      )}
     </ListItem>
   );
 };

diff --git a/src/components/molecules/Common/Cesium/hooks.ts b/src/components/molecules/Common/Cesium/hooks.ts
@@ -130,8 +130,9 @@ export default ({
     }
   }, [cameraState, onCameraChange]);
 
-  const [imageryLayers, setImageryLayers] =
-    useState<[string, ImageryProvider, number | undefined, number | undefined][]>();
+  const [imageryLayers, setImageryLayers] = useState<
+    [string, ImageryProvider, number | undefined, number | undefined][]
+  >();
 
   useDeepCompareEffect(() => {
     const newTiles = (property?.tiles?.length ? property.tiles : undefined)
@@ -225,11 +226,9 @@ const getCamera = (viewer: CesiumViewer) => {
   if (!(camera.frustum instanceof PerspectiveFrustum)) return;
 
   const ellipsoid = viewer.scene.globe.ellipsoid;
-  const {
-    latitude,
-    longitude,
-    height: altitude,
-  } = ellipsoid.cartesianToCartographic(camera.position);
+  const { latitude, longitude, height: altitude } = ellipsoid.cartesianToCartographic(
+    camera.position,
+  );
   const lat = CesiumMath.toDegrees(latitude);
   const lng = CesiumMath.toDegrees(longitude);
   const { heading, pitch, roll } = camera;

diff --git a/src/components/molecules/Common/plugin/builtin/primitives/ellipsoid.tsx b/src/components/molecules/Common/plugin/builtin/primitives/ellipsoid.tsx
@@ -37,10 +37,9 @@ const Ellipsoid: PrimitiveComponent<Property, PluginProperty> = ({
     return new Cartesian3(radius, radius, radius);
   }, [radius]);
 
-  const material = useMemo(
-    () => toColor(property?.default?.fillColor),
-    [property?.default?.fillColor],
-  );
+  const material = useMemo(() => toColor(property?.default?.fillColor), [
+    property?.default?.fillColor,
+  ]);
 
   return !isVisible ? null : (
     <Entity id={id} onClick={onClick} position={position}>

diff --git a/src/components/molecules/Common/plugin/builtin/primitives/polygon.tsx b/src/components/molecules/Common/plugin/builtin/primitives/polygon.tsx
@@ -25,14 +25,8 @@ const Polygon: PrimitiveComponent<Property, PluginProperty> = ({
   onClick,
   property,
 }) => {
-  const {
-    polygon,
-    fill = true,
-    stroke,
-    fillColor,
-    strokeColor,
-    strokeWidth = 1,
-  } = property?.default ?? {};
+  const { polygon, fill = true, stroke, fillColor, strokeColor, strokeWidth = 1 } =
+    property?.default ?? {};
 
   const hierarchy = useMemo(
     () =>
@@ -50,15 +44,15 @@ const Polygon: PrimitiveComponent<Property, PluginProperty> = ({
     [polygon],
   );
 
-  const memoStrokeColor = useMemo(
-    () => (stroke ? toColor(strokeColor) : undefined),
-    [stroke, strokeColor],
-  );
+  const memoStrokeColor = useMemo(() => (stroke ? toColor(strokeColor) : undefined), [
+    stroke,
+    strokeColor,
+  ]);
 
-  const memoFillColor = useMemo(
-    () => (fill && fillColor ? toColor(fillColor) : undefined),
-    [fill, fillColor],
-  );
+  const memoFillColor = useMemo(() => (fill && fillColor ? toColor(fillColor) : undefined), [
+    fill,
+    fillColor,
+  ]);
 
   return !isVisible ? null : (
     <Entity id={id} onClick={onClick}>