interface: group feed permissions work properly

pkg/interface/src/views/landscape/components/Home/GroupFeed.js

@@ -24,7 +24,6 @@ function GroupFeed(props) {
     vip
   } = props;
 
-  console.log(vip);
   const groups = useGroupState(state => state.groups);
   const group = groups[groupPath];
 
@@ -63,6 +62,7 @@ function GroupFeed(props) {
         baseUrl={baseUrl}
         history={history}
         graphs={graphs}
+        vip={vip}
         graphResource={graphResource} />
       <Switch>
         <Route

pkg/interface/src/views/landscape/components/Home/GroupFeedHeader.js

@@ -5,10 +5,10 @@ import bigInt from 'big-integer';
 
 
 export function GroupFeedHeader(props) {
-  const { baseUrl, history, graphs, graphResource } = props;
+  const { baseUrl, history, graphResource, vip } = props;
+  let graph = props.graph;
   const historyLocation = history.location.pathname;
   const graphId = `${graphResource.ship.slice(1)}/${graphResource.name}`;
-  const shouldRenderFeed = graphId in graphs;
 
   const isHome =
     historyLocation === baseUrl ||
@@ -21,7 +21,6 @@ export function GroupFeedHeader(props) {
   });
 
   let node;
-  let graph = graphs[graphId];
   nodeIndex.forEach((i) => {
     if (!graph) {
       return null;
@@ -38,6 +37,10 @@ export function GroupFeedHeader(props) {
     authorText = node.post.author;
   }
 
+  const permText = (
+    vip === 'reader-comments'
+  ) ? 'Select ships can post' : 'Everyone can post';
+
   return (
     <Row 
       flexShrink="0"
@@ -61,7 +64,7 @@ export function GroupFeedHeader(props) {
       { isHome ? (
         <>
           <Text bold fontSize="2" pl="1" pr="2">Group Feed</Text>
-          <Text fontSize="0" p="1" backgroundColor="washedGray">Everyone can post</Text>
+          <Text fontSize="0" p="1" backgroundColor="washedGray">{permText}</Text>
         </>
       ) : ( !authorText ? null : (
         <>

pkg/interface/src/views/landscape/components/Home/GroupHome.js

@@ -22,6 +22,7 @@ function GroupHome(props) {
   const groups = useGroupState(state => state.groups);
 
   const metadata = associations?.groups[groupPath]?.metadata;
+
   const askFeedBanner =
     metadata &&
     metadata.config &&
@@ -35,6 +36,7 @@ function GroupHome(props) {
     'resource' in metadata.config.group;
 
   const graphPath = metadata?.config?.group?.resource;
+  const graphMetadata = associations?.graph[graphPath]?.metadata;
 
   return (
     <Box width="100%" height="100%" overflow="hidden">
@@ -60,7 +62,7 @@ function GroupHome(props) {
         <GroupFeed
           graphPath={graphPath}
           groupPath={groupPath}
-          vip={metadata.vip}
+          vip={graphMetadata?.vip || ''}
           api={api}
           baseUrl={baseUrl} />
       </Route>

pkg/interface/src/views/landscape/components/Home/Post/PostFeed.js

@@ -24,6 +24,7 @@ export class PostFeed extends React.Component {
         baseUrl,
         parentNode,
         association,
+        group,
         vip
       } = this.props;
       const graphResource = resourceFromPath(graphPath);
@@ -61,6 +62,7 @@ export class PostFeed extends React.Component {
                 isParent={true}
                 isRelativeTime={false}
                 vip={vip}
+                group={group}
               />
             </Col>
             <PostItem
@@ -76,6 +78,7 @@ export class PostFeed extends React.Component {
               parentPost={parentNode.post}
               isRelativeTime={true}
               vip={vip}
+              group={group}
             />
           </React.Fragment>
         );
@@ -96,6 +99,7 @@ export class PostFeed extends React.Component {
           isReply={!!parentNode}
           isRelativeTime={true}
           vip={vip}
+          group={group}
         />
       );
     });

pkg/interface/src/views/landscape/components/Home/Post/PostInput.js

@@ -9,9 +9,22 @@ import { createPost } from '~/logic/api/graph';
 import useStorage from '~/logic/lib/useStorage';
 import { resourceFromPath, isWriter } from '~/logic/lib/group';
 
+function canWrite(props) {
+  const { group, association, vip, index } = props;
+  if (vip === '') {
+    return true;
+  }
+
+  if (!!index) {
+    return true;
+  }
+  
+  return isWriter(group, association.resource);
+}
+
 
 export function PostInput(props) {
-  const { api, graphPath, index, submitCallback } = props;
+  const { api, graphPath, index, submitCallback, vip } = props;
   const graphResource = resourceFromPath(graphPath);
 
   const [disabled, setDisabled] = useState(false);
@@ -73,6 +86,11 @@ export function PostInput(props) {
     });
   };
 
+
+  if (!(canWrite(props))) {
+    return null;
+  }
+
   return (
     <Box
       width="100%"

pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostFooter.js

@@ -10,7 +10,8 @@ export function PostFooter(props) {
     toggleReplyMode,
     showTimestamp,
     isParent,
-    timeSent
+    timeSent,
+    canComment
   } = props;
   const stamp = moment(timeSent);
   const mt = showTimestamp && isParent ? "2" : "0";
@@ -18,7 +19,11 @@ export function PostFooter(props) {
   const replyText = replyCount === 1 ? ' reply' : ' replies';
 
   return (
-    <Row mt={mt} justify-content="flex-start" width="100%">
+    <Row
+      mt={mt}
+      justify-content="flex-start"
+      width="100%"
+      opacity={canComment ? 1 : 0}>
       <Col width="100%">
         { showTimestamp && (
           <Row

pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostItem.js

@@ -22,7 +22,22 @@ class PostItem extends React.Component {
   }
 
   canWrite() {
-    const { group, association } = this.props;
+    const {
+      group,
+      association,
+      vip,
+      index
+    } = this.props;
+    console.log(index);
+
+    if (vip === '') {
+      return true;
+    }
+
+    if (index && index.length > 0) {
+      return true;
+    }
+    
     return isWriter(group, association.resource);
   }
 
@@ -58,6 +73,8 @@ class PostItem extends React.Component {
       isReply,
       isRelativeTime,
       parentPost,
+      vip,
+      group,
       hovering,
       bind
     } = this.props;
@@ -71,6 +88,8 @@ class PostItem extends React.Component {
 
     const { inReplyMode } = this.state;
 
+    const canComment = this.canWrite();
+
     return (
       <Col
         ref={innerRef}
@@ -112,6 +131,7 @@ class PostItem extends React.Component {
             replyCount={node.children.size}
             showTimestamp={!isRelativeTime}
             isParent={isParent}
+            canComment={canComment}
             toggleReplyMode={this.toggleReplyMode} /> 
         </Col>
         { inReplyMode ? (
@@ -124,8 +144,10 @@ class PostItem extends React.Component {
             <PostInput
               api={api}
               graphPath={graphPath}
+              group={group}
+              association={association}
+              vip={vip}
               index={indexString}
-              canWrite={canWrite}
               submitCallback={this.submitCallback} />
           </Col>
         ) : null }

pkg/interface/src/views/landscape/components/Home/Post/PostReplies.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import bigInt from 'big-integer';
 import { Text, Col, Box } from '@tlon/indigo-react'
-import { PostInput } from './PostInput';
 import PostItem from './PostItem/PostItem';
 import { PostFeed } from './PostFeed';
 import { Loading } from '~/views/components/Loading';
@@ -77,6 +76,7 @@ export default function PostReplies(props) {
             history={history}
             isParent={true}
             vip={vip}
+            group={group}
           />
         </Box>
         <Box

pkg/interface/src/views/landscape/components/Home/Post/PostTimeline.js

@@ -48,6 +48,8 @@ export default function PostTimeline(props) {
           <PostInput
             api={api}
             graphPath={graphPath}
+            group={group}
+            association={association}
             vip={vip} />
         </Col> 
         <Box
@@ -77,7 +79,12 @@ export default function PostTimeline(props) {
         mb="3"
         flexDirection="column"
         alignItems="center">
-        <PostInput api={api} graphPath={graphPath} />
+        <PostInput
+          api={api}
+          group={group}
+          association={association}
+          vip={vip}
+          graphPath={graphPath} />
       </Box> 
       <Box height="calc(100% - 176px)" width="100%" alignItems="center" pl="1">
         <PostFeed