feat: add discover customization (#3182)

src/components/Discover/RecentRequestsSlider/index.tsx

@@ -0,0 +1,49 @@
+import { sliderTitles } from '@app/components/Discover/constants';
+import RequestCard from '@app/components/RequestCard';
+import Slider from '@app/components/Slider';
+import { ArrowCircleRightIcon } from '@heroicons/react/outline';
+import type { RequestResultsResponse } from '@server/interfaces/api/requestInterfaces';
+import Link from 'next/link';
+import { useIntl } from 'react-intl';
+import useSWR from 'swr';
+
+const RecentRequestsSlider = () => {
+  const intl = useIntl();
+  const { data: requests, error: requestError } =
+    useSWR<RequestResultsResponse>(
+      '/api/v1/request?filter=all&take=10&sort=modified&skip=0',
+      {
+        revalidateOnMount: true,
+      }
+    );
+
+  if (requests && requests.results.length === 0 && !requestError) {
+    return null;
+  }
+
+  return (
+    <>
+      <div className="slider-header">
+        <Link href="/requests?filter=all">
+          <a className="slider-title">
+            <span>{intl.formatMessage(sliderTitles.recentrequests)}</span>
+            <ArrowCircleRightIcon />
+          </a>
+        </Link>
+      </div>
+      <Slider
+        sliderKey="requests"
+        isLoading={!requests}
+        items={(requests?.results ?? []).map((request) => (
+          <RequestCard
+            key={`request-slider-item-${request.id}`}
+            request={request}
+          />
+        ))}
+        placeholder={<RequestCard.Placeholder />}
+      />
+    </>
+  );
+};
+
+export default RecentRequestsSlider;