Skip to content

Commit

Permalink
improved ux
Browse files Browse the repository at this point in the history
  • Loading branch information
@nan-dan-unni
nan-dan-unni committed Jul 6, 2021
1 parent b4846e4 commit ef6befd
Show file tree
Hide file tree
Showing 7 changed files with 154 additions and 68 deletions.
3 changes: 3 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@reduxjs/toolkit": "^1.6.0",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
Expand All @@ -15,11 +16,13 @@
"react-dom": "^17.0.2",
"react-draft-wysiwyg": "^1.14.7",
"react-loading-skeleton": "^2.2.0",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
"scripts": {
"dev": "react-scripts start",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
Expand Down
129 changes: 63 additions & 66 deletions src/app/pages/Writers/ViewWriter.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import React, { Component } from "react";
import Skeleton from "react-loading-skeleton";

import { Link } from "react-router-dom";
import "./Writers.css";
import { routes } from "../../router/routes";
import { Button, Navbar } from "../../components";
import {
logoutWriterAPI,
Expand All @@ -15,18 +16,18 @@ function Skltn() {
<span>
<div className="Profile">
<center>
<Skeleton circle={true} height={"22.5vh"} width={"22.5vh"} />
<Skeleton circle={true} size="large" width={"22.5vh"} />
</center>
<div className="Prof-dtl">
<center>
<nm>
<Skeleton width={"20vw"} />{" "}
<Skeleton width={"20vw"} />
</nm>
<br />
<unm>
<Skeleton width={"5vw"} />{" "}
<Skeleton width={"5vw"} />
</unm>
&nbsp; <b>|</b> &nbsp;{" "}
&nbsp; <b>|</b> &nbsp;
<eml>
<Skeleton width={"6vw"} />
</eml>
Expand Down Expand Up @@ -124,6 +125,7 @@ class ViewAccount extends Component {
};
this.handleLogout = this.handleLogout.bind(this);
this.handleFollow = this.handleFollow.bind(this);
this.handleTabChange = this.handleTabChange.bind(this);
}
handleLogout = () => {
logoutWriterAPI(this.state.user.pk);
Expand All @@ -140,6 +142,9 @@ class ViewAccount extends Component {
});
};
componentDidMount() {
this.handleTabChange();
}
handleTabChange = () => {
getWriterAPI(this.props.match.params.username).then((res) => {
const tab = new URLSearchParams(this.props.location.search).get("tab");
this.setState({
Expand All @@ -158,32 +163,38 @@ class ViewAccount extends Component {
if (!(this.state.writer.username === this.state.user.username)) {
if (["archived", "saved"].indexOf(this.state.tab) > 0) {
this.setState({ published: " item-active", tab: "published" });
console.log(this.state.published);
}
}
["following", "followers", "published", "archived", "saved"].forEach(
(tab) => {
if (!(tab === this.state.tab)) {
this.setState({ [tab]: "" });
}
}
);
});
}
};
render() {
const writer = this.state.writer;
const user = this.state.user;
return (
<div className="ViewAccount">
<Navbar>
<a href="/logout/" onClick={this.handleLogout}>
<Link to={routes.LOGOUT} onClick={this.handleLogout}>
<i class="material-icons">power_settings_new</i>
<br />
<z>Logout</z>
</a>
<a href={`/writer/view/${this.state.user.username}`}>
</Link>
<Link to={routes.VIEW_WRITER(this.state.user.username)}>
<i class="material-icons">settings</i>
<br />
<z> Settings</z>
</a>
<a href="/feed/">
</Link>
<Link to={routes.FEED}>
<i class="material-icons">home</i>
<br />
<z> Feeds</z>
</a>
</Link>
</Navbar>
{this.state.loaded ? (
<span>
Expand All @@ -209,27 +220,27 @@ class ViewAccount extends Component {
)}

<div className="Prof-math">
<a href="?tab=published">
<Link to="?tab=published" onClick={this.handleTabChange}>
<div className="math-dtl">
<n>{writer.no_of_blogs}</n>
<br />
<t>Blogs</t>
</div>
</a>
<a href="?tab=following">
</Link>
<Link to="?tab=following" onClick={this.handleTabChange}>
<div className="math-dtl">
<n>{writer.no_of_following}</n>
<br />
<t>Following</t>
</div>
</a>
<a href="?tab=followers">
</Link>
<Link to="?tab=followers" onClick={this.handleTabChange}>
<div className="math-dtl">
<n>{writer.no_of_followers}</n>
<br />
<t>Followers</t>
</div>
</a>
</Link>
</div>

<bio>{writer.bio}</bio>
Expand Down Expand Up @@ -285,45 +296,43 @@ class ViewAccount extends Component {
}
>
<div className={`Prof-Nav-item${this.state.following}`}>
<a href="?tab=following">
<Link to="?tab=following" onClick={this.handleTabChange}>
<i class="material-icons">person</i>
<br />
<z>Following</z>
</a>
</Link>
</div>
<div className={`Prof-Nav-item${this.state.followers}`}>
<a href="?tab=followers">
<Link to="?tab=followers" onClick={this.handleTabChange}>
<i class="material-icons">people</i>
<br />
<z>Followers</z>
</a>
</Link>
</div>
<div className={`Prof-Nav-item${this.state.published}`}>
<a href="?tab=published">
<Link to="?tab=published" onClick={this.handleTabChange}>
<i class="material-icons">library_books</i>
<br />
<z>Published</z>
</a>
</Link>
</div>
{user.username === writer.username ? (
{user.username === writer.username && (
<span style={{ display: "flex" }}>
<div className={`Prof-Nav-item${this.state.archived}`}>
<a href="?tab=archived">
<Link to="?tab=archived" onClick={this.handleTabChange}>
<i class="material-icons">archive</i>
<br />
<z>Archived</z>
</a>
</Link>
</div>
<div className={`Prof-Nav-item${this.state.saved}`}>
<a href="?tab=saved">
<Link to="?tab=saved" onClick={this.handleTabChange}>
<i class="material-icons">bookmarks</i>
<br />
<z>Saved</z>
</a>
</Link>
</div>
</span>
) : (
<span></span>
)}
</div>
</span>
Expand All @@ -332,11 +341,11 @@ class ViewAccount extends Component {
)}
<br />

{this.state.tab === "following" ? (
{this.state.tab === "following" && (
<div className="wrt-dtl">
<div className="dtl">
{writer.following.map((avatar) => (
<a href={`/writer/view/${avatar.username}`}>
<Link to={routes.VIEW_WRITER(avatar.username)}>
<div className="wrt-content">
<div className="search-result">
<div className="result-img">
Expand All @@ -352,21 +361,19 @@ class ViewAccount extends Component {
<div className="result-divider"></div>
<br />
</div>
</a>
))}{" "}
</Link>
))}
<br />
<br />
</div>
</div>
) : (
<div></div>
)}

{this.state.tab === "followers" ? (
{this.state.tab === "followers" && (
<div className="wrt-dtl">
<div className="dtl">
{writer.followers.map((avatar) => (
<a href={`/writer/view/${avatar.username}`}>
<Link to={routes.VIEW_WRITER(avatar.username)}>
<div className="wrt-content">
<div className="search-result">
<div className="result-img">
Expand All @@ -382,21 +389,19 @@ class ViewAccount extends Component {
<div className="result-divider"></div>
<br />
</div>
</a>
))}{" "}
</Link>
))}
<br />
<br />
</div>
</div>
) : (
<div></div>
)}

{this.state.tab === "published" ? (
{this.state.tab === "published" && (
<div className="item-dtl">
<div className="dtl">
{writer.pub_blogs.map((blog) => (
<a href={`/blog/view/${blog.pk}/`}>
<Link to={routes.VIEW_BLOG(blog.pk)}>
<div className="dtl-content">
<br />
<ttl>{blog.title}</ttl>
Expand All @@ -414,26 +419,24 @@ class ViewAccount extends Component {
<button>
<iu class="material-icons">favorite_border</iu>
</button>
)}{" "}
)}
</div>
</div>
</a>
))}{" "}
</Link>
))}
<br />
<br />
</div>
</div>
) : (
<div></div>
)}

{user.username === writer.username ? (
{user.username === writer.username && (
<div>
{this.state.tab === "archived" ? (
{this.state.tab === "archived" && (
<div className="item-dtl">
<div className="dtl">
{writer.arch_blogs.map((blog) => (
<a href={`/blog/view/${blog.pk}/`}>
<Link to={routes.VIEW_BLOG(blog.pk)}>
<div className="dtl-content">
<br />
<ttl>{blog.title}</ttl>
Expand All @@ -451,24 +454,22 @@ class ViewAccount extends Component {
<button>
<iu class="material-icons">favorite_border</iu>
</button>
)}{" "}
)}
</div>
</div>
</a>
</Link>
))}
<br />
<br />
</div>
</div>
) : (
<div></div>
)}

{this.state.tab === "saved" ? (
{this.state.tab === "saved" && (
<div className="item-dtl">
<div className="dtl">
{writer.saved_blogs.map((blog) => (
<a href={`/blog/view/${blog.pk}/`}>
<Link to={routes.VIEW_BLOG(blog.pk)}>
<div className="dtl-content">
<br />
<ttl>{blog.title}</ttl>
Expand All @@ -488,21 +489,17 @@ class ViewAccount extends Component {
<button>
<iu class="material-icons">favorite_border</iu>
</button>
)}{" "}
)}
</div>
</div>
</a>
</Link>
))}
<br />
<br />
</div>
</div>
) : (
<div></div>
)}
</div>
) : (
<div></div>
)}
</div>
);
Expand Down
Empty file added src/redux/actions/index.js
View file
Empty file.
Empty file added src/redux/constants/index.js
View file
Empty file.
Empty file added src/redux/index.js
View file
Empty file.
Empty file added src/redux/reducers/index.js
View file
Empty file.
Loading

0 comments on commit ef6befd

Please sign in to comment.