added hashtag-chooser

src/App.js

@@ -2,6 +2,7 @@ import { useState, useCallback } from 'react'
 import './App.css'
 import { useDropzone } from 'react-dropzone'
 import FrameChooser from './FrameChooser.js'
+import HashtagChooser from './HashtagChooser.js'
 import Editor from './Editor.js'
 import HeaderImage from './HeaderImage.svg'
 import purpleBG from './purpleBG.png'
@@ -67,6 +68,7 @@ function trigger_download(name, data){
 
 function App() {
     const [frameURL, setFrameURL] = useState(null)
+    const [hashtagURL, setHashtagURL] = useState(null)
     const [originalPhoto, setOriginalPhoto] = useState(null)
     const [originalPhotoRation, setOriginalPhotoRation] = useState(1)
     const [orientation, set_orientation] = useState(null)
@@ -83,6 +85,10 @@ function App() {
         setFrameURL(newFrameURL)
     }, [setFrameURL])
 
+    const handleHashtagURL = useCallback(newHashtagURL => {
+        setHashtagURL(newHashtagURL)
+    }, [setHashtagURL])
+
     const handleCordsChange = useCallback(({x, y, scale}) => {
         setCords({ x, y, scale })
     }, [])
@@ -242,6 +248,7 @@ function App() {
                 purpleBG,
                 ...(pngUrl ? [pngUrl] : []),
                 ...(frameURL ? [frameURL] : []),
+                ...(hashtagURL ? [hashtagURL] : []),
             ])
             .then(b64 => {
                 // set_combinedImage(b64)
@@ -257,6 +264,7 @@ function App() {
         cords.scale,
         orientation,
         frameURL,
+        hashtagURL,
         height,
         width,
     ])
@@ -288,6 +296,7 @@ function App() {
 
             {!!originalPhoto ? (<>
                 <FrameChooser onChange={handleFrameURL} />
+                <HashtagChooser onChange={handleHashtagURL} />
             </>) : null}
 
             {!!originalPhoto && !!frameURL ? (<>

src/HashtagChooser.js

@@ -0,0 +1,63 @@
+import { useState, useEffect, useCallback } from 'react'
+
+function HashtagChooser({ onChange }) {
+    const [frames, setFrames] = useState([])
+    const [choosenFrame, setChoosenFrame] = useState(null)
+
+    useEffect(() => {
+        async function loadFrames() {
+            Promise.all(
+                [
+                    '',
+                    'DeineWahl',
+                    'Europa',
+                    'JetztBistDuDran',
+                    'paneuropäisch',
+                    'pragmatisch',
+                    'progressiv',
+                    'Volt',
+                    'Volt21',
+                    'VoltEuropa',
+                    'VoltRLP',
+                    'VoteVolt',
+                ]
+                    .map(async frame_filename => {
+                        return {
+                            name: frame_filename,
+                            src: frame_filename === '' ? '' : await import(`./hashtags/${frame_filename}.png`),
+                        }
+                    })
+            )
+                .then(new_frames => {
+                    setFrames(new_frames)
+                    setChoosenFrame(new_frames[0].src.default)
+                })
+        }
+        loadFrames()
+    }, [])
+
+    const handleImageChoosing = useCallback(event => {
+        setChoosenFrame(event.target.dataset.src)
+    }, [setChoosenFrame])
+
+    useEffect(() => {
+        onChange(choosenFrame)
+    }, [onChange, choosenFrame])
+
+    return (
+        <div className="HashtagChooser">
+            <h2>Choose a Hashtag:</h2>
+            {
+                frames.map(frame => {
+                    const frame_src_path = frame.src.default
+                    const isChoosen = choosenFrame === frame_src_path
+                    return <button key={frame_src_path} data-src={frame_src_path} className={isChoosen ? 'hashtag_button choosen' : 'hashtag_button'} onClick={handleImageChoosing}>
+                        {frame.name === '' ? 'No Hashtag' : '#'+frame.name}
+                    </button>
+                })
+            }
+        </div>
+    )
+}
+
+export default HashtagChooser