Tailored Pet Names Dev Journal Part 3: Rank system, snatching session from serverSideProps, and Cloudinary images!

I made it so if a user goes to the dashboard when not logged in, they'll be automatically redirected to the login page.

useRouter() is a bit of an odd one, it doesn't work unless I stuff it in a useEffect, because it only works on client side.

function dashboard ({category, nameList, sessionFromServer, favNames}){
  const [treatBreakdownMenuOpen,setTreatBreakdownOpen]=useState(false)
  const valuetest= useContext(UserSessionContext);

const router = useRouter();

useEffect(()=> {

  if(!sessionFromServer){
    router.push('/login')}
  }, [router, sessionFromServer]);
  ......
}

Twitter Post Link: twitter.com/Janetthedev/status/161423466766.. 4:15 AM · Jan 14, 2023

---

I finished my component with the rank titles!

If they have more points than 40, then it defaults to the "A good Pupper title".

I was confused for a hot sec until I remember to do Math.floor! (so 1.2 becomes 1, ect) All those codewars memories are flooding back to me

import React from 'react'

function RankNames(points){

  let rankName=""
  let rankTitlesByPoints={
    0: "Babiest toe beans",
    1: "Autodromkatzerl/bumper car tail kitten",
    2: "The Tinest Woofer"
    3: "World Class shoe chewer",
    4: "Baby gate jumper extraordinaire",
  }
  let pointsDividedBy10=Math.floor(+Object.values(points)/10)

     rankName= rankTitlesByPoints[pointsDividedBy10]||"A good pupper"

  return (
      <span className="text-yellow-400">{`${rankName}`}</span>
  )
}

export default RankNames

Twitter Post Link: twitter.com/Janetthedev/status/161423618542.. 4:21 AM · Jan 14, 2023

---

I put the rank names component into the dashboard page. So it automatically adjusts the title, based on the users current number of points (treats)

<section className="userStatsSection pt-4">
  .....
  <div>
      <FontAwesomeIcon icon={faRankingStar} className="text-2xl mr-2 text-yellow-400"/>
      <section>
            Current Rank Title:
              <RankNames points={totalPoints}>
      </section>
  </div>
</section>

Twitter Post Link: twitter.com/Janetthedev/status/161423682630.. 4:23 AM · Jan 14, 2023

---

I'm going to have the user's name and profile image load in ServerSideProps, so theres no delay.

However components can't use ServerSideProps, so I'll need to pass them as props to the layout from EACH page that calls it ...

I'll fight with that tomorrow

Twitter Post Link: twitter.com/Janetthedev/status/161423871015.. 4:31 AM · Jan 14, 2023

---

🙌 fixed the header so it grabs session from serversideprops

🙌 did a few small edits

🙌 Started working on making it possible for users to upload profile images with cloudinary, I got to the highlighted part tonight. Giving my brain a break for now 🥱

PART 1:

• Allow User to attach a file (DONE)

  upload preset name + folder name = "profile_images" env file done

  utils => cloudinary config file done

  installed datauri and multer

  datauri: will help us convert parsed files (images and videos) to base 64 encodings

  multer: will help us parse the request body

  next-connect: will help us add Multer as a middleware to a router handler

• Upload file to cloudinary

  in response object, grab public_id

  let CloudinaryImagePublicId=public_id (can test by having it show up on the front end)

Once it works: PART 2:

• start a patch/put request to api/uploadProfileImage with the request {uerId, CloudinaryImagePublicId}

  look in users collection, find one with the current users id

  user.profileimage ===> replace with CloudinaryImagePublicId

Twitter Post Link: twitter.com/Janetthedev/status/161455440849.. 1:25 AM · Jan 15, 2023

---

My intention was to relax but, I ended up started on the social area of the app (batsignal/playyard) 😂

Users can ask the community for suggestions for names, pet descriptions, fundraisers, ect or just show off images of their pets

Twitter Post Link: twitter.com/Janetthedev/status/161458971485.. 3:46 AM · Jan 15, 2023

---

🐤worked a tiny bit on integrating cloudinary

🐤Started on the filtering system for the posts

Twitter Post Link: twitter.com/Janetthedev/status/161497396558.. 5:12 AM · Jan 16, 2023

---

Users can now upload profile image to cloudinary and have it replace the profile image in their mongoDB user document!

I wanted to use the widget but its extra broken for function components rn 😅 Look at all those error messages in that second sandbox support.cloudinary.com/hc/en-us/artic

Twitter Post Link: twitter.com/Janetthedev/status/161531673030.. 3:54 AM · Jan 17, 2023

---

I temporarily have a cool cat 😎😼 as a profile picture, eventually I'll go back to the turtle duck!

Twitter Post Link: twitter.com/Janetthedev/status/161532013680.. 4:08 AM · Jan 17, 2023

---

I was confused why I had 2 toast containers for a moment, then I remembered there was another in the nav bar!

so I got rid of the one in the nav bar for now. Phew, nice easy fix.

Twitter Post Link: twitter.com/Janetthedev/status/161532117776.. 4:12 AM · Jan 17, 2023

---

time to de-uglyify this bad boy and reword some things (uploading avatar section)

Twitter Post Link: twitter.com/Janetthedev/status/161548831278.. 3:16 PM · Jan 17, 2023

---

When styling I found out that file input is a bit picky, it needs to be onCHANGE not onCLICK. If its switched to onClick, clicking it will do nothing (it will give back undefined)

<input
  onChange={handleImageAttachment}
  accept=".jpg, .png, .jpeg, .gif"
  className="fileinput mb-4"
  type="file">
</input>

Twitter Post Link: twitter.com/Janetthedev/status/161551035852.. 4:44 PM · Jan 17, 2023

---

It looks MUCH better!

I also used state to decide when the upload button is disabled and what it looks like

Twitter Post Link: twitter.com/Janetthedev/status/161552795618.. 5:54 PM · Jan 17, 2023

---

I added a quick image to this page too ~

Twitter Post Link: twitter.com/Janetthedev/status/161553795586.. 6:33 PM · Jan 17, 2023

---

Future users on smaller screen sizes/mobile rejoice!

I made a toggle button so the user can get rid of the filter menu if they want!

(I'll be changing that banner later, the text on top of the image is mild torture for the eyes rn, but eh, future me will take care of that 😂)

Twitter Post Link: twitter.com/Janetthedev/status/161554697369.. 7:09 PM · Jan 17, 2023

---

aaah so satisfying, its the little things in life ☺️

I imported a component and replaced all the class= with className= with one simple button click!

Twitter Post Link: twitter.com/Janetthedev/status/161558091524.. 9:24 PM · Jan 17, 2023

---

I made progress on the front-end side of things in the community area!

I was struggling to get the buttons to center until I stumbled across a tip online to use text-center on its parent component

Twitter Post Link: twitter.com/Janetthedev/status/161567847930.. 3:52 AM · Jan 18, 2023

---

two of my pages keep making fast refresh do a full reload... not looking forward to debugging that ugh

Twitter Post Link: twitter.com/Janetthedev/status/161568352083.. 4:12 AM · Jan 18, 2023

---

I fixed the full reload bug! the page's function component needed to be capitalized😂🤦‍♀️

Also I fixed mobile view for the posts page! One of the components had been set to width max instead of width full.

---

I added a footer, which decided to float on one of my pages! 🤪

I found out it was because one of the divs was set to h-screen, so it wasn't resizing to the content. Even though visually it had looked fine.

Removing that height fixed it!💪

<div className="grow bg-darkPuple rounded-box place-items-center
h-screen"<===the problem area>

{/* button that toggles the filter div */}

<GeneralButton
   text="Toggle Filter Menu"
   onClick={()=>SetIsOpen(!isOpen)}/>

Twitter Post Link: twitter.com/Janetthedev/status/161591486847.. 7:31 PM · Jan 18, 2023

---