diff --git a/src/app/antd.css b/src/app/antd.css index 4f6acad..fd96585 100644 --- a/src/app/antd.css +++ b/src/app/antd.css @@ -20,9 +20,13 @@ .ant-input-affix-wrapper, .ant-input-group-addon, .ant-dropdown-menu, -.ant-popover-inner { +.ant-popover-inner, +.ant-modal-content { border-radius: 6px; } +.ant-modal-confirm .ant-modal-body { + padding: 25px 25px; +} @media only screen and (max-width: 600px) { .ant-btn { diff --git a/src/app/components/Navbar/index.js b/src/app/components/Navbar/index.js index 69fe92a..a3edae2 100644 --- a/src/app/components/Navbar/index.js +++ b/src/app/components/Navbar/index.js @@ -6,7 +6,8 @@ import { connect } from "react-redux"; import { routes } from "../../router/routes"; import actions from "../../../store/auth/actions"; -import { userStorage } from "../../../utils"; +import { logger, userStorage } from "../../../utils"; +import { config } from "../../../config"; const { logout } = actions; @@ -22,11 +23,15 @@ class Navbar extends Component { componentDidMount() { document.addEventListener("scroll", () => { let navbar = document.getElementById("Navbar"); - let sticky = navbar.offsetTop; - if (window.pageYOffset > sticky) { - navbar.classList.add("Navbar-fixed"); - } else { - navbar.classList.remove("Navbar-fixed"); + try { + let sticky = navbar?.offsetTop; + if (window.pageYOffset > sticky) { + navbar?.classList?.add("Navbar-fixed"); + } else { + navbar?.classList?.remove("Navbar-fixed"); + } + } catch (err) { + logger.err(err); } }); } @@ -54,10 +59,10 @@ class Navbar extends Component { )}
{this.props.api && this.state.user.is_superuser && ( - + )} @@ -72,7 +77,7 @@ class Navbar extends Component { {this.props.search && ( diff --git a/src/app/pages/CreateBlog/index.js b/src/app/pages/CreateBlog/index.js index d878110..ff16e34 100644 --- a/src/app/pages/CreateBlog/index.js +++ b/src/app/pages/CreateBlog/index.js @@ -14,6 +14,7 @@ import { setContent, setSubmitType, handleBlog, + resetStore, } from "../../../store/blog/actions"; class CreateBlog extends Component { @@ -26,6 +27,10 @@ class CreateBlog extends Component { this.props.setContent(EditorState.createEmpty()); } + componentWillUnmount() { + this.props.resetStore(); + } + render() { return (
@@ -113,6 +118,7 @@ const mapStateToProps = (state) => { }; export default connect(mapStateToProps, { + resetStore, setTitle, setContent, setSubmitType, diff --git a/src/app/pages/EditBlog/index.js b/src/app/pages/EditBlog/index.js index 1f20eca..40cccf7 100644 --- a/src/app/pages/EditBlog/index.js +++ b/src/app/pages/EditBlog/index.js @@ -9,6 +9,7 @@ import { Navbar } from "../../components"; import { Link } from "react-router-dom"; import { routes } from "../../router/routes"; import { + resetStore, setTitle, setContent, setSubmitType, @@ -26,6 +27,10 @@ class UpdateBlog extends Component { this.props.getBlogData(this.props.match.params.blogId); } + componentWillUnmount() { + this.props.resetStore(); + } + render() { return (
@@ -46,7 +51,8 @@ class UpdateBlog extends Component { } layout="vertical" requiredMark={false} - initialValues={{ title: this.props.blog.title }} + key={!this?.props?.blog?.titleChanged && this?.props?.blog?.title} + // initialValues={{ title: this?.props?.blog?.title }} > this.props.setTitle(e.target.value)} size="large" placeholder="Type your title here..." @@ -125,4 +132,5 @@ export default connect(mapStateToProps, { setSubmitType, handleBlog, getBlogData, + resetStore, })(UpdateBlog); diff --git a/src/app/pages/Feed/index.css b/src/app/pages/Feed/index.css index e54b7ce..77ab941 100644 --- a/src/app/pages/Feed/index.css +++ b/src/app/pages/Feed/index.css @@ -15,6 +15,10 @@ border-radius: 10px; border: 2px solid rgb(230, 230, 230); } +.Blog-drop-icon { + padding: 10px; + box-sizing: unset; +} .Blog-drop { padding: 10px 20px; } @@ -50,6 +54,11 @@ justify-content: space-around; margin-left: 15px; } +.Blog-Head span h3 { + max-width: 800px; + overflow: hidden; + text-overflow: ellipsis; +} @media only screen and (max-width: 600px) { .Blog-Head-left a { @@ -59,6 +68,9 @@ .Blog-Head span { margin-left: 8px; + max-width: 150px; + overflow: hidden; + text-overflow: ellipsis; } } .Blog-Head img { diff --git a/src/app/pages/Feed/index.js b/src/app/pages/Feed/index.js index 7b6f95d..cd58700 100644 --- a/src/app/pages/Feed/index.js +++ b/src/app/pages/Feed/index.js @@ -29,133 +29,139 @@ class Feed extends Component {
- {!this.props?.blogs?.loading ? ( - this.props?.blogs?.blogs?.length < 1 ? ( - - - - No Blogs Available. Publish one. - - - - ) : ( - this.props?.blogs?.blogs?.map((blog) => ( -
-
-
- (e.target.src = writerPlaceholder)} - alt="dp" - /> - -

{blog.title}

- - } - style={{ padding: 0 }} - > - - {blog.author.username} - - - -
-
- {blog.author.username === this.state.user.username ? ( - - - - - - View Blog - - - - - - - - Edit Blog - - - - -
- DeleteBlog(blog?.pk, blog?.title, () => - this.props.removeBlogFromFeed(blog?.pk) - ) - } - > - - - Delete Blog - -
- - - } - > - - - ) : ( - - + {this.props?.blogs?.loading ? ( + + ) : this.props?.blogs?.blogs?.length < 1 ? ( + + + + No Blogs Available. Publish one. + + + + ) : ( + this.props?.blogs?.blogs?.map((blog) => ( +
+
+
+ (e.target.src = writerPlaceholder)} + alt="dp" + /> + +

{blog.title}

+ + } + style={{ padding: 0 }} + > + + {blog.author.username} - )} -
-
-
- {window.screen.width > 600 ? ( -

{ellipsis(blog.summary, 600)}

+ + +
+
+ {blog.author.username === this.state.user.username ? ( + + + + + + View Blog + + + + + + + + Edit Blog + + + + +
+ DeleteBlog(blog?.pk, blog?.title, () => + this.props.removeBlogFromFeed(blog?.pk) + ) + } + > + + + Delete Blog + +
+ + + } + > + + ) : ( -

{ellipsis(blog.summary, 300)}

+ + + )}
-
-
this.props.likeBlog(blog.pk)}> - -
-
this.props.saveBlog(blog.pk)}> - -
-
-
- )) - ) - ) : ( - +
+
+ {window.screen.width > 600 ? ( +

{ellipsis(blog.summary, 600)}

+ ) : ( +

{ellipsis(blog.summary, 300)}

+ )} +
+
+ {console.log(blog.likesList)} +
this.props.likeBlog(blog.pk)}> + +
+
this.props.saveBlog(blog.pk)}> + +
+
+
+ )) )}
diff --git a/src/app/pages/Profile/index.css b/src/app/pages/Profile/index.css index 917dcc2..a0015a1 100644 --- a/src/app/pages/Profile/index.css +++ b/src/app/pages/Profile/index.css @@ -73,6 +73,7 @@ .profile-nav { width: 100%; overflow: hidden; + padding-bottom: 80px; } .profile-nav menu { width: 100%; @@ -135,7 +136,7 @@ align-items: center; justify-content: space-between; border: 1px solid rgb(230, 230, 230); - width: 35%; + width: 32vw; padding: 10px; margin: 20px; border-radius: 10px; @@ -166,6 +167,9 @@ .prof-tab-card h3 { margin: 0; color: black; + max-width: 500px; + overflow: hidden; + text-overflow: ellipsis; } @media only screen and (max-width: 1024px) { @@ -203,6 +207,9 @@ max-height: unset; overflow-y: scroll; } + .prof-tab-card-content { + margin-left: 12px; + } .prof-tab-card { width: 80vw; margin: 10px; @@ -213,6 +220,9 @@ } .prof-tab-card h3 { font-size: 14px; + max-width: 120px; + overflow: hidden; + text-overflow: ellipsis; } .prof-tab-card time { font-size: 12px; diff --git a/src/app/pages/Search/index.css b/src/app/pages/Search/index.css index cf59864..6fd30fe 100644 --- a/src/app/pages/Search/index.css +++ b/src/app/pages/Search/index.css @@ -87,10 +87,10 @@ .search-card-dtl h4 { font-size: 15px; - width: 140px; + max-width: 140px; } .search-card-dtl p { font-size: 13px; - width: 140px; + max-width: 140px; } } diff --git a/src/app/pages/Search/index.js b/src/app/pages/Search/index.js index e5c877a..24820ac 100644 --- a/src/app/pages/Search/index.js +++ b/src/app/pages/Search/index.js @@ -3,6 +3,7 @@ import "./index.css"; import { Component } from "react"; import { Spin, Button } from "antd"; import { Link } from "react-router-dom"; +import { connect } from "react-redux"; import { Navbar } from "../../components"; @@ -10,48 +11,19 @@ import { writerPlaceholder } from "../../../static"; import { userStorage } from "../../../utils"; import { routes } from "../../router/routes"; import { - followWriterService, - getWritersService, - searchWriterService, -} from "../../../services/api/writer.api"; + getInitialData, + searchQuery, + postFollowResultUpdate, +} from "../../../store/search/actions"; +import { followOrUnfollow } from "../../../store/common/actions"; class Search extends Component { state = { user: userStorage.getUser(), - results: [], - username: "", - loading: true, - msg: "Start typing to search ...", - followingUser: -1, - }; - - handleFollow = async (pk) => { - this.setState({ followingUser: pk }); - const response = await followWriterService(this.state.user.pk, pk); - if (response.status === 200) { - this.handleSearch(this.state.username); - this.setState({ followingUser: -1 }); - } - }; - - handleSearch = async (val) => { - this.setState({ loading: true, msg: "", username: val }); - const response = await searchWriterService({ - username: this.state.username, - }); - if (response.status === 200) - this.setState({ - results: response.data, - loading: false, - msg: `${response.data.length} results found`, - }); - else this.setState({ loading: false, msg: "Error in fetching results" }); }; componentDidMount() { - getWritersService().then((result) => { - this.setState({ results: result.data, loading: false }); - }); + this.props.getInitialData(); } render() { @@ -61,16 +33,16 @@ class Search extends Component {
this.handleSearch(target.value)} + onChange={({ target }) => this.props.searchQuery(target.value)} placeholder="Start typing to search ..." /> search
- {this.state.loading ? : this.state.msg} + {this.props.search.loading ? : this.props.search.msg}
- {this.state.results.map((result) => ( + {this.props.search.results.map((result) => (
@@ -86,15 +58,19 @@ class Search extends Component {
- {result.username !== this.state.user.username && + {result.pk !== this.state.user.pk && (result.followers.some( (follower) => follower.username === this.state.user.username ) ? ( @@ -102,8 +78,12 @@ class Search extends Component { @@ -117,4 +97,13 @@ class Search extends Component { } } -export default Search; +const mapStateToProps = (state) => { + return { search: state.search, followingPk: state.common.followingPk }; +}; + +export default connect(mapStateToProps, { + searchQuery, + getInitialData, + followOrUnfollow, + postFollowResultUpdate, +})(Search); diff --git a/src/app/pages/Settings/index.js b/src/app/pages/Settings/index.js index 4ae21fc..09201af 100644 --- a/src/app/pages/Settings/index.js +++ b/src/app/pages/Settings/index.js @@ -14,7 +14,7 @@ class Settings extends Component { render() { return (
- +