# Final Project --- ## KANBAN  ---  ---  ---  ---  ---  --- # Craig --- ## Styled components not always rendering in Next.js --- #### Sometimes when the page loaded the styles were displayed, other times... not so much. <img src="https://media.giphy.com/media/fGOjgWRzQkC2sHHnq7/giphy.gif" height=400> --- Styled components were rendering when a following a link in the app to another page, but they wouldn't if the page was refreshed / data submitted / address was entered manually. --- Server-side rendering does not fetch the styles before rendering the page, the Styled-Components documentation mentions this very briefly and it is easy to miss. --- What we actually have to do with Next.js is inject server-side rendered styles to the head so it can render the page and its styles correctly. --- Within the Next.js project inside the pages folder; create a file called _document.js and copy and paste all the code from the _document.js from the Next.js Github repo. --- <img src="https://i.imgur.com/EeqSgAA.png" height=600> --- ## Displaying user's name on dynamic route --- We want the user's name displayed on their individual profile page obtained through a dynamic route --- <img src="https://i.imgur.com/OZyZc4Z.png" height=500 align=left> <img src="https://i.imgur.com/IHQd9uf.png" height=500 align=right> --- Cannot pass props through dynamic links <img src="https://media.giphy.com/media/L0w7vLuI9hSmDtLXd7/giphy.gif" height=250> ```jsx= return ( <Link href={"/profiles/" + user.name} name={user.name}> <a> <h2>{user.name}</h2> <p>{user.gender}</p> </a> </Link> ); ``` --- "Window is not defined" ```jsx= window.location.href ```  --- <img src="https://media.giphy.com/media/horLL8A3AiIW08HRsk/giphy.gif" height=500> --- ### next/router ```jsx= import { useRouter } from 'next/router' const router = useRouter() <h2>{router.query.user}</h2> ``` --- <img src="https://i.imgur.com/M8HtjRI.png" height=600> --- ## Authentication API  --- - Set up NextAuth.js library with an email providers. - Create env variable to handle all of the secrets! - Add development server in `NEXTAUTH_URL=http://localhost:3000` - Use the supplied React ```<Provider>``` to share the session object across components! - For email to sign-in to work create database to store user information! PS: Not as easy as we possibli though when it comes to different types of databases! --- ## Attemps: Assumptions  ==- Provide credentials from current email server.==  --- - handle user sessions by provided token by adding it to our API route.  ---  ---  ---  --- # Amy ## Styled components ```jsx= const S = {} S.Header = styled.header` display: flex; padding: 1rem; > * { margin: 0 1rem 0 0; } `; return ( <S.Header> <Link href="/signup"> <a>Sign Up</a> </Link> <Link href="/login"> <a>Log In</a> </Link> </S.Header> ); ``` --- - how to target the children of a styled component: ```jsx= S.Header = styled.header` > * { margin: 0 1rem 0 0; } `; ``` --- ## Socket IO Some basics: ``` jsx socket.emit("message name", "message data") ``` socket.emit sends messages ``` jsx socket.on("message name", () => {}) ``` socket.on listens for messages --- We need to run a separate server for the chat ---  --- # ISSUES - psql connection issue (Sevda) ```psql: error: could not connect to server...``` ==- Run the command: createdb `whoami`== --- ### deployment issue  --- ## Resources: [Ussing Templates: GitHub](https://docs.github.com/en/communities/using-templates-to-encourage-useful-issues-and-pull-requests/configuring-issue-templates-for-your-repository) [Store Image Data](https://www.postgresql.org/docs/7.4/jdbc-binary-data.html) [Uploading Images](https://github.com/fac21/Week-7-rcmn) [Authentication](https://nextjs.org/docs/authentication) `useSession()` React Hook: to check the user login status. --- - Needed to decide on the same feelings of in between password and nextauth... - During the set up of next.auth we had to configure a mail server configuration;. ---