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/chats/index.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-
-import { ChatProvider } from 'pl-fe/contexts/chat-context';
-
-import ChatPage from './components/chat-page/chat-page';
-
-interface IChatIndex {
-  params?: {
-    chatId?: string;
-  };
-}
-
-const ChatIndex: React.FC<IChatIndex> = ({ params }) => (
-  <ChatProvider>
-    <ChatPage chatId={params?.chatId} />
-  </ChatProvider>
-);
-
-export { ChatIndex as default };

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/crypto-donate/index.tsx

@@ -1,42 +0,0 @@
-import React, { useState } from 'react';
-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 { 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 intl = useIntl();
-  const instance = useInstance();
-
-  const [explanationBoxExpanded, toggleExplanationBox] = useState(true);
-
-  return (
-    <Column label={intl.formatMessage(messages.heading)} withHeader>
-      <Stack space={5}>
-        <Accordion
-          headline={<FormattedMessage id='crypto_donate.explanation_box.title' defaultMessage='Sending cryptocurrency donations' />}
-          expanded={explanationBoxExpanded}
-          onToggle={toggleExplanationBox}
-        >
-          <FormattedMessage
-            id='crypto_donate.explanation_box.message'
-            defaultMessage='{siteTitle} accepts cryptocurrency donations. You may send a donation to any of the addresses below. Thank you for your support!'
-            values={{ siteTitle: instance.title }}
-          />
-        </Accordion>
-
-        <SiteWallet />
-      </Stack>
-    </Column>
-  );
-};
-
-export { CryptoDonate as default };

packages/pl-fe/src/features/federation-restrictions/index.tsx

@@ -1,58 +0,0 @@
-import React, { useState, useCallback } from 'react';
-import { defineMessages, useIntl } from 'react-intl';
-
-import ScrollableList from 'pl-fe/components/scrollable-list';
-import Accordion from 'pl-fe/components/ui/accordion';
-import Column from 'pl-fe/components/ui/column';
-import { useAppSelector } from 'pl-fe/hooks/use-app-selector';
-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';
-
-const messages = defineMessages({
-  heading: { id: 'column.federation_restrictions', defaultMessage: 'Federation restrictions' },
-  boxTitle: { id: 'federation_restrictions.explanation_box.title', defaultMessage: 'Instance-specific policies' },
-  boxMessage: { id: 'federation_restrictions.explanation_box.message', defaultMessage: 'Normally servers on the Fediverse can communicate freely. {siteTitle} has imposed restrictions on the following servers.' },
-  emptyMessage: { id: 'federation_restrictions.empty_message', defaultMessage: '{siteTitle} has not restricted any instances.' },
-  notDisclosed: { id: 'federation_restrictions.not_disclosed_message', defaultMessage: '{siteTitle} does not disclose federation restrictions through the API.' },
-});
-
-const FederationRestrictions = () => {
-  const intl = useIntl();
-  const instance = useInstance();
-
-  const getHosts = useCallback(makeGetHosts(), []);
-
-  const hosts = useAppSelector((state) => getHosts(state));
-  const disclosed = useAppSelector((state) => federationRestrictionsDisclosed(state));
-
-  const [explanationBoxExpanded, setExplanationBoxExpanded] = useState(true);
-
-  const toggleExplanationBox = (setting: boolean) => {
-    setExplanationBoxExpanded(setting);
-  };
-
-  const emptyMessage = disclosed ? messages.emptyMessage : messages.notDisclosed;
-
-  return (
-    <Column label={intl.formatMessage(messages.heading)}>
-      <Accordion
-        headline={intl.formatMessage(messages.boxTitle)}
-        expanded={explanationBoxExpanded}
-        onToggle={toggleExplanationBox}
-      >
-        {intl.formatMessage(messages.boxMessage, { siteTitle: instance.title })}
-      </Accordion>
-
-      <div className='pt-4'>
-        <ScrollableList emptyMessage={intl.formatMessage(emptyMessage, { siteTitle: instance.title })}>
-          {hosts.map((host) => <RestrictedInstance key={host} host={host} />)}
-        </ScrollableList>
-      </div>
-    </Column>
-  );
-};
-
-export { FederationRestrictions as default };

packages/pl-fe/src/features/server-info/index.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import { defineMessages, useIntl } from 'react-intl';
-
-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 { 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 intl = useIntl();
-  const instance = useInstance();
-
-  return (
-    <Column label={intl.formatMessage(messages.heading)}>
-      <Stack space={4}>
-        <Stack>
-          <Text size='lg' weight='medium'>{instance.title}</Text>
-          <Text theme='muted'>{instance.description}</Text>
-        </Stack>
-
-        <Divider />
-
-        <PromoPanel />
-
-        <Divider />
-
-        <LinkFooter />
-      </Stack>
-    </Column>
-  );
-};
-
-export { ServerInfo as default };

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