wip: Started working on new development environment

packages/freesewing.shared/components/wrappers/page.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { useSwipeable } from 'react-swipeable'
 import { useRouter } from 'next/router'
 import { useHotkeys } from 'react-hotkeys-hook'
@@ -6,7 +6,7 @@ import { useHotkeys } from 'react-hotkeys-hook'
 import Layout from 'shared/components/layouts/default'
 
 /* This component should wrap all page content */
-const AppWrapper= props => {
+const PageWrapper= props => {
 
   const swipeHandlers = useSwipeable({
     onSwipedLeft: evt => (props.app.primaryMenu) ? props.app.setPrimaryMenu(false) : null,
@@ -15,7 +15,9 @@ const AppWrapper= props => {
   })
 
   const router = useRouter()
-  props.app.setSlug(router.asPath.slice(1))
+  const slug = router.asPath.slice(1)
+
+  useEffect(() => props.app.setSlug(slug), [slug])
 
   // Trigger search with Ctrl+k
   useHotkeys('ctrl+k', (evt) => {
@@ -29,6 +31,9 @@ const AppWrapper= props => {
     app: props.app,
     title: props.title,
     search, setSearch, toggleSearch: () => setSearch(!search),
+    noSearch: props.noSearch,
+    workbench: props.workbench,
+    AltMenu: props.AltMenu || null
   }
 
   return (
@@ -45,5 +50,5 @@ const AppWrapper= props => {
   )
 }
 
-export default AppWrapper
+export default PageWrapper
 

packages/freesewing.shared/components/wrappers/workbench.js

@@ -0,0 +1,85 @@
+import { useState, useEffect } from 'react'
+import Layout from 'shared/components/layouts/default'
+import Menu from 'shared/components/workbench/menu.js'
+import Measurements, { Input } from 'shared/components/workbench/measurements.js'
+import set from 'lodash.set'
+
+// Generates a default pattern gist to start from
+const defaultGist = (pattern, language='en') => ({
+  design: pattern.config.name,
+  version: pattern.config.version,
+  settings: {
+    sa: 0,
+    complete: true,
+    paperless: false,
+    units: 'metric',
+    locale: language,
+    margin: 2,
+    debug: true,
+  }
+})
+
+const hasRequiredMeasurements = (pattern, gist) => {
+  for (const m of pattern.config.measurements) {
+    console.log(m)
+  }
+}
+
+/*
+ * This component wraps the workbench and is in charge of
+ * keeping the mode & gist state, which will trickly down
+ * to all workbench subcomponents
+ *
+ * mode: What to display (draft, sample, measurements, ...)
+ * gist: The runtime pattern configuration
+ */
+const WorkbenchWrapper = ({ app, pattern }) => {
+
+  // State for display mode and gist
+  const [mode, setMode] = useState(null)
+  const [gist, setGist] = useState(defaultGist(pattern, app.language))
+  const [fuck, setFuck] = useState('')
+
+  // If we don't have the requiremed measurements,
+  // force mode to measurements
+  useEffect(() => {
+    if (
+      mode !== 'measurements'
+      && !hasRequiredMeasurements(pattern, gist)
+    ) setMode('measurements')
+  })
+
+  /*
+   * Update gist method. See lodash.set
+   */
+  const updateGist = (path, content) => {
+    const newGist = {...gist}
+    set(newGist, path, content)
+    setGist(newGist)
+  }
+
+  // Required props for layout
+  const layoutProps = {
+    app: app,
+    noSearch: true,
+    workbench: true,
+    AltMenu: Menu
+  }
+
+  return (
+    <Layout {...layoutProps}>
+      {mode === 'measurements' && (
+        <Measurements
+          app={app}
+          pattern={pattern}
+          gist={gist}
+          updateGist={updateGist}
+        />
+      )}
+      <pre>{JSON.stringify(gist, null, 2)}</pre>
+    </Layout>
+  )
+}
+
+export default WorkbenchWrapper
+