✨ Add empty state to index page

WebCrateApp · Aug 21, 2021 · 151cdb8 · 151cdb8
1 parent 4a708bf
commit 151cdb8
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 52 deletions.
diff --git a/client/components/Modal/AddLink.vue b/client/components/Modal/AddLink.vue
@@ -9,7 +9,7 @@
         :reduce="item => item.id"
         :options="crates"
         label="name"
-        placeholder="Select a Crate"
+        placeholder="Select a crate (optional)"
         @open="isOpen = true"
         @close="closeDropdown"
       ></v-select>

diff --git a/client/pages/index.vue b/client/pages/index.vue
@@ -37,19 +37,25 @@
         </Grid>
       </div>
     </transition>
-    <div v-if="!crates && !links && !$fetchState.pending" class="empty-state">
-      <div class="list">
-        <div v-for="i in 3" :key="i" class="empty-link">
-          <div class="icon-div"></div>
-          <div class="text-div"></div>
+    <transition name="fade">
+      <div v-if="(!crates || crates.length < 1) && (!links || links.length < 1) && !loadingCrates && !loadingLinks" class="empty-state">
+        <Icon name="book" size="50px" />
+        <h2>Get started with WebCrate</h2>
+        <p>
+          Looks like it's the first time you are using WebCrate, start by adding your first link!
+          <br>If you don't have a link ready, use the example instead.
+        </p>
+        <div class="add-buttons">
+          <button class="primary-button" @click.stop="showAddLinkModal">
+            <Icon name="add" />Add first link
+          </button>
+          <p>or</p>
+          <button class="button" @click.stop="addExampleLink">
+            <Icon name="info" />Use example
+          </button>
         </div>
       </div>
-      <h2>{{ emptyMessage }}</h2>
-      <p>Drag a link into this crate or add a new one</p>
-      <button class="button" @click.stop="showAddLinkModal">
-        <Icon name="add" />Add Link
-      </button>
-    </div>
+    </transition>
   </div>
 </template>
 
@@ -153,6 +159,9 @@ export default {
 		},
 		showAddLinkModal() {
 			this.$modal.show('addLink')
+		},
+		addExampleLink() {
+			this.$modal.show('addLink', { inputValue: 'https://www.deta.sh' })
 		}
 	}
 }
@@ -216,58 +225,38 @@ export default {
 		justify-content: center;
 		margin-top: 4rem;
 
-		& .link-icon {
-			color: var(--text-light);
-		}
-
 		& h2 {
 			margin-top: 1rem;
+			font-size: 1.3rem;
+			font-weight: 550;
+			color: var(--text-light);
 		}
 
 		& p {
 			margin-top: 0.5rem;
+			color: var(--text-light);
+			max-width: 600px;
+			text-align: center;
 		}
 
-		& button {
+		.add-buttons {
 			display: flex;
 			align-items: center;
-			margin: auto;
-			margin-top: 1rem;
 
-			& div {
-				margin-right: 0.5rem;
+			& p {
+				margin-left: 1rem;
+				margin-right: 1rem;
 			}
 		}
 
-		& .list {
-			max-width: 200px;
-			width: 80%;
-		}
-
-		& .empty-link {
-			width: 100%;
-			height: 35px;
-			background: var(--background-2nd);
-			border-radius: var(--border-radius);
+		& button {
 			display: flex;
 			align-items: center;
-			justify-content: flex-start;
-			padding: 0.5rem;
-			margin-bottom: 0.5rem;
-
-			& .icon-div {
-				height: 100%;
-				width: 20px;
-				background: var(--grey-light);
-				border-radius: var(--border-radius);
-			}
+			margin: auto;
+			margin-top: 1rem;
 
-			& .text-div {
-				height: 100%;
-				flex-grow: 1;
-				background: var(--grey-light);
-				border-radius: var(--border-radius);
-				margin-left: 0.5rem;
+			& div {
+				margin-right: 0.5rem;
 			}
 		}
 	}

diff --git a/server/middleware/index.ts b/server/middleware/index.ts
@@ -10,7 +10,7 @@ import emojis from '../utils/emojis'
 import { domain } from '../utils/variables'
 
 import { Crate } from '../models/crate'
-import { Stat } from '../models/stats'
+// import { Stat } from '../models/stats'
 
 const ignoreRequestStrings: Array<string> = [ 'js/', 'css/', 'img/', 'static/', '_nuxt', 'manifest.json' ] // Don't log request if one of the strings are in URL
 
@@ -90,11 +90,11 @@ export async function checkIfSetup(req: express.Request, res: express.Response,
 		const crates = await Crate.find([{ name: 'Read Later' }, { name: 'Archive' }])
 		if (crates.count === 0) {
 			log.debug('creating default crates')
-			const crate1 = await Crate.create('Read Later', 'Articles and blog posts I want to read later', 'book', false)
-			const crate2 = await Crate.create('Archive', 'Archive of old links', 'open_file_folder', false)
+			await Crate.create('Read Later', 'Articles and blog posts I want to read later', 'book', false)
+			await Crate.create('Archive', 'Archive of old links', 'open_file_folder', false)
 
-			await Stat.addRecentlyUsedCrate(crate1.id)
-			await Stat.addRecentlyUsedCrate(crate2.id)
+			/* await Stat.addRecentlyUsedCrate(crate1.id)
+			await Stat.addRecentlyUsedCrate(crate2.id) */
 		}
 
 		// Redirect to welcome page