WIP reference session

static/coffee/main/react/reference_session.coffee

@@ -1,13 +1,68 @@
 import {R, fragment, classNames} from "./_react"
 
+import * as React from 'react'
+
 P = R.package "ReferenceSession"
 
-import {div, button, span} from 'react-dom-factories'
+import {div, button, span, svg, circle} from 'react-dom-factories'
 
 import $ from "main/jquery"
 import {with_csrf} from "main/util"
 
+import {UploadManager} from "main/upload"
+
+ProgressBar = (props) ->
+  radius = props.radius ? 50
+  strokeWidth = props.strokeWidth ? 10
+  normalizedRadius = radius - strokeWidth * 2
+  circumference = normalizedRadius * 2 * Math.PI
+  strokeDashoffset = circumference - (props.progress / 100) * circumference
+
+  svg {
+    height: 2 * radius
+    width: 2 * radius
+  },
+    circle {
+      stroke: "#e6e6e6"
+      fill: "transparent"
+      strokeWidth: strokeWidth
+      r: normalizedRadius
+      cx: radius
+      cy: radius
+    }
+
+    circle {
+      stroke: "#00aaff"
+      fill: "transparent"
+      strokeWidth: strokeWidth
+      strokeDasharray: "#{circumference} #{circumference}"
+      style: { strokeDashoffset }
+      r: normalizedRadius
+      cx: radius
+      cy: radius
+      transform: "rotate(-90 #{radius} #{radius})"
+    }
+
+
+ProgressBar = React.memo ProgressBar
+
+
+ImageUpload = (props) ->
+
+      React.createElement ProgressBar, progress: 10
+
+
+ImageUpload = React.memo ImageUpload
+
+
+
 export ReferenceSession = P "ReferenceSession", {
+  getInitialState: ->
+    {
+      upload_manager: new UploadManager @props.uploader_opts
+      uploads: []
+    }
+
   fetch_state: ->
     $.post("", with_csrf())
       .always =>
@@ -20,16 +75,32 @@ export ReferenceSession = P "ReferenceSession", {
   componentDidMount: ->
     @fetch_state()
 
-  pick_upload: =>
+  push_upload: (upload) ->
+    @setState (state) -> {
+      uploads: state.uploads.concat(upload)
+    }
+
+    # TODO: remove the use of forceUpdate
+    upload.on_update = => @forceUpdate()
+
+  pick_upload: (e) ->
+    e.preventDefault()
+
+    @state.upload_manager.pick_file(@push_upload).then (upload) =>
+      @setState {
+        active_upload: upload
+      }
 
   render: ->
     div {
       className: "empty_display"
     },
+
       button {
         className: "button"
         onClick: @pick_upload
       }, "Upload image"
 
       span {}, "Paste or drop image to share it"
 }
+

static/coffee/main/upload.coffee

@@ -215,6 +215,7 @@ export class UploadManager
     @input.on "change", =>
       if file = @input[0].files[0]
         upload = @upload_file file
+        d.resolve upload
 
     @input.click()
 

static/scss/main/reference_session.scss

@@ -10,6 +10,7 @@
     .empty_display {
         display: flex;
         flex-direction: column;
+        align-items: center;
         gap: 10px;
     }
 }

views/reference_session.moon

@@ -10,5 +10,14 @@ class ReferenceSession extends require "widgets.page"
     createRoot(document.querySelector(widget_selector)).render(ReferenceSession(widget_params))
   ]]
 
+  js_init: =>
+    super {
+      uploader_opts: {
+        prepare_url: @url_for "prepare_upload"
+        accept: "image/png,image/jpeg,image/gif"
+      }
+    }
+
+
   inner_content: =>