pl-fe: move some files around

Signed-off-by: Nicole Mikołajczyk <git@mkljczk.pl>

packages/pl-fe/src/features/bookmark-folders/components/new-folder-form.tsx

@@ -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<Element>) => {
-    e.preventDefault();
-    createBookmarkFolder({
-      name: name.value,
-    }, {
-      onSuccess() {
-        toast.success(messages.createSuccess);
-      },
-      onError() {
-        toast.success(messages.createFail);
-      },
-    });
-  };
-
-  const label = intl.formatMessage(messages.label);
-
-  return (
-    <Form onSubmit={handleSubmit}>
-      <HStack space={2} alignItems='center'>
-        <label className='grow'>
-          <span style={{ display: 'none' }}>{label}</span>
-
-          <Input
-            type='text'
-            placeholder={label}
-            disabled={isPending}
-            {...name}
-          />
-        </label>
-
-        <Button
-          disabled={isPending}
-          onClick={handleSubmit}
-          theme='primary'
-        >
-          <FormattedMessage id='bookmark_folders.new.create_title' defaultMessage='Add folder' />
-        </Button>
-      </HStack>
-    </Form>
-  );
-};
-
-export { NewFolderForm as default };

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<Element>) => {
+    e.preventDefault();
+    createBookmarkFolder({
+      name: name.value,
+    }, {
+      onSuccess() {
+        toast.success(messages.createSuccess);
+      },
+      onError() {
+        toast.success(messages.createFail);
+      },
+    });
+  };
+
+  const label = intl.formatMessage(messages.label);
+
+  return (
+    <Form onSubmit={handleSubmit}>
+      <HStack space={2} alignItems='center'>
+        <label className='grow'>
+          <span style={{ display: 'none' }}>{label}</span>
+
+          <Input
+            type='text'
+            placeholder={label}
+            disabled={isPending}
+            {...name}
+          />
+        </label>
+
+        <Button
+          disabled={isPending}
+          onClick={handleSubmit}
+          theme='primary'
+        >
+          <FormattedMessage id='bookmark_folders.new.create_title' defaultMessage='Add folder' />
+        </Button>
+      </HStack>
+    </Form>
+  );
+};
+
 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 };

packages/pl-fe/src/features/circles/components/new-circle-form.tsx

@@ -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<HTMLInputElement>) => {
-    setTitle(e.target.value);
-  };
-
-  const handleSubmit = (e: React.FormEvent<Element>) => {
-    e.preventDefault();
-    createCircle(title);
-  };
-
-  const label = intl.formatMessage(messages.label);
-  const create = intl.formatMessage(messages.create);
-
-  return (
-    <Form onSubmit={handleSubmit}>
-      <HStack space={2} alignItems='center'>
-        <label className='grow'>
-          <span style={{ display: 'none' }}>{label}</span>
-
-          <Input
-            type='text'
-            value={title}
-            disabled={isPending}
-            onChange={handleChange}
-            placeholder={label}
-          />
-        </label>
-
-        <Button
-          disabled={isPending}
-          onClick={handleSubmit}
-          theme='primary'
-        >
-          {create}
-        </Button>
-      </HStack>
-    </Form>
-  );
-};
-
-export { NewCircleForm as default };

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<HTMLInputElement>) => {
+    setTitle(e.target.value);
+  };
+
+  const handleSubmit = (e: React.FormEvent<Element>) => {
+    e.preventDefault();
+    createCircle(title);
+  };
+
+  const label = intl.formatMessage(messages.label);
+  const create = intl.formatMessage(messages.create);
+
+  return (
+    <Form onSubmit={handleSubmit}>
+      <HStack space={2} alignItems='center'>
+        <label className='grow'>
+          <span style={{ display: 'none' }}>{label}</span>
+
+          <Input
+            type='text'
+            value={title}
+            disabled={isPending}
+            onChange={handleChange}
+            placeholder={label}
+          />
+        </label>
+
+        <Button
+          disabled={isPending}
+          onClick={handleSubmit}
+          theme='primary'
+        >
+          {create}
+        </Button>
+      </HStack>
+    </Form>
+  );
+};
+
 const Circles: React.FC = () => {
   const intl = useIntl();
 

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

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

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?: {

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

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

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