User organization tabs schuyler

.python-version

@@ -0,0 +1 @@
+3.7.2-amd64

components/global/ArticleCard.tsx

@@ -77,14 +77,17 @@ const StyledEmoji2 = styled.span`
 const StyleButton = styled(Button)`
   font-weight: bold;
   border-radius: 0.5em;
-  background:  ${props => props.isPublished ? !props.bookmarked ? '#4EC700 !important' : '#007BED !important' : '#007BED !important'};
-  border-color:  ${props => props.isPublished ? !props.bookmarked ? '#4EC700 !important' : '#007BED !important' : '#007BED !important'};
+  background:  ${props => props.modReview ? '#007BED !important' : props.isPublished ? !props.bookmarked ? '#4EC700 !important' : '#007BED !important' : '#007BED !important'};
+  border-color:  ${props => props.modReview ? '#007BED !important' : props.isPublished ? !props.bookmarked ? '#4EC700 !important' : '#007BED !important' : '#007BED !important'};
 `
 
 
 
 /* article state: draft, review, pubished, complete*/
-const ArticleCard = ({ article, showAuth = false, onLeftButtonClick = null, onRightButtonClick = null, favoriteClick = null }) => {
+const ArticleCard = ({ article, currentTag = null, currentOrg = null,
+   modReview=false, showAuth = false, onLeftButtonClick = null, onRightButtonClick = null,
+    favoriteClick = null}) => {
+
   const tags = article.tagList.map((tag, i) =>
     (<StyledSpan>
       <CustomLink
@@ -158,7 +161,7 @@ const ArticleCard = ({ article, showAuth = false, onLeftButtonClick = null, onRi
             {/* rigt bottom: show two buttons */}
             <Col>
               <Button
-                disabled={article.isPublished}
+                disabled={article.isPublished && !modReview}
                 onClick={onLeftButtonClick}
                 style={{
                   border: "none",
@@ -169,15 +172,20 @@ const ArticleCard = ({ article, showAuth = false, onLeftButtonClick = null, onRi
                   article.isPublished ? (article.readtime && article.readtime + ' min read') :
                     article.needsReview ? 'Reject' : 'Delete'
                 }
+                {
+                  modReview ? 'Reject' : null
+                }
+
               </Button>
               <StyleButton
                 type={"primary"}
                 onClick={onRightButtonClick}
                 isPublished={article.isPublished}
                 bookmarked={article.bookmarked}
+                modReview={modReview}
               >
                 {
-                  article.isPublished ? article.bookmarked ? 'BookMarked' : 'Bookmark' :
+                    modReview ? 'Published' : article.isPublished ? article.bookmarked ? "Bookmarked" : 'BookMark' :
                     article.needsReview ? 'Published' : 'Edit'
                 }
               </StyleButton>

components/global/ArticleList.tsx

@@ -1,18 +1,24 @@
 import React from 'react'
 import ArticleCard from './ArticleCard'
 import {List} from 'antd'
+import TagAPI from "../../lib/api/tag";
 
 const ArticleList = props =>(
     <List
       itemLayout="horizontal"
       dataSource={props.articles}
       renderItem={article => (
         <List.Item>
-           <ArticleCard
+          {props.modReview ? <ArticleCard
+             article = {article}
+             modReview = {props.modReview}
+             onLeftButtonClick = {() => TagAPI.rejectTag(article,props.currentTag)}
+             onRightButtonClick = {props.onRightButtonClick}
+           /> : <ArticleCard
               article = {article}
               onLeftButtonClick = {props.onLeftButtonClick}
               onRightButtonClick = {props.onRightButtonClick}
-            />
+            />}
         </List.Item>
       )}
     />

components/global/User.tsx

@@ -8,7 +8,7 @@ const StyledListItemMeta = styled(List.Item.Meta)`
     align-items: center;
     font-size : 1em;
     flex: none;
-    
+
     .ant-list-item-meta-avatar {
       margin-right: 1.2em;
     }
@@ -23,7 +23,7 @@ const StyledListItemMeta = styled(List.Item.Meta)`
       color: #000000
       word-wrap: break-word;
     }
-    
+
     .ant-list-item-meta-description {
       font-family: Open Sans, sans-serif;
       font-style: normal;
@@ -40,12 +40,12 @@ const User = (props) =>(
     avatar={ <Avatar src= {props.image} size = { props.avatarSize || 50}/>}
     title={props.username}
     description={
-      (props.hasButton &&
-        <Button 
-          type ={'primary'} 
+      (props.hasButton && !props.currentOrg &&
+        <Button
+          type ={'primary'}
           size={'small'}
           onClick = {props.onClick}
-          style={{ 
+          style={{
             background: props.following ? '#4EC700':'#007BED' ,
             borderColor :  props.following ? '#4EC700':'#007BED' ,
             borderRadius: '0.5em',

components/global/UserList.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import User from './User'
 import styled from 'styled-components'
-import {List, Skeleton} from 'antd';
+import { List, Skeleton, Button } from 'antd';
+import OrganizationsAPI from "../../lib/api/organizations";
 
 const StyledHeader = styled.div`
   font-family: Open Sans, sans-serif;
@@ -13,7 +14,13 @@ const StyledHeader = styled.div`
   margin-bottom: 0.2em;
 `
 
-const UserList = (props) => (
+const UserList = (props) => {
+
+  const handleClick = (org,user) => {
+    OrganizationsAPI.removeFromOrg(org,user);
+  }
+
+  return (
   <>
     <StyledHeader>{props.header}</StyledHeader>
     <List
@@ -24,18 +31,35 @@ const UserList = (props) => (
 
         <List.Item style={{border: 'none'}}>
           <Skeleton avatar title={false} loading={props.loading} active>
-            <User 
+            <User
+              currentOrg = {props.currentOrg ? props.currentOrg : null}
               name = {user['profile']['username']}
               image = {user['profile']['image']}
               username = {user['profile']['username']}
               following = {user['profile']['following']}
               hasButton = {true}
             />
+            {props.currentOrg ? <Button
+                type={'primary'}
+                size={'middle'}
+                onClick={() => handleClick(props.currentOrg,user['profile']['username'])}
+                style={{
+                  fontSize: '1em',
+                  fontWeight: 'bold',
+                  background: '#DD2E44',
+                  borderColor: '#DD2E44',
+                  borderRadius: '0.5em',
+                  padding: '0em 1em',
+              }}>
+                Delete
+              </Button> : null
+            }
           </Skeleton>
         </List.Item>
       )}
     />
   </>
-)
+  )
+}
 
-export default UserList
+export default UserList

components/profile/GroupSetting.tsx

@@ -0,0 +1,156 @@
+import React from 'react';
+import styled from 'styled-components'
+import { Row, Col, Card, Avatar, Button,
+   Space, Layout, Typography, Form,
+   Input, Upload } from 'antd';
+import { UserOutlined } from '@ant-design/icons';
+import UserAPI from "../../lib/api/user";
+import OrganizationsAPI from "../../lib/api/organizations";
+import TagAPI from "../../lib/api/tag";
+
+import useSWR from "swr";
+import fetcher from "../../lib/utils/fetcher";
+import storage from "../../lib/utils/storage";
+import { SERVER_BASE_URL } from "../../lib/utils/constant";
+
+const { Header, Footer, Sider, Content } = Layout;
+const { Title, Paragraph, Text } = Typography;
+const { TextArea } = Input;
+
+const { Search } = Input;
+
+const StyledCard = styled(Card)`
+  margin-right: 20px
+`
+
+const GroupSetting = ({ currentOrg = null, currentTag = null, page }) => {
+
+  const {
+    data: tagOrg,
+    error: tagOrgError,
+  } = currentOrg ? useSWR(`${SERVER_BASE_URL}/organizations/${currentOrg}`, fetcher) :
+      useSWR(`${SERVER_BASE_URL}/tags/${currentTag}`, fetcher)
+
+  {/*returns description: etc*/}
+  const editDescription = desc => {
+    if (currentOrg) {
+      const description = desc.description;
+      OrganizationsAPI.changeOrgDescription(currentOrg, desc)
+    } else {
+      TagAPI.changeTagDescription(currentTag, desc)
+    }
+  }
+
+  const uploadPic = pic => {
+    if (currentOrg) {
+      OrganizationsAPI.changeOrgPic(pic)
+    } else {
+      TagAPI.changeTagPic(pic)
+    }
+  }
+
+  {/*returns string*/}
+  const changeSlug = slug => {
+    if (currentOrg) {
+      OrganizationsAPI.changeOrgSlug(currentOrg, slug)
+    } else {
+      TagAPI.changeTagSlug(currentTag, slug)
+    }
+  }
+
+  {/*returns number*/}
+  const editModSettings = setting => {
+    if (currentOrg) {
+      OrganizationsAPI.changeModSettingOrg(currentOrg, setting)
+    } else {
+      TagAPI.changeModSettingTag(currentTag, setting)
+    }
+  }
+
+  if (tagOrg) {
+    return (
+      <>
+        <Row>
+          <Col>
+            <Row gutter={40}>
+              <Col>
+                <Row>
+                  <Title level={4}>{currentOrg ? "Org Profile Pic" : "Tag Profile Pic"}</Title>
+                </Row>
+                <Row>
+                  <Avatar src={currentOrg ? tagOrg.organization.image : tagOrg.tag.icon} style={{ margin: "0px 42px 10px" }} />
+                </Row>
+                <Row style={{ margin: "0px 0px 15px" }}>
+                  <Upload customRequest={uploadPic} showUploadList={false}>
+                    <Button type="primary" >Reupload Icon</Button>
+                  </Upload>
+                </Row>
+                <Row>
+                  <Title level={4}>{currentOrg ? "Org Slug" : "Tag Slug"}</Title>
+                </Row>
+                <Row style={{ margin: "0px 0px 15px" }}>
+                  <Search
+                    placeholder={currentOrg ? currentOrg : currentTag}
+                    defaultValue={currentOrg ? currentOrg : currentTag}
+                    addonBefore="bitproject.org/"
+                    enterButton="edit"
+                    onSearch={value => changeSlug(value)}
+                  />
+                </Row>
+              </Col>
+
+              <Col>
+                <Title level={4}>{currentOrg ? "Org Description" : "Tag Description"}</Title>
+                <Form onFinish={editDescription}
+                  initialValues={{
+                    description: currentOrg ? tagOrg.organization.description : tagOrg.tag.description
+                  }}>
+                  <Form.Item name="description">
+                    <TextArea
+                      placeholder="Org Description here"
+                      autoSize={{ minRows: 4, maxRows: 6 }} />
+                  </Form.Item>
+                  <Form.Item>
+                    <Button type="primary" htmlType="submit" block>{currentOrg ? "Edit Org Description" : "Edit Tag Description"}</Button>
+                  </Form.Item>
+                </Form>
+              </Col>
+            </Row>
+
+            {currentTag ?
+            <>
+            <Row>
+              <Title level={4}>Mod Settings</Title>
+            </Row>
+            <Row style={{ justifyContent: 'space-between' }}>
+              <Col span={8}>
+                <Button size="large" onClick={() => editModSettings(1)} type="primary">
+                  Public
+                </Button>
+                <StyledCard>Writers can directly post on tag.</StyledCard>
+              </Col>
+              <Col span={8}>
+                <Button size="large" onClick={() => editModSettings(2)} type="primary">
+                  Moderated
+                </Button>
+                <StyledCard>Moderators allow posts on the tag.</StyledCard>
+              </Col>
+              <Col span={8}>
+                <Button size="large" onClick={() => editModSettings(3)} type="primary">
+                  Private
+                </Button>
+                <StyledCard>Only moderators can post on the tag. Fit for internal tags.</StyledCard>
+              </Col>
+            </Row>
+            </>
+            : null}
+          </Col>
+        </Row>
+      </>
+    )
+  } else {
+    return (<div></div>)
+  }
+}
+
+export default GroupSetting

components/profile/Tab_list.tsx

@@ -15,7 +15,7 @@ const Tab_list=(props)=>{
 	  } = router;
 	  return(
 	  	<>
-		<Tabs tabPosition={props.position} size={'large'} animated={false} onTabClick={key=>props.onClick(key)}>
+		<Tabs tabPosition={props.position} activeKey={props.activeKey} size={'large'} animated={false} onTabClick={key=>props.onClick(key)}>
 			{[...props.tabs].map(i=>(
 				<TabPane tab={i} key={i}>
             	</TabPane>
@@ -24,4 +24,4 @@ const Tab_list=(props)=>{
 		</>
 	);
 };
-export default Tab_list;
+export default Tab_list;