Fix conflicts

src/__tests__/src/components/structural/Routes.test.js

@@ -24,13 +24,14 @@ describe('<Routes />', () => {
     expect(routes.get(9).props.path).toBe('/charts');
     expect(routes.get(10).props.path).toBe('/supports-sent');
     expect(routes.get(11).props.path).toBe('/supports-received');
+    expect(routes.get(12).props.path).toBe('/my-blocks');
   });
 
-  it('has 12 routes', () => {
+  it('has 13 routes', () => {
     const wrapper = shallow(<Routes
       user={initialState.user}
     />);
 
-    expect(wrapper.find('Route')).toHaveLength(12);
+    expect(wrapper.find('Route')).toHaveLength(13);
   });
 });

src/components/pages/list-blocks/BlockCard.js

@@ -0,0 +1,103 @@
+import React from 'react';
+
+import { withStyles } from '@material-ui/core/styles';
+import Avatar from '@material-ui/core/Avatar';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemAvatar from '@material-ui/core/ListItemAvatar';
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+import ListItemText from '@material-ui/core/ListItemText';
+import IconButton from '@material-ui/core/IconButton';
+import DeleteIcon from '@material-ui/icons/Delete';
+
+import axios from '../../../configs/axios';
+import SimpleModalWrapped from '../../shared/ConfirmModal';
+
+
+const styles = theme => ({
+  root: theme.mixins.gutters({
+    paddingTop: 16,
+    paddingBottom: 16,
+    marginTop: theme.spacing.unit * 3,
+  }),
+
+  typographyStyle: {
+    marginBottom: 15,
+  },
+
+});
+
+class BlockCard extends React.Component {
+  state = {
+    avatarURL: '',
+    name: '',
+  };
+
+  componentDidMount() {
+    this.fetchUserInfo();
+  }
+   setAvatarURL = (name) => {
+     // Red, Green and Blue
+     const COLORS = ['700', '070', '007'];
+     const avatarName = encodeURIComponent(name);
+     const ramdomIndex = Math.floor(Math.random() * 3);
+     const BASE_URL = 'https://ui-avatars.com/api/';
+     const url = `${BASE_URL}?name=${avatarName}&color=fff&background=${COLORS[ramdomIndex]}`;
+     return url;
+   }
+
+   unblockUser = async () => {
+     const userId = this.props.user_id;
+
+     try {
+       const response = await axios.delete(`/block/${userId}/`);
+       console.log(response);
+       window.location.reload();
+     } catch (e) {
+       console.log('Could not unblock user');
+       console.log(e);
+     }
+   }
+
+   async fetchUserInfo() {
+     // fetching anonymous name and avatar for an user
+     try {
+       const response = await axios.get('/anonymous-name/');
+       const name = response.data.anonymous_name;
+       const avatarURL = this.setAvatarURL(name);
+       this.setState({
+         avatarURL,
+         name,
+       });
+     } catch (e) {
+       console.log('Could not fetch user info');
+       console.log(e);
+     }
+   }
+
+   render() {
+     return (
+       <ListItem>
+         <ListItemAvatar>
+           <Avatar src={this.state.avatarURL} />
+         </ListItemAvatar>
+         <ListItemText
+           primary={this.state.name}
+         />
+         <ListItemSecondaryAction>
+           <IconButton aria-label="Delete">
+             <SimpleModalWrapped
+               action={this.unblockUser}
+               content={<DeleteIcon />}
+               title="Desbloquear usuário"
+               subheading="
+              Você tem certeza que gostaria de desbloquear este estudante?
+              Você voltará a visualizar todo o conteúdo produzido por ele.
+              "
+             />
+           </IconButton>
+         </ListItemSecondaryAction>
+       </ListItem>
+     );
+   }
+}
+export default withStyles(styles)(BlockCard);

src/components/pages/list-blocks/MyBlocks.js

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import List from '@material-ui/core/List';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+
+import BlockCard from './BlockCard';
+import axios from '../../../configs/axios';
+
+class MyBlocks extends React.Component {
+  state = {
+    blocks: [],
+  }
+
+  componentDidMount() {
+    this.fetchUserData();
+  }
+
+  fetchUserData() {
+    axios.get('users/blocks/').then(resp => {
+      this.setState({ blocks: resp.data.results });
+    });
+  }
+
+  blockInfo(blocked) {
+    return (<BlockCard user_id={blocked.id} />);
+  }
+
+  render() {
+    const blockeds = this.state.blocks.map(blocked => this.blockInfo(blocked));
+
+    return (
+      <div className="Blockeds">
+        <Grid item xs={12} md={6}>
+          <Typography variant="title" className="blocked-list">
+            Usuários Bloqueados
+          </Typography>
+          <div className="blocked-users">
+            <List>
+              {blockeds}
+            </List>
+          </div>
+        </Grid>
+      </div>
+    );
+  }
+}
+
+export default (MyBlocks);

src/components/pages/university-posts/UniversityPosts.js

@@ -37,14 +37,13 @@ class UniversityPosts extends React.Component {
   };
 
   postTimeLine = (post) => (
-    <a key={post.id} href={`/university-posts/${post.author}`}>
-      <PostListItem
-        subject={post.subject.name}
-        emotion={post.emotion}
-        tags={post.tag}
-        key={post.id}
-      />
-    </a>
+    <PostListItem
+      subject={post.subject.name}
+      emotion={post.emotion}
+      tags={post.tag}
+      key={post.id}
+      author={post.author}
+    />
   );
 
   supportForm = () => {

src/components/shared/ConfirmModal.js

@@ -0,0 +1,92 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Modal from '@material-ui/core/Modal';
+import Button from '@material-ui/core/Button';
+
+import axios from '../../configs/axios';
+
+function getModalStyle() {
+  const top = 50;
+  const left = 50;
+
+  return {
+    top: `${top}%`,
+    left: `${left}%`,
+    transform: `translate(-${top}%, -${left}%)`,
+  };
+}
+
+const styles = theme => ({
+  paper: {
+    position: 'absolute',
+    width: theme.spacing.unit * 50,
+    backgroundColor: theme.palette.background.paper,
+    boxShadow: theme.shadows[5],
+    padding: theme.spacing.unit * 4,
+  },
+});
+
+class SimpleModal extends React.Component {
+  state = {
+    open: false,
+  };
+
+  handleOpen = () => {
+    this.setState({ open: true });
+  };
+
+  confirmAction = async () => {
+    this.props.action();
+    this.setState({ open: false });
+    window.location.reload();
+  }
+
+  handleClose = () => {
+    this.setState({ open: false });
+  };
+
+  async blockUser() {
+    // fetching anonymous name and avatar for an user
+    try {
+      const response = await axios.get('/anonymous-name/');
+      console.log(response);
+    } catch (e) {
+      console.log('Could not block');
+      console.log(e);
+    }
+  }
+
+  render() {
+    const { classes } = this.props;
+
+    return (
+      <div>
+        <Button color="secondary" onClick={this.handleOpen}>{this.props.content}</Button>
+        <Modal
+          aria-labelledby="simple-modal-title"
+          aria-describedby="simple-modal-description"
+          open={this.state.open}
+          onClose={this.handleClose}
+        >
+          <div style={getModalStyle()} className={classes.paper}>
+            <Typography variant="title" id="modal-title">
+              {this.props.title}
+            </Typography>
+            <Typography variant="subheading" id="simple-modal-description">
+              {this.props.subheading}
+            </Typography>
+            <Button onClick={this.handleClose}>Não</Button>
+            <Button color="secondary" onClick={this.confirmAction}>Sim</Button>
+          </div>
+        </Modal>
+      </div>
+    );
+  }
+}
+
+
+// We need an intermediary variable for handling the recursive nesting.
+const SimpleModalWrapped = withStyles(styles)(SimpleModal);
+
+export default SimpleModalWrapped;

src/components/shared/Menu.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import IconButton from '@material-ui/core/IconButton';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import SimpleModalWrapped from './ConfirmModal';
+import axios from '../../configs/axios';
+
+class SimpleMenu extends React.Component {
+  state = {
+    anchorEl: null,
+  };
+
+  handleClick = event => {
+    this.setState({ anchorEl: event.currentTarget });
+  };
+
+  handleClose = () => {
+    this.setState({ anchorEl: null });
+  };
+
+  handleBlock = async () => {
+    const blocked = this.props.author;
+    try {
+      const response = await axios.post('/block/', {
+        blocked,
+      });
+      console.log(response);
+    } catch (e) {
+      console.log('Could not fetch user info');
+      console.log(e);
+    }
+  }
+
+  render() {
+    const { anchorEl } = this.state;
+
+    return (
+      <div>
+        <IconButton
+          aria-label="More"
+          aria-owns={anchorEl ? 'long-menu' : null}
+          aria-haspopup="true"
+          onClick={this.handleClick}
+        >
+          <MoreVertIcon />
+        </IconButton>
+        <Menu
+          id="simple-menu"
+          anchorEl={anchorEl}
+          open={Boolean(anchorEl)}
+          onClose={this.handleClose}
+        >
+          <MenuItem>
+            <SimpleModalWrapped
+              action={this.handleBlock}
+              content="Bloquear Autor"
+              title="Desbloquear usuário"
+              subheading={`
+              Você tem certeza que gostaria de bloquear o autor deste post?\n
+              Você não será mais capaz de visualizar nenhum conteúdo produzido por ele.
+              `}
+            />
+          </MenuItem>
+        </Menu>
+      </div>
+    );
+  }
+}
+
+export default SimpleMenu;