I got nothing..
;
+ }
+ const { title, author, date, content } = post;
+ return (
+ <>
+
+
+
I am an example component
);
diff --git a/src/components/ExampleComponent/ExampleComponent.module.scss b/src/components/ExampleComponent/ExampleComponent.module.scss
index fe08d58..3cf5d18 100644
--- a/src/components/ExampleComponent/ExampleComponent.module.scss
+++ b/src/components/ExampleComponent/ExampleComponent.module.scss
@@ -4,3 +4,7 @@
color: yellow;
background-color: red;
}
+
+.exampleComponentContainer {
+ margin-bottom: 20px;
+}
diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js
new file mode 100644
index 0000000..f920c73
--- /dev/null
+++ b/src/components/Footer/Footer.js
@@ -0,0 +1,13 @@
+import React from "react";
+import styles from "./Footer.module.scss";
+
+const Footer = () => {
+ const date = new Date().getFullYear();
+ return (
+
+ );
+};
+
+export default Footer;
diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss
new file mode 100644
index 0000000..c4e6078
--- /dev/null
+++ b/src/components/Footer/Footer.module.scss
@@ -0,0 +1,6 @@
+.footer {
+ margin: auto;
+ p {
+ text-align: center;
+ }
+}
diff --git a/src/components/Footer/Footer.test.js b/src/components/Footer/Footer.test.js
new file mode 100644
index 0000000..5665750
--- /dev/null
+++ b/src/components/Footer/Footer.test.js
@@ -0,0 +1,15 @@
+import { render, waitFor } from "@testing-library/react";
+import Footer from "../Footer/Footer";
+
+describe("Footer Component", () => {
+ test("should have the copyright in the footer", async () => {
+ const date = new Date().getFullYear();
+ const { getByText } = render(
);
+
+ await waitFor(() => {
+ expect(
+ getByText(`Welcome to Setup Example Next | 2016 - ${date}`),
+ ).toBeInTheDocument();
+ });
+ });
+});
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
new file mode 100644
index 0000000..3d8bc9f
--- /dev/null
+++ b/src/components/Header/Header.js
@@ -0,0 +1,24 @@
+import React from "react";
+import { navigationItems } from "../../utils/navigationItems";
+import styles from "./Header.module.scss";
+
+const Header = () => {
+ return (
+
+
+
+ );
+};
+
+export default Header;
diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss
new file mode 100644
index 0000000..fa12ca1
--- /dev/null
+++ b/src/components/Header/Header.module.scss
@@ -0,0 +1,5 @@
+.header {
+ ul {
+ list-style-type: none;
+ }
+}
diff --git a/src/components/Header/Header.test.js b/src/components/Header/Header.test.js
new file mode 100644
index 0000000..e890277
--- /dev/null
+++ b/src/components/Header/Header.test.js
@@ -0,0 +1,18 @@
+import { render, waitFor } from "@testing-library/react";
+import Header from "../Header/Header";
+
+describe("
", () => {
+ test("it should render children", async () => {
+ const navigationItems = [
+ { id: 1, name: "Home", href: "/" },
+ { id: 2, name: "Add Posts", href: "/add-posts" },
+ { id: 3, name: "Contact", href: "/contact" },
+ ];
+ const { getByText } = render(
);
+ await waitFor(() => {
+ expect(getByText(`Home`)).toBeInTheDocument();
+ expect(getByText(`Add Posts`)).toBeInTheDocument();
+ expect(getByText(`Contact`)).toBeInTheDocument();
+ });
+ });
+});
diff --git a/src/components/Layout/Layout.js b/src/components/Layout/Layout.js
new file mode 100644
index 0000000..a0fb771
--- /dev/null
+++ b/src/components/Layout/Layout.js
@@ -0,0 +1,16 @@
+import React from "react";
+import Header from "../Header/Header";
+import Main from "../Main/Main";
+import Footer from "../Footer/Footer";
+
+const Layout = ({ children }) => {
+ return (
+ <>
+
+
{children}
+
+
+ );
+};
+
+export default Layout;
diff --git a/src/components/Layout/Layout.test.js b/src/components/Layout/Layout.test.js
new file mode 100644
index 0000000..cc45774
--- /dev/null
+++ b/src/components/Layout/Layout.test.js
@@ -0,0 +1,18 @@
+import { render, waitFor } from "@testing-library/react";
+import Layout from "../Layout/Layout";
+
+describe("
", () => {
+ test("it should render children", async () => {
+ const { getByText } = render(
+
+ Eat Bacon
+ ,
+ );
+ await waitFor(() => {
+ expect(getByText(`Home`)).toBeInTheDocument();
+ expect(getByText(`Add Posts`)).toBeInTheDocument();
+ expect(getByText(`Contact`)).toBeInTheDocument();
+ expect(getByText(`Eat Bacon`)).toBeInTheDocument();
+ });
+ });
+});
diff --git a/src/components/Main/Main.js b/src/components/Main/Main.js
new file mode 100644
index 0000000..122f917
--- /dev/null
+++ b/src/components/Main/Main.js
@@ -0,0 +1,16 @@
+import React from "react";
+import styles from "./Main.module.scss";
+
+const Main = ({ children }) => {
+ return (
+
+ {children}
+
+ );
+};
+
+export default Main;
diff --git a/src/components/Main/Main.module.scss b/src/components/Main/Main.module.scss
new file mode 100644
index 0000000..165ac61
--- /dev/null
+++ b/src/components/Main/Main.module.scss
@@ -0,0 +1,4 @@
+.main {
+ max-width: 1440px;
+ margin: auto 20px;
+}
diff --git a/src/components/Main/Main.test.js b/src/components/Main/Main.test.js
new file mode 100644
index 0000000..a28f177
--- /dev/null
+++ b/src/components/Main/Main.test.js
@@ -0,0 +1,15 @@
+import { render, waitFor } from "@testing-library/react";
+import Main from "../Main/Main";
+
+describe("
", () => {
+ test("it should render children", async () => {
+ const { getByText } = render(
+
+ Hello World
+ ,
+ );
+ await waitFor(() => {
+ expect(getByText(`Hello World`)).toBeInTheDocument();
+ });
+ });
+});
diff --git a/src/components/PostForm/PostForm.js b/src/components/PostForm/PostForm.js
new file mode 100644
index 0000000..b908d56
--- /dev/null
+++ b/src/components/PostForm/PostForm.js
@@ -0,0 +1,50 @@
+import React from "react";
+import { createPost } from "../../services/BlogService";
+
+const PostForm = () => {
+ const date = new Date().toDateString();
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ const form = e.target;
+ const formData = new FormData(form);
+ const formJson = Object.fromEntries(formData.entries());
+ const data = {
+ title: formJson.postTitle,
+ author: formJson.postAuthor,
+ content: formJson.postContent,
+ date: formJson.postDate,
+ };
+ createPost(data);
+ };
+ return (
+
+ );
+};
+
+export default PostForm;
diff --git a/src/components/PostForm/PostForm.test.js b/src/components/PostForm/PostForm.test.js
new file mode 100644
index 0000000..3852fdf
--- /dev/null
+++ b/src/components/PostForm/PostForm.test.js
@@ -0,0 +1,24 @@
+import React from "react";
+import { render, waitFor } from "@testing-library/react";
+import PostForm from "./PostForm";
+
+describe("
", () => {
+ jest.mock("../../services/BlogService", () => {
+ return {
+ createPost: jest.fn(),
+ };
+ });
+ beforeEach(() => {
+ jest.resetModules();
+ });
+ test("it should render a form with the correct fields", async () => {
+ const { getByText } = render(
);
+ await waitFor(() => {
+ expect(getByText(`Post Title:`)).toBeInTheDocument();
+ expect(getByText(`Post Date:`)).toBeInTheDocument();
+ expect(getByText(`Post Author:`)).toBeInTheDocument();
+ expect(getByText(`Post Content:`)).toBeInTheDocument();
+ expect(getByText(`Submit`)).toBeInTheDocument();
+ });
+ });
+});
diff --git a/src/components/PostsList/PostList.module.scss b/src/components/PostsList/PostList.module.scss
new file mode 100644
index 0000000..031deb0
--- /dev/null
+++ b/src/components/PostsList/PostList.module.scss
@@ -0,0 +1,17 @@
+@supports (display: grid) {
+ .postList {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ grid-gap: 2rem;
+ margin-bottom: 2rem;
+ }
+}
+
+.saleItem {
+ display:flex;
+ flex-flow: column;
+ border: 4px solid black;
+ border-radius: 0 0 1rem 0;
+ padding: 2rem;
+ box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2);
+}
diff --git a/src/components/PostsList/PostsList.js b/src/components/PostsList/PostsList.js
new file mode 100644
index 0000000..cc7c38f
--- /dev/null
+++ b/src/components/PostsList/PostsList.js
@@ -0,0 +1,31 @@
+import React from "react";
+import Link from "next/link";
+import styles from "./PostList.module.scss";
+
+const PostsLists = ({ posts }) => {
+ const renderPosts = () => {
+ try {
+ return posts.map((post) => {
+ const { title, author, date, content, id } = post;
+ return (
+
+
+ {title}
+
+ {author} | {date}
+
+
+ {content}
+
+
+ );
+ });
+ } catch (e) {
+ throw new Error(e, "new error");
+ }
+ };
+
+ return
{renderPosts()}
;
+};
+
+export default PostsLists;
diff --git a/src/hooks/useFetch.js b/src/hooks/useFetch.js
new file mode 100644
index 0000000..e9cb019
--- /dev/null
+++ b/src/hooks/useFetch.js
@@ -0,0 +1,49 @@
+/* eslint-disable security/detect-object-injection */
+import fetch from "node-fetch";
+import { useState, useEffect, useRef } from "react";
+import { setDataToCache } from "../utils/sessionCache";
+
+const useFetch = (url) => {
+ const cache = useRef({});
+ const [status, setStatus] = useState("idle");
+ const [data, setData] = useState([]);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ if (!url) {
+ setError(`Error occurred: missing url`);
+ return;
+ }
+ const fetchData = async () => {
+ setStatus("fetching");
+ if (cache.current[url]) {
+ const res = cache.current[url];
+ setData(res);
+ setDataToCache(res);
+ setStatus("fetched");
+ } else {
+ try {
+ const response = await fetch(url);
+ if (response.status > 200) {
+ setError(`Error occurred:`, response.status);
+ } else {
+ const res = await response.json();
+ cache.current[url] = res; // set response in cache;
+ setDataToCache(res);
+ setData(res);
+ setStatus("fetched");
+ }
+ } catch (err) {
+ setError(`Error occurred:`, err);
+ setStatus("Errored");
+ }
+ }
+ };
+
+ fetchData();
+ }, [url]);
+
+ return { status, data, error };
+};
+
+export default useFetch;
diff --git a/src/hooks/useFetch.test.js b/src/hooks/useFetch.test.js
new file mode 100644
index 0000000..795f638
--- /dev/null
+++ b/src/hooks/useFetch.test.js
@@ -0,0 +1,28 @@
+import { renderHook } from "@testing-library/react";
+import useFetch from "./useFetch";
+
+describe("useFetch", () => {
+ const apiPath = "https://jsonplaceholder.typicode.com/posts";
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+ it("should return an error if no url is passed", async () => {
+ const { result } = await renderHook(() => useFetch());
+ expect(result.current.error).toEqual("Error occurred: missing url");
+ });
+ it("should return an object", async () => {
+ const { result } = await renderHook(() => useFetch(apiPath));
+ expect(result.current).toBeInstanceOf(Object);
+ });
+ it("should return an object with status, data and error", async () => {
+ const { result } = await renderHook(() => useFetch(apiPath));
+ expect(result.current).toHaveProperty("status");
+ expect(result.current).toHaveProperty("data");
+ expect(result.current).toHaveProperty("error");
+ });
+ it("should fetch data", async () => {
+ const { result } = renderHook(() => useFetch(apiPath));
+ expect(result.current.status).toEqual("fetching");
+ expect(result.current.error).toEqual(null);
+ });
+});
diff --git a/src/services/BlogService.js b/src/services/BlogService.js
new file mode 100644
index 0000000..be5fae2
--- /dev/null
+++ b/src/services/BlogService.js
@@ -0,0 +1,73 @@
+import fetch from "node-fetch";
+import { router } from "next/router";
+// createPost
+export const createPost = async (data) => {
+ try {
+ const res = await fetch(`http://localhost:3000/posts`, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify(data),
+ });
+ const post = await res.json();
+ router.push("/");
+ return post;
+ } catch (error) {
+ throw new Error(error, "server error");
+ }
+};
+
+// getPosts
+export const getPosts = async () => {
+ try {
+ const res = await fetch("http://localhost:3000/posts");
+ const posts = await res.json();
+ return posts;
+ } catch (error) {
+ throw new Error(error, "server error");
+ }
+};
+
+// getPost
+export const getPost = async (id) => {
+ try {
+ const res = await fetch(`http://localhost:3000/posts/${id}`);
+ const post = await res.json();
+ return post;
+ } catch (error) {
+ throw new Error(error, "server error");
+ }
+};
+
+// updatePost
+export const updatePost = async (id, data) => {
+ try {
+ const res = await fetch(`http://localhost:3000/posts/${id}`, {
+ method: "PATCH",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify(data),
+ });
+ const post = await res.json();
+ router.push("/");
+ return post;
+ } catch (error) {
+ throw new Error(error, "server error");
+ }
+};
+
+// deletePost
+export const deletePost = async (id) => {
+ try {
+ const res = await fetch(`http://localhost:3000/posts/${id}`, {
+ method: "DELETE",
+ });
+ const post = await res.json();
+ router.push("/");
+ return post;
+ } catch (error) {
+ throw new Error(error, "server error");
+ }
+};
diff --git a/src/services/BlogService.test.js b/src/services/BlogService.test.js
new file mode 100644
index 0000000..bae0d8b
--- /dev/null
+++ b/src/services/BlogService.test.js
@@ -0,0 +1,128 @@
+import fetch from "node-fetch";
+import {
+ createPost,
+ getPosts,
+ getPost,
+ updatePost,
+ deletePost,
+} from "./BlogService";
+
+jest.mock("node-fetch");
+jest.mock("next/router", () => ({
+ router: {
+ push: jest.fn(),
+ },
+}));
+// mock console.error
+jest.mock("console", () => ({
+ error: jest.fn(),
+}));
+
+describe("BlogService", () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+ describe("getPosts", () => {
+ it("should return posts", async () => {
+ const posts = [
+ {
+ id: 1,
+ title: "Post 1",
+ body: "Body 1",
+ },
+ {
+ id: 2,
+ title: "Post 2",
+ body: "Body 2",
+ },
+ ];
+ fetch.mockResolvedValueOnce({
+ json: jest.fn().mockResolvedValueOnce(posts),
+ });
+ const result = await getPosts();
+ expect(result).toEqual(posts);
+ });
+ it("should throw an error if fetch fails", async () => {
+ jest.spyOn(global.console, "error").mockImplementation(() => {});
+ fetch.mockRejectedValueOnce(new Error("Error"));
+ await expect(getPosts()).rejects.toThrow("Error");
+ });
+ });
+
+ describe("getPost", () => {
+ it("should return a post", async () => {
+ const post = {
+ id: 1,
+ title: "Post 1",
+ body: "Body 1",
+ };
+ fetch.mockResolvedValueOnce({
+ json: jest.fn().mockResolvedValueOnce(post),
+ });
+ const result = await getPost(1);
+ expect(result).toEqual(post);
+ });
+ it("should throw an error if fetch fails", async () => {
+ jest.spyOn(global.console, "error").mockImplementation(() => {});
+ fetch.mockRejectedValueOnce(new Error("Error"));
+ await expect(getPost(1)).rejects.toThrow("Error");
+ });
+ });
+ describe("updatePost", () => {
+ it("should return a post", async () => {
+ const post = {
+ id: 1,
+ title: "Post 1",
+ body: "Body 1",
+ };
+ fetch.mockResolvedValueOnce({
+ json: jest.fn().mockResolvedValueOnce(post),
+ });
+ const result = await updatePost(1, post);
+ expect(result).toEqual(post);
+ });
+ it("should throw an error if fetch fails", async () => {
+ jest.spyOn(global.console, "error").mockImplementation(() => {});
+ fetch.mockRejectedValueOnce(new Error("Error"));
+ await expect(updatePost(1, {})).rejects.toThrow("Error");
+ });
+ });
+ describe("deletePost", () => {
+ it("should return a post", async () => {
+ const post = {
+ id: 1,
+ title: "Post 1",
+ body: "Body 1",
+ };
+ fetch.mockResolvedValueOnce({
+ json: jest.fn().mockResolvedValueOnce(post),
+ });
+ const result = await deletePost(1);
+ expect(result).toEqual(post);
+ });
+ it("should throw an error if fetch fails", async () => {
+ jest.spyOn(global.console, "error").mockImplementation(() => {});
+ fetch.mockRejectedValueOnce(new Error("Error"));
+ await expect(deletePost(1)).rejects.toThrow("Error");
+ });
+ });
+ describe("createPost", () => {
+ it("should return a post", async () => {
+ const post = {
+ id: 1,
+ title: "Post 1",
+ body: "Body 1",
+ };
+ fetch.mockResolvedValueOnce({
+ json: jest.fn().mockResolvedValueOnce(post),
+ });
+ const result = await createPost(post);
+ expect(result).toEqual(post);
+ });
+ it("should throw an error if fetch fails", async () => {
+ jest.spyOn(global.console, "error").mockImplementation(() => {});
+ fetch.mockRejectedValueOnce(new Error("Error"));
+ await expect(createPost({})).rejects.toThrow("Error");
+ });
+ });
+});
diff --git a/src/utils/navigationItems.js b/src/utils/navigationItems.js
new file mode 100644
index 0000000..a7efc84
--- /dev/null
+++ b/src/utils/navigationItems.js
@@ -0,0 +1,17 @@
+export const navigationItems = [
+ {
+ id: 1,
+ name: "Home",
+ path: "/",
+ },
+ {
+ id: 2,
+ name: "Add Posts",
+ path: "/add-posts",
+ },
+ {
+ id: 3,
+ name: "Contact",
+ path: "/contact",
+ },
+];
diff --git a/src/utils/sessionCache.js b/src/utils/sessionCache.js
new file mode 100644
index 0000000..a65a4f9
--- /dev/null
+++ b/src/utils/sessionCache.js
@@ -0,0 +1,83 @@
+import store from "store";
+
+const SESSION_CACHE = "SESSION_CACHE";
+const twoWeeks = 1000 * 60 * 60 * 24 * 14;
+
+const currentTime = () => {
+ return Date.now();
+};
+
+const getSessionCache = () => {
+ let sessionCache = {
+ data: {},
+ nextCleanup: new Date().getTime() + twoWeeks,
+ };
+
+ try {
+ const data = store.get(SESSION_CACHE);
+
+ if (data) {
+ sessionCache = JSON.parse(data);
+ }
+ } catch (e) {
+ console.error(e.message);
+ }
+
+ return sessionCache;
+};
+
+const setDataToCache = (id, value) => {
+ const sessionCache = getSessionCache();
+ const data = sessionCache.data;
+
+ const item = {
+ id,
+ expiry: new Date().getTime() + twoWeeks,
+ value,
+ };
+
+ data[id] = item;
+
+ try {
+ store.set(SESSION_CACHE, JSON.stringify(sessionCache));
+ } catch (e) {
+ cleanUpStorage(data);
+ }
+};
+
+const cleanUpStorage = (data) => {
+ let isDeleted;
+ let oldest;
+ let oldestKey;
+
+ // if 14 days have been passed, it removes the cache
+ for (const key in data) {
+ // console.log("key is", key);
+ const expiry = data[key].expiry;
+ if (expiry && expiry <= currentTime()) {
+ delete data[key];
+ isDeleted = true;
+ }
+
+ // finding the oldest cache in case none of them are expired
+ if (!oldest || oldest > expiry) {
+ oldest = expiry;
+ oldestKey = key;
+ }
+ }
+
+ // remove the oldest cache if there is no more space in local storage (5 MB)
+ if (!isDeleted && oldestKey) {
+ delete data[oldestKey];
+ }
+
+ store.set(
+ SESSION_CACHE,
+ JSON.stringify({
+ data,
+ nextCleanup: currentTime() + twoWeeks,
+ }),
+ );
+};
+
+export { setDataToCache, getSessionCache };
diff --git a/src/utils/sessionCache.test.js b/src/utils/sessionCache.test.js
new file mode 100644
index 0000000..10625ec
--- /dev/null
+++ b/src/utils/sessionCache.test.js
@@ -0,0 +1,40 @@
+import store from "store";
+import { getSessionCache } from "./sessionCache";
+
+describe("the getSessionCache, and the setDataToCache functions", () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
+ describe("getSessionCache", () => {
+ jest.mock("./sessionCache.js", () => ({
+ setSessionCache: jest.fn(),
+ getSessionCache: jest.fn(),
+ }));
+ jest.mock("store", () => ({
+ get: jest.fn(),
+ set: jest.fn(),
+ }));
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+ it("should return the correct data", () => {
+ const data = {
+ data: {
+ feature1: {
+ id: "feature1",
+ expiry: 1000,
+ value: true,
+ },
+ },
+ nextCleanup: 1000,
+ };
+ const storeMock = jest
+ .spyOn(store, "get")
+ .mockReturnValue(JSON.stringify(data));
+ const result = getSessionCache();
+ expect(storeMock).toHaveBeenCalledWith("SESSION_CACHE");
+ expect(result).toEqual(data);
+ });
+ });
+});