From f3587e6f16a732fcbd3e2d2183ebabaf1e252c1e Mon Sep 17 00:00:00 2001
From: thomasrosen <thomas.rosen@me.com>
Date: Wed, 21 Apr 2021 00:00:34 +0200
Subject: [PATCH] send more data in the onChange events

---
 src/App.js            | 22 ++++++++++++----------
 src/FrameChooser.js   | 16 +++++++++-------
 src/HashtagChooser.js | 16 +++++++++-------
 3 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/src/App.js b/src/App.js
index 878ba80..2ad3d4b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -72,12 +72,14 @@ function trigger_download(name, data){
 }
 
 function App({ getString }) {
-    const [frameURL, setFrameURL] = useState(null)
-    const [hashtagURL, setHashtagURL] = useState(null)
+    const [frame, setFrame] = useState(null)
+    const [hashtag, setHashtag] = useState(null)
     const [originalPhoto, setOriginalPhoto] = useState(null)
     const [originalPhotoRation, setOriginalPhotoRation] = useState(1)
     const [orientation, set_orientation] = useState(null)
 
+    const frameURL = !!frame ? frame.src : null
+    const hashtagURL = !!hashtag ? hashtag.src : null
 
     // const [combinedImage, set_combinedImage] = useState(null)
 
@@ -86,13 +88,13 @@ function App({ getString }) {
 
     const [cords, setCords] = useState({x:0, y:0, scale:1})
 
-    const handleFrameURL = useCallback(newFrameURL => {
-        setFrameURL(newFrameURL)
-    }, [setFrameURL])
+    const handleFrame = useCallback(newFrame => {
+        setFrame(newFrame)
+    }, [setFrame])
 
-    const handleHashtagURL = useCallback(newHashtagURL => {
-        setHashtagURL(newHashtagURL)
-    }, [setHashtagURL])
+    const handleHashtag = useCallback(newHashtag => {
+        setHashtag(newHashtag)
+    }, [setHashtag])
 
     const handleCordsChange = useCallback(({x, y, scale}) => {
         setCords({ x, y, scale })
@@ -302,9 +304,9 @@ function App({ getString }) {
 
             {true || !!originalPhoto ? (<>
                 <h2><Localized id="title_choose_frame" /></h2>
-                <FrameChooser onChange={handleFrameURL} />
+                <FrameChooser onChange={handleFrame} />
                 <h2><Localized id="title_choose_hashtag" /></h2>
-                <HashtagChooser onChange={handleHashtagURL} />
+                <HashtagChooser onChange={handleHashtag} />
             </>) : null}
 
             {!!originalPhoto && !!frameURL && !!handleHashtagURL ? (<>
diff --git a/src/FrameChooser.js b/src/FrameChooser.js
index e5f605b..7be90cb 100644
--- a/src/FrameChooser.js
+++ b/src/FrameChooser.js
@@ -4,6 +4,8 @@ function FrameChooser({onChange}) {
     const [frames, setFrames] = useState([])
     const [choosenFrame, setChoosenFrame] = useState(null)
 
+    const choosenFrameSRC = !!choosenFrame ? choosenFrame.src : null
+
     useEffect(() => {
         async function loadFrames(){
             Promise.all(
@@ -21,20 +23,20 @@ function FrameChooser({onChange}) {
                 .map(async frame_filename => {
                     return {
                         name: frame_filename,
-                        src: await import(`./frames/${frame_filename}.png`),
+                        src: (await import(`./frames/${frame_filename}.png`)).default,
                     }
                 })
             )
             .then(new_frames => {
                 setFrames(new_frames)
-                setChoosenFrame(new_frames[0].src.default)
+                setChoosenFrame(new_frames[0])
             })
         }
         loadFrames()
     }, [])
 
-    const handleImageChoosing = useCallback(event => {
-        setChoosenFrame(event.target.dataset.src)
+    const handleImageChoosing = useCallback(frame => {
+        setChoosenFrame(frame)
     }, [setChoosenFrame])
 
     useEffect(() => {
@@ -45,13 +47,13 @@ function FrameChooser({onChange}) {
         <div className="FrameChooser">
             {
                 frames.map(frame => {
-                    const frame_src_path = frame.src.default
-                    const isChoosen = choosenFrame === frame_src_path
+                    const frame_src_path = frame.src
+                    const isChoosen = choosenFrameSRC === frame_src_path
                     return <div
                         key={frame_src_path}
                         data-src={frame_src_path}
                         className={isChoosen ? 'frame choosen' : 'frame'}
-                        onClick={handleImageChoosing}
+                        onClick={() => handleImageChoosing(frame)}
                     >
                         <img alt={frame.name} src={frame_src_path} />
                     </div>
diff --git a/src/HashtagChooser.js b/src/HashtagChooser.js
index 0508650..79a396b 100644
--- a/src/HashtagChooser.js
+++ b/src/HashtagChooser.js
@@ -5,6 +5,8 @@ function HashtagChooser({ onChange, getString }) {
     const [frames, setFrames] = useState([])
     const [choosenFrame, setChoosenFrame] = useState(null)
 
+    const choosenFrameSRC = !!choosenFrame ? choosenFrame.src : null
+
     useEffect(() => {
         async function loadFrames() {
             Promise.all(
@@ -38,20 +40,20 @@ function HashtagChooser({ onChange, getString }) {
                     .map(async frame_filename => {
                         return {
                             name: frame_filename,
-                            src: frame_filename === '' ? '' : await import(`./hashtags/${frame_filename}.png`),
+                            src: frame_filename === '' ? '' : (await import(`./hashtags/${frame_filename}.png`)).default,
                         }
                     })
             )
                 .then(new_frames => {
                     setFrames(new_frames)
-                    setChoosenFrame(new_frames[0].src.default)
+                    setChoosenFrame(new_frames[0])
                 })
         }
         loadFrames()
     }, [])
 
-    const handleImageChoosing = useCallback(event => {
-        setChoosenFrame(event.target.dataset.src)
+    const handleImageChoosing = useCallback(frame => {
+        setChoosenFrame(frame)
     }, [setChoosenFrame])
 
     useEffect(() => {
@@ -62,9 +64,9 @@ function HashtagChooser({ onChange, getString }) {
         <div className="HashtagChooser">
             {
                 frames.map(frame => {
-                    const frame_src_path = frame.src.default
-                    const isChoosen = choosenFrame === frame_src_path
-                    return <button key={frame.name} data-src={frame_src_path} className={isChoosen ? 'isInRow choosen' : 'isInRow'} onClick={handleImageChoosing}>
+                    const frame_src_path = frame.src
+                    const isChoosen = choosenFrameSRC === frame_src_path
+                    return <button key={frame.name} data-src={frame_src_path} className={isChoosen ? 'isInRow choosen' : 'isInRow'} onClick={() => handleImageChoosing(frame)}>
                         {frame.name === '' ? getString('button_no_hashtag') : frame.name}
                     </button>
                 })