Updated from Links to Posts based on new API specs

Author: sivaprasadreddy

README.md

@@ -6,12 +6,12 @@ In the project directory, you can run:
 
 ### `yarn start`
 
-Runs the app in the development mode.<br />
+Run the app in the development mode.<br />
 Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 
 ### `yarn test`
 
-Launches the test runner in the interactive watch mode.
+Launch the test runner in the interactive watch mode.
 
 ### `yarn build`
 

src/App.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import {Route, Switch, Redirect} from "react-router-dom";
-import Links from "./pages/links/Links";
+import Posts from "./pages/posts/Posts";
 import Login from "./pages/login/Login";
 import Registration from "./pages/registration/Registration";
 import NavBar from "./components/layout/NavBar";
-import NewLink from "./pages/links/NewLink";
+import NewPost from "./pages/posts/NewPost";
 import NotFound from "./pages/error/NotFound";
 
 const App = () => (
@@ -14,10 +14,10 @@ const App = () => (
             <Switch>
                 <Route path="/login" component={Login}/>
                 <Route path="/registration" component={Registration}/>
-                <Route path="/links/new" component={NewLink}/>
+                <Route path="/posts/new" component={NewPost}/>
 
-                <Route path="/links" component={Links} />
-                <Redirect exact path="/" to="/links"/>
+                <Route path="/posts" component={Posts} />
+                <Redirect exact path="/" to="/posts"/>
                 <Route path="*">
                     <NotFound />
                 </Route>

src/components/layout/NavBar.tsx

@@ -25,8 +25,8 @@ const NavBar = () => {
     if (user.access_token) {
         authenticatedLinks = (<Nav className="" navbar>
             <NavItem>
-                <NavLink href="/links/new">
-                    <i className="fas fa-plus-circle"/> Add Link
+                <NavLink href="/posts/new">
+                    <i className="fas fa-plus-circle"/> Add Post
                 </NavLink>
             </NavItem>
 

src/components/links/Link.test.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import Pagination from './Pagination';
-import {LinksModel, LinksPaginationModel} from "../../models/LinkModels";
+import {PostsModel, PostsPaginationModel} from "../../models/PostModels";
 import {MemoryRouter} from "react-router-dom";
 
 test('Renders Pagination', () => {
-    const linksModel: LinksModel = {
+    const postsModel: PostsModel = {
         data: [],
         hasNext: false,
         hasPrevious: false,
@@ -15,7 +15,7 @@ test('Renders Pagination', () => {
         totalPages: 2,
         totalElements: 50
     }
-    const paginationModel : LinksPaginationModel= { page:1, links:linksModel, tag: '', query: ''};
+    const paginationModel : PostsPaginationModel= { page:1, posts:postsModel, query: ''};
 
     render(<MemoryRouter><Pagination  {...paginationModel}/></MemoryRouter>);
     const firstLinkElement = screen.getByText(/First/i);

src/components/links/Link.tsx

@@ -1,55 +1,48 @@
 import React from "react";
 import classNames from "classnames";
 import {NavLink} from "react-router-dom";
-import {LinksPaginationModel} from "../../models/LinkModels";
+import {PostsPaginationModel} from "../../models/PostModels";
 
-const Pagination: React.FC<LinksPaginationModel> = (linksPagination) : JSX.Element => {
-    let links = linksPagination.links
-    let firstPageUrl = "/links?page=1";
-    let prevPageUrl = `/links?page=${links.pageNumber-1}`;
-    let nextPageUrl = `/links?page=${links.pageNumber+1}`;
-    let lastPageUrl = `/links?page=${links.totalPages}`;
+const Pagination: React.FC<PostsPaginationModel> = (postsPagination) : JSX.Element => {
+    let posts = postsPagination.posts
+    let firstPageUrl = "/posts?page=1";
+    let prevPageUrl = `/posts?page=${posts.pageNumber-1}`;
+    let nextPageUrl = `/posts?page=${posts.pageNumber+1}`;
+    let lastPageUrl = `/posts?page=${posts.totalPages}`;
 
-    if(linksPagination.tag) {
-        firstPageUrl += `&tag=${linksPagination.tag}`;
-        prevPageUrl += `&tag=${linksPagination.tag}`;
-        nextPageUrl += `&tag=${linksPagination.tag}`;
-        lastPageUrl += `&tag=${linksPagination.tag}`;
-    }
-
-    if(linksPagination.query) {
-        firstPageUrl += `&query=${linksPagination.query}`;
-        prevPageUrl += `&query=${linksPagination.query}`;
-        nextPageUrl += `&query=${linksPagination.query}`;
-        lastPageUrl += `&query=${linksPagination.query}`;
+    if(postsPagination.query) {
+        firstPageUrl += `&query=${postsPagination.query}`;
+        prevPageUrl += `&query=${postsPagination.query}`;
+        nextPageUrl += `&query=${postsPagination.query}`;
+        lastPageUrl += `&query=${postsPagination.query}`;
     }
 
     return (
         <div>
-            { links.totalPages > 1 &&
+            { posts.totalPages > 1 &&
                 <nav aria-label="Page navigation">
                 <ul className="pagination pagination justify-content-center">
                     <li className={classNames({
                         "page-item": true,
-                        disabled: !links.hasPrevious
+                        disabled: !posts.hasPrevious
                     })}>
                         <NavLink className="page-link" to={`${firstPageUrl}`}>First</NavLink>
                     </li>
                     <li className={classNames({
                         "page-item": true,
-                        disabled: !links.hasPrevious
+                        disabled: !posts.hasPrevious
                     })}>
                         <NavLink className="page-link" to={`${prevPageUrl}`}>Previous</NavLink>
                     </li>
                     <li className={classNames({
                         "page-item": true,
-                        disabled: !links.hasNext
+                        disabled: !posts.hasNext
                     })}>
                         <NavLink className="page-link" to={`${nextPageUrl}`}>Next</NavLink>
                     </li>
                     <li className={classNames({
                         "page-item": true,
-                        disabled: !links.hasNext
+                        disabled: !posts.hasNext
                     })}>
                         <NavLink className="page-link" to={`${lastPageUrl}`}>Last</NavLink>
                     </li>

src/components/links/LinkList.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Post from './Post';
+import { PostModel} from "../../models/PostModels";
+import { MemoryRouter } from 'react-router-dom';
+
+test('Renders Post', () => {
+    const post : PostModel= {id: 1, title: 'sivalabs', url: 'https://sivalabs.in', content: 'sivalabs blog'};
+
+    render(<MemoryRouter><Post  {...post}/></MemoryRouter>);
+    const textElements = screen.getAllByText(/sivalabs/i);
+    expect(textElements.length).toBeGreaterThan(0)
+});

src/components/links/TagNav.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import {PostModel} from "../../models/PostModels";
+
+const Post: React.FC<PostModel> = (post) => {
+
+    return (
+        <div className="alert alert-primary" role="alert">
+            <h3 className="alert-heading">
+                <a href={post.url} target="_blank" rel="noopener noreferrer">{post.title}</a>
+            </h3>
+            <p className="mb-0">
+                {post.content}
+            </p>
+        </div>
+    );
+}
+
+export default Post;

src/components/links/Pagination.test.tsx renamed to src/components/posts/Pagination.test.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import Post from "./Post";
+import {PostsModel} from "../../models/PostModels";
+
+const PostList: React.FC<PostsModel> = (links) => {
+
+    return (
+        <div>
+            {links.data.map(link => <Post key={link.id} {...link}/>)}
+        </div>
+    );
+};
+
+export default PostList;

src/components/links/Pagination.tsx renamed to src/components/posts/Pagination.tsx

@@ -11,12 +11,19 @@ const Search : React.FC<SearchProps>= ( props ) => {
         <div className={'pb-2'}>
             <form className="row g-3 align-items-center">
                 <div className="col">
-                    <input className="col-md-12 form-control" type="search" name="query" placeholder="Search for"
+                    <input className="col-md-12 form-control"
+                           type="search"
+                           name="query"
+                           placeholder="Enter search keyword"
                            value={query}
                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setQuery(e.target.value)}/>
                 </div>
                 <div className="col-auto">
-                    <button className="btn btn-primary btn" type="button" onClick={(e) => props.ClickHandler(query)}>Search</button>
+                    <button className="btn btn-primary btn"
+                            type="button"
+                            onClick={(e) => props.ClickHandler(query)}>
+                        Search
+                    </button>
                 </div>
             </form>
         </div>

src/components/posts/Post.test.tsx

@@ -1,13 +1,13 @@
 
-export interface LinkModel {
+export interface PostModel {
     id: number,
     title: string,
     url: string,
-    tags: string[]
+    content: string
 }
 
-export interface LinksModel {
-    data: LinkModel[],
+export interface PostsModel {
+    data: PostModel[],
     totalElements: number,
     pageNumber: number,
     totalPages: number,
@@ -17,9 +17,8 @@ export interface LinksModel {
     hasPrevious: boolean;
 }
 
-export interface LinksPaginationModel {
-    tag?: string
+export interface PostsPaginationModel {
     query?: string
     page?: number
-    links: LinksModel
+    posts: PostsModel
 }