Add free drawing space (#7280)

* Add background drawing slug

* nil not null

* Setup stuff (#7300)

* Merge scrubbers (#7303)

* Setup background

* Patch canvas background

* Merge scrubber

* Comment out console log

* Remove old code, adjust scrubber-tooltip-info

* Use soft break on error

* Update app/javascript/components/bootcamp/DrawingPage/Header/Header.tsx

---------

Co-authored-by: Aron Demeter <66035744+dem4ron@users.noreply.github.com>
Co-authored-by: dem4ron <demaaron88@gmail.com>

app/controllers/api/bootcamp/drawings_controller.rb

@@ -4,6 +4,7 @@ class API::Bootcamp::DrawingsController < API::Bootcamp::BaseController
   def update
     @drawing.update(code: params[:code]) if params[:code].present?
     @drawing.update(title: params[:title]) if params[:title].present?
+    @drawing.update(background_slug: params[:background_slug]) if params[:background_slug].present?
 
     render json: {}, status: :ok
   end

app/helpers/react_components/bootcamp/drawing_page.rb

@@ -12,17 +12,32 @@ def data
       {
         drawing: {
           uuid: drawing.uuid,
-          title: drawing.title
+          title: drawing.title,
+          background_slug: drawing.background_slug
         },
         code: {
           code: drawing.code,
           stored_at: drawing.updated_at
         },
+        backgrounds: BACKGROUNDS,
         links: {
           update_code: Exercism::Routes.api_bootcamp_drawing_url(drawing),
           drawings_index: Exercism::Routes.bootcamp_project_path(:drawing)
         }
       }
     end
   end
+
+  BACKGROUNDS = [
+    {
+      slug: "none",
+      title: "No background",
+      image_url: nil
+    },
+    {
+      slug: "room",
+      title: "A room to decorate",
+      image_url: "https://shared.cdn.galeriekodl.cz/plain/w:1200/rs:fit:1200:909:1/czM6Ly9zaGFyZWQucHJhZ3VlL2l0ZW1zLzAzMjY0NzQxLWFiNDQtNGE0Mi1iNDg2LTk2NjEwOWFkYTJlNS5qcGVn"
+    }
+  ].freeze
 end

app/javascript/components/bootcamp/DrawingPage/DrawingPage.tsx

@@ -8,14 +8,15 @@ import { CodeMirror } from '../SolveExercisePage/CodeMirror/CodeMirror'
 import ErrorBoundary from '../common/ErrorBoundary/ErrorBoundary'
 import { useDrawingEditorHandler } from './useDrawingEditorHandler'
 import { useLocalStorage } from '@uidotdev/usehooks'
-import Scrubber from './Scrubber/Scrubber'
+import Scrubber from '../SolveExercisePage/Scrubber/Scrubber'
 import { debounce } from 'lodash'
 import { useSetupDrawingPage } from './useSetupDrawingPage'
 
 export default function DrawingPage({
   drawing,
   code,
   links,
+  backgrounds,
 }: DrawingPageProps) {
   const [savingStateLabel, setSavingStateLabel] = useState<string>('')
 
@@ -37,7 +38,8 @@ export default function DrawingPage({
     viewContainerRef,
     animationTimeline,
     frames,
-  } = useDrawingEditorHandler({ code, links, drawing })
+    setBackgroundImage,
+  } = useDrawingEditorHandler()
 
   const [editorLocalStorageValue, setEditorLocalStorageValue] = useLocalStorage(
     'bootcamp-editor-value-' + drawing.uuid,
@@ -63,8 +65,10 @@ export default function DrawingPage({
     <div id="bootcamp-solve-exercise-page">
       <Header
         links={links}
+        backgrounds={backgrounds}
         savingStateLabel={savingStateLabel}
         drawing={drawing}
+        setBackgroundImage={setBackgroundImage}
       />
       <div className="page-body">
         <div style={{ width: LHSWidth }} className="page-body-lhs">

app/javascript/components/bootcamp/DrawingPage/Header/Header.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { wrapWithErrorBoundary } from '@/components/bootcamp/common/ErrorBoundary/wrapWithErrorBoundary'
 import { assembleClassNames } from '@/utils/assemble-classnames'
 
@@ -11,7 +11,12 @@ function _Header({
   links,
   savingStateLabel,
   drawing,
-}: { savingStateLabel: string } & Pick<DrawingPageProps, 'links' | 'drawing'>) {
+  backgrounds,
+  setBackgroundImage,
+}: {
+  savingStateLabel: string
+  setBackgroundImage: ((imageUrl: string | null) => void) | null
+} & Pick<DrawingPageProps, 'links' | 'drawing' | 'backgrounds'>) {
   const [titleInputValue, setTitleInputValue] = useState(drawing.title)
   const [editMode, setEditMode] = useState(false)
   const [titleSavingStateLabel, setTitleSavingStateLabel] = useState<string>(
@@ -28,6 +33,28 @@ function _Header({
       .catch(() => setTitleSavingStateLabel('Try again'))
   }, [links, titleInputValue])
 
+  const handleBackgroundChange = useCallback(
+    (background: Background) => {
+      if (setBackgroundImage) {
+        setBackgroundImage(background.imageUrl)
+        patchCanvasBackground(links, background.slug)
+      }
+    },
+    [setBackgroundImage]
+  )
+
+  // setup the background on mount
+  useEffect(() => {
+    if (setBackgroundImage && drawing.backgroundSlug) {
+      const background = backgrounds.find(
+        (bg) => bg.slug === drawing.backgroundSlug
+      )
+      if (background) {
+        setBackgroundImage(background.imageUrl)
+      }
+    }
+  }, [drawing?.backgroundSlug, setBackgroundImage])
+
   return (
     <div className="page-header">
       <div className="ident">
@@ -42,6 +69,26 @@ function _Header({
             {savingStateLabel}
           </span>
         )}
+
+        <select
+          onChange={(e) => {
+            const selectedBackground: Background = JSON.parse(
+              e.target.selectedOptions[0].dataset.background!
+            )
+            handleBackgroundChange(selectedBackground)
+          }}
+          value={drawing.backgroundSlug}
+        >
+          {backgrounds.map((background) => (
+            <option
+              key={background.slug}
+              value={background.slug}
+              data-background={JSON.stringify(background)}
+            >
+              {background.title}
+            </option>
+          ))}
+        </select>
         <div className="flex items-center gap-12">
           {editMode ? (
             <>
@@ -107,3 +154,24 @@ async function patchDrawingTitle(
 
   return response.json()
 }
+
+async function patchCanvasBackground(
+  links: DrawingPageProps['links'],
+  backgroundSlug: string
+) {
+  const response = await fetch(links.updateCode, {
+    method: 'PATCH',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      background_slug: backgroundSlug,
+    }),
+  })
+
+  if (!response.ok) {
+    throw new Error('Failed to save code')
+  }
+
+  return response.json()
+}