Revert "fix iframe resize on auth dropdown opening"

This reverts commit 8e96aa2.
umputun · Sep 21, 2022 · 4733ad8 · 4733ad8
1 parent 8e96aa2
commit 4733ad8
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 58 deletions.
diff --git a/frontend/apps/remark42/app/components/auth/auth.hooks.ts b/frontend/apps/remark42/app/components/auth/auth.hooks.ts
@@ -70,7 +70,9 @@ export function useDropdown(disableClosing?: boolean) {
   useEffect(() => {
     const dropdownElement = rootRef.current;
 
-    if (!dropdownElement) {
+    if (!dropdownElement || !showDropdown) {
+      handleChangeIframeSize(document.body);
+
       return;
     }
 

diff --git a/frontend/apps/remark42/app/components/root/root.tsx b/frontend/apps/remark42/app/components/root/root.tsx
@@ -122,6 +122,7 @@ export class Root extends Component<Props, State> {
     Promise.all([userloading, this.props.fetchComments()]).finally(() => {
       setTimeout(this.checkUrlHash);
       window.addEventListener('hashchange', this.checkUrlHash);
+      postMessageToParent({ height: document.body.offsetHeight });
     });
 
     window.addEventListener('message', this.onMessage);
@@ -273,12 +274,33 @@ export class Root extends Component<Props, State> {
               <div className={clsx('sort-picker', styles.sortPicker)}>
                 <SortPicker />
               </div>
-              <Comments
-                commentsShown={commentsShown}
-                isLoading={props.isCommentsLoading}
-                topComments={props.topComments}
-                showMore={this.showMore}
-              />
+              {!!this.props.topComments.length && !props.isCommentsLoading && (
+                <div className="root__threads" role="list">
+                  {(IS_MOBILE && commentsShown < this.props.topComments.length
+                    ? this.props.topComments.slice(0, commentsShown)
+                    : this.props.topComments
+                  ).map((id) => (
+                    <Thread
+                      key={`thread-${id}`}
+                      id={id}
+                      mix="root__thread"
+                      level={0}
+                      getPreview={this.props.getPreview}
+                    />
+                  ))}
+
+                  {commentsShown < this.props.topComments.length && IS_MOBILE && (
+                    <Button className={clsx('more-comments', styles.moreComments)} onClick={this.showMore}>
+                      <FormattedMessage id="root.show-more" defaultMessage="Show more" />
+                    </Button>
+                  )}
+                </div>
+              )}
+              {props.isCommentsLoading && (
+                <div className="root__threads" role="list">
+                  <Preloader className="root__preloader" />
+                </div>
+              )}
             </>
           )}
         </div>
@@ -287,17 +309,21 @@ export class Root extends Component<Props, State> {
   }
 }
 
+const CopyrightLink = (title: string) => (
+  <a class="root__copyright-link" href="https://remark42.com/">
+    {title}
+  </a>
+);
+
 function updateIframeHeight() {
   postMessageToParent({ height: document.body.offsetHeight });
 }
 
-interface CommentsProps {
-  isLoading: boolean;
-  topComments: string[];
-  commentsShown: number;
-  showMore(): void;
-}
-function Comments({ isLoading, topComments, commentsShown, showMore }: CommentsProps) {
+/** Root component connected to redux */
+export function ConnectedRoot() {
+  const intl = useIntl();
+  const props = useSelector(mapStateToProps);
+  const actions = useActions(boundActions);
   const rootRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -310,55 +336,16 @@ function Comments({ isLoading, topComments, commentsShown, showMore }: CommentsP
       updateIframeHeight();
 
       // a hacky way to force iframe height update when new image is rendered and loaded
-      rootRef.current?.querySelectorAll('img').forEach((img) => {
-        img.addEventListener('load', updateIframeHeight);
-      });
+      rootRef.current?.querySelectorAll('img').forEach((img) => img.addEventListener('load', updateIframeHeight));
     });
 
     observer.observe(rootRef.current, { attributes: true, childList: true, subtree: true });
 
     return () => observer.disconnect();
   }, []);
 
-  const renderComments =
-    IS_MOBILE && commentsShown < topComments.length ? topComments.slice(0, commentsShown) : topComments;
-  const isShowMoreButtonVisible = IS_MOBILE && commentsShown < topComments.length;
-
-  return (
-    <div className="root__threads" role="list" ref={rootRef}>
-      {isLoading ? (
-        <Preloader className="root__preloader" />
-      ) : (
-        <>
-          {topComments.length > 0 &&
-            renderComments.map((id) => (
-              <Thread key={`thread-${id}`} id={id} mix="root__thread" level={0} getPreview={getPreview} />
-            ))}
-          {isShowMoreButtonVisible && (
-            <Button className={clsx('more-comments', styles.moreComments)} onClick={showMore}>
-              <FormattedMessage id="root.show-more" defaultMessage="Show more" />
-            </Button>
-          )}
-        </>
-      )}
-    </div>
-  );
-}
-
-const CopyrightLink = (title: string) => (
-  <a class="root__copyright-link" href="https://remark42.com/">
-    {title}
-  </a>
-);
-
-/** Root component connected to redux */
-export function ConnectedRoot() {
-  const intl = useIntl();
-  const props = useSelector(mapStateToProps);
-  const actions = useActions(boundActions);
-
   return (
-    <div className={clsx(b('root', {}, { theme: props.theme }), props.theme)}>
+    <div className={clsx(b('root', {}, { theme: props.theme }), props.theme)} ref={rootRef}>
       <Root {...props} {...actions} intl={intl} />
       <p className="root__copyright" role="contentinfo">
         <FormattedMessage

diff --git a/frontend/apps/remark42/webpack.config.js b/frontend/apps/remark42/webpack.config.js
@@ -223,9 +223,6 @@ module.exports = (_, { mode, analyze }) => {
       { path: '/api', target: REMARK_API_BASE_URL, changeOrigin: true },
       { path: '/auth', target: REMARK_API_BASE_URL, changeOrigin: true },
     ],
-    client: {
-      overlay: false,
-    },
   };
 
   const plugins = [