add back 0 dats screen. closes #469 (#484)

* add back 0 dats screen. closes #469 * prettier
dat-ecosystem-archive · Jan 31, 2018 · f8d7254 · f8d7254
1 parent 5ed5657
commit f8d7254
Show file tree

Hide file tree

Showing 2 changed files with 103 additions and 26 deletions.
diff --git a/app/components/empty.js b/app/components/empty.js
@@ -0,0 +1,72 @@
+import React from 'react'
+import styled from 'styled-components'
+import Icon from './icon'
+
+const Main = styled.main`
+  position: relative;
+  .skeleton {
+    position: fixed;
+    top: 3.5rem;
+    left: 1.25rem;
+    width: 232px;
+    max-width: 100vw;
+  }
+  .dotted-lines {
+    position: absolute;
+    top: 0.25rem;
+    right: 5.5rem;
+    width: 17rem;
+    z-index: 3;
+  }
+  .create-new-dat,
+  .link {
+    position: absolute;
+    width: 15rem;
+    color: var(--color-neutral-30);
+    svg {
+      display: inline-block;
+      width: 2rem;
+      height: 2rem;
+    }
+  }
+  .create-new-dat {
+    top: 14.5rem;
+    right: 4rem;
+  }
+  .link {
+    top: 6rem;
+    right: 8.5rem;
+    svg {
+      margin-bottom: -0.75rem;
+    }
+  }
+`
+
+const Empty = () => (
+  <Main>
+    <img src='./assets/table-skeleton.svg' alt='' className='skeleton' />
+    <div className='tutorial'>
+      <img src='./assets/dotted-lines.svg' alt='' className='dotted-lines' />
+      <div className='link'>
+        <Icon name='link' />
+        <h3 className='f4 ttu mt0 mb0'>Download A Dat</h3>
+        <p className='f7'>
+          … and keep data up-to-date
+          <br />
+          by entering the link here.
+        </p>
+      </div>
+      <div className='tr create-new-dat'>
+        <Icon name='create-new-dat' />
+        <h3 className='f4 ttu mt0 mb0'>Share a Folder</h3>
+        <p className='f7'>
+          … and sync changes by sharing
+          <br />
+          the link with someone else.
+        </p>
+      </div>
+    </div>
+  </Main>
+)
+
+export default Empty
diff --git a/app/components/table.js b/app/components/table.js
@@ -3,6 +3,7 @@
 import React from 'react'
 import styled from 'styled-components'
 import TableRow from './table-row'
+import Empty from './empty'
 
 const StyledTable = styled.table`
   width: 100%;
@@ -39,31 +40,35 @@ const StyledTable = styled.table`
   }
 `
 
-const Table = ({ dats, shareDat, onDeleteDat }) => (
-  <main>
-    <StyledTable>
-      <thead>
-        <tr>
-          <th className='cell-1' />
-          <th className='tl cell-2'>Link</th>
-          <th className='tl cell-3'>Status</th>
-          <th className='tl cell-4'>Size</th>
-          <th className='tl cell-5'>Peers</th>
-          <th className='cell-6' />
-        </tr>
-      </thead>
-      <tbody>
-        {Object.keys(dats).map(key => (
-          <TableRow
-            dat={dats[key]}
-            key={key}
-            shareDat={shareDat}
-            onDeleteDat={onDeleteDat}
-          />
-        ))}
-      </tbody>
-    </StyledTable>
-  </main>
-)
+const Table = ({ dats, shareDat, onDeleteDat }) => {
+  if (!Object.keys(dats).length) return <Empty />
+
+  return (
+    <main>
+      <StyledTable>
+        <thead>
+          <tr>
+            <th className='cell-1' />
+            <th className='tl cell-2'>Link</th>
+            <th className='tl cell-3'>Status</th>
+            <th className='tl cell-4'>Size</th>
+            <th className='tl cell-5'>Peers</th>
+            <th className='cell-6' />
+          </tr>
+        </thead>
+        <tbody>
+          {Object.keys(dats).map(key => (
+            <TableRow
+              dat={dats[key]}
+              key={key}
+              shareDat={shareDat}
+              onDeleteDat={onDeleteDat}
+            />
+          ))}
+        </tbody>
+      </StyledTable>
+    </main>
+  )
+}
 
 export default Table