2 files changed, 80 insertions, 0 deletions
diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx
new file mode 100644
index 00000000..f6f475bc
--- /dev/null
+++ b/src/components/common/MomentTags.tsx
@@ -0,0 +1,79 @@
+import React, {MutableRefObject, useEffect, useState} from 'react';
+import {MomentTagType, ProfilePreviewType} from '../../types';
+import TaggDraggable from '../taggs/TaggDraggable';
+import Draggable from './Draggable';
+
+interface MomentTagsProps {
+  editing: boolean;
+  tags: MomentTagType[];
+  imageRef: MutableRefObject<null>;
+  deleteFromList?: (user: ProfilePreviewType) => void;
+}
+
+const MomentTags: React.FC<MomentTagsProps> = ({
+  editing,
+  tags,
+  imageRef,
+  deleteFromList,
+}) => {
+  const [offset, setOffset] = useState([0, 0]);
+  const [curStart, setCurStart] = useState([0, 0]);
+  const [imageDimensions, setImageDimensions] = useState([0, 0]);
+
+  useEffect(() => {
+    imageRef.current.measure((fx, fy, width, height, px, py) => {
+      console.log(px, py);
+      console.log(width, height);
+      setOffset([px, py]);
+      setImageDimensions([width, height]);
+    });
+  }, []);
+
+  if (!tags) {
+    return null;
+  }
+
+  return editing && deleteFromList ? (
+    <>
+      {tags.map((tag) => (
+        <Draggable
+          x={imageDimensions[0] / 2 - curStart[0] / 2 + offset[0]}
+          y={offset[1] + imageDimensions[1] / 2 - curStart[1] / 2}
+          minX={offset[0]}
+          minY={offset[1]}
+          maxX={imageDimensions[0] + offset[0]}
+          maxY={imageDimensions[1] + offset[1]}
+          onDragStart={() => null}>
+          <TaggDraggable
+            taggedUser={tag.user}
+            editingView={true}
+            deleteFromList={() => deleteFromList(tag.user)}
+            setStart={setCurStart}
+          />
+        </Draggable>
+      ))}
+    </>
+  ) : (
+    <>
+      {tags.map((tag) => (
+        <Draggable
+          x={imageDimensions[0] / 2 - curStart[0] / 2 + tag.x}
+          y={imageDimensions[0] / 2 - curStart[0] / 2 + tag.y}
+          minX={offset[0]}
+          minY={offset[1]}
+          maxX={imageDimensions[0] + offset[0]}
+          maxY={imageDimensions[1] + offset[1]}
+          onDragStart={() => null}>
+          <TaggDraggable
+            taggedUser={tag.user}
+            editingView={editing}
+            deleteFromList={() => null}
+            setStart={setCurStart}
+          />
+        </Draggable>
+      ))}
+    </>
+  );
+};
+
+export default MomentTags;
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 48abb8b8..692c9f8a 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -27,3 +27,4 @@ export {default as Avatar} from './Avatar';
 export {default as TaggTypeahead} from './TaggTypeahead';
 export {default as TaggUserRowCell} from './TaggUserRowCell';
 export {default as LikeButton} from './LikeButton';
+export {default as MomentTags} from './MomentTags';