frankcollins3 / Next-Water-App

Happy, Healthy Water Cycling App that tracks user/human fluid intake.
https://next-water-app.vercel.app
1 stars 0 forks source link

app.tsx and state [10:41pm] #92

Closed frankcollins3 closed 11 months ago

frankcollins3 commented 11 months ago

attempting to do: between <navbar> and <main> "Water is Life" between <main> and <footer> "${CURRENT_USER.username is Water}" || {Life is Water}

error: mobile responsive looks good it's the screen spanning > 1000px sizes that present this problem: in the footer: I made the progress update what hopes to look like a water bottle, opposite to the Left side {bottle.png} Screen Shot 2023-07-24 at 10 42 35 PM Putting the {CURRENT_USER.username "is water"} string between bottle and the progress updater on the Right: makes that droplet in the upside down bottle shaped container head downward and be off center.

To solve for this: Just decided to keep footer as is (which wasn't the way it was in react as detailed on github.com/frankcollins3 videos) "Water is Life" -------> "username is water" || "Life is Water" will toggle when the main container is hovered upon.

react-connect in react-express can allow for state to be in app.tsx whereas nextJS 13.0.3 and @redux/toolkit cannot. Made redux state for this but now attempting to prop drill from app.tsx but having trouble with {component = "pageprops"}

proposed approach: 0: prop drill

frankcollins3 commented 11 months ago

the border toggles when hovered upon Screen Shot 2023-07-24 at 10 48 08 PM

in the old app when the border shows, both texts (between nav/main and main/footer disappear to let the border shine) [10:48pm]

frankcollins3 commented 11 months ago

being that this works: <Component mainBorderHover={mainBorderHover} setMainBorderHover={setMainBorderHover} {...pageProps} />

going to propDrill the username: app.tsx -> index.tsx -> <main>

making string state to kick send from <main> to app.tsx

[11:25pm]

frankcollins3 commented 11 months ago

got it. that works. I wonder what this set up solves that you can't set up redux in app.tsx redux state in @redux/toolkit must be within the <Provider> which means all the components excluding app.tsx [11:46pm]

frankcollins3 commented 11 months ago

also bookmark: "username || LIfe is Water ---> "/" "Water is life" ---> "/dashboard"

could get text1 between header and main and text 2 between footer and main but have to finish this it's been too long [11:55am]