follow/unfollow and misc styling

components/core/DataView.js

@@ -505,6 +505,7 @@ export default class DataView extends React.Component {
                       ? `0px 0px 0px 1px ${Constants.system.lightBorder} inset,
       0 0 40px 0 ${Constants.system.shadow}`
                       : "",
+                    textAlign: "left",
                   }}
                   onClick={() => this._handleSelect(i)}
                   onMouseEnter={() => this.setState({ hover: i })}
@@ -734,8 +735,16 @@ export default class DataView extends React.Component {
       <React.Fragment>
         <Table
           data={data}
-          rowStyle={{ padding: "10px 16px", backgroundColor: Constants.system.white }}
-          topRowStyle={{ padding: "0px 16px", backgroundColor: Constants.system.white }}
+          rowStyle={{
+            padding: "10px 16px",
+            textAlign: "left",
+            backgroundColor: Constants.system.white,
+          }}
+          topRowStyle={{
+            padding: "0px 16px",
+            textAlign: "left",
+            backgroundColor: Constants.system.white,
+          }}
           onMouseEnter={(i) => this.setState({ hover: i })}
           onMouseLeave={() => this.setState({ hover: null })}
           isShiftDown={this.isShiftDown}

components/core/Profile.js

@@ -2,6 +2,7 @@ import * as React from "react";
 import * as Constants from "~/common/constants";
 import * as Strings from "~/common/strings";
 import * as SVG from "~/common/svg";
+import * as Actions from "~/common/actions";
 
 import { css } from "@emotion/react";
 
@@ -27,7 +28,7 @@ const STYLES_PROFILE_BACKGROUND = css`
 
 const STYLES_PROFILE_INTERNAL = css`
   width: 100%;
-  padding: 0px 56px 0px 56px;
+  padding: 0px 56px 80px 56px;
   overflow-wrap: break-word;
   white-space: pre-wrap;
   @media (max-width: ${Constants.sizes.mobile}px) {
@@ -306,8 +307,17 @@ export default class Profile extends React.Component {
                         this._handleCopy(e, `https://slate.host/${relation.user.username}`),
                     },
                     {
-                      text: "Unfollow",
-                      onClick: (e) => this._handleFollow(e, relation.user.id),
+                      text: this.props.viewer?.subscriptions.filter((subscription) => {
+                        console.log(
+                          "relation",
+                          relation.target_user_id,
+                          subscription.target_user_id
+                        );
+                        return subscription.target_user_id === relation.target_user_id;
+                      }).length
+                        ? "Unfollow"
+                        : "Follow",
+                      onClick: (e) => this._handleFollow(e, relation.owner.id),
                     },
                   ]}
                 />
@@ -355,8 +365,8 @@ export default class Profile extends React.Component {
                       this._handleCopy(e, `https://slate.host/${relation.owner.username}`),
                   },
                   {
-                    text: this.props.creator.subscriptions.filter((subscription) => {
-                      return subscription.target_user_id === relation.owner.id;
+                    text: this.props.viewer?.subscriptions.filter((subscription) => {
+                      return subscription.target_user_id === relation.owner_user_id;
                     }).length
                       ? "Unfollow"
                       : "Follow",
@@ -435,7 +445,6 @@ export default class Profile extends React.Component {
             />
           </div>
         )}
-        {this.props.onAction ? (
         <div css={STYLES_PROFILE_INTERNAL}>
           <TabGroup
             tabs={["Files", "Slates", "Peers"]}
@@ -454,12 +463,12 @@ export default class Profile extends React.Component {
                 onChange={(value) => this.setState({ view: value })}
                 style={{ margin: "0 0 24px 0", justifyContent: "flex-end" }}
               />
-                {this.props.viewer.library[0].children &&
-                this.props.viewer.library[0].children.length ? (
+              {this.props.creator.library[0].children &&
+              this.props.creator.library[0].children.length ? (
                 <DataView
                   onAction={this.props.onAction}
                   viewer={this.props.viewer}
-                    items={this.props.viewer.library[0].children}
+                  items={this.props.creator.library[0].children}
                   onUpdateViewer={this.props.onUpdateViewer}
                   view={this.state.view}
                 />
@@ -521,8 +530,8 @@ export default class Profile extends React.Component {
                   ) : (
                     <EmptyState>
                       <SVG.Users height="24px" style={{ marginBottom: 24 }} />
-                        You can follow any user on the network to be updated on their new uploads
-                        and slates.
+                      You can follow any user on the network to be updated on their new uploads and
+                      slates.
                     </EmptyState>
                   )}
                 </div>
@@ -542,31 +551,6 @@ export default class Profile extends React.Component {
             </div>
           ) : null}
         </div>
-        ) : (
-          <div css={STYLES_PROFILE}>
-            {data.slates && data.slates.length ? (
-              <SlatePreviewBlocks
-                isOwner={this.props.isOwner}
-                external={this.props.onAction ? false : true}
-                slates={data.slates}
-                username={data.username}
-                onAction={this.props.onAction}
-              />
-            ) : (
-              <div>
-                {" "}
-                <p style={{ marginTop: 40, color: `${Constants.system.darkGray}` }}>
-                  No publicly shared slates from @{data.username}.
-                </p>
-                <div css={STYLES_EXPLORE} />
-                <SlatePreviewBlocks
-                  slates={exploreSlates}
-                  external={this.props.onAction ? false : true}
-                />
-              </div>
-            )}
-          </div>
-        )}
       </div>
     );
   }

components/core/TabGroup.js

@@ -159,10 +159,7 @@ export class TabGroup extends React.Component {
   render() {
     return (
       <div css={STYLES_TAB_GROUP} style={this.props.style}>
-        {this.props.tabs.map(
-          (tab, i) => (
-            console.log(this.props.value, i),
-            (
+        {this.props.tabs.map((tab, i) => (
           <div
             css={STYLES_NAVTAB}
             key={this.props.onAction ? tab.title : tab}
@@ -172,8 +169,7 @@ export class TabGroup extends React.Component {
                   ? Constants.system.black
                   : "rgba(0,0,0,0.25)",
               cursor: this.props.disabled ? "auto" : "pointer",
-                  borderBottom:
-                    this.props.value === i ? `1px solid ${Constants.system.black}` : "none",
+              borderBottom: this.props.value === i ? `1px solid ${Constants.system.black}` : "none",
               ...this.props.itemStyle,
             }}
             onClick={
@@ -186,9 +182,7 @@ export class TabGroup extends React.Component {
           >
             {this.props.onAction ? tab.title : tab}
           </div>
-            )
-          )
-        )}
+        ))}
       </div>
     );
   }