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)}
>
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