Separated user page stash component.

assets/components/users/actor-preview.vue

@@ -24,8 +24,6 @@
 <script>
 async function unstashActor(actorId, stashId) {
 	await this.$store.dispatch('unstashActor', { actorId, stashId });
-
-	this.$emit('unstash');
 }
 
 export default {

assets/components/users/stash.vue

@@ -0,0 +1,169 @@
+<template>
+	<div class="stash">
+		<div class="stash-section stash-header">
+			<router-link
+				:to="{ name: 'stash', params: { stashId: stash.id, stashSlug: stash.slug } }"
+				class="stash-link nolink"
+			>
+				<h4 class="stash-name">{{ stash.name }}</h4>
+			</router-link>
+
+			<label
+				v-if="isMe"
+				v-tooltip="'Public'"
+				:class="{ public: stash.public }"
+				class="stash-public"
+			>
+				<Icon
+					v-show="stash.public"
+					icon="eye"
+				/>
+
+				<Icon
+					v-show="!stash.public"
+					icon="eye-blocked"
+				/>
+
+				<Toggle
+					:checked="stash.public"
+					@change="checked => publishStash(stash, checked)"
+				/>
+			</label>
+		</div>
+
+		<ul
+			v-if="stash.scenes?.length > 0"
+			class="stash-section stash-scenes nolist"
+		>
+			<li
+				v-for="{ scene } in stash.scenes"
+				:key="scene.id"
+				class="stash-scene"
+			>
+				<ScenePreview
+					:scene="scene"
+					:stash="stash"
+				/>
+			</li>
+		</ul>
+
+		<ul
+			v-if="stash.actors?.length > 0"
+			class="stash-section stash-actors nolist"
+		>
+			<li
+				v-for="{ actor } in stash.actors"
+				:key="actor.id"
+				class="stash-actor"
+			>
+				<ActorPreview
+					:actor="actor"
+					:stash="stash"
+				/>
+			</li>
+		</ul>
+	</div>
+</template>
+
+<script>
+import ActorPreview from './actor-preview.vue';
+import ScenePreview from './scene-preview.vue';
+import Toggle from '../form/toggle.vue';
+
+async function publishStash(stash, isPublic) {
+	await this.$store.dispatch('updateStash', {
+		stashId: stash.id,
+		stash: { public: isPublic },
+	});
+
+	this.$emit('publish', isPublic);
+}
+
+export default {
+	components: {
+		ActorPreview,
+		ScenePreview,
+		Toggle,
+	},
+	props: {
+		stash: {
+			type: Object,
+			default: null,
+		},
+		isMe: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	emits: ['publish'],
+	methods: {
+		publishStash,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.stash-section {
+	display: flex;
+	align-items: center;
+	padding: .5rem;
+
+	&:not(:last-child) {
+		border-bottom: solid 1px var(--shadow-hint);
+	}
+}
+
+.stash-header {
+	justify-content: space-between;
+	padding: 0;
+}
+
+.stash-link {
+	flex-grow: 1;
+	display: inline-block;
+	text-decoration: none;
+}
+
+.stash-public {
+	display: flex;
+	align-items: center;
+	padding: .5rem;
+	cursor: pointer;
+
+	.icon {
+		fill: var(--shadow-strong);
+		margin: 0 .5rem 0 0;
+	}
+}
+
+.stash-name {
+	padding: .5rem;
+	margin: 0;
+	color: var(--shadow-strong);
+}
+
+.stash-actors,
+.stash-scenes {
+	display: flex;
+	overflow-x: auto;
+    grid-gap: .5rem;
+	scroll-behavior: smooth;
+	scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+        display: none;
+	}
+}
+
+.stash-scenes {
+	height: 8rem;
+}
+
+.stash-actor,
+.stash-scene {
+	height: 100%;
+	flex-shrink: 0;
+	font-size: 0;
+}
+
+</style>

assets/components/users/user.vue

@@ -19,80 +19,19 @@
 					:key="stash.id"
 					class="stash"
 				>
-					<div class="stash-section stash-header">
+					<Stash
-						<router-link
-							:to="{ name: 'stash', params: { stashId: stash.id, stashSlug: stash.slug } }"
-							class="stash-link nolink"
-						>
-							<h4 class="stash-name">{{ stash.name }}</h4>
-						</router-link>
-
-						<label
-							v-if="isMe"
-							v-tooltip="'Public'"
-							:class="{ public: stash.public }"
-							class="stash-public"
-						>
-							<Icon
-								v-show="stash.public"
-								icon="eye"
-							/>
-
-							<Icon
-								v-show="!stash.public"
-								icon="eye-blocked"
-							/>
-
-							<Toggle
-								:checked="stash.public"
-								@change="checked => publishStash(stash, checked)"
-							/>
-						</label>
-					</div>
-
-					<ul
-						v-if="stash.scenes?.length > 0"
-						class="stash-section stash-scenes nolist"
-					>
-						<li
-							v-for="{ scene } in stash.scenes"
-							:key="scene.id"
-							class="stash-scene"
-						>
-							<ScenePreview
-								:scene="scene"
 						:stash="stash"
-								@unstash="fetchUser"
+						:is-me="isMe"
+						@publish="() => fetchUser()"
 					/>
 				</li>
 			</ul>
-
-					<ul
-						v-if="stash.actors?.length > 0"
-						class="stash-section stash-actors nolist"
-					>
-						<li
-							v-for="{ actor } in stash.actors"
-							:key="actor.id"
-							class="stash-actor"
-						>
-							<ActorPreview
-								:actor="actor"
-								:stash="stash"
-								@unstash="fetchUser"
-							/>
-						</li>
-					</ul>
-				</li>
-			</ul>
 		</section>
 	</div>
 </template>
 
 <script>
-import ActorPreview from './actor-preview.vue';
+import Stash from './stash.vue';
-import ScenePreview from './scene-preview.vue';
-import Toggle from '../form/toggle.vue';
 
 async function fetchUser() {
 	this.user = await this.$store.dispatch('fetchUser', this.$route.params.username);
@@ -101,24 +40,13 @@ async function fetchUser() {
 	this.pageTitle = this.user?.username;
 }
 
-async function publishStash(stash, isPublic) {
-	await this.$store.dispatch('updateStash', {
-		stashId: stash.id,
-		stash: { public: isPublic },
-	});
-
-	this.fetchUser();
-}
-
 async function mounted() {
 	await this.fetchUser();
 }
 
 export default {
 	components: {
-		ActorPreview,
+		Stash,
-		ScenePreview,
-		Toggle,
 	},
 	data() {
 		return {
@@ -132,7 +60,6 @@ export default {
 	mounted,
 	methods: {
 		fetchUser,
-		publishStash,
 	},
 };
 </script>
@@ -172,69 +99,6 @@ export default {
 	box-shadow: 0 0 3px var(--shadow-weak);
 }
 
-.stash-section {
-	display: flex;
-	align-items: center;
-	padding: .5rem;
-
-	&:not(:last-child) {
-		border-bottom: solid 1px var(--shadow-hint);
-	}
-}
-
-.stash-header {
-	justify-content: space-between;
-	padding: 0;
-}
-
-.stash-link {
-	flex-grow: 1;
-	display: inline-block;
-	text-decoration: none;
-}
-
-.stash-public {
-	display: flex;
-	align-items: center;
-	padding: .5rem;
-	cursor: pointer;
-
-	.icon {
-		fill: var(--shadow-strong);
-		margin: 0 .5rem 0 0;
-	}
-}
-
-.stash-name {
-	padding: .5rem;
-	margin: 0;
-	color: var(--shadow-strong);
-}
-
-.stash-actors,
-.stash-scenes {
-	display: flex;
-	overflow-x: auto;
-    grid-gap: .5rem;
-	scroll-behavior: smooth;
-	scrollbar-width: none;
-
-    &::-webkit-scrollbar {
-        display: none;
-	}
-}
-
-.stash-scenes {
-	height: 8rem;
-}
-
-.stash-actor,
-.stash-scene {
-	height: 100%;
-	flex-shrink: 0;
-	font-size: 0;
-}
-
 @media(max-width: $breakpoint-kilo) {
 	.stashes {
 		grid-template-columns: 1fr;

assets/js/stashes/actions.js

@@ -67,6 +67,12 @@ function initStashesActions(store, _router) {
 		return curateStash(stash);
 	}
 
+	async function createStash(context, stash) {
+		const newStash = await post('/stashes', stash);
+
+		return newStash;
+	}
+
 	async function updateStash(context, { stashId, stash }) {
 		const newStash = await patch(`/stashes/${stashId}`, stash);
 
@@ -98,6 +104,7 @@ function initStashesActions(store, _router) {
 	}
 
 	return {
+		createStash,
 		fetchStash,
 		stashActor,
 		stashScene,

src/stashes.js

@@ -2,6 +2,7 @@
 
 const knex = require('./knex');
 const { HttpError } = require('./errors');
+const slugify = require('./utils/slugify');
 
 function curateStash(stash) {
 	if (!stash) {
@@ -17,6 +18,17 @@ function curateStash(stash) {
 	return curatedStash;
 }
 
+function curateStashEntry(stash, user) {
+	const curatedStashEntry = {
+		user_id: user.id,
+		name: stash.name,
+		slug: slugify(stash.name),
+		public: false,
+	};
+
+	return curatedStashEntry;
+}
+
 async function fetchStash(stashId, sessionUser) {
 	if (!sessionUser) {
 		throw new HttpError('You are not authenthicated', 401);
@@ -36,6 +48,18 @@ async function fetchStash(stashId, sessionUser) {
 	return curateStash(stash);
 }
 
+async function createStash(newStash, sessionUser) {
+	if (!sessionUser) {
+		throw new HttpError('You are not authenthicated', 401);
+	}
+
+	const stash = await knex('stashes')
+		.insert(curateStashEntry(newStash, sessionUser))
+		.returning('*');
+
+	return curateStash(stash);
+}
+
 async function updateStash(stashId, newStash, sessionUser) {
 	if (!sessionUser) {
 		throw new HttpError('You are not authenthicated', 401);
@@ -123,6 +147,7 @@ async function unstashMovie(movieId, stashId, sessionUser) {
 }
 
 module.exports = {
+	createStash,
 	curateStash,
 	stashActor,
 	stashScene,

src/web/server.js

@@ -44,6 +44,7 @@ const {
 } = require('./tags');
 
 const {
+	createStash,
 	stashActor,
 	stashScene,
 	stashMovie,
@@ -84,6 +85,7 @@ async function initServer() {
 
 	router.post('/api/users', signup);
 
+	router.post('/api/stashes', createStash);
 	router.patch('/api/stashes/:stashId', updateStash);
 
 	router.post('/api/stashes/:stashId/actors', stashActor);

src/web/stashes.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const {
+	createStash,
 	stashActor,
 	stashScene,
 	stashMovie,
@@ -10,6 +11,12 @@ const {
 	updateStash,
 } = require('../stashes');
 
+async function createStashApi(req, res) {
+	const stash = await createStash(req.body, req.session.user);
+
+	res.send(stash);
+}
+
 async function updateStashApi(req, res) {
 	const stash = await updateStash(req.params.stashId, req.body, req.session.user);
 
@@ -53,6 +60,7 @@ async function unstashMovieApi(req, res) {
 }
 
 module.exports = {
+	createStash: createStashApi,
 	stashActor: stashActorApi,
 	stashScene: stashSceneApi,
 	stashMovie: stashMovieApi,