Update a few more components to use useStatus

app/soapbox/features/status/containers/quoted-status-container.tsx

@@ -1,9 +1,8 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 
+import { useStatus } from 'soapbox/api/hooks';
 import QuotedStatus from 'soapbox/components/quoted-status';
 import Tombstone from 'soapbox/components/tombstone';
-import { useAppSelector } from 'soapbox/hooks';
-import { makeGetStatus } from 'soapbox/selectors';
 
 interface IQuotedStatusContainer {
   /** Status ID to the quoted status. */
@@ -11,9 +10,7 @@ interface IQuotedStatusContainer {
 }
 
 const QuotedStatusContainer: React.FC<IQuotedStatusContainer> = ({ statusId }) => {
-  const getStatus = useCallback(makeGetStatus(), []);
-
-  const status = useAppSelector(state => getStatus(state, { id: statusId }));
+  const { status } = useStatus(statusId);
 
   if (!status) {
     return null;

app/soapbox/features/status/index.tsx

@@ -7,12 +7,12 @@ import {
   fetchStatusWithContext,
   fetchNext,
 } from 'soapbox/actions/statuses';
+import { useStatus } from 'soapbox/api/hooks';
 import MissingIndicator from 'soapbox/components/missing-indicator';
 import PullToRefresh from 'soapbox/components/pull-to-refresh';
 import { Column } from 'soapbox/components/ui';
 import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-import { makeGetStatus } from 'soapbox/selectors';
+import { useAppDispatch } from 'soapbox/hooks';
 
 import Thread from './components/thread';
 
@@ -48,8 +48,7 @@ const StatusDetails: React.FC<IStatusDetails> = (props) => {
   const dispatch = useAppDispatch();
   const intl = useIntl();
 
-  const getStatus = useCallback(makeGetStatus(), []);
-  const status = useAppSelector((state) => getStatus(state, { id: props.params.statusId }));
+  const { status } = useStatus(props.params.statusId);
 
   const [isLoaded, setIsLoaded] = useState<boolean>(!!status);
   const [next, setNext] = useState<string>();

app/soapbox/features/ui/components/modals/media-modal.tsx

@@ -6,6 +6,7 @@ import { useHistory } from 'react-router-dom';
 import ReactSwipeableViews from 'react-swipeable-views';
 
 import { fetchNext, fetchStatusWithContext } from 'soapbox/actions/statuses';
+import { useStatus } from 'soapbox/api/hooks';
 import ExtendedVideoPlayer from 'soapbox/components/extended-video-player';
 import MissingIndicator from 'soapbox/components/missing-indicator';
 import StatusActionBar from 'soapbox/components/status-action-bar';
@@ -14,9 +15,8 @@ import Audio from 'soapbox/features/audio';
 import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status';
 import Thread from 'soapbox/features/status/components/thread';
 import Video from 'soapbox/features/video';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { useAppDispatch } from 'soapbox/hooks';
 import { isUserTouching } from 'soapbox/is-mobile';
-import { makeGetStatus } from 'soapbox/selectors';
 
 import ImageLoader from '../image-loader';
 
@@ -64,8 +64,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
   const history = useHistory();
   const intl = useIntl();
 
-  const getStatus = useCallback(makeGetStatus(), []);
-  const actualStatus = useAppSelector((state) => getStatus(state, { id: status?.id as string }));
+  const { status: actualStatus } = useStatus(status?.id!);
 
   const [isLoaded, setIsLoaded] = useState<boolean>(!!status);
   const [next, setNext] = useState<string>();