App
; +import { fetchUserById } from "state/userProfile/actions"; +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"; + +const App: FC = () => { + const dispatch = useDispatch(); + const username = useSelector(getUsername); + + useEffect(() => { + if (!username) { + setTimeout(() => dispatch(fetchUserById("1")), 2400); + } + }, [dispatch]); + + const isPageReady = username; + + if (!isPageReady) { + return
+
+ );
+};
export default App;
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
+{children}
+);
+
+export default ContentCard;
diff --git a/src/components/Loader/Loader.test.tsx b/src/components/Loader/Loader.test.tsx
new file mode 100644
index 0000000..e5790af
--- /dev/null
+++ b/src/components/Loader/Loader.test.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import { screen, render } from "@testing-library/react";
+
+import Loader from "./Loader";
+
+const setup = () => render(
+
+);
+
+export default Loader;
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(
+
+
+ Loading...
+Child element
+
+
+);
+
+export default PageContainer;
diff --git a/src/components/SiteHeader/SiteHeader.test.tsx b/src/components/SiteHeader/SiteHeader.test.tsx
new file mode 100644
index 0000000..4776995
--- /dev/null
+++ b/src/components/SiteHeader/SiteHeader.test.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { screen } from "@testing-library/react";
+import renderConnected from "utilities/test/renderConnected";
+
+import SiteHeader from "./SiteHeader";
+
+const setup = () =>
+ renderConnected({
+ ui: {children}
+
+ 
+
+);
+
+export default SiteHeader;
diff --git a/src/components/UserAvatar/UserAvatar.test.tsx b/src/components/UserAvatar/UserAvatar.test.tsx
new file mode 100644
index 0000000..f6908ab
--- /dev/null
+++ b/src/components/UserAvatar/UserAvatar.test.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { screen } from "@testing-library/react";
+import renderConnected from "utilities/test/renderConnected";
+
+import UserAvatar from "./UserAvatar";
+
+const setup = (initialState = {}) =>
+ renderConnected({
+ ui: Logged in as {userName}
;
+};
+
+export default UserHeader;
diff --git a/src/components/UsersTable/UsersTable.tsx b/src/components/UsersTable/UsersTable.tsx
new file mode 100644
index 0000000..15ffb8f
--- /dev/null
+++ b/src/components/UsersTable/UsersTable.tsx
@@ -0,0 +1,49 @@
+import React, { FC, useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+
+import { getUsersList } from "state/users/selectors";
+import { fetchUsers } from "state/users/actions";
+
+import "./users-table.scss";
+
+const UsersTable: FC = () => {
+ const dispatch = useDispatch();
+ const usersList = useSelector(getUsersList);
+
+ useEffect(() => {
+ if (!usersList) {
+ dispatch(fetchUsers());
+ }
+ }, [dispatch]);
+
+ if (!usersList || usersList.length === 0) {
+ return null;
+ }
+
+ return (
+
+
+
+
+
+ );
+};
+
+export default UsersTable;
diff --git a/src/components/UsersTable/users-table.scss b/src/components/UsersTable/users-table.scss
new file mode 100644
index 0000000..5b2734c
--- /dev/null
+++ b/src/components/UsersTable/users-table.scss
@@ -0,0 +1,19 @@
+.users-table {
+ table {
+ width: 100%;
+ border-collapse: collapse;
+ border-spacing: 0;
+ }
+
+ thead th,
+ thead td {
+ font-size: 1rem;
+ padding: 1rem;
+ text-align: left;
+ }
+
+ tbody td {
+ font-size: 1.4rem;
+ padding: 0.25rem 1rem;
+ }
+}
diff --git a/src/index.tsx b/src/index.tsx
index 316b54d..a961e10 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,6 +1,13 @@
import React from "react";
import { render } from "react-dom";
+import { Provider } from "react-redux";
-import App from "./components/App/App";
+import store from "state/store";
+import App from "components/App/App";
-render(| Name | +Username | +Company | +|
|---|---|---|---|
| {name} | +{email} | +{company.name} | +{username} | +
Landing page
+Lorem ipsum dolor sit amet consectetur adipisicing elit.
+