From 67235dcc54d6aa215687dde31e334dab152df326 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Thu, 7 Mar 2024 19:49:39 +0100
Subject: [PATCH] Change design of Backups page a bit
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 src/features/backups/index.tsx | 88 +++++++++++++++++++++++-----------
 src/locales/en.json            |  1 +
 src/reducers/backups.tsx       |  4 +-
 3 files changed, 64 insertions(+), 29 deletions(-)

diff --git a/src/features/backups/index.tsx b/src/features/backups/index.tsx
index 5e1dd705f..9cac7cb13 100644
--- a/src/features/backups/index.tsx
+++ b/src/features/backups/index.tsx
@@ -1,19 +1,58 @@
 import React, { useEffect, useState } from 'react';
-import { defineMessages, useIntl } from 'react-intl';
+import { FormattedDate, defineMessages, useIntl } from 'react-intl';
 
 import { fetchBackups, createBackup } from 'soapbox/actions/backups';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Button, Column, FormActions, Text } from 'soapbox/components/ui';
+import { Button, Card, Column, FormActions, HStack, Spinner, Stack, Text } from 'soapbox/components/ui';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 
+import type { Backup as BackupEntity } from 'soapbox/reducers/backups';
+
 const messages = defineMessages({
   heading: { id: 'column.backups', defaultMessage: 'Backups' },
   create: { id: 'backups.actions.create', defaultMessage: 'Create backup' },
   emptyMessage: { id: 'backups.empty_message', defaultMessage: 'No backups found. {action}' },
   emptyMessageAction: { id: 'backups.empty_message.action', defaultMessage: 'Create one now?' },
+  download: { id: 'backups.download', defaultMessage: 'Download' },
   pending: { id: 'backups.pending', defaultMessage: 'Pending' },
 });
 
+interface IBackup {
+  backup: BackupEntity;
+}
+
+const Backup: React.FC<IBackup> = ({ backup }) => {
+  const intl = useIntl();
+
+  const button = (
+    <Button theme='primary' disabled={!backup.processed}>
+      {intl.formatMessage(backup.processed ? messages.download : messages.pending)}
+    </Button>
+  );
+
+  return (
+    <div key={backup.id} className='rounded-lg bg-gray-100 p-4 dark:bg-primary-800'>
+      <Stack space={2}>
+        <Stack>
+          <Text size='md'>
+            <FormattedDate
+              value={backup.inserted_at}
+              hour12
+              year='numeric'
+              month='short'
+              day='2-digit'
+              hour='numeric'
+              minute='2-digit'
+            />
+          </Text>
+        </Stack>
+        <HStack justifyContent='end'>
+          {backup.processed ? <a href={backup.url} target='_blank'>{button}</a> : button}
+        </HStack>
+      </Stack>
+    </div>
+  );
+};
+
 const Backups = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
@@ -35,34 +74,29 @@ const Backups = () => {
 
   const showLoading = isLoading && backups.count() === 0;
 
-  const emptyMessageAction = (
-    <a href='#' onClick={handleCreateBackup}>
-      <Text tag='span' theme='primary' size='sm' className='hover:underline'>
-        {intl.formatMessage(messages.emptyMessageAction)}
-      </Text>
-    </a>
+  const emptyMessage = (
+    <Card variant='rounded' size='lg'>
+      {intl.formatMessage(messages.emptyMessage, {
+        action: (
+          <a href='#' onClick={handleCreateBackup}>
+            <Text tag='span' theme='primary' size='sm' className='hover:underline'>
+              {intl.formatMessage(messages.emptyMessageAction)}
+            </Text>
+          </a>
+        ),
+      })}
+    </Card>
+  );
+
+  const body = showLoading ? <Spinner /> : backups.isEmpty() ? emptyMessage : (
+    <div className='mb-4 grid grid-cols-1 gap-4 sm:grid-cols-2'>
+      {backups.map((backup) => <Backup key={backup.id} backup={backup} />)}
+    </div>
   );
 
   return (
     <Column label={intl.formatMessage(messages.heading)}>
-      <ScrollableList
-        isLoading={isLoading}
-        showLoading={showLoading}
-        scrollKey='backups'
-        emptyMessage={intl.formatMessage(messages.emptyMessage, { action: emptyMessageAction })}
-      >
-        {backups.map((backup) => (
-          <div
-            className='p-4'
-            key={backup.id}
-          >
-            {backup.processed
-              ? <a href={backup.url} target='_blank'>{backup.inserted_at}</a>
-              : <Text theme='subtle'>{intl.formatMessage(messages.pending)}: {backup.inserted_at}</Text>
-            }
-          </div>
-        ))}
-      </ScrollableList>
+      {body}
 
       <FormActions>
         <Button theme='primary' disabled={isLoading} onClick={handleCreateBackup}>
diff --git a/src/locales/en.json b/src/locales/en.json
index 3b5804357..ec2fd06a0 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -190,6 +190,7 @@
   "auth.logged_out": "Logged out.",
   "authorize.success": "Approved",
   "backups.actions.create": "Create backup",
+  "backups.download": "Download",
   "backups.empty_message": "No backups found. {action}",
   "backups.empty_message.action": "Create one now?",
   "backups.pending": "Pending",
diff --git a/src/reducers/backups.tsx b/src/reducers/backups.tsx
index fbbfccef0..e2557c845 100644
--- a/src/reducers/backups.tsx
+++ b/src/reducers/backups.tsx
@@ -8,7 +8,7 @@ import {
 import type { AnyAction } from 'redux';
 import type { APIEntity } from 'soapbox/types/entities';
 
-const BackupRecord = ImmutableRecord({
+export const BackupRecord = ImmutableRecord({
   id: null as number | null,
   content_type: '',
   url: '',
@@ -17,7 +17,7 @@ const BackupRecord = ImmutableRecord({
   inserted_at: '',
 });
 
-type Backup = ReturnType<typeof BackupRecord>;
+export type Backup = ReturnType<typeof BackupRecord>;
 type State = ImmutableMap<string, Backup>;
 
 const initialState: State = ImmutableMap();