ui component for displaying list of users

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 (
     <div className="app bg-gray-50 min-h-screen">
       <SiteHeader />
+      <LandingPage />
     </div>
   );
 };

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(
+      <ContentCard>
+        <p>Child element</p>
+      </ContentCard>
+    );
+
+    const childElement = screen.getByText("Child element");
+    expect(childElement).toBeInTheDocument();
+  });
+});

src/components/ContentCard/ContentCard.tsx

@@ -0,0 +1,11 @@
+import React, { FC } from "react";
+
+interface ContentCardProps {
+  children: JSX.Element[] | JSX.Element;
+}
+
+const ContentCard: FC<ContentCardProps> = ({ children }) => (
+  <div className="my-10 bg-white p-8 md:p-16 shadow">{children}</div>
+);
+
+export default ContentCard;

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(
+      <PageContainer>
+        <p>Child element</p>
+      </PageContainer>
+    );
+
+    const childElement = screen.getByText("Child element");
+    expect(childElement).toBeInTheDocument();
+  });
+});

src/components/PageContainer/PageContainer.tsx

@@ -0,0 +1,11 @@
+import React, { FC } from "react";
+
+interface PageContainerProps {
+  children: JSX.Element[] | JSX.Element;
+}
+
+const PageContainer: FC<PageContainerProps> = ({ children }) => (
+  <div className="container my-10 mx-auto">{children}</div>
+);
+
+export default PageContainer;

src/components/SiteHeader/SiteHeader.tsx

@@ -4,7 +4,7 @@ import Logo from "assets/images/logo.svg";
 import UserAvatar from "../UserAvatar/UserAvatar";
 
 const SiteHeader: FC = () => (
-  <div className="fixed top-0 left-0 right-0 px-8 py-6 bg-white border-b border-gray-100 flex items-center">
+  <div className="sticky top-0 left-0 right-0 px-8 py-6 bg-white border-b border-gray-100 flex items-center">
     <img src={Logo} alt="Company name" />
     <UserAvatar className="ml-auto" />
   </div>

src/components/UsersTable/UsersTable.tsx

@@ -0,0 +1,26 @@
+import React, { FC } from "react";
+
+const UsersTable: FC = () => {
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>asdfasd</th>
+          <th>asdf</th>
+          <th>asdf</th>
+          <th>asdf</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>a</td>
+          <td>a</td>
+          <td>a</td>
+          <td>a</td>
+        </tr>
+      </tbody>
+    </table>
+  );
+};
+
+export default UsersTable;

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(<LandingPage />);
+
+    const heading = screen.getByText("Landing page");
+    expect(heading).toBeInTheDocument();
+  });
+});

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 (
+    <PageContainer>
+      <h2 className="text-2xl md:text-4xl mb-4 font-sans">Landing page</h2>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+      <ContentCard>
+        <UsersTable />
+      </ContentCard>
+    </PageContainer>
+  );
+};
+
+export default LandingPage;

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/*"]

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/"),