Update frontend according to backend changes

frontend/src/api/services.ts

@@ -63,9 +63,9 @@ export async function getAlbum(id: string): Promise<Album> {
     .then(response => response.data.album);
 }
 
-export async function getAlbums(): Promise<Album[]> {
-  return get(`${process.env.REACT_APP_CORE_URL}/albums`, { credentials: 'include' })
-    .then(response => response.data.albums);
+export async function getUserAlbums(id: string): Promise<Album[]> {
+  return get(`${process.env.REACT_APP_CORE_URL}/me/${id}`, { credentials: 'include' })
+    .then(response => response.data.user.albums);
 }
 
 export async function deleteAlbum(id: number): Promise<Album> {

frontend/src/components/AlbumPreview.tsx

@@ -14,15 +14,15 @@ const AlbumPreview: React.FC<Props> = ({ album, onDelete }: Props) => (
       {
         album.media.length > 0 && album.media[0].thumbnails.length > 0 ? (
           <div style={{ paddingBottom: '80%', position: 'relative' }}>
-            <ImageLoader src={album.media[0].thumbnails.filter(thumbnail => thumbnail.mimetype.startsWith('image/'))[0].location} style={{
+            <ImageLoader src={album.media[0].thumbnails[0]} style={{
               position: 'absolute',
               maxHeight: '100%',
               minHeight: '100%',
               minWidth: '100%',
             }}>
               <Card.Img
                 variant="top"
-                src={album.media[0].thumbnails.filter(thumbnail => thumbnail.mimetype.startsWith('image/'))[0].location}
+                src={album.media[0].thumbnails[0]}
                 style={{
                   position: 'absolute',
                   maxHeight: '100%',
@@ -34,10 +34,10 @@ const AlbumPreview: React.FC<Props> = ({ album, onDelete }: Props) => (
         ) : null
       }
     <Card.Body>
-      <Card.Title>{album.hash}</Card.Title>
+      <Card.Title>{album.id}</Card.Title>
       <Card.Subtitle className="mb-2 text-muted">{formatDate(album.createdAt, 'dd. MM. YYYY, HH:mm')}</Card.Subtitle>
       <div className="d-grid">
-        <Link className="btn btn-outline-secondary" role="button" to={`/album/${album.hash}`}>Zobraziť</Link>
+        <Link className="btn btn-outline-secondary" role="button" to={`/album/${album.id}`}>Zobraziť</Link>
         {
           typeof onDelete === 'function' ? (
             <Button variant="outline-danger" className="mt-2" onClick={() => onDelete && onDelete(album)}>Vymazať</Button>

frontend/src/components/UploadedFiles.tsx

@@ -39,7 +39,7 @@ const UploadedFiles: React.FC<{album: Album}> = ({ album }) => {
       </Row>
       <Row className="mt-4">
         <Col lg={{ span: 6, offset: 3 }} sm={{ span: 8, offset: 2 }}>
-          <ShareableLink albumId={album.hash} />
+          <ShareableLink albumId={album.id} />
           <p className="ps-2 pe-2 mt-1">
             {
               uploadSpeed > 0 ? `Odahovaný čas: ${Math.ceil(uploadingSizeSum / uploadSpeed)} sekúnd` : 'Prepočitavanie odhadovaného času...'

frontend/src/pages/Albums.tsx

@@ -7,17 +7,21 @@ import Modal from 'react-bootstrap/Modal';
 import Button from 'react-bootstrap/Button';
 import AlbumPreview from '../components/AlbumPreview';
 import AlbumPreviewLoader from '../components/AlbumPreviewLoader';
-import { getAlbums, deleteAlbum } from '../api/services';
+import { getUserAlbums, deleteAlbum } from '../api/services';
+import useAuth from '../utils/useAuth';
 import SEO from '../components/SEO';
 
 const Albums: React.FC = () => {
   const [ album, setAlbum ] = useState<Album | null>(null);
   const [ albums, setAlbums ] = useState<Array<Album> | null>(null);
   const [ hasError, setHasError ] = useState(false);
   const [ isModalOpen, setIsModalOpen ] = useState(false);
+  const { user } = useAuth();
 
   useEffect(() => {
-    getAlbums()
+    if (typeof user === 'undefined') return;
+
+    getUserAlbums(user.id as string)
       .then((albums) => setAlbums(albums))
       .catch(() => setHasError(true));
   }, []);

frontend/src/pages/Home.tsx

@@ -29,7 +29,7 @@ const Home: React.FC = () => {
       await addMedia(album.id, media.id);
     });
 
-    navigate(`/album/${album.hash}`, { state: { album } });    
+    navigate(`/album/${album.id}`, { state: { album } });    
   };
 
   const {

frontend/src/pages/album/GalleryNew.tsx

@@ -47,13 +47,13 @@ export default function Gallery({ files }: { files: Array<Media> }) {
 
       const element = (
         <div key={file.id} className="gallery-item mb-4" data-src={file.location} style={{ position: 'absolute', left, top: top[index % cols], width }}>
-          <ImageLoader src={file.thumbnails[0]?.location || file.location} onVisible={true}>
-            <Image key={file.id} src={file.thumbnails[0]?.location || file.location} alt="" width="100%" fluid />
+          <ImageLoader src={file.thumbnails[0] || file.location} onVisible={true}>
+            <Image key={file.id} src={file.thumbnails[0] || file.location} alt="" width="100%" fluid />
           </ImageLoader>
         </div>
       );
 
-      { top[index % cols] += (((file.thumbnails[0].metadata as { width: number, height: number}).height * (width / (file.thumbnails[0].metadata as { width: number, height: number}).width))) + 20 }
+      { top[index % cols] += ((file.metadata.height * (width / file.metadata.width))) + 20 }
 
       return element;
     });

frontend/src/types/index.d.ts

@@ -1,30 +1,25 @@
 type ID = string | number;
 
-type Thumbnail = {
-  id: number;
-  path: string;
-  location: string;
-  mimetype: string;
-  metadata: unknown;
-  size: number;
-  createdAt: string;
-}
-
 type Media = {
   id: number;
   path: string;
   location: string;
   mimetype: string;
   size: number;
-  metadata: unknown;
-  thumbnails: Thumbnail[];
+  metadata: {
+    width: number;
+    height: number
+    [key: string]: unknown;
+  };
+  thumbnails: string[];
   createdAt: string;
 }
 
 type Album = {
   id: string;
-  userId?: number;
-  hash: string;
+  user: {
+    id: ID;
+  };
   media: Media[];
   createdAt: string;
 }