diff --git a/packages/pl-fe/src/features/bookmark-folders/components/new-folder-form.tsx b/packages/pl-fe/src/features/bookmark-folders/components/new-folder-form.tsx deleted file mode 100644 index 88567969e..000000000 --- a/packages/pl-fe/src/features/bookmark-folders/components/new-folder-form.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import React from 'react'; -import { FormattedMessage, defineMessages, useIntl } from 'react-intl'; - -import Button from 'pl-fe/components/ui/button'; -import Form from 'pl-fe/components/ui/form'; -import HStack from 'pl-fe/components/ui/hstack'; -import Input from 'pl-fe/components/ui/input'; -import { useTextField } from 'pl-fe/hooks/forms/use-text-field'; -import { useCreateBookmarkFolder } from 'pl-fe/queries/statuses/use-bookmark-folders'; -import toast from 'pl-fe/toast'; - -const messages = defineMessages({ - label: { id: 'bookmark_folders.new.title_placeholder', defaultMessage: 'New folder title' }, - createSuccess: { id: 'bookmark_folders.add.success', defaultMessage: 'Bookmark folder created successfully' }, - createFail: { id: 'bookmark_folders.add.fail', defaultMessage: 'Failed to create bookmark folder' }, -}); - -const NewFolderForm: React.FC = () => { - const intl = useIntl(); - - const name = useTextField(); - - const { mutate: createBookmarkFolder, isPending } = useCreateBookmarkFolder(); - - const handleSubmit = (e: React.FormEvent) => { - e.preventDefault(); - createBookmarkFolder({ - name: name.value, - }, { - onSuccess() { - toast.success(messages.createSuccess); - }, - onError() { - toast.success(messages.createFail); - }, - }); - }; - - const label = intl.formatMessage(messages.label); - - return ( -
- - - - - -
- ); -}; - -export { NewFolderForm as default }; diff --git a/packages/pl-fe/src/features/bookmark-folders/index.tsx b/packages/pl-fe/src/features/bookmark-folders/index.tsx index de169e92b..3635d114e 100644 --- a/packages/pl-fe/src/features/bookmark-folders/index.tsx +++ b/packages/pl-fe/src/features/bookmark-folders/index.tsx @@ -3,21 +3,76 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl'; import { Redirect } from 'react-router-dom'; import List, { ListItem } from 'pl-fe/components/list'; +import Button from 'pl-fe/components/ui/button'; import Column from 'pl-fe/components/ui/column'; import Emoji from 'pl-fe/components/ui/emoji'; +import Form from 'pl-fe/components/ui/form'; import HStack from 'pl-fe/components/ui/hstack'; import Icon from 'pl-fe/components/ui/icon'; +import Input from 'pl-fe/components/ui/input'; import Spinner from 'pl-fe/components/ui/spinner'; import Stack from 'pl-fe/components/ui/stack'; +import { useTextField } from 'pl-fe/hooks/forms/use-text-field'; import { useFeatures } from 'pl-fe/hooks/use-features'; -import { useBookmarkFolders } from 'pl-fe/queries/statuses/use-bookmark-folders'; - -import NewFolderForm from './components/new-folder-form'; +import { useBookmarkFolders, useCreateBookmarkFolder } from 'pl-fe/queries/statuses/use-bookmark-folders'; +import toast from 'pl-fe/toast'; const messages = defineMessages({ heading: { id: 'column.bookmarks', defaultMessage: 'Bookmarks' }, + label: { id: 'bookmark_folders.new.title_placeholder', defaultMessage: 'New folder title' }, + createSuccess: { id: 'bookmark_folders.add.success', defaultMessage: 'Bookmark folder created successfully' }, + createFail: { id: 'bookmark_folders.add.fail', defaultMessage: 'Failed to create bookmark folder' }, }); +const NewFolderForm: React.FC = () => { + const intl = useIntl(); + + const name = useTextField(); + + const { mutate: createBookmarkFolder, isPending } = useCreateBookmarkFolder(); + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + createBookmarkFolder({ + name: name.value, + }, { + onSuccess() { + toast.success(messages.createSuccess); + }, + onError() { + toast.success(messages.createFail); + }, + }); + }; + + const label = intl.formatMessage(messages.label); + + return ( +
+ + + + + +
+ ); +}; + const BookmarkFolders: React.FC = () => { const intl = useIntl(); const features = useFeatures(); @@ -73,4 +128,4 @@ const BookmarkFolders: React.FC = () => { ); }; -export { BookmarkFolders as default }; +export { BookmarkFolders as default, NewFolderForm }; diff --git a/packages/pl-fe/src/features/circles/components/new-circle-form.tsx b/packages/pl-fe/src/features/circles/components/new-circle-form.tsx deleted file mode 100644 index 1e6b9341b..000000000 --- a/packages/pl-fe/src/features/circles/components/new-circle-form.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import React, { useState } from 'react'; -import { defineMessages, useIntl } from 'react-intl'; - -import Button from 'pl-fe/components/ui/button'; -import Form from 'pl-fe/components/ui/form'; -import HStack from 'pl-fe/components/ui/hstack'; -import Input from 'pl-fe/components/ui/input'; -import { useCreateCircle } from 'pl-fe/queries/accounts/use-circles'; - -const messages = defineMessages({ - label: { id: 'circles.new.title_placeholder', defaultMessage: 'New circle title' }, - title: { id: 'circles.new.create', defaultMessage: 'Add circle' }, - create: { id: 'circles.new.create_title', defaultMessage: 'Add circle' }, -}); - -const NewCircleForm: React.FC = () => { - const intl = useIntl(); - - const [title, setTitle] = useState(''); - - const { mutate: createCircle, isPending } = useCreateCircle(); - - const handleChange = (e: React.ChangeEvent) => { - setTitle(e.target.value); - }; - - const handleSubmit = (e: React.FormEvent) => { - e.preventDefault(); - createCircle(title); - }; - - const label = intl.formatMessage(messages.label); - const create = intl.formatMessage(messages.create); - - return ( -
- - - - - -
- ); -}; - -export { NewCircleForm as default }; diff --git a/packages/pl-fe/src/features/circles/index.tsx b/packages/pl-fe/src/features/circles/index.tsx index b46e48ad8..b9ff28f75 100644 --- a/packages/pl-fe/src/features/circles/index.tsx +++ b/packages/pl-fe/src/features/circles/index.tsx @@ -1,24 +1,74 @@ -import React from 'react'; +import React, { useState } from 'react'; import { defineMessages, useIntl, FormattedMessage } from 'react-intl'; import List, { ListItem } from 'pl-fe/components/list'; +import Button from 'pl-fe/components/ui/button'; import Card from 'pl-fe/components/ui/card'; import Column from 'pl-fe/components/ui/column'; +import Form from 'pl-fe/components/ui/form'; import HStack from 'pl-fe/components/ui/hstack'; import Icon from 'pl-fe/components/ui/icon'; +import Input from 'pl-fe/components/ui/input'; import Spinner from 'pl-fe/components/ui/spinner'; import Stack from 'pl-fe/components/ui/stack'; -import { useCircles } from 'pl-fe/queries/accounts/use-circles'; +import { useCircles, useCreateCircle } from 'pl-fe/queries/accounts/use-circles'; import { getOrderedLists } from '../lists'; -import NewCircleForm from './components/new-circle-form'; - const messages = defineMessages({ heading: { id: 'column.circles', defaultMessage: 'Circles' }, subheading: { id: 'circles.subheading', defaultMessage: 'Your circles' }, + label: { id: 'circles.new.title_placeholder', defaultMessage: 'New circle title' }, + title: { id: 'circles.new.create', defaultMessage: 'Add circle' }, + create: { id: 'circles.new.create_title', defaultMessage: 'Add circle' }, }); +const NewCircleForm: React.FC = () => { + const intl = useIntl(); + + const [title, setTitle] = useState(''); + + const { mutate: createCircle, isPending } = useCreateCircle(); + + const handleChange = (e: React.ChangeEvent) => { + setTitle(e.target.value); + }; + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + createCircle(title); + }; + + const label = intl.formatMessage(messages.label); + const create = intl.formatMessage(messages.create); + + return ( +
+ + + + + +
+ ); +}; + const Circles: React.FC = () => { const intl = useIntl(); diff --git a/packages/pl-fe/src/features/ui/util/async-components.ts b/packages/pl-fe/src/features/ui/util/async-components.ts index 199c16d28..eff16189f 100644 --- a/packages/pl-fe/src/features/ui/util/async-components.ts +++ b/packages/pl-fe/src/features/ui/util/async-components.ts @@ -9,9 +9,11 @@ export const Backups = lazy(() => import('pl-fe/pages/settings/backups')); export const Blocks = lazy(() => import('pl-fe/pages/settings/blocks')); export const Bookmarks = lazy(() => import('pl-fe/pages/status-lists/bookmarks')); export const BubbleTimeline = lazy(() => import('pl-fe/pages/timelines/bubble-timeline')); +export const ChatIndex = lazy(() => import('pl-fe/pages/chats/chats')); export const CommunityTimeline = lazy(() => import('pl-fe/pages/timelines/community-timeline')); export const Conversations = lazy(() => import('pl-fe/pages/status-lists/conversations')); export const CreateApp = lazy(() => import('pl-fe/pages/developers/create-app')); +export const CryptoDonate = lazy(() => import('pl-fe/pages/utils/crypto-donate')); export const Dashboard = lazy(() => import('pl-fe/pages/dashboard/dashboard')); export const DeleteAccount = lazy(() => import('pl-fe/pages/settings/delete-account')); export const Developers = lazy(() => import('pl-fe/pages/developers/developers')); @@ -25,6 +27,7 @@ export const EditProfile = lazy(() => import('pl-fe/pages/settings/edit-profile' export const ExportData = lazy(() => import('pl-fe/pages/settings/export-data')); export const ExternalLogin = lazy(() => import('pl-fe/pages/auth/external-login')); export const FavouritedStatuses = lazy(() => import('pl-fe/pages/status-lists/favourited-statuses')); +export const FederationRestrictions = lazy(() => import('pl-fe/pages/utils/federation-restrictions')); export const Filters = lazy(() => import('pl-fe/pages/settings')); export const GenericNotFound = lazy(() => import('pl-fe/pages/utils/generic-not-found')); export const GroupBlockedMembers = lazy(() => import('pl-fe/pages/groups/group-blocked-members')); @@ -32,6 +35,7 @@ export const GroupGallery = lazy(() => import('pl-fe/pages/groups/group-gallery' export const GroupMembers = lazy(() => import('pl-fe/pages/groups/group-members')); export const GroupMembershipRequests = lazy(() => import('pl-fe/pages/groups/group-membership-requests')); export const GroupTimeline = lazy(() => import('pl-fe/pages/timelines/group-timeline')); +export const Groups = lazy(() => import('pl-fe/pages/groups/groups')); export const HashtagTimeline = lazy(() => import('pl-fe/pages/timelines/hashtag-timeline')); export const HomeTimeline = lazy(() => import('pl-fe/pages/timelines/home-timeline')); export const ImportData = lazy(() => import('pl-fe/pages/settings/import-data')); @@ -60,6 +64,7 @@ export const Relays = lazy(() => import('pl-fe/pages/dashboard/relays')); export const RemoteTimeline = lazy(() => import('pl-fe/pages/timelines/remote-timeline')); export const Rules = lazy(() => import('pl-fe/pages/dashboard/rules')); export const ServiceWorkerInfo = lazy(() => import('pl-fe/pages/developers/service-worker-info')); +export const ServerInfo = lazy(() => import('pl-fe/pages/utils/server-info')); export const Settings = lazy(() => import('pl-fe/pages/settings/settings')); export const SettingsStore = lazy(() => import('pl-fe/pages/developers/settings-store')); export const Share = lazy(() => import('pl-fe/pages/utils/share')); @@ -71,31 +76,26 @@ export const UserIndex = lazy(() => import('pl-fe/pages/dashboard/user-index')); export const AccountGallery = lazy(() => import('pl-fe/features/account-gallery')); export const AccountTimeline = lazy(() => import('pl-fe/features/account-timeline')); export const BookmarkFolders = lazy(() => import('pl-fe/features/bookmark-folders')); -export const ChatIndex = lazy(() => import('pl-fe/features/chats')); export const Circle = lazy(() => import('pl-fe/features/circle')); export const Circles = lazy(() => import('pl-fe/features/circles')); export const ComposeEditor = lazy(() => import('pl-fe/features/compose/editor')); export const ComposeEvent = lazy(() => import('pl-fe/features/compose-event')); -export const CryptoDonate = lazy(() => import('pl-fe/features/crypto-donate')); export const Directory = lazy(() => import('pl-fe/features/directory')); export const DraftStatuses = lazy(() => import('pl-fe/features/draft-statuses')); export const EventDiscussion = lazy(() => import('pl-fe/features/event/event-discussion')); export const EventInformation = lazy(() => import('pl-fe/features/event/event-information')); export const Events = lazy(() => import('pl-fe/features/events')); -export const FederationRestrictions = lazy(() => import('pl-fe/features/federation-restrictions')); export const FollowedTags = lazy(() => import('pl-fe/features/followed-tags')); export const Followers = lazy(() => import('pl-fe/features/followers')); export const Following = lazy(() => import('pl-fe/features/following')); export const FollowRecommendations = lazy(() => import('pl-fe/features/follow-recommendations')); export const FollowRequests = lazy(() => import('pl-fe/features/follow-requests')); -export const Groups = lazy(() => import('pl-fe/pages/groups/groups')); export const InteractionRequests = lazy(() => import('pl-fe/features/interaction-requests')); export const Lists = lazy(() => import('pl-fe/features/lists')); export const Notifications = lazy(() => import('pl-fe/features/notifications')); export const OutgoingFollowRequests = lazy(() => import('pl-fe/features/follow-requests/components/outgoing-follow-requests')); export const ScheduledStatuses = lazy(() => import('pl-fe/features/scheduled-statuses')); export const Search = lazy(() => import('pl-fe/features/search')); -export const ServerInfo = lazy(() => import('pl-fe/features/server-info')); export const Status = lazy(() => import('pl-fe/features/status')); // Panels diff --git a/packages/pl-fe/src/modals/select-bookmark-folder-modal.tsx b/packages/pl-fe/src/modals/select-bookmark-folder-modal.tsx index 0698f49e0..3135a46fa 100644 --- a/packages/pl-fe/src/modals/select-bookmark-folder-modal.tsx +++ b/packages/pl-fe/src/modals/select-bookmark-folder-modal.tsx @@ -11,7 +11,7 @@ import Modal from 'pl-fe/components/ui/modal'; import Spinner from 'pl-fe/components/ui/spinner'; import Stack from 'pl-fe/components/ui/stack'; import Toggle from 'pl-fe/components/ui/toggle'; -import NewFolderForm from 'pl-fe/features/bookmark-folders/components/new-folder-form'; +import NewFolderForm from 'pl-fe/features/bookmark-folders'; import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; import { useFeatures } from 'pl-fe/hooks/use-features'; diff --git a/packages/pl-fe/src/features/chats/index.tsx b/packages/pl-fe/src/pages/chats/chats.tsx similarity index 81% rename from packages/pl-fe/src/features/chats/index.tsx rename to packages/pl-fe/src/pages/chats/chats.tsx index 4751f7ab0..f67c01520 100644 --- a/packages/pl-fe/src/features/chats/index.tsx +++ b/packages/pl-fe/src/pages/chats/chats.tsx @@ -1,8 +1,7 @@ import React from 'react'; import { ChatProvider } from 'pl-fe/contexts/chat-context'; - -import ChatPage from './components/chat-page/chat-page'; +import ChatPage from 'pl-fe/features/chats/components/chat-page/chat-page'; interface IChatIndex { params?: { diff --git a/packages/pl-fe/src/features/crypto-donate/index.tsx b/packages/pl-fe/src/pages/utils/crypto-donate.tsx similarity index 88% rename from packages/pl-fe/src/features/crypto-donate/index.tsx rename to packages/pl-fe/src/pages/utils/crypto-donate.tsx index 1fbaffb20..b55774824 100644 --- a/packages/pl-fe/src/features/crypto-donate/index.tsx +++ b/packages/pl-fe/src/pages/utils/crypto-donate.tsx @@ -4,15 +4,14 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl'; import Accordion from 'pl-fe/components/ui/accordion'; import Column from 'pl-fe/components/ui/column'; import Stack from 'pl-fe/components/ui/stack'; +import SiteWallet from 'pl-fe/features/crypto-donate/components/site-wallet'; import { useInstance } from 'pl-fe/hooks/use-instance'; -import SiteWallet from './components/site-wallet'; - const messages = defineMessages({ heading: { id: 'column.crypto_donate', defaultMessage: 'Donate cryptocurrency' }, }); -const CryptoDonate: React.FC = (): JSX.Element => { +const CryptoDonatePage: React.FC = (): JSX.Element => { const intl = useIntl(); const instance = useInstance(); @@ -39,4 +38,4 @@ const CryptoDonate: React.FC = (): JSX.Element => { ); }; -export { CryptoDonate as default }; +export { CryptoDonatePage as default }; diff --git a/packages/pl-fe/src/features/federation-restrictions/index.tsx b/packages/pl-fe/src/pages/utils/federation-restrictions.tsx similarity index 92% rename from packages/pl-fe/src/features/federation-restrictions/index.tsx rename to packages/pl-fe/src/pages/utils/federation-restrictions.tsx index 0c07d8bcd..086515e0b 100644 --- a/packages/pl-fe/src/features/federation-restrictions/index.tsx +++ b/packages/pl-fe/src/pages/utils/federation-restrictions.tsx @@ -9,7 +9,7 @@ import { useInstance } from 'pl-fe/hooks/use-instance'; import { makeGetHosts } from 'pl-fe/selectors'; import { federationRestrictionsDisclosed } from 'pl-fe/utils/state'; -import RestrictedInstance from './components/restricted-instance'; +import RestrictedInstance from '../../features/federation-restrictions/components/restricted-instance'; const messages = defineMessages({ heading: { id: 'column.federation_restrictions', defaultMessage: 'Federation restrictions' }, @@ -19,7 +19,7 @@ const messages = defineMessages({ notDisclosed: { id: 'federation_restrictions.not_disclosed_message', defaultMessage: '{siteTitle} does not disclose federation restrictions through the API.' }, }); -const FederationRestrictions = () => { +const FederationRestrictionsPage = () => { const intl = useIntl(); const instance = useInstance(); @@ -55,4 +55,4 @@ const FederationRestrictions = () => { ); }; -export { FederationRestrictions as default }; +export { FederationRestrictionsPage as default }; diff --git a/packages/pl-fe/src/features/server-info/index.tsx b/packages/pl-fe/src/pages/utils/server-info.tsx similarity index 80% rename from packages/pl-fe/src/features/server-info/index.tsx rename to packages/pl-fe/src/pages/utils/server-info.tsx index 3c2928ee3..0e898a426 100644 --- a/packages/pl-fe/src/features/server-info/index.tsx +++ b/packages/pl-fe/src/pages/utils/server-info.tsx @@ -5,16 +5,15 @@ import Column from 'pl-fe/components/ui/column'; import Divider from 'pl-fe/components/ui/divider'; import Stack from 'pl-fe/components/ui/stack'; import Text from 'pl-fe/components/ui/text'; +import LinkFooter from 'pl-fe/features/ui/components/link-footer'; +import PromoPanel from 'pl-fe/features/ui/components/panels/promo-panel'; import { useInstance } from 'pl-fe/hooks/use-instance'; -import LinkFooter from '../ui/components/link-footer'; -import PromoPanel from '../ui/components/panels/promo-panel'; - const messages = defineMessages({ heading: { id: 'column.info', defaultMessage: 'Server information' }, }); -const ServerInfo = () => { +const ServerInfoPage = () => { const intl = useIntl(); const instance = useInstance(); @@ -38,4 +37,4 @@ const ServerInfo = () => { ); }; -export { ServerInfo as default }; +export { ServerInfoPage as default };