REFACTOR room: [4:36pm]

[frankcollins3]

this issue: store refactoring ideas/actions. This one comment is one example of refactoring, and more unrelated such examples to come as other comments in this issue

sign up inputs:

instead, since these components all have the exact same functions to facilitate the same purpose with different string state

Perfect example of drenched, NON-DRY, repeating everywhere code.

proposed approach: <Input inputType={'password', 'age', 'email', 'username' }/>

create a reusable component that parses props that discern which string state will be handled by the component.

    const passwordinputhandler = async (evt: React.ChangeEvent<HTMLInputElement>) => {            
        let hasNums4 = RegexObject.hasNums.test(parseInt(PASSWORD_INPUT))

            let target = evt.target
            let value:any = target.value  // cant use string because we'll be looping over it     
            const statePromise = new Promise( (resolve, reject) => {
                resolve([ SET_PASSWORD_INPUT({payload: value}) ])
            })            
            return value ? statePromise : []               
        };

    const ghosttext = (event:any) => {
        setPasswordShow(!passwordShow)
        let target:any = event.target
        let jqtarget:any = $(event.target)
        let targetId:string = event.target.id       
        if (targetId === 'password') {
            // attributeJQ(target, 'value', PASSWORD)

        } else {
            attributeJQ(target, 'value', targetId)         // $(event.target).attr('value', targetId)
        }
        // modular function arguments:                  1: target $(event.target)   2: 'value' <input value={}/>        3: targetId: ['username', 'password',]
    }

    const inputfocus = async () => {
         SET_PASSWORD_INPUT( { payload: ''})
         TOGGLE_INPUT_FOCUS( { payload: 'password'} ) 
        }

start by setting ID to be props and everything will follow that to be either 'username' 'password', 'email', etc.. *let targetId = evt.target.id

// bookmark: this opportunity to refactor was only seen because of a design flaw. username input is slightly higher than others. // I commented all out and copy-pasted 4x and it appeared perfectly laid out. (tome)

---

as this proceeds, I think I see a change that must take place. 👎 import ./username.css || ---------> import ./email.css

cant do this because the CSS corresponds to the props which will remain undefinable from that CSS file.

approach: @mixin || styled components? Ternary CSS based inline-styling seem fitting. It's just 1 input per component so not a ton of CSS but cant use .css

[5:19pm]

Also might use this to replace: [username,email,age] and still use a password component [5:34pm]

---

this worked. finishing it up. came back to bookmark that this approach of reusability from defining state can access CSS

#password { 
  color: #7edefe;
  font-size: 20px; 
}

<SIgnupInput inputType={'username'||'password'||etc}

password would completely work..

[6:44pm]

[frankcollins3]

heres a question:

    const ghosttext = (event:any) => {
        let target:any = event.target
        let jqtarget:any = $(event.target)
        let targetId:string = event.target.id       
        if (targetId === 'password') {
            // attributeJQ(target, 'value', PASSWORD)

        } else {
            attributeJQ(target, 'value', targetId)         // $(event.target).attr('value', targetId)
        }
        // modular function arguments:                  1: target $(event.target)   2: 'value' <input value={}/>        3: targetId: ['username', 'password',]
    }

rewriting this function into a Reusable Input component to replace: <nameinput> <ageinput> etc

I've read before:

<example_1> const ghosttext = () => { let target:any = event.target let id = target.id 👍 attributeJQ(target, 'value', PASSWORD) }

<example_2> const ghosttext = () => { 👎 attributeJQ(event.target.id, 'value', PASSWORD) }

👎 event.target.id -----> from what I've read "everything in code should be declared elsewhere"

example 2 is technically more abstract, with event.target.id just thrown into it.

<example_2> the abstraction seems more obviously wrong in an example that uses an objectAPI to retrieve image-path.

const ghostText = () => {
     <img src={ImageBank.google_img/bigG.png/>
}

const ghosttext = () => attributeJQ(target.value.id, 'value', PASSWORD)

// also noting in <example_1> event.target: if evt.target is never used outside of evt.target.id it makes more sense to only declare what is used? technically event.target in <example_1> is an unused-var ?

kind of weird because, from (event.target) is where we declare (event.target.id) technically it's not unused but its redundant to declare event.target.id?

[5:53pm]

const ghostText = (event:any) => attributeJQ(event.target, 'value', event.target.id)

[5:56pm]