From 71c58bbc2edabe3ae0e9c526dd38c22569b20b8c Mon Sep 17 00:00:00 2001
From: unknown <raabejonas@yahoo.de>
Date: Thu, 30 Mar 2023 14:09:16 +0200
Subject: [PATCH 1/3] add tutorialstore

---
 .../Mapstories/EditMapstoryView/index.tsx     | 43 +++++++++++++++----
 src/lib/store/store.ts                        |  4 +-
 src/lib/store/story.ts                        |  3 +-
 src/lib/store/tutorial.ts                     | 26 +++++++++++
 src/lib/store/ui.ts                           |  3 +-
 5 files changed, 67 insertions(+), 12 deletions(-)
 create mode 100644 src/lib/store/tutorial.ts

diff --git a/src/components/Studio/Mapstories/EditMapstoryView/index.tsx b/src/components/Studio/Mapstories/EditMapstoryView/index.tsx
index f1536731..ca1f4a8b 100644
--- a/src/components/Studio/Mapstories/EditMapstoryView/index.tsx
+++ b/src/components/Studio/Mapstories/EditMapstoryView/index.tsx
@@ -7,6 +7,8 @@ import useStory from '@/src/lib/api/story/useStory'
 import { Spinner } from '@/src/components/Elements/Spinner'
 import { StudioShell } from '../../Shell'
 import EditMapstoryMap from './EditMapstoryMap'
+import { useBoundStore } from '@/src/lib/store/store'
+import { XMarkIcon } from '@heroicons/react/24/outline'
 
 type EditMapstoryViewProps = {
   story: Story & {
@@ -21,7 +23,12 @@ export default function EditMapstoryView({ story }: EditMapstoryViewProps) {
   const path = usePathname()
 
   const { story: currentStory } = useStory(story.id)
-
+  const titleSlide = useBoundStore(state => state.titleslide)
+  const setTitleSlide = useBoundStore(state => state.setTitleSlide)
+  const noMarkerOnSlide = useBoundStore(state => state.noMarkerOnSlide)
+  const setNoMarkerOnSlide = useBoundStore(state => state.setNoMarkerOnSlide)
+  const dragMarker = useBoundStore(state => state.dragMarker)
+  const setDragMarker = useBoundStore(state => state.setDragMarker)
   useEffect(() => {
     const stepId = path?.split('/').at(-1)
     const currentStep = currentStory?.steps?.find(s => s.id === stepId)
@@ -46,16 +53,34 @@ export default function EditMapstoryView({ story }: EditMapstoryViewProps) {
     <StudioShell>
       <div className="re-studio-height-full-screen absolute top-0 z-10 w-full overflow-hidden rounded-lg shadow">
         <div className="absolute top-0 z-20  w-full ">
-          <div className=" mapboxgl-ctrl-group mx-auto mt-2 w-fit px-3 py-1 text-center text-sm text-black">
-            {currentStep.id === story.firstStepId ? (
-              <span>Dies ist deine Titelfolie. </span>
-            ) : !currentStep?.feature ? (
-              <span>Klicke auf die Karte um deinen Marker hinzuzufügen</span>
-            ) : (
-              <span>
+          <div className=" mapboxgl-ctrl-group mx-auto mt-2 w-max px-3 py-1 text-center text-sm text-black">
+            {titleSlide && currentStep.id === story.firstStepId ? (
+              <span className="flex">
+                Dies ist deine Titelfolie.{' '}
+                <XMarkIcon
+                  className="ml-2 h-4 w-5 hover:cursor-pointer"
+                  onClick={() => setTitleSlide(false)}
+                />{' '}
+              </span>
+            ) : noMarkerOnSlide && !currentStep?.feature ? (
+              <span className="flex">
+                Klicke auf die Karte um deinen Marker hinzuzufügen{' '}
+                <XMarkIcon
+                  className="ml-2 h-4 w-5 hover:cursor-pointer"
+                  onClick={() => setNoMarkerOnSlide(false)}
+                />{' '}
+              </span>
+            ) : dragMarker &&
+              currentStep?.feature &&
+              currentStep.id != story.firstStepId ? (
+              <span className="flex">
                 Verschiebe den roten Marker um dessen Position zu ändern
+                <XMarkIcon
+                  className="ml-2 h-4 w-5 hover:cursor-pointer"
+                  onClick={() => setDragMarker(false)}
+                />
               </span>
-            )}
+            ) : null}
           </div>
         </div>
 
diff --git a/src/lib/store/store.ts b/src/lib/store/store.ts
index ce31c32e..ccf705da 100644
--- a/src/lib/store/store.ts
+++ b/src/lib/store/store.ts
@@ -2,12 +2,14 @@ import { create } from 'zustand'
 import { StoryState, useStoryStore } from './story'
 import { UIState, useUIStore } from './ui'
 import { persist } from 'zustand/middleware'
+import { TutorialState, useTutorialStore } from './tutorial'
 
 export const useBoundStore = create(
-  persist<StoryState & UIState>(
+  persist<StoryState & UIState & TutorialState>(
     (set, get, api) => ({
       ...useStoryStore(set, get, api),
       ...useUIStore(set, get, api),
+      ...useTutorialStore(set, get, api),
     }),
     {
       name: 'bound-store',
diff --git a/src/lib/store/story.ts b/src/lib/store/story.ts
index 497b36ce..a42c1cff 100644
--- a/src/lib/store/story.ts
+++ b/src/lib/store/story.ts
@@ -1,5 +1,6 @@
 import { StateCreator } from 'zustand'
 import { UIState } from './ui'
+import { TutorialState } from './tutorial'
 
 export interface StoryState {
   storyID: string
@@ -13,7 +14,7 @@ export interface StoryState {
 }
 
 export const useStoryStore: StateCreator<
-  StoryState & UIState,
+  StoryState & UIState & TutorialState,
   [],
   [],
   StoryState
diff --git a/src/lib/store/tutorial.ts b/src/lib/store/tutorial.ts
new file mode 100644
index 00000000..85fda1c4
--- /dev/null
+++ b/src/lib/store/tutorial.ts
@@ -0,0 +1,26 @@
+import { StateCreator } from 'zustand'
+import { UIState } from './ui'
+import { StoryState } from './story'
+
+export interface TutorialState {
+  titleslide: boolean
+  noMarkerOnSlide: boolean
+  dragMarker: boolean
+  setTitleSlide: (titleslide: boolean) => void
+  setNoMarkerOnSlide: (noMarkerOnSlide: boolean) => void
+  setDragMarker: (dragMarker: boolean) => void
+}
+
+export const useTutorialStore: StateCreator<
+  StoryState & UIState & TutorialState,
+  [],
+  [],
+  TutorialState
+> = set => ({
+  titleslide: true,
+  setTitleSlide: (titleslide: boolean) => set({ titleslide }),
+  noMarkerOnSlide: true,
+  setNoMarkerOnSlide: (noMarkerOnSlide: boolean) => set({ noMarkerOnSlide }),
+  dragMarker: true,
+  setDragMarker: (dragMarker: boolean) => set({ dragMarker }),
+})
diff --git a/src/lib/store/ui.ts b/src/lib/store/ui.ts
index 9c39e548..2ac1e80d 100644
--- a/src/lib/store/ui.ts
+++ b/src/lib/store/ui.ts
@@ -1,5 +1,6 @@
 import { StateCreator } from 'zustand'
 import { StoryState } from './story'
+import { TutorialState } from './tutorial'
 
 export interface UIState {
   language: string
@@ -7,7 +8,7 @@ export interface UIState {
 }
 
 export const useUIStore: StateCreator<
-  StoryState & UIState,
+  StoryState & UIState & TutorialState,
   [],
   [],
   UIState

From 95b924c734b00ef51fb3f4823e0328c619910691 Mon Sep 17 00:00:00 2001
From: unknown <raabejonas@yahoo.de>
Date: Thu, 30 Mar 2023 14:19:59 +0200
Subject: [PATCH 2/3] combinedState

---
 src/lib/store/CombinedState.ts | 5 +++++
 src/lib/store/store.ts         | 9 +++++----
 src/lib/store/story.ts         | 5 ++---
 src/lib/store/ui.ts            | 5 ++---
 4 files changed, 14 insertions(+), 10 deletions(-)
 create mode 100644 src/lib/store/CombinedState.ts

diff --git a/src/lib/store/CombinedState.ts b/src/lib/store/CombinedState.ts
new file mode 100644
index 00000000..3b5ad14c
--- /dev/null
+++ b/src/lib/store/CombinedState.ts
@@ -0,0 +1,5 @@
+import { UIState } from './ui'
+import { TutorialState } from './tutorial'
+import { StoryState } from './story'
+
+export type CombinedState = UIState & TutorialState & StoryState
diff --git a/src/lib/store/store.ts b/src/lib/store/store.ts
index ccf705da..87ef78ac 100644
--- a/src/lib/store/store.ts
+++ b/src/lib/store/store.ts
@@ -1,11 +1,12 @@
 import { create } from 'zustand'
-import { StoryState, useStoryStore } from './story'
-import { UIState, useUIStore } from './ui'
+import { useStoryStore } from './story'
+import { useUIStore } from './ui'
 import { persist } from 'zustand/middleware'
-import { TutorialState, useTutorialStore } from './tutorial'
+import { useTutorialStore } from './tutorial'
+import { CombinedState } from './CombinedState'
 
 export const useBoundStore = create(
-  persist<StoryState & UIState & TutorialState>(
+  persist<CombinedState>(
     (set, get, api) => ({
       ...useStoryStore(set, get, api),
       ...useUIStore(set, get, api),
diff --git a/src/lib/store/story.ts b/src/lib/store/story.ts
index a42c1cff..9907d549 100644
--- a/src/lib/store/story.ts
+++ b/src/lib/store/story.ts
@@ -1,6 +1,5 @@
 import { StateCreator } from 'zustand'
-import { UIState } from './ui'
-import { TutorialState } from './tutorial'
+import { CombinedState } from './CombinedState'
 
 export interface StoryState {
   storyID: string
@@ -14,7 +13,7 @@ export interface StoryState {
 }
 
 export const useStoryStore: StateCreator<
-  StoryState & UIState & TutorialState,
+  CombinedState,
   [],
   [],
   StoryState
diff --git a/src/lib/store/ui.ts b/src/lib/store/ui.ts
index 2ac1e80d..ad3734af 100644
--- a/src/lib/store/ui.ts
+++ b/src/lib/store/ui.ts
@@ -1,6 +1,5 @@
 import { StateCreator } from 'zustand'
-import { StoryState } from './story'
-import { TutorialState } from './tutorial'
+import { CombinedState } from './CombinedState'
 
 export interface UIState {
   language: string
@@ -8,7 +7,7 @@ export interface UIState {
 }
 
 export const useUIStore: StateCreator<
-  StoryState & UIState & TutorialState,
+  CombinedState,
   [],
   [],
   UIState

From 0a835e7043aadbf23195df70addf86d86ad7ed9d Mon Sep 17 00:00:00 2001
From: unknown <raabejonas@yahoo.de>
Date: Thu, 30 Mar 2023 22:22:42 +0200
Subject: [PATCH 3/3] extract help messages

---
 .../EditMapstoryView/helpMessages.tsx         | 49 +++++++++++++++++++
 .../Mapstories/EditMapstoryView/index.tsx     | 40 ++-------------
 2 files changed, 54 insertions(+), 35 deletions(-)
 create mode 100644 src/components/Studio/Mapstories/EditMapstoryView/helpMessages.tsx

diff --git a/src/components/Studio/Mapstories/EditMapstoryView/helpMessages.tsx b/src/components/Studio/Mapstories/EditMapstoryView/helpMessages.tsx
new file mode 100644
index 00000000..66474ddb
--- /dev/null
+++ b/src/components/Studio/Mapstories/EditMapstoryView/helpMessages.tsx
@@ -0,0 +1,49 @@
+import { StoryStep } from '@prisma/client'
+import { useBoundStore } from '@/src/lib/store/store'
+import { XMarkIcon } from '@heroicons/react/24/outline'
+
+type HelpMessagesProps = {
+  currentStep: StoryStep
+  firstStepId: string | undefined
+}
+
+export default function HelpMessages({
+  currentStep,
+  firstStepId,
+}: HelpMessagesProps) {
+  const titleSlide = useBoundStore(state => state.titleslide)
+  const setTitleSlide = useBoundStore(state => state.setTitleSlide)
+  const noMarkerOnSlide = useBoundStore(state => state.noMarkerOnSlide)
+  const setNoMarkerOnSlide = useBoundStore(state => state.setNoMarkerOnSlide)
+  const dragMarker = useBoundStore(state => state.dragMarker)
+  const setDragMarker = useBoundStore(state => state.setDragMarker)
+
+  let message, onClick
+
+  if (titleSlide && currentStep.id === firstStepId) {
+    message = 'Dies ist deine Titelfolie.'
+    onClick = () => setTitleSlide(false)
+  } else if (noMarkerOnSlide && !currentStep?.feature) {
+    message = 'Klicke auf die Karte um deinen Marker hinzuzufügen'
+    onClick = () => setNoMarkerOnSlide(false)
+  } else if (
+    dragMarker &&
+    currentStep?.feature &&
+    currentStep.id !== firstStepId
+  ) {
+    message = 'Verschiebe den roten Marker um dessen Position zu ändern'
+    onClick = () => setDragMarker(false)
+  } else {
+    return null
+  }
+
+  return (
+    <span className="flex">
+      {message}
+      <XMarkIcon
+        className="ml-2 h-4 w-5 hover:cursor-pointer"
+        onClick={onClick}
+      />
+    </span>
+  )
+}
diff --git a/src/components/Studio/Mapstories/EditMapstoryView/index.tsx b/src/components/Studio/Mapstories/EditMapstoryView/index.tsx
index ca1f4a8b..2bc6fbaf 100644
--- a/src/components/Studio/Mapstories/EditMapstoryView/index.tsx
+++ b/src/components/Studio/Mapstories/EditMapstoryView/index.tsx
@@ -7,8 +7,7 @@ import useStory from '@/src/lib/api/story/useStory'
 import { Spinner } from '@/src/components/Elements/Spinner'
 import { StudioShell } from '../../Shell'
 import EditMapstoryMap from './EditMapstoryMap'
-import { useBoundStore } from '@/src/lib/store/store'
-import { XMarkIcon } from '@heroicons/react/24/outline'
+import HelpMessages from './helpMessages'
 
 type EditMapstoryViewProps = {
   story: Story & {
@@ -23,12 +22,6 @@ export default function EditMapstoryView({ story }: EditMapstoryViewProps) {
   const path = usePathname()
 
   const { story: currentStory } = useStory(story.id)
-  const titleSlide = useBoundStore(state => state.titleslide)
-  const setTitleSlide = useBoundStore(state => state.setTitleSlide)
-  const noMarkerOnSlide = useBoundStore(state => state.noMarkerOnSlide)
-  const setNoMarkerOnSlide = useBoundStore(state => state.setNoMarkerOnSlide)
-  const dragMarker = useBoundStore(state => state.dragMarker)
-  const setDragMarker = useBoundStore(state => state.setDragMarker)
   useEffect(() => {
     const stepId = path?.split('/').at(-1)
     const currentStep = currentStory?.steps?.find(s => s.id === stepId)
@@ -54,33 +47,10 @@ export default function EditMapstoryView({ story }: EditMapstoryViewProps) {
       <div className="re-studio-height-full-screen absolute top-0 z-10 w-full overflow-hidden rounded-lg shadow">
         <div className="absolute top-0 z-20  w-full ">
           <div className=" mapboxgl-ctrl-group mx-auto mt-2 w-max px-3 py-1 text-center text-sm text-black">
-            {titleSlide && currentStep.id === story.firstStepId ? (
-              <span className="flex">
-                Dies ist deine Titelfolie.{' '}
-                <XMarkIcon
-                  className="ml-2 h-4 w-5 hover:cursor-pointer"
-                  onClick={() => setTitleSlide(false)}
-                />{' '}
-              </span>
-            ) : noMarkerOnSlide && !currentStep?.feature ? (
-              <span className="flex">
-                Klicke auf die Karte um deinen Marker hinzuzufügen{' '}
-                <XMarkIcon
-                  className="ml-2 h-4 w-5 hover:cursor-pointer"
-                  onClick={() => setNoMarkerOnSlide(false)}
-                />{' '}
-              </span>
-            ) : dragMarker &&
-              currentStep?.feature &&
-              currentStep.id != story.firstStepId ? (
-              <span className="flex">
-                Verschiebe den roten Marker um dessen Position zu ändern
-                <XMarkIcon
-                  className="ml-2 h-4 w-5 hover:cursor-pointer"
-                  onClick={() => setDragMarker(false)}
-                />
-              </span>
-            ) : null}
+            <HelpMessages
+              currentStep={currentStep}
+              firstStepId={story.firstStepId ?? undefined}
+            />
           </div>
         </div>