Display stars

Author: lnmunhoz

src/App.js

@@ -69,7 +69,7 @@ const SearchRepos = ({ searchText }) => (
       return (
         <List>
           {data.search.nodes.map(repo => (
-            <Repository {...repo} />
+            <Repository repo={repo} />
           ))}
         </List>
       );

src/ui/Repository.js

@@ -7,27 +7,34 @@ import {
   ListItemText,
   Typography
 } from "@material-ui/core";
+import Stars from "@material-ui/icons/Stars";
 import React from "react";
 
-export default function Repository({ id, owner, name, stargazers }) {
+export default function Repository({ repo }) {
+  const starText = repo.viewerHasStarred ? "Unstar" : "Star";
+
   return (
     <React.Fragment>
       <ListItem alignItems="flex-start">
         <ListItemAvatar>
-          <Avatar alt={owner.login} src={owner.avatarUrl} />
+          <Avatar alt={repo.owner.login} src={repo.owner.avatarUrl} />
         </ListItemAvatar>
         <ListItemText
-          primary={name}
+          primary={repo.name}
           secondary={
             <React.Fragment>
               <Typography component="span" color="textPrimary">
-                {owner.login}
+                {repo.owner.login}
               </Typography>
             </React.Fragment>
           }
         />
         <ListItemSecondaryAction>
-          <Chip label={stargazers.totalCount + " Stars"} />
+          <Chip
+            label={`${starText}  ${repo.stargazers.totalCount}`}
+            clickable
+            icon={<Stars />}
+          />
         </ListItemSecondaryAction>
       </ListItem>
     </React.Fragment>