feat: add conditional routing to single highlight dialog close action

[babblebey]

Description

This Pull Request introduces conditional routing to the Single Highlight Dialog Close action, bringing a fix to the Initial set-up; when a user clicks on a single highlight from a user profile, a dialog opens on the /feed/[id] route. However, when the user clicks on the close button of the dialog, it routes back to the /feed page, displaying the general highlights.

Changes Made

1. Added referer to the single highlight SSR returned props, this was destructed from the Request headers req.headers intended to be used in a check to see what page/route (in is returned url value) the single highlight was clicked from. See referer value types below...

• string - a valid url returned in the case where the /feed/[id] route was requested/clicked from within the web app.
• null - a serialisable value returned in the case where technically no referer is found, i.e. the /feed/[id] route was via a direct url input to the browser tab or a click from an external website.

2. Removed the below routing action which was making extra request to the same /feed/[id] route, hence setting the referer to a fixed value.

router.push(`/feed/${props.highlight?.id}`)

3. Conditionally render Close button for Dialog based on the value of the referer, with each button handling routing in specific manners for different cases.

Implementation

{props.referer !== null && !props.referer.includes("/feed") ? (
  <Button
    variant="text"
    onClick={() => router.back()}
    className="!p-0 !border-0 absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-slate-100"
  >
    <AiOutlineClose size={20} />
    <span className="sr-only">Close</span>
  </Button>
) : (
  <DialogCloseButton onClick={() => router.replace("/feed")} />
)}

Case - When referer detects request is made from a page that is NOT the /feed page.

The <Button /> which routes back in history is rendered

Case - When referer detects request is made from the /feed page.

The <DialogCloseButton /> which closes the dialog and replaces current route with with /feed onClick is rendered

4. Replicated the conditional routing logic in the Dialog component's root onOpenChange prop to inject the logic into the dialogues overlay "background-click-to-close" functionality

Implementation

<Dialog
  open={openSingleHighlight}
  // onOpenChange action/prop
  onOpenChange={(open) => {
    if (openSingleHighlight && !open) {
      if (props.referer !== null && !props.referer.includes("/feed")) {      // <- Logic starts here 🍕
        router.back();
      } else {
        setOpenSingleHighlight(false);
        router.replace("/feed");
      }     // <- ends here 🍕
    }
  }}
>
...
</Dialog>

🍕

What type of PR is this? (check all applicable)

• 🍕 Feature
• 🐛 Bug Fix
• 📝 Documentation Update
• 🎨 Style
• 🧑‍💻 Code Refactor
• 🔥 Performance Improvements
• ✅ Test
• 🤖 Build
• 🔁 CI
• 📦 Chore (Release)
• ⏩ Revert

Related Tickets & Documents

Fixes #1414

Mobile & Desktop Screenshots/Recordings

screencast-localhost_3000-2023.08.03-03_32_21.webm

Added tests?

• 👍 yes
• 🙅 no, because they aren't needed
• 🙋 no, because I need help

Added to documentation?

• 📜 README.md
• 📓 docs.opensauced.pizza
• 🍕 dev.to/opensauced
• 📕 storybook
• 🙅 no documentation needed

[optional] Are there any post-deployment tasks we need to perform?

NA

[optional] What gif best describes this PR or how it makes you feel?

[netlify]

✅ Deploy Preview for oss-insights ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	a7b0c3b
🔍 Latest deploy log	https://app.netlify.com/sites/oss-insights/deploys/64cb23bca831590008e6c61b
😎 Deploy Preview	https://deploy-preview-1473--oss-insights.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for design-insights ready!

Name	Link
🔨 Latest commit	a7b0c3b
🔍 Latest deploy log	https://app.netlify.com/sites/design-insights/deploys/64cb23bcb72fcd00084d4158
😎 Deploy Preview	https://deploy-preview-1473--design-insights.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[OgDev-01]

LGTM 🍕

[github-actions]

🎉 This PR is included in version 1.59.0-beta.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀