Fetched posts data and created interfaces for the data

Created the interfaces to have more control over types while developing

Author: SimonaCartuta

src/components/App.tsx

@@ -1,7 +1,17 @@
-import React from "react";
+import { useEffect, useState } from "react";
+import { IPost } from "../utils/IPost";
 
 const App = () => {
-  return <div>Created initial develop branch</div>;
+  const [posts, setPosts] = useState<IPost[]>([]);
+
+  useEffect(() => {
+    fetch('api/posts')
+      .then(response => response.json())
+      .then(results => setPosts(results.posts))
+      .catch(error => console.error(`Oops, could not retrieve data. Please, try again later. \nError: ${error}`));
+  }, []);
+
+  return <div>{/* Complete the exercise here. */}</div>;
 }
 
 export default App;

src/utils/IAuthor.tsx

@@ -0,0 +1,4 @@
+export interface IAuthor {
+    name: string,
+    avatar: string,
+}

src/utils/ICategory.tsx

@@ -0,0 +1,4 @@
+export interface ICategory {
+    id: string,
+    name: string,
+}

src/utils/IPost.tsx

@@ -0,0 +1,11 @@
+import { IAuthor } from "./IAuthor";
+import { ICategory } from "./ICategory";
+
+export interface IPost {
+    id: string,
+    title: string,
+    publishDate: string,
+    author: IAuthor,
+    summary: string,
+    categories: ICategory[],
+}