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 ? (<>

- +

- + ) : 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}) {
{ 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
handleImageChoosing(frame)} > {frame.name}
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 }) {
{ frames.map(frame => { - const frame_src_path = frame.src.default - const isChoosen = choosenFrame === frame_src_path - return })