From 31102c2f8c57d9073a10b65c628df7e88dd20416 Mon Sep 17 00:00:00 2001 From: Sean Jones Date: Tue, 13 Apr 2021 15:34:11 +0100 Subject: [PATCH] ui component for displaying list of users --- src/components/App/App.tsx | 4 ++- .../ContentCard/ContentCard.test.tsx | 17 ++++++++++++ src/components/ContentCard/ContentCard.tsx | 11 ++++++++ .../PageContainer/PageContainer.test.tsx | 17 ++++++++++++ .../PageContainer/PageContainer.tsx | 11 ++++++++ src/components/SiteHeader/SiteHeader.tsx | 2 +- src/components/UsersTable/UsersTable.tsx | 26 +++++++++++++++++++ src/pages/LandingPage/LandingPage.test.tsx | 13 ++++++++++ src/pages/LandingPage/LandingPage.tsx | 19 ++++++++++++++ tsconfig.json | 1 + webpack.config.js | 1 + 11 files changed, 120 insertions(+), 2 deletions(-) create mode 100644 src/components/ContentCard/ContentCard.test.tsx create mode 100644 src/components/ContentCard/ContentCard.tsx create mode 100644 src/components/PageContainer/PageContainer.test.tsx create mode 100644 src/components/PageContainer/PageContainer.tsx create mode 100644 src/components/UsersTable/UsersTable.tsx create mode 100644 src/pages/LandingPage/LandingPage.test.tsx create mode 100644 src/pages/LandingPage/LandingPage.tsx diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx index 1cfd8dd..b1e8b42 100644 --- a/src/components/App/App.tsx +++ b/src/components/App/App.tsx @@ -6,6 +6,7 @@ import { getUsername } from "state/userProfile/selectors"; import Loader from "../Loader/Loader"; import SiteHeader from "../SiteHeader/SiteHeader"; +import LandingPage from "pages/LandingPage/LandingPage"; import "styles/app.scss"; @@ -15,7 +16,7 @@ const App: FC = () => { useEffect(() => { if (!username) { - dispatch(fetchUserById()); + setTimeout(() => dispatch(fetchUserById()), 2400); } }, [dispatch]); @@ -28,6 +29,7 @@ const App: FC = () => { return (
+
); }; diff --git a/src/components/ContentCard/ContentCard.test.tsx b/src/components/ContentCard/ContentCard.test.tsx new file mode 100644 index 0000000..ba8a560 --- /dev/null +++ b/src/components/ContentCard/ContentCard.test.tsx @@ -0,0 +1,17 @@ +import React from "react"; +import { screen, render } from "@testing-library/react"; + +import ContentCard from "./ContentCard"; + +describe("ContentCard", () => { + it("renders", () => { + render( + +

Child element

+ + ); + + const childElement = screen.getByText("Child element"); + expect(childElement).toBeInTheDocument(); + }); +}); diff --git a/src/components/ContentCard/ContentCard.tsx b/src/components/ContentCard/ContentCard.tsx new file mode 100644 index 0000000..a175570 --- /dev/null +++ b/src/components/ContentCard/ContentCard.tsx @@ -0,0 +1,11 @@ +import React, { FC } from "react"; + +interface ContentCardProps { + children: JSX.Element[] | JSX.Element; +} + +const ContentCard: FC = ({ children }) => ( +
{children}
+); + +export default ContentCard; diff --git a/src/components/PageContainer/PageContainer.test.tsx b/src/components/PageContainer/PageContainer.test.tsx new file mode 100644 index 0000000..8334241 --- /dev/null +++ b/src/components/PageContainer/PageContainer.test.tsx @@ -0,0 +1,17 @@ +import React from "react"; +import { screen, render } from "@testing-library/react"; + +import PageContainer from "./PageContainer"; + +describe("PageContainer", () => { + it("renders", () => { + render( + +

Child element

+ + ); + + const childElement = screen.getByText("Child element"); + expect(childElement).toBeInTheDocument(); + }); +}); diff --git a/src/components/PageContainer/PageContainer.tsx b/src/components/PageContainer/PageContainer.tsx new file mode 100644 index 0000000..f693cd5 --- /dev/null +++ b/src/components/PageContainer/PageContainer.tsx @@ -0,0 +1,11 @@ +import React, { FC } from "react"; + +interface PageContainerProps { + children: JSX.Element[] | JSX.Element; +} + +const PageContainer: FC = ({ children }) => ( +
{children}
+); + +export default PageContainer; diff --git a/src/components/SiteHeader/SiteHeader.tsx b/src/components/SiteHeader/SiteHeader.tsx index afc29c2..392c335 100644 --- a/src/components/SiteHeader/SiteHeader.tsx +++ b/src/components/SiteHeader/SiteHeader.tsx @@ -4,7 +4,7 @@ import Logo from "assets/images/logo.svg"; import UserAvatar from "../UserAvatar/UserAvatar"; const SiteHeader: FC = () => ( -
+
Company name
diff --git a/src/components/UsersTable/UsersTable.tsx b/src/components/UsersTable/UsersTable.tsx new file mode 100644 index 0000000..7df4c36 --- /dev/null +++ b/src/components/UsersTable/UsersTable.tsx @@ -0,0 +1,26 @@ +import React, { FC } from "react"; + +const UsersTable: FC = () => { + return ( + + + + + + + + + + + + + + + + + +
asdfasdasdfasdfasdf
aaaa
+ ); +}; + +export default UsersTable; diff --git a/src/pages/LandingPage/LandingPage.test.tsx b/src/pages/LandingPage/LandingPage.test.tsx new file mode 100644 index 0000000..ee05220 --- /dev/null +++ b/src/pages/LandingPage/LandingPage.test.tsx @@ -0,0 +1,13 @@ +import React from "react"; +import { screen, render } from "@testing-library/react"; + +import LandingPage from "./LandingPage"; + +describe("LandingPage", () => { + it("renders", () => { + render(); + + const heading = screen.getByText("Landing page"); + expect(heading).toBeInTheDocument(); + }); +}); diff --git a/src/pages/LandingPage/LandingPage.tsx b/src/pages/LandingPage/LandingPage.tsx new file mode 100644 index 0000000..05adcae --- /dev/null +++ b/src/pages/LandingPage/LandingPage.tsx @@ -0,0 +1,19 @@ +import React, { FC } from "react"; + +import PageContainer from "components/PageContainer/PageContainer"; +import ContentCard from "components/ContentCard/ContentCard"; +import UsersTable from "components/UsersTable/UsersTable"; + +const LandingPage: FC = () => { + return ( + +

Landing page

+

Lorem ipsum dolor sit amet consectetur adipisicing elit.

+ + + + + ); +}; + +export default LandingPage; diff --git a/tsconfig.json b/tsconfig.json index 87c7b53..380d190 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -11,6 +11,7 @@ "api/*": ["./src/api/*"], "assets/*": ["./src/assets/*"], "components/*": ["./src/components/*"], + "pages/*": ["./src/pages/*"], "state/*": ["./src/state/*"], "styles/*": ["./src/styles/*"], "utilities/*": ["./src/utilities/*"] diff --git a/webpack.config.js b/webpack.config.js index dfe584e..55d4bf3 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -35,6 +35,7 @@ module.exports = () => ({ api: path.resolve(sourcePath, "api/"), assets: path.resolve(sourcePath, "assets/"), components: path.resolve(sourcePath, "components/"), + pages: path.resolve(sourcePath, "pages/"), state: path.resolve(sourcePath, "state/"), styles: path.resolve(sourcePath, "styles/"), utilities: path.resolve(sourcePath, "utilities/"),