From a233cbcb1fd36437e24916440695bdc77002169f Mon Sep 17 00:00:00 2001
From: Caleb Owens <caleb@gitbutler.com>
Date: Mon, 18 Nov 2024 16:54:33 +0100
Subject: [PATCH] Added example page for redux

---
 .../src/routes/reduxExample/+page.svelte      | 54 +++++++++++++++++++
 packages/shared/src/lib/redux/example.ts      |  8 ++-
 packages/shared/src/lib/redux/utils.ts        | 14 +----
 3 files changed, 61 insertions(+), 15 deletions(-)
 create mode 100644 apps/desktop/src/routes/reduxExample/+page.svelte

diff --git a/apps/desktop/src/routes/reduxExample/+page.svelte b/apps/desktop/src/routes/reduxExample/+page.svelte
new file mode 100644
index 000000000..42890baaa
--- /dev/null
+++ b/apps/desktop/src/routes/reduxExample/+page.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+	import {
+		decrement,
+		increment,
+		selectExampleValue,
+		selectExampleValueGreaterThan
+	} from '@gitbutler/shared/redux/example';
+	import { useDispatch, useStore } from '@gitbutler/shared/redux/utils';
+	import Button from '@gitbutler/ui/Button.svelte';
+	import { goto } from '$app/navigation';
+
+	/**
+	 * A demo page for Redux. This can be accessed by typing
+	 * `location = '/reduxExample'` in the console.
+	 */
+
+	const store = useStore();
+	const dispatch = useDispatch();
+
+	let comparisonTarget = $state(4);
+
+	const currentValue = $derived(selectExampleValue($store));
+	const greaterThanComparisonTarget = $derived(
+		selectExampleValueGreaterThan($store, comparisonTarget)
+	);
+</script>
+
+<div class="example-container">
+	<Button onclick={() => goto('/')} type="button">Go back</Button>
+
+	<h1>Redux Example</h1>
+	<p>Current value: {currentValue}</p>
+
+	<div>
+		<Button onclick={() => dispatch(increment())} type="button">increase</Button>
+		<Button onclick={() => dispatch(decrement())} type="button">decrease</Button>
+	</div>
+	<hr />
+	<p>
+		Is current value greater than <input type="number" bind:value={comparisonTarget} />? {greaterThanComparisonTarget}
+	</p>
+</div>
+
+<style lang="postcss">
+	.example-container {
+		margin: auto;
+
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+
+		gap: 8px;
+	}
+</style>
diff --git a/packages/shared/src/lib/redux/example.ts b/packages/shared/src/lib/redux/example.ts
index ee1dc1250..c113e175b 100644
--- a/packages/shared/src/lib/redux/example.ts
+++ b/packages/shared/src/lib/redux/example.ts
@@ -25,5 +25,9 @@ const exampleSlice = createSlice({
 export const { increment, decrement } = exampleSlice.actions;
 export const exampleReducer = exampleSlice.reducer;
 
-export const selectExample = createSelector(selectSelf, (state) => state.example);
-export const selectExampleValue = createSelector(selectExample, (example) => example.value);
+export const selectExample = createSelector([selectSelf], (state) => state.example);
+export const selectExampleValue = createSelector([selectExample], (example) => example.value);
+export const selectExampleValueGreaterThan = createSelector(
+	[selectExampleValue, (_state: unknown, target: number) => target],
+	(value, target: number) => value > target
+);
diff --git a/packages/shared/src/lib/redux/utils.ts b/packages/shared/src/lib/redux/utils.ts
index aacfd2360..b10253f2e 100644
--- a/packages/shared/src/lib/redux/utils.ts
+++ b/packages/shared/src/lib/redux/utils.ts
@@ -1,5 +1,5 @@
 import { _store, type AppDispatch, type RootState } from '$lib/redux/store';
-import { derived, readable, type Readable } from 'svelte/store';
+import { readable, type Readable } from 'svelte/store';
 
 /**
  * Used to access the store directly. It is recommended to access state via
@@ -16,18 +16,6 @@ export function useStore(): Readable<RootState> {
 	return stateStore;
 }
 
-/**
- * Used in combination with slice specific selectors. If an argument of the
- * selector depends on a reactive property, IE something defined with
- * `$state` or similar runes, then the `useSelector` call should be wrapped in
- * a `$derived` block.
- */
-export function useSelector<T>(selector: (state: RootState) => T): Readable<T> {
-	const stateStore = useStore();
-
-	return derived(stateStore, (state) => selector(state));
-}
-
 /**
  * Used to access the dispatch function.
  */