feat: basic share functioality and layout. Commit point to start on d…

…etails modal

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "thatconference.com",
-	"version": "5.1.15",
+	"version": "5.2.0",
 	"description": "THATConference.com website",
 	"main": "index.js",
 	"type": "module",
@@ -15,6 +15,7 @@
 	"scripts": {
 		"prepare": "npx husky install",
 		"dev": "env-cmd vite dev",
+		"dev:host": "env-cmd vite dev --host",
 		"local:build": "env-cmd vite build",
 		"build": "vite build",
 		"preview": "env-cmd vite preview",

src/_dataSources/api.that.tech/memberShareWith/mutations.js

@@ -0,0 +1,143 @@
+import gFetch from '$lib/gfetch';
+import { log } from '../utilities/error';
+
+const secureProfileFields = `
+	fragment secureProfileFields on SecureProfile {
+		... on PrivateProfile {
+			__typename
+			id
+			firstName
+			lastInitial
+		}
+		... on PublicProfile {
+			__typename
+			id
+			firstName
+			lastName
+			profileSlug
+		}
+	}
+`;
+export const MUTATION_ADD_SHARE_WITH_BY_PIN = `
+	${secureProfileFields}
+	mutation addShareWithPin($shareWith: ShareWithByPinInput!) {
+		members {
+			network {
+				add {
+					pin(shareWith: $shareWith) {
+						__typename
+						isSuccess
+						message
+						sharedWith {
+							__typename
+							createdAt
+							lastUpdatedAt
+							notes
+							sharingWithProfile {
+								...secureProfileFields
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+`;
+export const MUTATION_ADD_SHARE_WITH_PROFILE = `
+	${secureProfileFields}
+	mutation addShareWithProfile($shareWith: ShareWithByProfileInput!) {
+		members {
+			network {
+				add {
+					profile(shareWith: $shareWith) {
+						__typename
+						isSuccess
+						message
+						sharedWith {
+							__typename
+							createdAt
+							lastUpdatedAt
+							notes
+							sharingWithProfile {
+								...secureProfileFields
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+`;
+export const MUTATION_REMOVE_SHARE = `
+	mutation removeShareWith($memberId: ID!) {
+		members {
+			network {
+				sharingWith (sharedWithId: $memberId) {
+					remove
+				}
+			}
+		}
+	}
+`;
+
+export default (fetch) => {
+	const client = fetch ? gFetch(fetch) : gFetch();
+
+	function shareWithByPin(shareWith) {
+		const variables = { shareWith };
+		return client
+			.mutation({ mutation: MUTATION_ADD_SHARE_WITH_BY_PIN, variables })
+			.then(({ data, errors }) => {
+				if (errors) {
+					log({ errors, tag: 'MUTATION_ADD_SHARE_WITH' });
+					throw new Error('An error occurred while sharing your information');
+				}
+
+				return data.members.network.add.pin;
+			});
+	}
+
+	function shareWithByProfile(shareWith) {
+		const { id, profileSlug, notes } = shareWith;
+		const variables = {
+			shareWith: {
+				shareWithMember: {
+					id: id ?? null,
+					slug: profileSlug ?? null
+				},
+				notes: notes ?? ''
+			}
+		};
+
+		return client
+			.mutation({ mutation: MUTATION_ADD_SHARE_WITH_PROFILE, variables })
+			.then(({ data, errors }) => {
+				if (errors) {
+					log({ errors, tag: 'MUTATION_ADD_SHARE_WITH_PROFILE' });
+					throw new Error('An error occurred while sharing your information');
+				}
+
+				return data.members.network.add.profile;
+			});
+	}
+
+	function removeShareWith(memberId) {
+		const variables = { memberId };
+		return client
+			.mutation({ mutation: MUTATION_REMOVE_SHARE, variables })
+			.then(({ data, errors }) => {
+				if (errors) {
+					log({ errors, tag: 'MUTATION_REMOVE_SHARE' });
+					throw new Error('An error occurred removing the share');
+				}
+
+				return data.members.network.sharingWith.remove;
+			});
+	}
+
+	return {
+		shareWithByPin,
+		shareWithByProfile,
+		removeShareWith
+	};
+};

src/_dataSources/api.that.tech/memberShareWith/queries.js

@@ -0,0 +1,93 @@
+import gFetch from '$lib/gfetch';
+
+import { log } from '../utilities/error';
+
+const secureProfileFields = `
+	fragment secureProfileFields on SecureProfile {
+		... on PrivateProfile {
+			__typename
+			id
+			firstName
+			lastInitial
+		}
+		... on PublicProfile {
+			__typename
+			id
+			firstName
+			lastName
+		}
+	}
+`;
+
+export const QUERY_ME_SHARING_WITH = `
+	${secureProfileFields}
+	query meSharingWith {
+		members {
+			network {
+				sharedByMe {
+					notes
+					sharingWithProfile {
+						...secureProfileFields
+					}
+				}
+			}
+		}
+	}
+`;
+
+export const QUERY_SHARING_WITH_ME = `
+	${secureProfileFields}
+	query sharingWithMe {
+		members {
+			network {
+				sharedWithMe {
+					sharedWithMeProfile {
+						...secureProfileFields
+					}
+				
+					sharedWithMeSharedProfile {
+						__typename
+						firstName
+						lastName
+						email
+						company
+						phone
+						city
+						state
+						country
+					}
+					createdAt
+				}
+			}
+		}
+	}
+`;
+
+export default (fetch) => {
+	const client = fetch ? gFetch(fetch) : gFetch();
+
+	const getMeSharingWith = () => {
+		return client
+			.secureQuery({ query: QUERY_ME_SHARING_WITH, variables: {} })
+			.then(({ data, errors }) => {
+				if (errors) log({ errors, tag: 'QUERY_SHARING_WITH_ME' });
+
+				return data.members.network.sharedByMe;
+			});
+	};
+
+	const getSharingWithMe = () => {
+		return client
+			.secureQuery({ query: QUERY_SHARING_WITH_ME, variables: {} })
+			.then(({ data, errors }) => {
+				if (errors) log({ errors, tag: 'QUERY_SHARING_WITH_ME' });
+
+				return data.members.network.sharedWithMe;
+			});
+	};
+
+	return {
+		getMeSharingWith,
+		getSharingWithMe
+	};
+};

src/_elements/buttons/Standard.svelte

@@ -3,11 +3,11 @@
 	type="button"
 	on:click
 	class="whitespace-nowrap rounded-md border-2 border-thatBlue-500
-		bg-white px-8 py-2 
+		bg-white px-8 py-2
 		text-base font-medium
-		leading-6 text-thatBlue-500 shadow transition duration-150 
-		ease-in-out hover:bg-thatBlue-500 
-		hover:text-white focus:border-thatBlue-800 focus:bg-thatBlue-500 focus:text-white focus:outline-none 
+		leading-6 text-thatBlue-500 shadow transition duration-150
+		ease-in-out hover:bg-thatBlue-500
+		hover:text-white focus:border-thatBlue-800 focus:bg-thatBlue-500 focus:text-white focus:outline-none
 		focus:ring-thatBlue-500 md:px-10 md:text-lg">
 	<span>
 		<slot />

src/routes/(admin my)/my/_elements/RowButton.svelte

@@ -0,0 +1,12 @@
+<button
+	{...$$restProps}
+	type="button"
+	on:click
+	class="mr-2 rounded-full border-thatBlue-500 bg-thatBlue-500 px-4 py-1
+		text-sm font-semibold text-white no-underline shadow-md
+	hover:bg-thatOrange-500 focus:outline-none active:shadow-none">
+	<span>
+		<slot />
+		<slot name="success" />
+	</span>
+</button>

src/routes/(admin my)/my/member-sharing/+layout@.svelte

@@ -0,0 +1 @@
+<slot />

src/routes/(admin my)/my/member-sharing/+page.svelte

@@ -0,0 +1,14 @@
+<script>
+	import { Standard as StandardLink } from '$elements/links';
+	import { events } from '$lib/config.public';
+</script>
+
+<div class="mx-auto max-w-md px-4 sm:px-6 lg:px-8">
+	<h1 class="mt-2 text-xl font-bold leading-6 text-thatBlue-800">THAT Contact Exchange</h1>
+	<p>Select an event</p>
+
+	<div class="mt-10 flex flex-col space-x-0 space-y-2 sm:flex-row sm:space-x-8 sm:space-y-0">
+		<StandardLink href="/my/member-sharing/{events.next.wi.id}">Wisconsin</StandardLink>
+		<StandardLink href="/my/member-sharing/{events.next.tx.id}">Texas</StandardLink>
+	</div>
+</div>

src/routes/(admin my)/my/member-sharing/[eventId]/+page.server.js

@@ -0,0 +1,5 @@
+/* This empty page is intentional
+ * having this +page.server page here forces the hooks.server handler to execute
+ * regardless if page.svelte is fully loaded or not
+ * https://github.com/sveltejs/kit/issues/6315
+ */