Improve Hub on mobile

src/pages/Hub.tsx

@@ -1,5 +1,6 @@
 import {
   Button,
+  Grid,
   Input,
   Space,
   Table,
@@ -13,7 +14,6 @@ import {
   ArrowRightOutlined,
 } from '@ant-design/icons';
 import {
-  Fragment,
   useCallback,
   useEffect,
   useState,
@@ -29,9 +29,12 @@ import { buildFullUrl } from '../utils/url';
 import { aspirationMapper } from '../utils/tune/mappers';
 import { TuneDbDocument } from '../types/dbData';
 
+const { useBreakpoint } = Grid;
+
 const tunePath = (tuneId: string) => generatePath(Routes.TUNE_TUNE, { tuneId });
 
 const Hub = () => {
+  const { xs } = useBreakpoint();
   const { searchTunes } = useDb();
   const navigate = useNavigate();
   const [dataSource, setDataSource] = useState<any>([]);
@@ -58,7 +61,7 @@ const Hub = () => {
       author: '?',
       displacement: `${tune.displacement}l`,
       aspiration: aspirationMapper[tune.aspiration],
-      updatedAt: new Date(tune.$updatedAt * 1000).toLocaleString(),
+      publishedAt: new Date(tune.$updatedAt * 1000).toLocaleString(),
       stars: 0,
     })));
     setIsLoading(false);
@@ -76,77 +79,78 @@ const Hub = () => {
       title: 'Tune',
       render: (tune: TuneDbDocument) => (
         <>
-          {tune.vehicleName} ({tune.signature})
+          {tune.vehicleName} ({tune.signature}), published: {tune.publishedAt}
           <br />
           {tune.engineMake}, {tune.engineCode}, {tune.displacement}, {tune.cylindersCount} cylinders, {tune.aspiration}
           <br />
           author: ? 0 <StarOutlined />
         </>
       ),
-      responsive: ['xs', 'sm', 'md'],
+      responsive: ['xs'],
     },
     {
       title: 'Vehicle name',
       dataIndex: 'vehicleName',
       key: 'vehicleName',
-      responsive: ['lg'],
+      responsive: ['sm'],
     },
     {
-      title: 'Engine make',
+      title: 'Make',
       dataIndex: 'engineMake',
       key: 'engineMake',
-      responsive: ['lg'],
+      responsive: ['sm'],
     },
     {
       title: 'Engine code',
       dataIndex: 'engineCode',
       key: 'engineCode',
-      responsive: ['lg'],
+      responsive: ['sm'],
     },
     {
-      title: 'Displacement',
+      title: '',
       dataIndex: 'displacement',
       key: 'displacement',
-      responsive: ['lg'],
+      responsive: ['sm'],
     },
     {
       title: 'Cylinders',
       dataIndex: 'cylindersCount',
       key: 'cylindersCount',
-      responsive: ['lg'],
+      responsive: ['sm'],
     },
     {
       title: 'Aspiration',
       dataIndex: 'aspiration',
       key: 'aspiration',
-      responsive: ['lg'],
+      responsive: ['sm'],
     },
     {
       title: 'Author',
       dataIndex: 'author',
       key: 'author',
-      responsive: ['lg'],
+      responsive: ['sm'],
     },
     {
       title: 'Signature',
       dataIndex: 'signature',
       key: 'author',
-      responsive: ['lg'],
+      responsive: ['sm'],
     },
     {
       title: 'Published',
-      dataIndex: 'updatedAt',
-      key: 'updatedAt',
-      responsive: ['lg'],
+      dataIndex: 'publishedAt',
+      key: 'publishedAt',
+      responsive: ['sm'],
     },
     {
       title: <StarOutlined />,
       dataIndex: 'stars',
       key: 'stars',
-      responsive: ['lg'],
+      responsive: ['sm'],
     },
     {
       dataIndex: 'tuneId',
+      fixed: 'right',
       render: (tuneId: string) => (
         <Space>
           <Tooltip title={copied ? 'Copied!' : 'Copy URL'}>
@@ -172,6 +176,7 @@ const Hub = () => {
         dataSource={dataSource}
         columns={columns}
         loading={isLoading}
+        scroll={xs ? undefined : { x: 1360 }}
         pagination={false}
       />
     </div>

src/pages/Upload.tsx

@@ -56,7 +56,10 @@ import {
   requiredTextRules,
   requiredRules,
 } from '../utils/form';
-import { TuneDbDataPartial, TuneDbDocument } from '../types/dbData';
+import {
+  TuneDbDataPartial,
+  TuneDbDocument,
+} from '../types/dbData';
 import { aspirationMapper } from '../utils/tune/mappers';
 
 const { Item } = Form;
@@ -396,22 +399,22 @@ const UploadPage = () => {
     setNewTuneId(currentTuneId);
     console.info('Using tuneId:', currentTuneId);
 
-    const existingTune = await getTune(currentTuneId);
-    if (existingTune) {
+    const oldTune = await getTune(currentTuneId);
+    if (oldTune) {
       // this is someone elses tune
-      if (existingTune.userId !== currentUser?.$id) {
+      if (oldTune.userId !== currentUser?.$id) {
         navigateToNewTuneId();
         return;
       }
 
-      setExistingTune(existingTune);
-      setInitialValues(existingTune);
+      setExistingTune(oldTune);
+      setInitialValues(oldTune);
       setIsEditMode(true);
-      setTuneDocumentId(existingTune.$id);
+      setTuneDocumentId(oldTune.$id);
 
-      if (existingTune.tuneFileId) {
-        const file = await getFile(existingTune.tuneFileId, await getBucketId(currentUser!.$id));
-        setTuneFileId(existingTune.tuneFileId);
+      if (oldTune.tuneFileId) {
+        const file = await getFile(oldTune.tuneFileId, await getBucketId(currentUser!.$id));
+        setTuneFileId(oldTune.tuneFileId);
         setDefaultTuneFileList([{
           uid: file.$id,
           name: file.name,
@@ -419,9 +422,9 @@ const UploadPage = () => {
         }]);
       }
 
-      if (existingTune.customIniFileId) {
-        const file = await getFile(existingTune.customIniFileId, await getBucketId(currentUser!.$id));
-        setCustomIniFileId(existingTune.customIniFileId);
+      if (oldTune.customIniFileId) {
+        const file = await getFile(oldTune.customIniFileId, await getBucketId(currentUser!.$id));
+        setCustomIniFileId(oldTune.customIniFileId);
         setDefaultCustomIniFileList([{
           uid: file.$id,
           name: file.name,
@@ -429,7 +432,7 @@ const UploadPage = () => {
         }]);
       }
 
-      existingTune.logFileIds?.forEach(async (fileId: string) => {
+      oldTune.logFileIds?.forEach(async (fileId: string) => {
         const file = await getFile(fileId, await getBucketId(currentUser!.$id));
         setLogFileIds((prev) => new Map(prev).set(fileId, fileId));
         setDefaultLogFilesList((prev) => [...prev, {
@@ -439,7 +442,7 @@ const UploadPage = () => {
         }]);
       });
 
-      existingTune.toothLogFileIds?.forEach(async (fileId: string) => {
+      oldTune.toothLogFileIds?.forEach(async (fileId: string) => {
         const file = await getFile(fileId, await getBucketId(currentUser!.$id));
         setToothLogFileIds((prev) => new Map(prev).set(fileId, fileId));
         setDefaultToothLogFilesList((prev) => [...prev, {