Feat: re-organized each DEP to be its own main section
This commit is contained in:
		
							parent
							
								
									6c4cac48ca
								
							
						
					
					
						commit
						b6136cb1ad
					
				
							
								
								
									
										50
									
								
								src/App.css
								
								
								
								
							
							
						
						
									
										50
									
								
								src/App.css
								
								
								
								
							|  | @ -1,50 +0,0 @@ | |||
| #root { | ||||
|   max-width: 1280px; | ||||
|   margin: 0 auto; | ||||
|   padding: 2rem; | ||||
|   text-align: center; | ||||
| } | ||||
| 
 | ||||
| .logo { | ||||
|   height: 6em; | ||||
|   padding: 1.5em; | ||||
|   will-change: filter; | ||||
|   transition: filter 300ms; | ||||
| } | ||||
| .logo:hover { | ||||
|   filter: drop-shadow(0 0 2em #646cffaa); | ||||
| } | ||||
| .logo.react:hover { | ||||
|   filter: drop-shadow(0 0 2em #61dafbaa); | ||||
| } | ||||
| 
 | ||||
| @keyframes logo-spin { | ||||
|   from { | ||||
|     transform: rotate(0deg); | ||||
|   } | ||||
|   to { | ||||
|     transform: rotate(360deg); | ||||
|   } | ||||
| } | ||||
| 
 | ||||
| @media (prefers-reduced-motion: no-preference) { | ||||
|   a:nth-of-type(2) .logo { | ||||
|     animation: logo-spin infinite 20s linear; | ||||
|   } | ||||
| } | ||||
| 
 | ||||
| .card { | ||||
|   padding: 2em; | ||||
| } | ||||
| 
 | ||||
| .read-the-docs { | ||||
|   color: #888; | ||||
| } | ||||
| 
 | ||||
| .box-label { | ||||
|   padding: 5px; | ||||
| } | ||||
| 
 | ||||
| .verse-box { | ||||
|   padding: 5px; | ||||
| } | ||||
							
								
								
									
										45
									
								
								src/App.jsx
								
								
								
								
							
							
						
						
									
										45
									
								
								src/App.jsx
								
								
								
								
							|  | @ -1,45 +0,0 @@ | |||
| import { useState } from 'react' | ||||
| import reactLogo from './assets/react.svg' | ||||
| import viteLogo from '/vite.svg' | ||||
| import './App.css' | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| function App() { | ||||
|   const [inputVerse, setVerse] = useState('') | ||||
|   const [resultBool, setBool] = useState(false) | ||||
|   const verseChange = (e) => { | ||||
|     const value = e.target.value | ||||
|     let string1 = value; | ||||
|     let string2 = refVerse; | ||||
|     console.log(refVerse); | ||||
|     console.log(value); | ||||
|     string1 = String(string1).replace(/[^\w\s]/g, "").replace(/\s+/g, " ").toLowerCase(); | ||||
|     string2 = String(string2).replace(/[^\w\s]/g, "").replace(/\s+/g, " ").toLowerCase(); | ||||
| 
 | ||||
|     const bool = string1 === string2; | ||||
| 
 | ||||
|     setVerse(value) | ||||
|     setBool(bool) | ||||
|   } | ||||
| 
 | ||||
|   const refVerse = "Therefore, if anyone is in Christ, he is a new creation; the old has gone, the new has come!"; | ||||
| 
 | ||||
| 
 | ||||
|   return ( | ||||
|       <div className="App"> | ||||
|         <label className='box-label' htmlFor='verseBox'>2 Cor 5:17</label> | ||||
|         <input  | ||||
|           className="verse-box" | ||||
|           type='text' | ||||
|           id='verseBox' | ||||
|           name='verseBox' | ||||
|           onChange={verseChange} | ||||
|         /> | ||||
|       <h2>{inputVerse}</h2> | ||||
|       <h2>{String(resultBool)}</h2> | ||||
|       </div> | ||||
|     ) | ||||
| } | ||||
| 
 | ||||
| export default App | ||||
|  | @ -1,51 +0,0 @@ | |||
| import VerseData from "./assets/verse.json" | ||||
| import { useState } from "react"; | ||||
| 
 | ||||
| 
 | ||||
| const ButtonMapper = ({todos, setTodos})  => { | ||||
|   return ( | ||||
|   todos.map(({ task, done }, i) => ( | ||||
|       <div key={i}> | ||||
|         <label htmlFor={i}> | ||||
|           <input | ||||
|             type="checkbox" | ||||
|             onChange={() => handleChange(setTodos, todos, done, i)} | ||||
|             checked={done} | ||||
|             id={i} | ||||
|           /> | ||||
|           <span>{task}</span> | ||||
|         </label> | ||||
|       </div> | ||||
|   ) | ||||
| ))} | ||||
| 
 | ||||
| const handleChange = (setTodos, todos, done, i) => { | ||||
|   // extract desired item | ||||
|   let tmp = todos[i]; | ||||
|   tmp.done = !done; | ||||
|   // clone existing array | ||||
|   let todosClone = [...todos]; | ||||
|   // assign modified item back | ||||
|   todosClone[i] = tmp; | ||||
|   setTodos([...todosClone]); | ||||
| }; | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| function App() { | ||||
|   const [todos, setTodos] = useState([ | ||||
|     { task: "Pick up groceries", done: false }, | ||||
|     { task: "Buy Milk", done: true }, | ||||
|     { task: "Complete Project X", done: false }, | ||||
|   ]); | ||||
| 
 | ||||
| 
 | ||||
|   return ( | ||||
|     <div className="App"> | ||||
|       <ButtonMapper todos={todos} setTodos={setTodos} /> | ||||
|       <h3>Total Completed: {todos.filter((todo) => todo.done).length}</h3> | ||||
|     </div> | ||||
|   ) | ||||
| }   | ||||
| 
 | ||||
| export default App | ||||
|  | @ -1,71 +0,0 @@ | |||
| import React from 'react'; | ||||
| import { useState } from "react"; | ||||
| import CheckboxTree from 'react-checkbox-tree'; | ||||
| import 'react-checkbox-tree/lib/react-checkbox-tree.css'; | ||||
| // import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' | ||||
| 
 | ||||
| const nodes = [ | ||||
|   { | ||||
|     value: 'loa', | ||||
|     label: 'Lessons on Assurance' | ||||
|   }, | ||||
|   { | ||||
|     value: 'tms60', | ||||
|     label: 'TMS60', | ||||
|     children: [ | ||||
|         { value: 'pack-a', label: 'Pack A' }, | ||||
|         { value: 'pack-b', label: 'Pack B' }, | ||||
|         { value: 'pack-c', label: 'Pack C' }, | ||||
|         { value: 'pack-d', label: 'Pack D' }, | ||||
|         { value: 'pack-e', label: 'Pack E' } | ||||
|     ] | ||||
|   }, | ||||
|   { | ||||
|     value: 'dep', | ||||
|     label: 'DEP', | ||||
|     children: [ | ||||
|       { value: 'dep1', label: 'DEP 1' }, | ||||
|       { value: 'dep2', label: 'DEP 2' }, | ||||
|       { value: 'dep3', label: 'DEP 3' }, | ||||
|       { value: 'dep4', label: 'DEP 4' } | ||||
|     ] | ||||
|   } | ||||
| ]; | ||||
| 
 | ||||
| // class Widget extends React.Component { | ||||
| //     state = { | ||||
| //         checked: [], | ||||
| //         expanded: [], | ||||
| //     }; | ||||
| //  | ||||
| //     render() { | ||||
| //         return ( | ||||
| //             <CheckboxTree | ||||
| //                 nodes={nodes} | ||||
| //                 checked={this.state.checked} | ||||
| //                 expanded={this.state.expanded} | ||||
| //                 onCheck={checked => this.setState({ checked })} | ||||
| //                 onExpand={expanded => this.setState({ expanded })} | ||||
| //             /> | ||||
| //         ); | ||||
| //     } | ||||
| // } | ||||
| 
 | ||||
| function Widget() { | ||||
|   const [checked, setChecked] = useState([]) | ||||
|   const [expanded, setExpanded] = useState([]) | ||||
|   console.log(checked) | ||||
|   return ( | ||||
|     <div className="CheckboxTree"> | ||||
|       <CheckboxTree | ||||
|         nodes={nodes} | ||||
|         checked={checked} | ||||
|         expanded={expanded} | ||||
|         onCheck={setChecked} | ||||
|         onExpand={setExpanded} | ||||
|       /> | ||||
|     </div> | ||||
|   ); | ||||
| } | ||||
| 
 | ||||
| export default Widget | ||||
|  | @ -33,30 +33,54 @@ const ArrayTester = ({ array }) => { | |||
| 
 | ||||
| const nodes = [ | ||||
|   { | ||||
|     value: 'loa', | ||||
|     label: 'Lessons on Assurance' | ||||
|     value: "loa", | ||||
|     label: "Lessons on Assurance", | ||||
|   }, | ||||
|   { | ||||
|     value: 'tms60', | ||||
|     label: 'TMS60', | ||||
|     value: "tms60", | ||||
|     label: "TMS60", | ||||
|     children: [ | ||||
|         { value: 'tms-60-pack-a', label: 'Pack A' }, | ||||
|         { value: 'tms-60-pack-b', label: 'Pack B' }, | ||||
|         { value: 'tms-60-pack-c', label: 'Pack C' }, | ||||
|         { value: 'tms-60-pack-d', label: 'Pack D' }, | ||||
|         { value: 'tms-60-pack-e', label: 'Pack E' } | ||||
|     ] | ||||
|       { value: "tms-60-pack-a", label: "Living the New Life" }, | ||||
|       { value: "tms-60-pack-b", label: "Proclaiming Christ" }, | ||||
|       { value: "tms-60-pack-c", label: "Reliance on God's Resources" }, | ||||
|       { value: "tms-60-pack-d", label: "Being Christ's Disciple" }, | ||||
|       { value: "tms-60-pack-e", label: "Growth in Christlikeness" }, | ||||
|     ], | ||||
|   }, | ||||
|   { | ||||
|     value: 'dep', | ||||
|     label: 'DEP', | ||||
|     value: "dep-1", | ||||
|     label: "DEP 1", | ||||
|   }, | ||||
|   { | ||||
|     value: "dep-2", | ||||
|     label: "DEP 2", | ||||
|     children: [ | ||||
|       { value: 'dep-1', label: 'DEP 1' }, | ||||
|       { value: 'dep-2', label: 'DEP 2' }, | ||||
|       { value: 'dep-3', label: 'DEP 3' }, | ||||
|       { value: 'dep-4', label: 'DEP 4' } | ||||
|     ] | ||||
|   } | ||||
|       { value: "dep-2-part-a", label: "Why do we have Quiet Time?" }, | ||||
|       { value: "dep-2-part-b", label: "What is Quiet Time?" }, | ||||
|       { value: "dep-2-part-c", label: "Examples of Quiet Time" }, | ||||
|     ], | ||||
|   }, | ||||
|   { | ||||
|     value: "dep-3", | ||||
|     label: "DEP 3", | ||||
|     children: [ | ||||
|       { value: "dep-3-part-a", label: "Authority of the Word" }, | ||||
|       { value: "dep-3-part-b", label: "Value of the Word" }, | ||||
|       { value: "dep-3-part-c", label: "Attitude to the Word" }, | ||||
|       { value: "dep-3-part-d", label: "How to take in the Word (Word Hand Illustration)" } | ||||
|     ], | ||||
|   }, | ||||
|   { | ||||
|     value: "dep-4", | ||||
|     label: "DEP 4", | ||||
|     children: [ | ||||
|       { value: "dep-4-part-a", label: "Command of Prayer" }, | ||||
|       { value: "dep-4-part-b", label: "Promises and Blessings of Prayer" }, | ||||
|       { value: "dep-4-part-c", label: "Conditions for Answered Prayer" }, | ||||
|       { value: "dep-4-part-d", label: "Examples of Prayer" }, | ||||
|       { value: "dep-4-part-e", label: "Prayer Hand Illustration" } | ||||
|     ], | ||||
|   }, | ||||
| ]; | ||||
| 
 | ||||
| const CheckboxWidget = ({checked, expanded, setChecked, setExpanded}) => { | ||||
|  | @ -83,6 +107,7 @@ function App() { | |||
|   // 1. packObj.pack for the pack name  | ||||
|   // 2. packObj.include for whether to include the pack | ||||
|   const packObjList = packList.map((element) => { | ||||
|     // create object for each element in VerseData key list | ||||
|     const packObj = new Object(); | ||||
|     packObj.pack = element; | ||||
|     packObj.include = false; | ||||
|  | @ -128,13 +153,6 @@ function App() { | |||
|         setExpanded={setExpanded} | ||||
|       /> | ||||
| 
 | ||||
|       {/*<div className="PackDisplay"> | ||||
|         <h1>Packs Tested:</h1> | ||||
|         {checked | ||||
|           .map((element) => ( | ||||
|             <li key={element}>{element}</li> | ||||
|           ))} | ||||
|         </div>*/} | ||||
|       <h1>Verses:</h1> | ||||
|       <GenerateTestList packs={checked} testCount={testCount} /> | ||||
|     </div> | ||||
|  |  | |||
|  | @ -1,45 +0,0 @@ | |||
| import { useState } from 'react' | ||||
| // import reactLogo from './assets/react.svg' | ||||
| // import viteLogo from '/vite.svg' | ||||
| import './App.css' | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| function App() { | ||||
|   const [inputVerse, setVerse] = useState('') | ||||
|   const [resultBool, setBool] = useState(false) | ||||
|   const verseChange = (e) => { | ||||
|     const value = e.target.value | ||||
|     let string1 = value; | ||||
|     let string2 = refVerse; | ||||
|     console.log(refVerse); | ||||
|     console.log(value); | ||||
|     string1 = String(string1).replace(/[^\w\s]/g, "").replace(/\s+/g, " ").toLowerCase(); | ||||
|     string2 = String(string2).replace(/[^\w\s]/g, "").replace(/\s+/g, " ").toLowerCase(); | ||||
| 
 | ||||
|     const bool = string1 === string2; | ||||
| 
 | ||||
|     setVerse(value) | ||||
|     setBool(bool) | ||||
|   } | ||||
| 
 | ||||
|   const refVerse = "Therefore, if anyone is in Christ, he is a new creation; the old has gone, the new has come!"; | ||||
| 
 | ||||
| 
 | ||||
|   return ( | ||||
|       <div className="App"> | ||||
|         <label className='box-label' htmlFor='verseBox'>2 Cor 5:17</label> | ||||
|         <input  | ||||
|           className="verse-box" | ||||
|           type='text' | ||||
|           id='verseBox' | ||||
|           name='verseBox' | ||||
|           onChange={verseChange} | ||||
|         /> | ||||
|       <h2>{inputVerse}</h2> | ||||
|       <h2>{String(resultBool)}</h2> | ||||
|       </div> | ||||
|     ) | ||||
| } | ||||
| 
 | ||||
| export default App | ||||
|  | @ -594,7 +594,7 @@ | |||
|       "verse": "And you also were included in Christ when you heard the word of truth, the gospel of your salvation. Having believed, you were marked in him with a seal, the promised Holy Spirit"  | ||||
|     } | ||||
|   ], | ||||
|   "dep-2": [ | ||||
|   "dep-2-part-a": [ | ||||
|     { | ||||
|       "pack": "DEP 2", | ||||
|       "title": "God wants to fellowship with us", | ||||
|  | @ -650,7 +650,9 @@ | |||
|       "chapterTitle": "Why do we have Quiet Time", | ||||
|       "reference": "Psalm 143:8,10", | ||||
|       "verse": "Let the morning bring me word of your unfailing love, for I have put my trust in you. Show me the way I should go, for to you I lift up my soul.  Teach me to do your will, for you are my God; may your good Spirit lead me on level ground." | ||||
|     }, | ||||
|     } | ||||
|   ], | ||||
|   "dep-2-part-b": [ | ||||
|     { | ||||
|       "pack": "DEP 2", | ||||
|       "title": "Looking on the Lord", | ||||
|  | @ -748,7 +750,9 @@ | |||
|       "chapterTitle": "What is Quiet Time", | ||||
|       "reference": "Psalms 107:9", | ||||
|       "verse": "for he satisfies the thirsty and fills the hungry with good things."  | ||||
|     }, | ||||
|     } | ||||
|   ], | ||||
|   "dep-2-part-c": [ | ||||
|     { | ||||
|       "pack": "DEP 2", | ||||
|       "title": "Jesus - praying very early in the morning", | ||||
|  | @ -778,7 +782,7 @@ | |||
|       "verse": "He did not say anything to them without using a parable. But when he was alone with his own disciples, he explained everything."  | ||||
|     } | ||||
|   ], | ||||
|   "dep-3": [ | ||||
|   "dep-3-part-a": [ | ||||
|     { | ||||
|       "pack": "DEP 3", | ||||
|       "title": "Inspired by God", | ||||
|  | @ -848,7 +852,9 @@ | |||
|       "chapterTitle": "Authority of the Word", | ||||
|       "reference": "Luke 24:27", | ||||
|       "verse": "And beginning with Moses and all the Prophets, he explained to them what was said in all the Scriptures concerning himself."  | ||||
|     }, | ||||
|     } | ||||
|   ], | ||||
|   "dep-3-part-b": [ | ||||
|     { | ||||
|       "pack": "DEP 3", | ||||
|       "title": "Making us born again", | ||||
|  | @ -925,7 +931,9 @@ | |||
|       "chapterTitle": "Value of the Word", | ||||
|       "reference": "Hebrews 4:12", | ||||
|       "verse": "For the word of God is living and active. Sharper than any double--edged sword, it penetrates even to dividing soul and spirit, joints and marrow; it judges the thoughts and attitudes of the heart."  | ||||
|     }, | ||||
|     } | ||||
|   ], | ||||
|   "dep-3-part-c": [ | ||||
|     { | ||||
|       "pack": "DEP 3", | ||||
|       "title": "Search the Word every day", | ||||
|  | @ -961,7 +969,9 @@ | |||
|       "chapterTitle": "Attitude to the Word", | ||||
|       "reference": "Luke 5:5-6", | ||||
|       "verse": "Simon answered, Master, we've worked hard all night and haven't caught anything. But because you say so, I will let down the nets.  When they had done so, they caught such a large number of fish that their nets began to break." | ||||
|     }, | ||||
|     } | ||||
|   ], | ||||
|   "dep-3-part-d": [ | ||||
|     { | ||||
|       "pack": "DEP 3", | ||||
|       "title": "Hearing", | ||||
|  | @ -1033,7 +1043,7 @@ | |||
|       "verse": "Do not let this Book of the Law depart from your mouth; meditate on it day and night, so that you may be careful to do everything written in it. Then you will be prosperous and successful." | ||||
|     } | ||||
|   ], | ||||
|   "dep-4": [ | ||||
|   "dep-4-part-a": [ | ||||
|     { | ||||
|       "pack": "DEP 4", | ||||
|       "title": "Cease not to pray", | ||||
|  | @ -1061,7 +1071,9 @@ | |||
|       "chapterTitle": "Command of Prayer", | ||||
|       "reference": "1 Timothy 2:1-2", | ||||
|       "verse": "I urge, then, first of all, that requests, prayers, intercession and thanksgiving be made for everyone--for kings and all those in authority, that we may live peaceful and quiet lives in all godliness and holiness." | ||||
|     }, | ||||
|     } | ||||
|   ], | ||||
|   "dep-4-part-b": [ | ||||
|     { | ||||
|       "pack": "DEP 4", | ||||
|       "title": "Promise to answer", | ||||
|  | @ -1117,7 +1129,9 @@ | |||
|       "chapterTitle": "Promises and blessings of prayer", | ||||
|       "reference": "Colossians 4:3", | ||||
|       "verse": "And pray for us, too, that God may open a door for our message, so that we may proclaim the mystery of Christ, for which I am in chains."  | ||||
|     }, | ||||
|     } | ||||
|   ], | ||||
|   "dep-4-part-c": [ | ||||
|     { | ||||
|       "pack": "DEP 4", | ||||
|       "title": "Pray in the name of Jesus", | ||||
|  | @ -1187,7 +1201,9 @@ | |||
|       "chapterTitle": "Conditions for answered prayer", | ||||
|       "reference": "Nehemiah 1:8-9", | ||||
|       "verse": "Remember the instruction you gave your servant Moses, saying, 'If you are unfaithful, I will scatter you among the nations, but if you return to me and obey my commands, then even if your exiled people are at the farthest horizon, I will gather them from there and bring them to the place I have chosen as a dwelling for my Name.'"  | ||||
|     }, | ||||
|     } | ||||
|   ], | ||||
|   "dep-4-part-d": [ | ||||
|     { | ||||
|       "pack": "DEP 4", | ||||
|       "title": "Praying at the risk of life", | ||||
|  | @ -1222,7 +1238,9 @@ | |||
|       "chapterTitle": "Examples of prayer", | ||||
|       "reference": "Acts 16:25", | ||||
|       "verse": "About midnight Paul and Silas were praying and singing hymns to God, and the other prisoners were listening to them."  | ||||
|     }, | ||||
|     } | ||||
|   ], | ||||
|   "dep-4-part-e": [ | ||||
|     { | ||||
|       "pack": "DEP 4", | ||||
|       "title": "Praising", | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue