Removing old implementation of attachment

Tiny refactor

Merge branch 'next' of github.com:coralproject/talk into permalink

* 'next' of github.com:coralproject/talk:
  [next] ClickOutside Component (#1757)

Support for ClickOutside

src/core/client/stream/components/Comment/Comment.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { StatelessComponent } from "react";
 import { Typography } from "talk-ui/components";
 
-import PermalinkContainer from "../Permalink/PermalinkContainer";
+import PermalinkContainer from "../../containers/PermalinkContainer";
 import Timestamp from "./Timestamp";
 import TopBar from "./TopBar";
 import Username from "./Username";

src/core/client/stream/components/Permalink/PermalinkContainer.tsx

@@ -1,25 +0,0 @@
-import React, { StatelessComponent } from "react";
-import { graphql } from "react-relay";
-import { withLocalStateContainer } from "talk-framework/lib/relay";
-import { AppQueryLocal as Local } from "talk-stream/__generated__/AppQueryLocal.graphql";
-
-import Permalink from "./Permalink";
-
-interface InnerProps {
-  local: Local;
-  commentID: string;
-}
-
-export const PermalinkContainer: StatelessComponent<InnerProps> = props => {
-  return <Permalink {...props} origin={props.local.origin} />;
-};
-
-const enhanced = withLocalStateContainer<Local>(
-  graphql`
-    fragment PermalinkContainerLocal on Local {
-      origin
-    }
-  `
-)(PermalinkContainer);
-
-export default enhanced;

src/core/client/stream/components/Permalink/PermalinkPopover.tsx

@@ -2,14 +2,14 @@ import { Localized } from "fluent-react/compat";
 import React, { CSSProperties } from "react";
 import CopyToClipboard from "react-copy-to-clipboard";
 import { RefHandler } from "react-popper";
-import { Button, Flex, TextField } from "talk-ui/components";
+import { Button, ClickOutside, Flex, TextField } from "talk-ui/components";
 import * as styles from "./PermalinkPopover.css";
 
 interface InnerProps {
   permalinkUrl: string;
   style?: CSSProperties;
   forwardRef?: RefHandler;
-  toggleVisibility?: () => any;
+  toggleVisibility: () => void;
 }
 
 interface State {
@@ -35,25 +35,27 @@ class PermalinkPopover extends React.Component<InnerProps> {
   };
 
   public render() {
-    const { permalinkUrl } = this.props;
+    const { permalinkUrl, toggleVisibility } = this.props;
     const { copied } = this.state;
     return (
-      <Flex>
-        <TextField defaultValue={permalinkUrl} className={styles.textField} />
-        <CopyToClipboard text={permalinkUrl} onCopy={this.onCopy}>
-          <Button color="primary" variant="filled">
-            {copied ? (
-              <Localized id="comments-permalink-copied">
-                <span>Copied!</span>
-              </Localized>
-            ) : (
-              <Localized id="comments-permalink-copy">
-                <span>Copy</span>
-              </Localized>
-            )}
-          </Button>
-        </CopyToClipboard>
-      </Flex>
+      <ClickOutside onClickOutside={toggleVisibility}>
+        <Flex>
+          <TextField defaultValue={permalinkUrl} className={styles.textField} />
+          <CopyToClipboard text={permalinkUrl} onCopy={this.onCopy}>
+            <Button color="primary" variant="filled">
+              {copied ? (
+                <Localized id="comments-permalink-copied">
+                  <span>Copied!</span>
+                </Localized>
+              ) : (
+                <Localized id="comments-permalink-copy">
+                  <span>Copy</span>
+                </Localized>
+              )}
+            </Button>
+          </CopyToClipboard>
+        </Flex>
+      </ClickOutside>
     );
   }
 }

src/core/client/stream/components/Permalink/PermalinkView.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { StatelessComponent } from "react";
 
 import { Flex } from "talk-ui/components";
-import CommentContainer from "../containers/CommentContainer";
+import CommentContainer from "../../containers/CommentContainer";
 
 export interface InnerProps {
   comment: {} | null;