diff --git a/app/page.tsx b/app/page.tsx index 089c721..f722857 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,8 +1,10 @@ "use client" import { GoogleIcon } from "@/components" +import { appTitle } from "@/lib/const" import { ButtonStatusType } from "@/types/Common" import { signIn } from "next-auth/react" +import Image from "next/image" import { useState } from "react" const LoginPage = () => { @@ -27,6 +29,14 @@ const LoginPage = () => { return (
+
+ {appTitle} +

Track AWS r/Start Labs 👍🏽

diff --git a/components/UI/Loading/LoadingLabs.tsx b/components/UI/Loading/LoadingLabs.tsx new file mode 100644 index 0000000..6283df4 --- /dev/null +++ b/components/UI/Loading/LoadingLabs.tsx @@ -0,0 +1,19 @@ +const LoadingLabs = () => { + const loadingItems = Array.from({ length: 20 }, () => 1) + return ( +
+
+
    + {loadingItems.map((_, idx) => ( +
  • + ))} +
+
+
+ ) +} + +export default LoadingLabs diff --git a/components/UI/Loading/LoadingLogo.tsx b/components/UI/Loading/LoadingLogo.tsx new file mode 100644 index 0000000..deed627 --- /dev/null +++ b/components/UI/Loading/LoadingLogo.tsx @@ -0,0 +1,12 @@ +import { appTitle } from "@/lib/const" +import Image from "next/image" + +const LoadingLogo = () =>{ + return ( +
+ {appTitle} +
+ ) +} + +export default LoadingLogo \ No newline at end of file diff --git a/components/UI/Loading/index.ts b/components/UI/Loading/index.ts new file mode 100644 index 0000000..3c8c669 --- /dev/null +++ b/components/UI/Loading/index.ts @@ -0,0 +1,4 @@ +import LoadingLabs from "./LoadingLabs" +import LoadingLogo from "./LoadingLogo" + +export { LoadingLabs, LoadingLogo } diff --git a/components/UI/UserLabs.tsx b/components/UI/UserLabs.tsx index 233fbd1..26b0569 100644 --- a/components/UI/UserLabs.tsx +++ b/components/UI/UserLabs.tsx @@ -16,6 +16,7 @@ import { ErrorResponse, LabResponseType } from "@/types/Responses" import { Session } from "next-auth" import Divider from "./Divider" import Lab from "./Lab" +import { LoadingLabs } from "./Loading" interface UserLabsProps { isLoading: LoadingState @@ -34,7 +35,7 @@ const UserLabs = ({ userData, }: UserLabsProps) => { if (isLoading.status === "loading") { - return
Fetching your labs...
+ return } if (error !== null) { diff --git a/components/UI/index.ts b/components/UI/index.ts index 8cb18d9..78f39f5 100644 --- a/components/UI/index.ts +++ b/components/UI/index.ts @@ -1,5 +1,6 @@ import Divider from "./Divider" import Lab from "./Lab" +import { LoadingLabs, LoadingLogo } from "./Loading" import UserLabs from "./UserLabs" -export { Divider, Lab, UserLabs } +export { Divider, Lab, LoadingLabs, LoadingLogo, UserLabs } diff --git a/components/index.ts b/components/index.ts index aa3b87e..8d28ef6 100644 --- a/components/index.ts +++ b/components/index.ts @@ -1,4 +1,4 @@ import { CheckMark, GoogleIcon } from "./Icons" -import { Divider, UserLabs } from "./UI" +import { Divider, LoadingLabs, LoadingLogo, UserLabs } from "./UI" -export { CheckMark, Divider, GoogleIcon, UserLabs } +export { CheckMark, Divider, GoogleIcon, LoadingLabs, LoadingLogo, UserLabs } diff --git a/cypress/e2e/1-getting-started/todo.cy.js b/cypress/e2e/1-getting-started/todo.cy.js deleted file mode 100644 index d4516b2..0000000 --- a/cypress/e2e/1-getting-started/todo.cy.js +++ /dev/null @@ -1,143 +0,0 @@ -/// - -// Welcome to Cypress! -// -// This spec file contains a variety of sample tests -// for a todo list app that are designed to demonstrate -// the power of writing tests in Cypress. -// -// To learn more about how Cypress works and -// what makes it such an awesome testing tool, -// please read our getting started guide: -// https://on.cypress.io/introduction-to-cypress - -describe("example to-do app", () => { - beforeEach(() => { - // Cypress starts out with a blank slate for each test - // so we must tell it to visit our website with the `cy.visit()` command. - // Since we want to visit the same URL at the start of all our tests, - // we include it in our beforeEach function so that it runs before each test - cy.visit("https://example.cypress.io/todo") - }) - - it("displays two todo items by default", () => { - // We use the `cy.get()` command to get all elements that match the selector. - // Then, we use `should` to assert that there are two matched items, - // which are the two default items. - cy.get(".todo-list li").should("have.length", 2) - - // We can go even further and check that the default todos each contain - // the correct text. We use the `first` and `last` functions - // to get just the first and last matched elements individually, - // and then perform an assertion with `should`. - cy.get(".todo-list li").first().should("have.text", "Pay electric bill") - cy.get(".todo-list li").last().should("have.text", "Walk the dog") - }) - - it("can add new todo items", () => { - // We'll store our item text in a variable so we can reuse it - const newItem = "Feed the cat" - - // Let's get the input element and use the `type` command to - // input our new list item. After typing the content of our item, - // we need to type the enter key as well in order to submit the input. - // This input has a data-test attribute so we'll use that to select the - // element in accordance with best practices: - // https://on.cypress.io/selecting-elements - cy.get("[data-test=new-todo]").type(`${newItem}{enter}`) - - // Now that we've typed our new item, let's check that it actually was added to the list. - // Since it's the newest item, it should exist as the last element in the list. - // In addition, with the two default items, we should have a total of 3 elements in the list. - // Since assertions yield the element that was asserted on, - // we can chain both of these assertions together into a single statement. - cy.get(".todo-list li") - .should("have.length", 3) - .last() - .should("have.text", newItem) - }) - - it("can check off an item as completed", () => { - // In addition to using the `get` command to get an element by selector, - // we can also use the `contains` command to get an element by its contents. - // However, this will yield the