wrap create buttons in Language Overview with permission guards

Author: rdonigian

src/components/posts/PostList.tsx

@@ -32,20 +32,23 @@ export const PostList = ({
 }: PostListProps) => {
   const { classes } = useStyles();
   const [createPostState, createPost] = useDialog();
+  const canCreate = rest.data?.canCreate;
 
   return (
     <div>
       <Grid container spacing={2} alignItems="center">
         <Grid item>
           <Typography variant="h3">Posts</Typography>
         </Grid>
-        <Grid item>
-          <Tooltip title="Add Post">
-            <Fab color="error" onClick={createPost}>
-              <Add />
-            </Fab>
-          </Tooltip>
-        </Grid>
+        {canCreate && (
+          <Grid item>
+            <Tooltip title="Add Post">
+              <Fab color="error" onClick={createPost}>
+                <Add />
+              </Fab>
+            </Tooltip>
+          </Grid>
+        )}
       </Grid>
       <List
         {...rest}

src/scenes/Languages/Detail/LanguageDetail.tsx

@@ -236,22 +236,22 @@ export const LanguageDetail = () => {
                 <Grid item>
                   <Typography variant="h3">Locations</Typography>
                 </Grid>
-                <Grid item>
-                  <Tooltip title="Add location">
-                    <Fab
-                      color="error"
-                      aria-label="add location"
-                      className={
-                        locations?.canCreate === true
-                          ? undefined
-                          : classes.hidden
-                      }
-                      onClick={addLocation}
-                    >
-                      <Add />
-                    </Fab>
-                  </Tooltip>
-                </Grid>
+                {locations?.canCreate && (
+                  <Grid item>
+                    <Tooltip title="Add location">
+                      <Fab
+                        color="error"
+                        aria-label="add location"
+                        className={
+                          locations.canCreate ? undefined : classes.hidden
+                        }
+                        onClick={addLocation}
+                      >
+                        <Add />
+                      </Fab>
+                    </Tooltip>
+                  </Grid>
+                )}
               </Grid>
               {listOrPlaceholders(locations?.items, 3).map(
                 (location, index) => (