add back 0 dats screen. closes #469

dat-ecosystem-archive · Jan 29, 2018 · c93c1b4 · c93c1b4
1 parent a1f7054
commit c93c1b4
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 21 deletions.
diff --git a/app/components/empty.js b/app/components/empty.js
@@ -0,0 +1,74 @@
+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: .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: -.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,26 +40,30 @@ const StyledTable = styled.table`
   }
 `
 
-const Table = ({ dats, shareDat, onDeleteDat }) => (
-  <main>
-    <StyledTable>
-       <thead>
-        <tr>
-          <th className="cell-1"></th>
-          <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"></th>
-        </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>
+            <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"></th>
+          </tr>
+        </thead>
+        <tbody>
+          {Object.keys(dats).map(key => (
+            <TableRow dat={dats[key]} key={key} shareDat={shareDat} onDeleteDat={onDeleteDat} />
+          ))}
+        </tbody>
+      </StyledTable>
+    </main>
+  )
+}
 
 export default Table