refactor: page empty state

BigJk · Feb 9, 2024 · 0fc452e · 0fc452e
1 parent 2d02982
commit 0fc452e
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 64 deletions.
diff --git a/frontend/.prettierrc.json b/frontend/.prettierrc.json
@@ -21,8 +21,11 @@
     "js/core/(.*)$",
     "",
     "js/ui/spectre(.*)$",
+    "",
     "js/ui/components(.*)$",
+    "",
     "js/ui/views/(.*)$",
+    "",
     "js/ui/[^\/]+$"
   ],
   "parser": "babel-ts"

diff --git a/frontend/src/js/ui/components/page-empty-state.ts b/frontend/src/js/ui/components/page-empty-state.ts
@@ -0,0 +1,38 @@
+import m from 'mithril';
+
+import IconButton from 'js/ui/spectre/icon-button';
+
+import Icon from 'js/ui/components/atomic/icon';
+import Flex from 'js/ui/components/layout/flex';
+
+type PageEmptyStateProps = {
+	name: string;
+	bigMessage?: boolean;
+};
+
+export default (): m.Component<PageEmptyStateProps> => ({
+	view({ attrs }) {
+		let message: any = 'Try searching for something else...';
+		if (attrs.bigMessage) {
+			message = m(
+				Flex,
+				{ gap: 3, direction: 'column' },
+				m(Icon, { icon: 'sad', size: 1, className: '.o-50' }),
+				`There are no ${attrs.name} yet. Check the workshop if you want to download community ${attrs.name} to get started!`,
+				m(
+					'div',
+					m(
+						IconButton,
+						{ intend: 'primary', icon: 'cart', className: '.mh2', link: '/workshop/T2ZmaWNpYWwgUGFja2FnZSBSZXBv', size: 'sm' },
+						'Workshop',
+					),
+				),
+			);
+		}
+
+		return m('div.bg-white.br2.ba.b--black-10.pa3', [
+			m('div.f8.fw5.ttu.mb3.text-muted', `No ${attrs.name} found`), //
+			m('div.f7.tc', message),
+		]);
+	},
+});
diff --git a/frontend/src/js/ui/views/data-source/all.ts b/frontend/src/js/ui/views/data-source/all.ts
@@ -3,18 +3,21 @@ import { groupBy, map } from 'lodash-es';
 
 import { buildId } from 'js/types/basic-info';
 import * as API from 'js/core/api';
-import store, { generators, sources } from 'js/core/store';
+import store, { sources } from 'js/core/store';
 
 import IconButton from 'js/ui/spectre/icon-button';
 import Input from 'js/ui/spectre/input';
+
 import Icon from 'js/ui/components/atomic/icon';
 import Title from 'js/ui/components/atomic/title';
 import Flex from 'js/ui/components/layout/flex';
 import Grid from 'js/ui/components/layout/grid';
 import { openDataSourceCreateModal } from 'js/ui/components/modals/create-source';
 import ImportExport from 'js/ui/components/modals/imexport/import-export';
+import PageEmptyState from 'js/ui/components/page-empty-state';
 import SourceBox from 'js/ui/components/source-box';
 import Base from 'js/ui/components/view-layout/base';
+
 import { setPortal } from 'js/ui/portal';
 
 export default (): m.Component => {
@@ -73,30 +76,11 @@ export default (): m.Component => {
 		]);
 
 	const emptyState = () => {
-		let message: any = 'Try searching for something else...';
-		if (generators.value.length === 0) {
-			message = m(
-				Flex,
-				{ gap: 3, direction: 'column' },
-				m(Icon, { icon: 'sad', size: 1, className: '.o-50' }),
-				'There are no data sources yet. Check the workshop if you want to download community data sources to get started!',
-				m(
-					'div',
-					m(
-						IconButton,
-						{ intend: 'primary', icon: 'cart', className: '.mh2', link: '/workshop/T2ZmaWNpYWwgUGFja2FnZSBSZXBv', size: 'sm' },
-						'Workshop',
-					),
-				),
-			);
-		} else if (filteredSources().length > 0) {
+		if (filteredSources().length > 0) {
 			return null;
 		}
 
-		return m('div.bg-white.br2.ba.b--black-10.pa3', [
-			m('div.f8.fw5.ttu.mb3.text-muted', 'No data sources found'), //
-			m('div.f7.tc', message),
-		]);
+		return m(PageEmptyState, { name: 'data sources', bigMessage: sources.value.length === 0 });
 	};
 
 	return {

diff --git a/frontend/src/js/ui/views/generator/all.ts b/frontend/src/js/ui/views/generator/all.ts
@@ -8,13 +8,16 @@ import store, { generators } from 'js/core/store';
 
 import IconButton from 'js/ui/spectre/icon-button';
 import Input from 'js/ui/spectre/input';
+
 import Icon from 'js/ui/components/atomic/icon';
 import Title from 'js/ui/components/atomic/title';
 import Flex from 'js/ui/components/layout/flex';
 import Grid from 'js/ui/components/layout/grid';
 import ImportExport from 'js/ui/components/modals/imexport/import-export';
+import PageEmptyState from 'js/ui/components/page-empty-state';
 import TemplateBox from 'js/ui/components/template-box';
 import Base from 'js/ui/components/view-layout/base';
+
 import { setPortal } from 'js/ui/portal';
 
 export default (): m.Component => {
@@ -73,30 +76,11 @@ export default (): m.Component => {
 		]);
 
 	const emptyState = () => {
-		let message: any = 'Try searching for something else...';
-		if (generators.value.length === 0) {
-			message = m(
-				Flex,
-				{ gap: 3, direction: 'column' },
-				m(Icon, { icon: 'sad', size: 1, className: '.o-50' }),
-				'There are no generators yet. Check the workshop if you want to download community generators to get started!',
-				m(
-					'div',
-					m(
-						IconButton,
-						{ intend: 'primary', icon: 'cart', className: '.mh2', link: '/workshop/T2ZmaWNpYWwgUGFja2FnZSBSZXBv', size: 'sm' },
-						'Workshop',
-					),
-				),
-			);
-		} else if (filteredGenerators().length > 0) {
+		if (filteredGenerators().length > 0) {
 			return null;
 		}
 
-		return m('div.bg-white.br2.ba.b--black-10.pa3', [
-			m('div.f8.fw5.ttu.mb3.text-muted', 'No generators found'), //
-			m('div.f7.tc', message),
-		]);
+		return m(PageEmptyState, { name: 'generators', bigMessage: generators.value.length === 0 });
 	};
 
 	return {

diff --git a/frontend/src/js/ui/views/template/all.ts b/frontend/src/js/ui/views/template/all.ts
@@ -7,13 +7,16 @@ import store, { templates } from 'js/core/store';
 
 import IconButton from 'js/ui/spectre/icon-button';
 import Input from 'js/ui/spectre/input';
+
 import Icon from 'js/ui/components/atomic/icon';
 import Title from 'js/ui/components/atomic/title';
 import Flex from 'js/ui/components/layout/flex';
 import Grid from 'js/ui/components/layout/grid';
 import ImportExport from 'js/ui/components/modals/imexport/import-export';
+import PageEmptyState from 'js/ui/components/page-empty-state';
 import TemplateBox from 'js/ui/components/template-box';
 import Base from 'js/ui/components/view-layout/base';
+
 import { setPortal } from 'js/ui/portal';
 
 export default (): m.Component => {
@@ -68,30 +71,11 @@ export default (): m.Component => {
 		]);
 
 	const emptyState = () => {
-		let message: any = 'Try searching for something else...';
-		if (templates.value.length === 0) {
-			message = m(
-				Flex,
-				{ gap: 3, direction: 'column' },
-				m(Icon, { icon: 'sad', size: 1, className: '.o-50' }),
-				'There are no templates yet. Check the workshop if you want to download community templates to get started!',
-				m(
-					'div',
-					m(
-						IconButton,
-						{ intend: 'primary', icon: 'cart', className: '.mh2', link: '/workshop/T2ZmaWNpYWwgUGFja2FnZSBSZXBv', size: 'sm' },
-						'Workshop',
-					),
-				),
-			);
-		} else if (filteredTemplates().length > 0) {
+		if (filteredTemplates().length > 0) {
 			return null;
 		}
 
-		return m('div.bg-white.br2.ba.b--black-10.pa3', [
-			m('div.f8.fw5.ttu.mb3.text-muted', 'No templates found'), //
-			m('div.f7.tc', message),
-		]);
+		return m(PageEmptyState, { name: 'templates', bigMessage: templates.value.length === 0 });
 	};
 
 	return {