bigbuffet/bigbuffet
2
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

Cleanups, renames

Browse source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2024-11-28 17:07:53 +01:00
parent a75749d4a0
commit e1fa58785e
10 changed files with 34 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/features/search/components/search.tsx → src/components/search-bar.tsx
View file

@ -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 {
autoFocus = false,
openInRoute = false,
} = props;
const SearchBar = ({
autoFocus = false,
openInRoute = false,
}: ISearchBar) => {
const history = useHistory();
const intl = useIntl();
@ -82,4 +79,4 @@ const Search = (props: ISearch) => {
);
};
export default Search;
export default SearchBar;

4
src/features/forms/index.tsx → src/components/ui/select-dropdown.tsx
View file

@ -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 };

39
src/features/ui/index.tsx
View file

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

26
src/features/ui/util/react-router-helpers.tsx
View file

@ -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 />}>
<Suspense fallback={<FallbackLoading />}>
<ErrorBoundary fallback={<ColumnLoading />}>
<Suspense fallback={<ColumnLoading />}>
<Layout params={match.params} {...componentParams}>
<Component params={match.params} {...componentParams}>
{content}
</Component>
<Component params={match.params} {...componentParams} />
</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,
};

2
src/layouts/default-layout.tsx
View file

@ -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';

2
src/layouts/event-layout.tsx
View file

@ -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';

2
src/layouts/profile-layout.tsx
View file

@ -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';

6
src/pages/search.tsx → src/pages/search/index.tsx
View file

@ -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/features/search/components/search-results';
import SearchResults from 'bigbuffet/pages/search/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>

0
src/features/search/components/search-results.tsx → src/pages/search/search-results.tsx
View file

2
src/panels/account-directory-panel.tsx
View file

@ -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' },