✨ Detect when a external crate is unavailable

client/components/Icon/error.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" :stroke="color">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+  </svg>
+</template>
+
+<script>
+export default {
+	props: {
+		color: {
+			type: String,
+			default: 'currentColor'
+		}
+	}
+}
+</script>

client/components/SideBar/Menu.vue

@@ -39,6 +39,7 @@
           :crate-id="crate.id"
           :selected="currentCrate === crate.id && !currentPage"
           :editable="crate.id !== undefined && crate.endpoint === undefined"
+          :error="crate.deleted"
           @click.native="changeCrate(crate)"
           @shortkey.native="changeCrate(crate)"
         />
@@ -58,6 +59,7 @@
           :crate-id="crate.id"
           :selected="currentCrate === crate.id"
           :editable="crate.id && !crate.endpoint"
+          :error="crate.deleted"
           @click.native="changeCrate(crate)"
           @shortkey.native="changeCrate(crate)"
         />

client/components/SideBar/MenuItem.vue

@@ -15,8 +15,8 @@
       <Icon v-else-if="icon" :name="icon" class="icon" size="20px" />
     </div>
     <span class="name">{{ name }}</span>
-    <div v-if="count" class="count">
-      <span>{{ count }}</span>
+    <div v-if="error" class="error">
+      <Icon name="error" />
     </div>
   </div>
 </template>
@@ -38,6 +38,10 @@ export default {
 			type: Boolean,
 			default: false
 		},
+		error: {
+			type: Boolean,
+			default: false
+		},
 		count: {
 			type: Number,
 			default: undefined
@@ -171,14 +175,8 @@ export default {
 		width: 25px;
 	}
 
-	.count {
+	.error {
 		margin-left: auto;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-
-		& span {
-			font-size: 0.8rem;
-		}
+		color: var(--red);
 	}
 </style>

client/pages/crate/_.vue

@@ -33,7 +33,15 @@
       <Actions v-else-if="isExternal" :actions="externalActions" />
     </div>
     <hr>
-    <div v-if="$fetchState.pending" class="links">
+    <div v-if="deleted" class="empty-state">
+      <Icon name="error" size="50px" class="deleted" />
+      <h2>Crate unavailable</h2>
+      <p>This external crate was either deleted or set to private by its original owner. <br>You can remove it now or keep it in the case that it's set back to public.</p>
+      <button class="button" @click.stop="deleteExternal">
+        <Icon name="delete" />Delete now
+      </button>
+    </div>
+    <div v-else-if="$fetchState.pending" class="links">
       <Grid>
         <LinkLoadingItem v-for="idx in 6" :key="'i' + idx" />
       </Grid>
@@ -95,7 +103,6 @@ export default {
 		}
 
 		const crate = isExternal ? await $api.getExternalCrate(crateId) : await $api.getCrate(crateId)
-
 		if (!crate) {
 			return redirect('/home')
 		}
@@ -108,7 +115,7 @@ export default {
 			$modal.replace('linkDetails', { link, endpoint: crate.endpoint, editable })
 		}
 
-		return { crate, isExternal, isPublic, editable }
+		return { crate, isExternal, isPublic, editable, deleted: crate.deleted }
 	},
 	data() {
 		return {
@@ -129,6 +136,8 @@ export default {
 	async fetch() {
 		this.$store.commit('SET_CURRENT_CRATE_LINKS', [])
 
+		if (this.deleted) return
+
 		const res = this.isExternal ? await this.$api.getLinksOfExternalCrate(this.crate) : await this.$api.getLinksOfCrate(this.crate.id)
 
 		if (res.last) {
@@ -331,7 +340,7 @@ export default {
 		async deleteCrate() {
 			const confirm = await this.$confirm({
 				title: `Are you sure you want to delete this crate?`,
-				message: 'This will also permanently delete all links belonging to that crate.',
+				message: `This will also permanently delete all links belonging to that crate.${ this.crate.public ? ' All users who are subscribed to this crate or try to access it by its link will see an error.' : '' }`,
 				confirmText: 'Delete Crate',
 				danger: true
 			})
@@ -348,7 +357,7 @@ export default {
 		async deleteExternal() {
 			const confirm = await this.$confirm({
 				title: `Are you sure you want to remove this external crate?`,
-				message: 'You can always readd it later.',
+				...(!this.deleted && { message: 'You can always re-add with its original sharing link later.' }),
 				confirmText: 'Remove Crate',
 				danger: true
 			})
@@ -373,7 +382,7 @@ export default {
 		async makePrivate() {
 			const confirm = await this.$confirm({
 				title: `Are you sure you want to make this crate private?`,
-				message: 'If you have already shared this crate, users will see a 404 error.',
+				message: 'All users who are subscribed to this crate or try to access it by its link will see an error.',
 				confirmText: 'Make Private',
 				danger: true
 			})
@@ -538,6 +547,11 @@ export default {
 		align-items: center;
 		justify-content: center;
 		margin-top: 4rem;
+		text-align: center;
+
+		.deleted {
+			color: var(--red);
+		}
 
 		& .link-icon {
 			color: var(--text-light);

server/models/externalCrate.ts

@@ -10,6 +10,7 @@ export class ExternalCrate {
 	name?: string
 	description?: string
 	icon?: string
+	deleted?: boolean
 	endpoint: string
 	addedAt: Date
 

server/router/api/external.ts

@@ -56,8 +56,12 @@ router.get('/', parsePaginate, async (req: express.Request, res: express.Respons
 		if (externalCrates.count > 0) {
 
 			const crates = await Promise.all(externalCrates.items.map(async (externalCrate: ExternalCrate) => {
-				await externalCrate.refresh()
-				return externalCrate
+				try {
+					await externalCrate.refresh()
+					return externalCrate
+				} catch (err) {
+					return { ...externalCrate, deleted: true }
+				}
 			}))
 
 			return res.ok(crates)
@@ -81,7 +85,11 @@ router.get('/:id', async (req: express.Request, res: express.Response, next: exp
 			return res.fail(404, 'crate not found')
 		}
 
-		await crate.refresh()
+		try {
+			await crate.refresh()
+		} catch (err) {
+			return res.ok({ ...crate, deleted: true })
+		}
 
 		// await Stat.addRecentlyUsedCrate(crate.id)