15 task delete btn

package.json

@@ -9,9 +9,11 @@
   "author": "BIT",
   "license": "ISC",
   "dependencies": {
+    "axios": "^0.17.1",
     "babel-polyfill": "^6.26.0",
     "react": "^16.1.0",
     "react-dom": "^16.1.0",
+    "react-modal": "^3.1.3",
     "react-router-dom": "^4.2.2"
   },
   "devDependencies": {

reminder.txt

@@ -0,0 +1,5 @@
+-izvuci podatke za svakog user-a preko profile DTO
+-uradi validaciju edit profile forme
+-sa stranice People do svog naloga treba da dodjes na stranicu profile koja ima edit dugme, a ne na stranicu People/:userID
+-sredi Search dugme
+-sredi div za error na login formi i na register formi

src/components/app.js

@@ -1,15 +1,35 @@
 import React from "react";
+import LoginPage from "./login/loginPage";
+import LoginForm from "./login/loginForm";
+import RegisterForm from "./login/registerForm";
+import { Switch, Route, Redirect } from "react-router-dom";
+import MainPage from "./common/mainPage";
+import AuthenticationService from "./../services/authenticationService";
 
-import HelloWorld from "./helloWorld/helloWorld";
 
 class App extends React.Component {
     constructor(props) {
         super(props);
+        this.authenticationService = new AuthenticationService();
     }
 
+
     render() {
-        return <HelloWorld />;
+
+        if (!this.authenticationService.isUserAuthenticated()) {
+            return (
+                <Switch>
+                    <Redirect exact from="/" to="/login" />
+                    <Route exact path="/login" component={LoginPage} />
+                    <Route exact path="/register" component={LoginPage} />
+                </Switch>
+
+            );
+        }
+
+        return <MainPage />;
     }
 }
 
+
 export default App;

src/components/common/footer.js

@@ -0,0 +1,12 @@
+import React from "react";
+
+const Footer = () => {
+    return (
+
+        <footer className="footer">
+            <p>Copyright Ⓒ  <span > Team Candies </span></p>
+        </footer>
+    );
+
+};
+export default Footer;

src/components/common/header.js

@@ -0,0 +1,36 @@
+import React from "react";
+import LogOutButton from "../common/logOutButton";
+import { Link } from "react-router-dom";
+
+const Header = () => {
+
+    return (
+        <div className="navbar navbar-expand-lg navbar-dark bg-primary">
+            <div className='container'>
+                <Link className="navbar-brand" to="/feed">Bitbook</Link>
+
+                <div className="collapse navbar-collapse" id="navbarTogglerDemo03">
+                    <ul className="navbar-nav mr-auto mt-2 mt-lg-0">
+                        <li className="nav-item active">
+                            <Link className="nav-link" to="/profile">Profile<span className="sr-only">(current)</span></Link>
+                        </li>
+                        <li className="nav-item active">
+                            <Link className="nav-link" to="/people">People<span className="sr-only">(current)</span></Link>
+                        </li>
+                        <li className="nav-item active">
+                            <Link className="nav-link" to="/feed">Feed<span className="sr-only">(current)</span></Link>
+                        </li>
+                    </ul>
+
+                    <LogOutButton />
+                </div>
+            </div>
+        </div>
+
+
+
+
+    );
+};
+
+export default Header;

src/components/common/logOutButton.js

@@ -0,0 +1,26 @@
+import React from "react";
+import AuthenticationService from "../../services/authenticationService";
+
+class LogOutButton extends React.Component {
+    constructor(props) {
+        super(props);
+        this.authenticationService = new AuthenticationService();
+        this.handleClickLogOut = this.handleClickLogOut.bind(this);
+    }
+
+    handleClickLogOut() {
+        this.authenticationService.logOut();
+    }
+
+    render() {
+        return (<button className="btn btn-secondary btn" type="button" name="action" id="logout" onClick={this.handleClickLogOut}>
+            LogOut</button>);
+    }
+}
+
+export default LogOutButton;
+
+
+
+
+

src/components/common/mainPage.js

@@ -0,0 +1,34 @@
+import React from "react";
+import { Switch, Route } from "react-router-dom";
+
+import Header from "./header";
+import Footer from "./footer";
+import ProfilePage from "../profile/profilePage";
+import People from "../peoplePage/people";
+import UserProfile from "../peoplePage/userProfile";
+import FeedPage from "../feed/FeedPage";
+import SinglePostPage from "../feed/SinglePostPage";
+
+
+class MainPage extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        return (
+            <div>
+                <Header />
+                <Switch>
+                    <Route exact path="/profile" component={ProfilePage} />
+                    <Route exact path="/people" component={People} />
+                    <Route path="/people/:id" component={UserProfile} />
+                    <Route exact path="/feed" component={FeedPage} />
+                    <Route path="/feed/:type/:id" component={SinglePostPage} />
+                </Switch>
+                <Footer />
+            </div>
+        );
+    }
+};
+
+export default MainPage;

src/components/common/searchInput.js

@@ -0,0 +1,32 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+
+export default class Search extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            searchString: ""
+        };
+        this.handleChange = this.handleChange.bind(this);
+    }
+
+    handleChange(event) {
+        const value = event.target.value;
+        this.setState({ searchString: value });
+
+        this.props.useSearchString(value);
+    }
+
+    render() {
+        return (<div className="col-12">
+            <input className="searchInput" value={this.state.searchString} onChange={this.handleChange} placeholder="Search" />
+        </div>
+        );
+    }
+
+}
+Search.propTypes = {
+    useSearchString: PropTypes.func,
+};
+

src/components/feed/AllPosts.js

@@ -0,0 +1,59 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import PostOnFeedPage from "./postTypeComponents/PostOnFeedPage";
+
+import FilterList from "./FilterList";
+
+class AllPosts extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            filterType: "all"
+        };
+        this.filterSelected = this.filterSelected.bind(this);
+        this.refreshPage = this.refreshPage.bind(this);
+    }
+
+
+
+    // getComponentByType(post, type) {
+
+    //     if (type === "text" && (this.state.filterType == "text" || this.state.filterType == "all")) {
+    //         return <PostOnFeedPage post={post} key={post.id} />;
+    //     }
+    //     if (type === "video" && (this.state.filterType == "video" || this.state.filterType == "all")) {
+    //         return <PostOnFeedPage post={post} key={post.id} />;
+    //     }
+    //     if (type === "image" && (this.state.filterType == "image" || this.state.filterType == "all")) {
+    //         return <PostOnFeedPage post={post} key={post.id} />;
+    //     }
+
+    //     return "";
+    // }
+
+    filterSelected(type) {
+        this.setState({
+            filterType: type
+        });
+
+    }
+    refreshPage(){
+        this.props.refreshPage();
+    }
+    render() {
+        return (
+            <div>
+                <FilterList onFilterSelected={this.filterSelected} />
+                {this.props.posts.map(post => <PostOnFeedPage key={post.id} post={post} refreshPage={this.refreshPage} />)}
+            </div>
+        );
+    }
+}
+AllPosts.propTypes = {
+    posts: PropTypes.array,
+    refreshPage: PropTypes.func
+
+};
+
+export default AllPosts;

src/components/feed/CommentsForm.js

@@ -0,0 +1,40 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+class CommentsForm extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            body: "",
+        };
+        this.handleChange = this.handleChange.bind(this);
+        this.handleClick = this.handleClick.bind(this);
+    }
+    handleChange(event) {
+        this.setState({ body: event.target.value });
+    }
+    handleClick() {
+        this.props.saveComment(this.state.body);
+        this.setState({body:""});
+    }
+
+
+    render() {
+        return (
+            <div className="container">
+                <div className="row videoPost">
+                    <input type="text" value={this.state.body} onChange={this.handleChange} />
+                    <button className="commentBtn" onClick={this.handleClick}>Comment</button>
+                </div>
+            </div>
+
+        );
+    };
+}
+
+CommentsForm.propTypes = {
+    postId: PropTypes.number,
+    type: PropTypes.string,
+    saveComment: PropTypes.func
+};
+export default CommentsForm;

src/components/feed/FilterList.js

@@ -0,0 +1,34 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+
+class FilterList extends Component {
+
+    constructor(props) {
+        super(props);
+
+    }
+    handleClickImage() {
+    }
+
+    render() {
+        return (
+            <div className="col-1 offset-10">
+                <div className="btn-group">
+                    <button type="button" className="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        Filter posts</button>
+                    <div className="dropdown-menu">
+                        <button className="dropdown-item" onClick={() => this.props.onFilterSelected("image")}>Images</button>
+                        <button className="dropdown-item" onClick={() => this.props.onFilterSelected("text")}>Posts</button>
+                        <button className="dropdown-item" onClick={() => this.props.onFilterSelected("video")}>Videos</button>
+                        <button className="dropdown-item" onClick={() => this.props.onFilterSelected("all")}>All</button>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+FilterList.propTypes = {
+    onFilterSelected: PropTypes.func,
+
+};
+export default FilterList;

src/components/feed/ListOfComments.js

@@ -0,0 +1,25 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import SingleComment from "./postTypeComponents/SingleComment";
+
+class ListOfComments extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <div>
+                {this.props.allComments.map(comment => <SingleComment comment={comment} key={comment.id} />)}
+            </div>
+        );
+    }
+}
+ListOfComments.propTypes = {
+    postId: PropTypes.number,
+    allComments: PropTypes.array
+
+
+};
+export default ListOfComments; 

src/components/feed/Pagination.js

@@ -0,0 +1,22 @@
+import React, { Component } from "react";
+import { Link } from "react-router-dom";
+
+class Pagination extends Component {
+    render() {
+        return (
+            <nav aria-label="Page navigation example">
+                <ul className="pagination">
+                    <li className="page-item"><button className="page-link" onClick={this.showPosts}>Previous</button></li>
+                    <li className="page-item"><button className="page-link" >1</button></li>
+                    <li className="page-item"><button className="page-link" >2</button></li>
+                    <li className="page-item"><button className="page-link" >3</button></li>
+                    <li className="page-item"><button className="page-link" >Next</button></li>
+                </ul>
+            </nav>
+        );
+    }
+}
+
+export default Pagination;
+
+