[Glitch] Prevent two composers from being shown

Port 8cf246e4d3 to glitch-soc Signed-off-by: Claire <claire.github-309c@sitedethib.com>
2025-06-11 23:02:09 +02:00
1 parent 86a7a1ef3b
commit fa33eff372
@@ -23,7 +23,7 @@ import { useColumnsContext } from '../util/columns_context';

 import BundleColumnError from './bundle_column_error';
 import { ColumnLoading } from './column_loading';
-import ComposePanel from './compose_panel';
+import { ComposePanel } from './compose_panel';
 import DrawerLoading from './drawer_loading';
 import NavigationPanel from './navigation_panel';

@@ -1,54 +0,0 @@
-import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
-
-import { connect } from 'react-redux';
-
-import { mountCompose, unmountCompose } from 'flavours/glitch/actions/compose';
-import ServerBanner from 'flavours/glitch/components/server_banner';
-import { Search } from 'flavours/glitch/features/compose/components/search';
-import ComposeFormContainer from 'flavours/glitch/features/compose/containers/compose_form_container';
-import { LinkFooter } from 'flavours/glitch/features/ui/components/link_footer';
-import { identityContextPropShape, withIdentity } from 'flavours/glitch/identity_context';
-
-class ComposePanel extends PureComponent {
-  static propTypes = {
-    identity: identityContextPropShape,
-    dispatch: PropTypes.func.isRequired,
-  };
-
-  componentDidMount () {
-    const { dispatch } = this.props;
-    dispatch(mountCompose());
-  }
-
-  componentWillUnmount () {
-    const { dispatch } = this.props;
-    dispatch(unmountCompose());
-  }
-
-  render() {
-    const { signedIn } = this.props.identity;
-
-    return (
-      <div className='compose-panel'>
-        <Search openInRoute />
-
-        {!signedIn && (
-          <>
-            <ServerBanner />
-            <div className='flex-spacer' />
-          </>
-        )}
-
-        {signedIn && (
-          <ComposeFormContainer singleColumn />
-        )}
-
-        <LinkFooter />
-      </div>
-    );
-  }
-
-}
-
-export default connect()(withIdentity(ComposePanel));
@@ -0,0 +1,52 @@
+import { useCallback, useEffect } from 'react';
+
+import { useLayout } from '@/flavours/glitch/hooks/useLayout';
+import { useAppDispatch, useAppSelector } from '@/flavours/glitch/store';
+import {
+  mountCompose,
+  unmountCompose,
+} from 'flavours/glitch/actions/compose';
+import ServerBanner from 'flavours/glitch/components/server_banner';
+import { Search } from 'flavours/glitch/features/compose/components/search';
+import ComposeFormContainer from 'flavours/glitch/features/compose/containers/compose_form_container';
+import { LinkFooter } from 'flavours/glitch/features/ui/components/link_footer';
+import { useIdentity } from 'flavours/glitch/identity_context';
+
+export const ComposePanel: React.FC = () => {
+  const dispatch = useAppDispatch();
+  const { signedIn } = useIdentity();
+  const hideComposer = useAppSelector((state) => {
+    const mounted = state.compose.get('mounted');
+    if (typeof mounted === 'number') {
+      return mounted > 1;
+    }
+    return false;
+  });
+
+  useEffect(() => {
+    dispatch(mountCompose());
+    return () => {
+      dispatch(unmountCompose());
+    };
+  }, [dispatch]);
+
+  const { singleColumn } = useLayout();
+
+  return (
+    <div className='compose-panel'>
+      <Search singleColumn={singleColumn} />
+
+      {!signedIn && (
+        <>
+          <ServerBanner />
+          <div className='flex-spacer' />
+        </>
+      )}
+
+      {signedIn && !hideComposer && <ComposeFormContainer singleColumn />}
+      {signedIn && hideComposer && <div className='compose-form' />}
+
+      <LinkFooter multiColumn={!singleColumn} />
+    </div>
+  );
+};