Added styling, placeholder data and todos

Author: StuartCowley

src/__tests__/App.test.js

@@ -1,8 +1,8 @@
 import { render, screen } from '@testing-library/react';
-import App from './App';
+import App from '../components/App';
 
 test('renders learn react link', () => {
   render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
+  const linkElement = screen.getByText("Intro to React II");
   expect(linkElement).toBeInTheDocument();
 });

src/components/App.js

@@ -1,9 +1,20 @@
-import '../styles/app.css';
+import "../styles/app.css";
+import Post from "./Post";
 
-function App() {
+const App = () => {
   return (
     <div className="app">
-      App component
+      <div className="app__background-wrap" />
+      <div className="app__foreground-wrap">
+        <div className="app__title">Intro to React II</div>
+        {
+          // TODO: Send data to Post component and verify it works
+          //   wrap all Posts in a PostList component
+          // TODO: Create a Postlist component to wrap all Posts in,
+          //   display name of last upvoted post at the top
+        }
+        <Post />
+      </div>
     </div>
   );
 }

src/components/Post.js

@@ -0,0 +1,26 @@
+import React from "react";
+
+const Post = (props) => {
+  return (
+    <div className="post">
+      <div className="post-heading">
+        {
+          // TODO: Use data from props to populate title, author, date
+          //   published, body and tags, validate props
+        }
+        <h2>"title"</h2>
+        {
+          // TODO: show post body if isPublished, or 'Coming soon!' if not
+        }
+      </div>
+      <div className="post-author">Author: "author"</div>
+      <div className="post-date">Published: "date"</div>
+      <h3>Tags:</h3>
+        {
+          // TODO: Create list of all all provided tags
+        }
+    </div>
+  );
+};
+
+export default Post;

src/data/posts.json

@@ -0,0 +1,29 @@
+[
+  {
+    "id": 1,
+    "title": "Should I learn React?",
+    "body": "React is a declarative, efficient, and flexible JavaScript library for building UIs (user interfaces) in web apps (viewed in the browser). It has gained popularity steadily since then and is one of the most in demand front end libraries in use today.",
+    "tags": ["react", "introduction", "front end", "2023"],
+    "author": "September22",
+    "date": "17-01-2023",
+    "isPublished": true
+  },
+  {
+    "id": 2,
+    "title": "React is awesome!",
+    "body": "React has some extremely useful features, including the ability to hold and manipulate data, handle user events, provide validation for props, multiple hooks (and the functionality to implement your own custom hooks from scratch), and its widespread use means support can often be found in the community",
+    "tags": ["react", "further introduction", "lecture 2", "state", "props"],
+    "author": "September22",
+    "date": "19-01-2023",
+    "isPublished": true
+  },
+  {
+    "id": 3,
+    "title": "Lifecycle and hooks in React!",
+    "body": "Useful hooks include useState, useEffect, useContext, useRef... and many more. Will be looking some of these soon enough",
+    "tags": ["react", "hooks", "lecture 3", "useEffect", "useContext"],
+    "author": "September22",
+    "date": "24-01-2023",
+    "isPublished": false
+  }
+]

public/logo192.png renamed to src/images/logo192.png

@@ -1,3 +1,15 @@
+html,
+body,
+#root {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+body {
+  background-color: black;
+  color: white;
+}
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

src/index.css

@@ -1,3 +1,30 @@
 .app {
-  text-align: center;
+  position: relative;
+  box-sizing: border-box;
+  padding: 2em 4em;
+  min-height: 100%;
+}
+
+.app__background-wrap {
+  background-image: url("../images/logo192.png");
+  content: "";
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  opacity: 0.5;
 }
+
+.app__foreground-wrap {
+  background-color: rgb(20,20,20, 0.9);
+}
+
+.app__title {
+  font-size: 2em;
+  font-weight: bold;
+  color: white;
+  text-align: center;
+  padding-bottom: 1rem;
+}