\n \n \n );\n};\n\nHello.defaultProps = {\n name: \"David\",\n};\n\nHello.propTypes = {\n name: PropTypes.string,\n};\n\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n ReactDOM.render(\n ,\n document.body.appendChild(document.createElement(\"div\"))\n );\n});\n\nexport default Hello;\n","// Run this example by adding <%= javascript_pack_tag 'hello_react' %> to the head of your layout file,\n// like app/views/layouts/application.html.erb. All it does is render
Hello React
at the bottom\n// of the page.\n\nimport React, { useState } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport PropTypes from \"prop-types\";\n\nimport Autosuggest from \"react-autosuggest\";\n\n// Teach Autosuggest how to calculate suggestions for any given input value.\nconst getSuggestions = (data, value) => {\n const inputValue = value.trim().toLowerCase();\n const inputLength = inputValue.length;\n\n return inputLength === 0\n ? []\n : data.filter((d) => {\n console.log(d);\n return d.name.toLowerCase().slice(0, inputLength) === inputValue;\n });\n};\n\n// When suggestion is clicked, Autosuggest needs to populate the input\n// based on the clicked suggestion. Teach Autosuggest how to calculate the\n// input value for every given suggestion.\nconst getSuggestionValue = (suggestion) => suggestion.data;\n\n// Use your imagination to render suggestions.\nconst renderSuggestion = (suggestion) =>
{suggestion.data}
;\n\nclass MetricAutocomplete extends React.Component {\n constructor(props) {\n super();\n\n console.log(props);\n\n // Autosuggest is a controlled component.\n // This means that you need to provide an input value\n // and an onChange handler that updates this value (see below).\n // Suggestions also need to be provided to the Autosuggest,\n // and they are initially empty because the Autosuggest is closed.\n this.state = {\n value: \"\",\n data: props.data,\n suggestions: [],\n };\n }\n\n onChange = (event, { newValue }) => {\n this.setState({\n value: newValue,\n });\n };\n\n // Autosuggest will call this function every time you need to update suggestions.\n // You already implemented this logic above, so just use it.\n onSuggestionsFetchRequested = ({ value }) => {\n this.setState({\n suggestions: getSuggestions(this.props.data, value),\n });\n };\n\n // Autosuggest will call this function every time you need to clear suggestions.\n onSuggestionsClearRequested = () => {\n this.setState({\n suggestions: [],\n });\n };\n\n render() {\n const { value, suggestions } = this.state;\n\n // Autosuggest will pass through all these props to the input.\n const inputProps = {\n name: \"data\",\n placeholder: \"Type metric\",\n value,\n onChange: this.onChange,\n style: { width: \"100px\", borderRadius: \"8px\" },\n };\n\n // Finally, render it!\n return (\n \n );\n }\n}\n\nexport default MetricAutocomplete;\n","import React, { useCallback } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { useDropzone } from \"react-dropzone\";\nimport { DirectUpload } from \"@rails/activestorage\";\n\nconst NuUploader = ({ prefix, parent_id }) => {\n const parent = document.querySelector(`#${parent_id}`);\n\n const onDrop = useCallback((files) => {\n Array.from(files).forEach((file) => uploadFile(file));\n }, []);\n\n const uploadFile = (file) => {\n const url = \"/rails/active_storage/direct_uploads\";\n const upload = new DirectUpload(file, url);\n\n upload.create((error, blob) => {\n if (error) {\n console.log(error);\n } else {\n const hiddenField = document.createElement(\"input\");\n hiddenField.setAttribute(\"type\", \"hidden\");\n hiddenField.setAttribute(\"value\", blob.signed_id);\n hiddenField.name = `${prefix}[attachments][]`; // input.name;\n parent.appendChild(hiddenField);\n console.log(hiddenField);\n }\n });\n };\n\n const {\n acceptedFiles,\n getRootProps,\n getInputProps,\n isDragActive,\n } = useDropzone({ onDrop });\n\n const files = acceptedFiles.map((file) => (\n
Drag 'n' drop some files here, or click to select files
\n )}\n
\n {files.length > 0 && (\n
\n \n
\n )}\n \n );\n};\n\nNuUploader.propTypes = {};\nNuUploader.defaultProps = {};\n\nexport default NuUploader;\n","// Run this example by adding <%= javascript_pack_tag 'hello_react' %> to the head of your layout file,\n// like app/views/layouts/application.html.erb. All it does is render
Hello React
at the bottom\n// of the page.\n\nimport React, { useState } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport PropTypes from \"prop-types\";\n\n// https://stackoverflow.com/questions/46003422/how-to-render-react-component-into-itself-in-a-recursive-way\n\nconst Task = (task) => {\n const { id, name, tasks = [], onSubmit, onTab, onBack } = task;\n\n const handleKeyDown = (event) => {\n if (event.key === \"Enter\") {\n onSubmit();\n } else if (event.key === \"Tab\") {\n event.preventDefault();\n onTab(task);\n } else if (event.key === \"Backspace\") {\n event.preventDefault();\n event.stopPropagation();\n onBack();\n }\n };\n\n const onChange = () => {};\n const _subs = [];\n tasks.forEach((subtask, i) => {\n _subs.push(\n