Cleanups, renames

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

src/components/search-bar.tsx

@@ -10,18 +10,15 @@ const messages = defineMessages({
   placeholder: { id: 'search.placeholder', defaultMessage: 'Search' },
 });
 
-interface ISearch {
+interface ISearchBar {
   autoFocus?: boolean;
-  autoSubmit?: boolean;
   openInRoute?: boolean;
 }
 
-const Search = (props: ISearch) => {
+const SearchBar = ({
-  const {
+  autoFocus = false,
-    autoFocus = false,
+  openInRoute = false,
-    openInRoute = false,
+}: ISearchBar) => {
-  } = props;
-
   const history = useHistory();
   const intl = useIntl();
 
@@ -82,4 +79,4 @@ const Search = (props: ISearch) => {
   );
 };
 
-export default Search;
+export default SearchBar;

src/components/ui/select-dropdown.tsx

@@ -34,7 +34,7 @@ interface ISelectDropdown {
   onChange?: React.ChangeEventHandler;
 }
 
-export const SelectDropdown: React.FC<ISelectDropdown> = (props) => {
+const SelectDropdown: React.FC<ISelectDropdown> = (props) => {
   const { label, hint, items, ...rest } = props;
 
   const optionElems = Object.keys(items).map(item => (
@@ -48,3 +48,5 @@ export const SelectDropdown: React.FC<ISelectDropdown> = (props) => {
     <LabelInputContainer label={label} hint={hint}>{selectElem}</LabelInputContainer>
   ) : selectElem;
 };
+
+export { SelectDropdown };

src/features/ui/index.tsx

@@ -26,44 +26,35 @@ import {
 import GlobalHotkeys from './util/global-hotkeys';
 import { WrappedRoute } from './util/react-router-helpers';
 
-interface ISwitchingColumnsArea {
+const Routes = () => {
-  children: React.ReactNode;
-}
-
-const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = ({ children }) => {
   const { events } = useFeatures();
 
   return (
     <Switch>
-      <WrappedRoute path='/' exact layout={DefaultLayout} component={Homepage} content={children} />
+      <WrappedRoute path='/' exact layout={DefaultLayout} component={Homepage} />
 
-      <WrappedRoute path='/tags/:id' layout={DefaultLayout} component={HashtagTimeline} content={children} />
+      <WrappedRoute path='/tags/:id' layout={DefaultLayout} component={HashtagTimeline} />
-      <WrappedRoute path='/search' layout={DefaultLayout} component={SearchPage} content={children} />
+      <WrappedRoute path='/search' layout={DefaultLayout} component={SearchPage} />
-      <WrappedRoute path='/@:username' exact component={AccountTimeline} layout={ProfileLayout} content={children} />
+      <WrappedRoute path='/@:username' exact component={AccountTimeline} layout={ProfileLayout} />
-      <WrappedRoute path='/@:username/with_replies' component={AccountTimeline} layout={ProfileLayout} content={children} componentParams={{ withReplies: true }} />
+      <WrappedRoute path='/@:username/with_replies' component={AccountTimeline} layout={ProfileLayout} componentParams={{ withReplies: true }} />
-      <WrappedRoute path='/@:username/media' component={AccountGallery} layout={ProfileLayout} content={children} />
+      <WrappedRoute path='/@:username/media' component={AccountGallery} layout={ProfileLayout} />
-      <WrappedRoute path='/@:username/posts/:statusId' exact layout={DefaultLayout} component={Status} content={children} />
+      <WrappedRoute path='/@:username/posts/:statusId' exact layout={DefaultLayout} component={Status} />
-      <WrappedRoute path='/@:username/posts/:statusId/quotes' layout={DefaultLayout} component={Quotes} content={children} />
+      <WrappedRoute path='/@:username/posts/:statusId/quotes' layout={DefaultLayout} component={Quotes} />
-      <WrappedRoute path='/@:username/tags/:id' layout={ProfileLayout} component={AccountHashtagTimeline} content={children} />
+      <WrappedRoute path='/@:username/tags/:id' layout={ProfileLayout} component={AccountHashtagTimeline} />
-      {events && <WrappedRoute path='/@:username/events/:statusId' exact layout={EventLayout} component={EventInformation} content={children} />}
+      {events && <WrappedRoute path='/@:username/events/:statusId' exact layout={EventLayout} component={EventInformation} />}
-      {events && <WrappedRoute path='/@:username/events/:statusId/discussion' exact layout={EventLayout} component={EventDiscussion} content={children} />}
+      {events && <WrappedRoute path='/@:username/events/:statusId/discussion' exact layout={EventLayout} component={EventDiscussion} />}
       <Redirect from='/@:username/:statusId' to='/@:username/posts/:statusId' />
 
-      <WrappedRoute layout={DefaultLayout} component={GenericNotFound} content={children} />
+      <WrappedRoute layout={DefaultLayout} component={GenericNotFound} />
     </Switch>
   );
 };
 
-interface IUI {
-  children?: React.ReactNode;
-}
 
-const UI: React.FC<IUI> = ({ children }) => (
+const UI = () => (
   <GlobalHotkeys>
     <Layout>
-      <SwitchingColumnsArea>
+      <Routes />
-        {children}
-      </SwitchingColumnsArea>
     </Layout>
 
     <Suspense>

src/features/ui/util/react-router-helpers.tsx

@@ -12,24 +12,20 @@ type LayoutProps = {
 interface IWrappedRoute extends RouteProps {
   component: React.ExoticComponent<any>;
   layout: React.ComponentType<LayoutProps>;
-  content?: React.ReactNode;
   componentParams?: Record<string, any>;
 }
 
 const WrappedRoute: React.FC<IWrappedRoute> = ({
   component: Component,
   layout: Layout,
-  content,
   componentParams = {},
   ...rest
 }) => {
   const renderComponent = ({ match }: RouteComponentProps) => (
-    <ErrorBoundary fallback={<FallbackLoading />}>
+    <ErrorBoundary fallback={<ColumnLoading />}>
-      <Suspense fallback={<FallbackLoading />}>
+      <Suspense fallback={<ColumnLoading />}>
         <Layout params={match.params} {...componentParams}>
-          <Component params={match.params} {...componentParams}>
+          <Component params={match.params} {...componentParams} />
-            {content}
-          </Component>
         </Layout>
       </Suspense>
     </ErrorBoundary>
@@ -38,22 +34,6 @@ const WrappedRoute: React.FC<IWrappedRoute> = ({
   return <Route {...rest} render={renderComponent} />;
 };
 
-interface IFallbackLayout {
-  children: JSX.Element;
-}
-
-const FallbackLayout: React.FC<IFallbackLayout> = ({ children }) => (
-  <>
-    {children}
-  </>
-);
-
-const FallbackLoading: React.FC = () => (
-  <FallbackLayout>
-    <ColumnLoading />
-  </FallbackLayout>
-);
-
 export {
   WrappedRoute,
 };

src/layouts/default-layout.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import Search from 'bigbuffet/features/search/components/search';
+import Search from 'bigbuffet/components/search-bar';
 import { useBreakpoint, BREAKPOINT_TO_INDEX } from 'bigbuffet/hooks/useBreakpoint';
 import AccountDirectoryPanel from 'bigbuffet/panels/account-directory-panel';
 import HashtagsPanel from 'bigbuffet/panels/hashtags-panel';

src/layouts/event-layout.tsx

@@ -3,9 +3,9 @@ import React from 'react';
 import { useHistory } from 'react-router-dom';
 
 import PlaceholderStatus from 'bigbuffet/components/placeholders/placeholder-status';
+import Search from 'bigbuffet/components/search-bar';
 import Column from 'bigbuffet/components/ui/column';
 import Tabs from 'bigbuffet/components/ui/tabs';
-import Search from 'bigbuffet/features/search/components/search';
 import { EventHeader } from 'bigbuffet/features/ui/util/async-components';
 import { useBreakpoint, BREAKPOINT_TO_INDEX } from 'bigbuffet/hooks/useBreakpoint';
 import AccountDirectoryPanel from 'bigbuffet/panels/account-directory-panel';

src/layouts/profile-layout.tsx

@@ -4,11 +4,11 @@ import { FormattedMessage } from 'react-intl';
 import { Redirect, useHistory } from 'react-router-dom';
 
 import Header from 'bigbuffet/components/accounts/account-header';
+import Search from 'bigbuffet/components/search-bar';
 import Card from 'bigbuffet/components/ui/card';
 import Column from 'bigbuffet/components/ui/column';
 import Tabs from 'bigbuffet/components/ui/tabs';
 import bigBuffetConfig from 'bigbuffet/config';
-import Search from 'bigbuffet/features/search/components/search';
 import { ProfileInfoPanel } from 'bigbuffet/features/ui/util/async-components';
 import { BREAKPOINT_TO_INDEX, useBreakpoint } from 'bigbuffet/hooks/useBreakpoint';
 import AccountDirectoryPanel from 'bigbuffet/panels/account-directory-panel';

src/pages/search/index.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
+import Search from 'bigbuffet/components/search-bar';
 import Column from 'bigbuffet/components/ui/column';
-import Search from 'bigbuffet/features/search/components/search';
+import SearchResults from 'bigbuffet/pages/search/search-results';
-import SearchResults from 'bigbuffet/features/search/components/search-results';
 
 const messages = defineMessages({
   heading: { id: 'column.search', defaultMessage: 'Search' },
@@ -15,7 +15,7 @@ const SearchPage = () => {
   return (
     <Column label={intl.formatMessage(messages.heading)}>
       <div className='search-page'>
-        <Search autoFocus autoSubmit />
+        <Search autoFocus />
         <SearchResults />
       </div>
     </Column>

src/panels/account-directory-panel.tsx

@@ -4,9 +4,9 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import LoadMore from 'bigbuffet/components/load-more';
 import PlaceholderAccount from 'bigbuffet/components/placeholders/placeholder-account';
+import { SelectDropdown } from 'bigbuffet/components/ui/select-dropdown';
 import Widget from 'bigbuffet/components/ui/widget';
 import AccountContainer from 'bigbuffet/containers/account-container';
-import { SelectDropdown } from 'bigbuffet/features/forms';
 
 const messages = defineMessages({
   title: { id: 'account_directory_panel.title', defaultMessage: 'People' },