Show message if user doesn't have any (liked) sandboxes. (codesandbox#809)

Author: lbogdan

packages/app/src/app/pages/Profile/Sandboxes/elements.js

@@ -1,5 +1,9 @@
+import * as React from 'react';
 import styled from 'styled-components';
 
+import Centered from 'common/components/flex/Centered';
+import Margin from 'common/components/spacing/Margin';
+
 export const Navigation = styled.div`
   width: 100%;
   display: flex;
@@ -15,3 +19,21 @@ export const Notice = styled.div`
   padding: 2rem 0;
   padding-bottom: 0;
 `;
+
+const ErrorTitle = styled.div`
+  font-size: 1.25rem;
+  color: rgba(255, 255, 255, 0.7);
+`;
+const prefix = {
+  currentSandboxes: ["You don't have", "This user doesn't have"],
+  currentLikedSandboxes: ["You didn't like", "This user didn't like"],
+};
+export const NoSandboxes = ({ source, isCurrentUser }) => (
+  <Centered vertical horizontal>
+    <Margin top={4}>
+      <ErrorTitle>
+        {prefix[source][isCurrentUser ? 0 : 1]} any sandboxes yet
+      </ErrorTitle>
+    </Margin>
+  </Centered>
+);

packages/app/src/app/pages/Profile/Sandboxes/index.js

@@ -4,7 +4,7 @@ import { inject, observer } from 'mobx-react';
 import Button from 'app/components/Button';
 import SandboxList from 'app/components/SandboxList';
 
-import { Navigation, Notice } from './elements';
+import { Navigation, Notice, NoSandboxes } from './elements';
 
 const PER_PAGE_COUNT = 15;
 
@@ -71,6 +71,13 @@ class Sandboxes extends React.Component {
     if (isLoadingSandboxes || !sandboxes || !sandboxes.get(page))
       return <div />;
 
+    const sandboxesPage = sandboxes.get(page);
+
+    if (sandboxesPage.length === 0)
+      return (
+        <NoSandboxes source={source} isCurrentUser={isProfileCurrentUser} />
+      );
+
     return (
       <div>
         {isProfileCurrentUser && (
@@ -81,7 +88,7 @@ class Sandboxes extends React.Component {
         )}
         <SandboxList
           isCurrentUser={isProfileCurrentUser}
-          sandboxes={sandboxes.get(page)}
+          sandboxes={sandboxesPage}
           onDelete={source === 'currentSandboxes' && this.deleteSandbox}
         />
         <Navigation>

packages/app/src/app/pages/Profile/Showcase/index.js

@@ -35,7 +35,10 @@ class Showcase extends React.Component {
       return (
         <Centered vertical horizontal>
           <Margin top={4}>
-            <ErrorTitle>This user doesn{"'"}t have a sandbox yet</ErrorTitle>
+            <ErrorTitle>
+              {isCurrentUser ? "You don't" : "This user doesn't"} have any
+              sandboxes yet
+            </ErrorTitle>
           </Margin>
         </Centered>
       );