feat: add empty state to files page (#221)

coderdojobraga · Feb 18, 2024 · beac92d · beac92d
1 parent 8dd4b67
commit beac92d
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 22 deletions.
diff --git a/apps/app/hooks/events/useEvents.tsx b/apps/app/hooks/events/useEvents.tsx
@@ -5,7 +5,7 @@ export function useEvents(order: string) {
   return useQuery("events", async () => {
     const {
       data: { data: events },
-    } = await API.get("/api/events", {params: {order: order}});
+    } = await API.get("/api/events", { params: { order: order } });
 
     return events;
   });

diff --git a/apps/app/pages/files/index.js b/apps/app/pages/files/index.js
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import Link from "next/link";
-import { Button, Col, Row, Typography } from "antd";
+import { Button, Col, Empty, Row, Typography } from "antd";
 import { withAuth } from "~/components/Auth";
 import AppLayout from "~/layouts/AppLayout";
 import Document from "~/components/Document";
@@ -31,22 +31,28 @@ function Files() {
         <Col>
           <Title level={2}>Os Meus Ficheiros</Title>
         </Col>
-        <Col>
-          <Link href="/files/new">
-            <Button type="primary">Novo</Button>
-          </Link>
-        </Col>
-      </Row>
-      <Row justify="start" align="top">
-        {files.map((file) => (
-          <Document
-            key={file.id}
-            editable
-            onFileDeletion={onFileDeletion}
-            {...file}
-          />
-        ))}
       </Row>
+      {files.length != 0 ? (
+        <Row justify="start" align="top">
+          {files.map((file) => (
+            <Document
+              key={file.id}
+              editable
+              onFileDeletion={onFileDeletion}
+              {...file}
+            />
+          ))}
+        </Row>
+      ) : (
+        <div className="mt-10 text-center">
+          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+          <div className="mt-6">
+            <Link href="/files/new">
+              <Button type="primary">Novo</Button>
+            </Link>
+          </div>
+        </div>
+      )}
     </AppLayout>
   );
 }

diff --git a/apps/blog/components/Author/index.tsx b/apps/blog/components/Author/index.tsx
@@ -1,12 +1,13 @@
 import Link from "next/link";
 import { IAuthor } from "~/lib/types";
+import Image from "next/image";
 
 export default function Author({ name, photo, username }: IAuthor) {
   return (
     <li className="flex items-center py-1">
       <Link href={`/author/${username}`}>
         <a className="flex items-center">
-          <img
+          <Image
             src={`/img/team/${photo}`}
             alt="avatar"
             className="mx-4 h-10 w-10 rounded-full object-cover"

diff --git a/apps/blog/components/Entry/index.tsx b/apps/blog/components/Entry/index.tsx
@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { useTheme } from "@coderdojobraga/ui";
+import Image from "next/image";
 
 export default function Entry({
   title,
@@ -39,7 +40,7 @@ export default function Entry({
                 <h1 className="text-dark font-bold hover:underline dark:text-white">
                   {author?.name}
                 </h1>
-                <img
+                <Image
                   src={`/img/team/${author?.photo}`}
                   alt="avatar"
                   className="mx-4 hidden h-10 w-10 rounded-full object-cover sm:block"

diff --git a/apps/blog/components/Featured/index.tsx b/apps/blog/components/Featured/index.tsx
@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { IPost } from "~/lib/types";
+import Image from "next/image";
 
 type Props = IPost;
 
@@ -24,7 +25,7 @@ export default function Featured({ title, author, date, topic, slug }: Props) {
         <div>
           <Link href={`/author/${author?.username}`}>
             <a className="flex items-center">
-              <img
+              <Image
                 src={`/img/team/${author?.photo}`}
                 alt="avatar"
                 className="h-8 w-8 rounded-full object-cover"

diff --git a/apps/web/components/Champion/index.js b/apps/web/components/Champion/index.js
@@ -1,7 +1,9 @@
+import Image from "next/image";
+
 export default function Champion({ picture, name, role }) {
   return (
     <div className="w-12/12 xl:w-2/10 mx-auto mb-12 mt-12 px-4 sm:w-6/12 md:w-4/12 lg:mb-0 lg:w-4/12 2xl:w-4/12">
-      <img
+      <Image
         alt={name}
         src={`img/team/${picture}`}
         className="mx-auto h-56 w-56 rounded-full object-cover shadow-lg md:h-48 md:w-48"

diff --git a/apps/web/components/Speaker/index.js b/apps/web/components/Speaker/index.js
@@ -1,7 +1,9 @@
+import Image from "next/image";
+
 export default function Speaker({ picture, name, role }) {
   return (
     <div className="w-12/12 mx-auto mb-12 mt-12 px-4 sm:w-6/12 md:w-4/12 lg:mb-0 lg:w-4/12 xl:w-3/12 2xl:w-4/12">
-      <img
+      <Image
         alt={name}
         src={`img/team/${picture}`}
         className="mx-auto h-52 w-52 rounded-full object-cover shadow-lg md:h-32 md:w-32"