Brief

Online Bible verses search, multi-languages support. Detect keywords and fetch related background image.

Credit

1. https://cors-anywhere.herokuapp.com/ Rob--W's
2. http://ibibles.net/
3. https://getbible.net/
4. https://unsplash.com/

Issues

1. Need to double click search. <== https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately The easy answer: useEffect instead of useState.(solved)
2. In REACT, if you see something undefined in the object, but you are sure it's right. The problem is from react will run page two times, and one is without data, so we need to check the object is exist. In VerseDisplay.js, I put if(state.searchQuery) to prevent issues happen.(solved)
3. On Github Pages, it must query via https. http is not working.(solved)
4. Arrary compare is a little complex than I thought. Refer:
   https://stackoverflow.com/questions/3115982/how-to-check-if-two-arrays-are-equal-with-javascript
   This is used in FetchBackground.js
5. Cannot find 'react-native', solved by 'npm install react-native-web' https://www.xspdf.com/resolution/52674239.html
6. Screen Resolution for CSS. https://stackoverflow.com/questions/46313640/iphone-x-8-8-plus-css-media-queries
   https://stackoverflow.com/questions/58087446/all-media-queries-for-iphone-12-pro-max-mini-and-older-iphones
   https://kapeli.com/cheat_sheets/CSS_Device_Media_Queries.docset/Contents/Resources/Documents/index
7. working on myForm. around 68 lines... cannot default book and language... (Solved by useState)
8. in MyForm.js, useEffect(), there is a straightforward problem, Ref: https://stackoverflow.com/questions/13964155/get-javascript-object-from-array-of-objects-by-value-of-property
9. https://faithfoundedonfact.com/the-5-most-accurate-bible-translations/ I am studying which Bible version is good for here. Here is the best new testament in Greek.(Nestle-Aland) https://www.academic-bible.com/en/online-bibles/novum-testamentum-graece-na-28/read-the-bible-text/

Todos:

8. Clean non-necessary console.log().
9. no verse returned processing. ok. ?? it not working sometimes.. I need to dig in. Dig out some issues are from API remote server, I cannot handle it. I need some workaround later.
10. code clean.
11. Verses at the bottom side of the screen, the layout is not good at a small screen. (12/14)
12. It seems too many reducer-re-rendering. (Check all state.xxx related code.)
13. Rotate from landscape to portrait is fine, but portrait to landscape. (seems fixed. 12/16)
14. disable keyboard on iPad or iPhone. ( readOnly="true" is not working with react-select...)
15. auto detect language and display the user's language.
16. Only display number keys on iPad or iPhone. (it works sometimes... why?)
17. Display style is strange on the Android phone.
18. I encountered an error default-verse a time. I got Job-5-44-44, need to follow up this issue.
19. Can we do pull down and refresh everything? (https://stackoverflow.com/questions/46190436/how-to-detect-pull-to-refresh) or???(actually it's working on Android.)
20. I found some verses from source 2. will cause huge data download from server. That's a bug.. will check later.
21. Work on background change issue. (12/30)

Nice to have:

(moved to Done section. 1/15/2021)

Done:

1. another API search. ok.
2. Modify webpage name and Favicon ok.
3. background change. ok.
4. smart background change. (can be better)
5. No matter which version BIBLE user selects. We still need to extract from BBE. ok.
6. Using BBE to create a dictionary for a background. ok.
7. CopyRight Page. (ok, can be better)
8. book name in a different language. ok.
9. Default book, language value. ok.
10. Constraint chapter number ok.
11. Constraint verse number. ok.
12. Fix no select but just search issue. ok. fixed by add "if(typeof state.selectedBook === 'undefined')"
13. Try submit to the website, and check CORS issues. ok. Even on github pages, we still need CORS walk-around.(12/7)
14. Click on verses and can change the display location on the screen. ok.(12/7)
15. Can Also change shading location on the background.ok. (12/7)
16. Add Deutsch and French. ok. (12/9)
17. Bug, click hide/unhide and cause background change. ok. ??on checking (12/10) The issue is caused by fetchbacground process. If the fetching set is the same, background will not fetch again for now. but need to checkpoint 24 later.
18. Remember to change back the original API Key. (12/10) ok.
19. Disable Search Key when processing.(12/11) ok.(no different at frontend, but backend.)
20. FetchBackground.js needs to modify. if verse cannot fit any querySet. Right now, focusing on the 'bible' query background issue. (12/10) I try to solve this by add if(tempuse>=5) photosUrl = ${url}&query="Jesus";
21. shuffle an array for background images.(https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array) (12/12) --> seems I don't need to go this.
22. After the searched verse, hide form. (12/15) ok.
23. Detect Screen landscape or portrait. (12/15) https://reactnative.dev/docs/dimensions ok.
24. Cellphone support.(After did some research, small: <450px, regular: <1824px, full: >=1824px) ok. (12/16)
25. Check the background size. (12/16) should be okay. Check some more days.
26. Form is not really ready for Cellphones. (ok 12/17)
27. Default generates famous random verses. ok. 12/18
28. need to fix &lt &gt issue. (https://stackoverflow.com/questions/12328773/understanding-lt-and-gt/12328790)(https://stackoverflow.com/questions/5068951/what-do-lt-and-gt-stand-for#:~:text=%3C%20stands%20for%20lesser%20than,greater%20than%20(%3E)%20symbol%20.) (12/21)
29. Some languages are still waiting to translate. ok. (12/21)
30. Put some transparent and larger effect on search icon. (ok. App.css 12/21)
31. Update queryWordsCreate to remap some vocabularies. Also update version to v0.8.2(12/22)
32. I just know switch case cannot use || ... need to cascade cases, (in MyForm.js) (12/23)
33. Need to filter Russian language parts. ok. (12/23)
34. from source 2, we may get NULL feedback because wrong search. ok.(12/23) If no data, the server return us a string "NULL"
35. NRSV version is not working. ( I cannot find NRSV, replaced by "Reina Valera,Spanish" and add simplified chinese.) ok. (12/25)
36. need Hebrew book names. I learned bible Hebrew and updated OT parts to Hebrew. (1/15/2021)
37. Add SSH key.

MEMO: work on this link:
https://codesandbox.io/s/jrze53pqr?file=/index.js:1092-1102
because there is no onChange for Controller... = ="
BTW, because react-select cannot bind to onSubmit of Form, need to create state for it.
11/27 I tried state and context, both cannot reflect result at the same cycle, need twice. I don't like it.
Change to use global variable. --> X
Use useEffect() can solve this issue. But still go back no re-render issue. Solved by dispatch.

11/30 Done New columns for Search, (searchkey) and took out language origianl controller.
12/07 use Rob--W's code and create one repo on heroku.

https://cors-anywhere.herokuapp.com/
https://getbible.net/json?passage=Gen 1:1-5&version=cnt
https://cors-anywhere.herokuapp.com/https://getbible.net/json?passage=Gen 1:1-5&version=cnt

#License
NA

https://trina0224.github.io/WalkingWithGod/