Skip to content

Organization Page #114

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: staging
Choose a base branch
from
Open

Organization Page #114

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ef3ef3a
Organization Page Done
ayushbha Jul 9, 2020
f0bbe3e
Changed Header display
ayushbha Jul 9, 2020
c6fd639
Merge branch 'staging' of https://github.com/bitprj/bit-next into ayu…
ayushbha Jul 9, 2020
4f27034
Modified UserList Component
ayushbha Jul 10, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions components/global/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@ const SyledDetailContainer = styled.div`

const StyledBio = styled.p`
color: black;
padding-top: 3em;
padding-top: 1em;
margin-left: 94.4px;
overflow-wrap: break-word;
`

Expand Down Expand Up @@ -76,9 +77,9 @@ const Header = ({ user, follow, unfollow }) => {
<StyledBio>{user.bio}</StyledBio>
</Col>
<Col span={10}>
{<DetailInfo infoName={'Location'} infoData={user.location} />}
{user.location?<DetailInfo infoName={'Location'} infoData={user.location} />:null}
{<DetailInfo infoName={'Joined'} infoData={user.joined} />}
{<DetailInfo infoName={'Occupation'} infoData={user.occupation} />}
{user.occupation?<DetailInfo infoName={'Occupation'} infoData={user.occupation} />:null}
</Col>
</Row>
)
Expand Down
80 changes: 55 additions & 25 deletions components/global/UserList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import React from 'react';
import User from './User'
import styled from 'styled-components'
import {List, Skeleton} from 'antd';
import styled from 'styled-components';
import {List, Skeleton, Button} from 'antd';
import UserAPI from '../../lib/api/user';

const StyledHeader = styled.div`
font-family: Open Sans, sans-serif;
Expand All @@ -13,29 +14,58 @@ const StyledHeader = styled.div`
margin-bottom: 0.2em;
`

const UserList = (props) => (
<>
<StyledHeader>{props.header}</StyledHeader>
<List
className="user-list"
itemLayout="horizontal"
dataSource={props.users}
renderItem={ user => (
const UserList = (props) => {

<List.Item style={{border: 'none'}}>
<Skeleton avatar title={false} loading={props.loading} active>
<User
name = {user['profile']['username']}
image = {user['profile']['image']}
username = {user['profile']['username']}
following = {user['profile']['following']}
hasButton = {true}
/>
</Skeleton>
</List.Item>
)}
/>
</>
)
const follow = user => {
if(user.profile.following == false){
UserAPI.follow(user.profile.username,user.profile.email)
}
else{
UserAPI.unfollow(user.profile.username)
}
}

return(
<div>
<StyledHeader>{props.header}</StyledHeader>
<List
className="user-list"
itemLayout="horizontal"
dataSource={props.users}
renderItem={ user => {
const handleClick = () => {
follow(user)
}
return(
<List.Item style={{border: 'none'}}>
<Skeleton avatar title={false} loading={props.loading} active>
<User
name = {user['profile']['username']}
image = {user['profile']['image']}
username = {user['profile']['username']}
following = {user['profile']['following']}
/>
<Button
type={'primary'}
size={'small'}
onClick={handleClick}
style={{
background: user['profile']['following'] ? '#4EC700' : '#007BED',
borderColor: user['profile']['following'] ? '#4EC700' : '#007BED',
borderRadius: '0.5em',
padding: '0em 1em',
margin: '1.6em',
fontSize: '0.9em',
fontWeight: 'bold',
}}>
{user['profile']['following'] ? 'Following' : '+ Follow'}
</Button>
</Skeleton>
</List.Item>
)}}
/>
</div>
)
}

export default UserList
113 changes: 110 additions & 3 deletions pages/organization/[pid].tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,114 @@
import React from "react";
import useSWR from "swr";
import { SERVER_BASE_URL } from "../../lib/utils/constant";
import OrganizationsAPI from "../../lib/api/organizations";
import { Col, Row } from 'antd';
import Header from "../../components/global/Header";
import ArticleList from "../../components/global/ArticleList";
import UserList from "../../components/global/UserList";
import fetcher from "../../lib/utils/fetcher";
import Tab_list from "../../components/profile/Tab_list";

const replaceMe = () => {
return <></>
const Organization = ({organization: InitialOrganization}) => {
const InitialOrganizationData = {
username: InitialOrganization.name,
image: InitialOrganization.image,
following: InitialOrganization.is_following,
is_moderator: InitialOrganization.is_moderator,
followers: InitialOrganization.followers,
moderators: InitialOrganization.moderators,
joined: InitialOrganization.createdAt,
bio: InitialOrganization.description
}

const {
data: OrganizationArticles,
error: ArticleError,
} = useSWR(
`${SERVER_BASE_URL}/organizations/${InitialOrganization.slug}/articles`,
fetcher,
);

const {
data: OrganizationData,
error: OrganizationError,
} = useSWR(
`${SERVER_BASE_URL}/organizations/${InitialOrganization.slug}`,
fetcher, {refreshInterval:500},
);

if(OrganizationData!=undefined && OrganizationData.organization!=InitialOrganization){
InitialOrganization = OrganizationData.organization;
InitialOrganizationData.following = InitialOrganization.is_following;
}

const Articles = OrganizationArticles || {
articles: [],
};

const [PostTab,setPostTab] = React.useState(true)

const [FollowerTab,setFollowerTab] = React.useState(false)

const handleFollow = async () => {
OrganizationsAPI.follow(InitialOrganization.slug);
};

const handleUnfollow = async () => {
OrganizationsAPI.unfollow(InitialOrganization.slug);
};

const TabClick = (key) => {
if(key=='Posts'){
setPostTab(true)
setFollowerTab(false)
}
else if(key=='Followers'){
setPostTab(false)
setFollowerTab(true)
}
}

return(
<div style={{width: "75%", margin: "6em auto"}}>
<Col span={20}>
<Header user={InitialOrganizationData} follow={handleFollow} unfollow={handleUnfollow}/>
</Col>
<Col span={4}/>
<Row>
<Col span={14}>
<Row>
<Col span={24}>
<Tab_list tabs={['Posts','Followers']} position={'top'} onClick={TabClick}/>
</Col>
</Row>
<Row>
<Col span={24}>
{PostTab?<ArticleList articles={Articles.articles}/>:null}
{FollowerTab?<UserList users={InitialOrganization.followers}/>:null}
</Col>
</Row>
</Col>
<Col span={2}/>
<Col span={4}>
<Col span={24}>
<h5>Moderators</h5>
<UserList users={InitialOrganization.moderators}/>
<br/>
<h5>Members</h5>
<UserList users={InitialOrganization.followers}/>
</Col>
</Col>
</Row>
</div>
);
}

export default replaceMe;
Organization.getInitialProps = async ({ query: { pid } }) => {
const {
data: { organization },
} = await OrganizationsAPI.get(pid);
return { organization };
};

export default Organization;