Rename posts to links

Author: sivaprasadreddy

src/App.tsx

@@ -1,12 +1,11 @@
 import React from "react";
 import {Route, Switch, Redirect} from "react-router-dom";
-import Posts from "./pages/posts/Posts";
+import Links from "./pages/links/Links";
 import Login from "./pages/login/Login";
 import Registration from "./pages/registration/Registration";
 import NavBar from "./components/layout/NavBar";
-import NewPost from "./pages/posts/NewPost";
+import NewLink from "./pages/links/NewLink";
 import NotFound from "./pages/error/NotFound";
-import UserProfile from "./pages/profile/UserProfile";
 
 const App = () => (
     <div className="App">
@@ -15,19 +14,18 @@ const App = () => (
             <Switch>
                 <Route path="/login" component={Login}/>
                 <Route path="/registration" component={Registration}/>
-                <Route path="/profile" component={UserProfile}/>
-                <Route path="/posts/new" component={NewPost}/>
+                <Route path="/links/new" component={NewLink}/>
 
-                <Route path="/posts" component={Posts} />
-                <Redirect exact path="/" to="/posts"/>
+                <Route path="/links" component={Links} />
+                <Redirect exact path="/" to="/links"/>
                 <Route path="*">
                     <NotFound />
                 </Route>
             </Switch>
         </main>
         <footer className="footer">
             <div className="container">
-                <p className="text-center">SivaLabs &copy; 2020</p>
+                <p className="text-center">SivaLabs &copy; 2022</p>
             </div>
         </footer>
     </div>

src/components/layout/NavBar.tsx

@@ -16,8 +16,8 @@ const NavBar = () => {
         authenticatedLinks = (
             <ul className="navbar-nav">
                 <li className="nav-item">
-                    <NavLink className="nav-link" to="/posts/new">
-                        <i className="fas fa-plus-circle"/> Add
+                    <NavLink className="nav-link" to="/links/new">
+                        <i className="fas fa-plus-circle"/> Add Link
                     </NavLink>
                 </li>
                 <li className="nav-item dropdown">
@@ -26,11 +26,6 @@ const NavBar = () => {
                         <i className="fas fa-user"/> <span>{user.user.name}</span>
                     </NavLink>
                     <div className="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
-                        <NavLink className="dropdown-item" to="/profile">
-                            <i className="fas fa-address-card"/> My Profile
-                        </NavLink>
-                        <div className="dropdown-divider"/>
-
                         <NavLink className="dropdown-item" to="/logout" onClick={logoutHandler}>
                             <i className="fas fa-sign-out-alt"/> Logout
                         </NavLink>

src/components/posts/Post.tsx renamed to src/components/links/Link.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 import {NavLink} from "react-router-dom";
-import {PostModel} from "../../models/PostModels";
+import {LinkModel} from "../../models/LinkModels";
 
-const Post: React.FC<PostModel> = (post) => {
-    const tags = post.tags.map(tag => {
+const Link: React.FC<LinkModel> = (link) => {
+    const tags = link.tags.map(tag => {
         return (<span key={tag} style={{"fontSize": "20px"}}>
-                    <NavLink className="badge badge-primary" to={`/posts?tag=${tag}`}>
+                    <NavLink className="badge badge-primary" to={`/links?tag=${tag}`}>
                         {tag}
                     </NavLink>
                 &nbsp;
@@ -14,7 +14,7 @@ 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>
+                <a href={link.url} target="_blank" rel="noopener noreferrer">{link.title}</a>
             </h3>
             <p className="mb-0">
                 {tags}
@@ -23,4 +23,4 @@ const Post: React.FC<PostModel> = (post) => {
     );
 }
 
-export default Post;
+export default Link;

src/components/links/LinkList.tsx

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

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

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

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

@@ -16,7 +16,7 @@ const TagNav :React.FC<TagList> = (tagList) => {
             <div className="list-group list-group-flush">
                 {tagList.tags.map(tag => {
                     return(
-                        <NavLink to={`/posts?tag=${tag.name}`} key={tag.id}
+                        <NavLink to={`/links?tag=${tag.name}`} key={tag.id}
                            className="list-group-item list-group-item-action badge badge-primary"
                         >
                             <i className="fas fa-tag"/>&nbsp;

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

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

src/components/posts/PostList.tsx

@@ -1,24 +1,24 @@
 import React, {useState, useEffect} from "react";
 
-import PostService from '../../services/PostService';
-import PostList from "../../components/posts/PostList";
-import TagNav from "../../components/posts/TagNav";
-import {PostsModel, PostsPaginationModel} from "../../models/PostModels";
-import Search from "../../components/posts/Search";
-import Pagination from "../../components/posts/Pagination";
+import LinkService from '../../services/LinkService';
+import LinkList from "../../components/links/LinkList";
+import TagNav from "../../components/links/TagNav";
+import {LinksModel, LinksPaginationModel} from "../../models/LinkModels";
+import Search from "../../components/links/Search";
+import Pagination from "../../components/links/Pagination";
 import { useHistory, RouteComponentProps} from "react-router-dom";
 
-type PostsState = {
+type LinksState = {
     tag?: string
     query?: string
     page?: number
 }
 
-type PostsProps = RouteComponentProps<{}, {}, PostsState>;
+type LinksProps = RouteComponentProps<{}, {}, LinksState>;
 
-const Posts : React.FC<PostsProps> = ( props ) => {
+const Links : React.FC<LinksProps> = (props ) => {
     const history = useHistory();
-    const postService = new PostService();
+    const linkService = new LinkService();
 
     const queryParams = new URLSearchParams(props.location.search);
 
@@ -31,7 +31,7 @@ const Posts : React.FC<PostsProps> = ( props ) => {
     //console.log("query:", query)
     //console.log("tag:", tag)
 
-    const initialValue: PostsModel = {
+    const initialValue: LinksModel = {
         hasNext: false,
         hasPrevious: false,
         isFirst: false,
@@ -40,16 +40,16 @@ const Posts : React.FC<PostsProps> = ( props ) => {
         totalElements: 0,
         totalPages: 0,
         data: []}
-    const [posts, setPosts] = useState(initialValue)
+    const [links, setLinks] = useState(initialValue)
     const [tags, setTags] = useState([])
-    let postsPaginationModel : PostsPaginationModel = {
+    let linksPaginationModel : LinksPaginationModel = {
         page: page,
         tag: tag,
         query: query,
-        posts: posts || {}
+        links: links || {}
     }
     useEffect(() => {
-        postService.fetchTags()
+        linkService.fetchTags()
             .then(response => {
                 setTags(response.data)
             })
@@ -59,17 +59,17 @@ const Posts : React.FC<PostsProps> = ( props ) => {
     }, []);
 
     useEffect(() => {
-        postService.fetchPosts(page, tag, query)
+        linkService.fetchLinks(page, tag, query)
             .then(response => {
-                setPosts({...response.data})
+                setLinks({...response.data})
             })
             .catch(e => {
-                alert('Failed to get posts')
+                alert('Failed to get links')
             });
     }, [page, tag, query]);
 
     const searchHandler = (query: string) => {
-        history.push(`/posts?query=${query}`);
+        history.push(`/links?query=${query}`);
     }
     return (
         <div className="row">
@@ -78,9 +78,9 @@ const Posts : React.FC<PostsProps> = ( props ) => {
                     <div className="row">
                         <div className="offset-1 col-8">
                             <Search ClickHandler={searchHandler}/>
-                            <Pagination {...postsPaginationModel} />
-                            <PostList {...posts}/>
-                            <Pagination {...postsPaginationModel} />
+                            <Pagination {...linksPaginationModel} />
+                            <LinkList {...links}/>
+                            <Pagination {...linksPaginationModel} />
                         </div>
                         <div className="col-3">
                             <TagNav tags={tags}/>
@@ -92,4 +92,4 @@ const Posts : React.FC<PostsProps> = ( props ) => {
     );
 };
 
-export default Posts;
+export default Links;