feat: add support for highlight.new

[diivi]

Description

Fixes #1079

added a ?new=true query param that auto clicks and focuses on the highlight creation form so the user can create a highlight.

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

#1079

Mobile & Desktop Screenshots/Recordings

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?

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

[netlify]

✅ Deploy Preview for design-insights ready!

Name	Link
🔨 Latest commit	e4e4daf
🔍 Latest deploy log	https://app.netlify.com/sites/design-insights/deploys/64d252c1d60784000862377e
😎 Deploy Preview	https://deploy-preview-1487--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.

[netlify]

✅ Deploy Preview for oss-insights ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	e4e4daf
🔍 Latest deploy log	https://app.netlify.com/sites/oss-insights/deploys/64d252c1777b2d00080496ce
😎 Deploy Preview	https://deploy-preview-1487--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.

[bdougie]

@diivi visiting this link https://deploy-preview-1487--oss-insights.netlify.app/feed?new=true does not force a login currently. It works otherwise

[diivi]

Checking if a user is logged in is proving to be harder than I thought :/

Using this code is not working for some reason, I might need more context, as in where I can check if a user is logged in or not

  useEffect(() => {
    const queryParams = new URLSearchParams(window.location.search);
    const newHighlight = queryParams.get("new");

    const checkUserAuth = async () => {
      const sessionData = await loadSession();
      console.log(sessionData)
      // if (newHighlight && !sessionData) {
      //   signIn({ provider: "github", options: { redirectTo: `${window.location.href}` } });
      // }
    };
    void checkUserAuth();

    const focusOnHighlighCreationInput = setInterval(() => {
      const highlightCreationInput = document.getElementById("highlight-create-input");
      if (newHighlight && highlightCreationInput) {
        highlightCreationInput.click();
        highlightCreationInput.focus();
        clearInterval(focusOnHighlighCreationInput);
      }
    }, 1000);

    return () => {
      clearInterval(focusOnHighlighCreationInput);
    };
  }, []);

Running this logs false to the console even when I'm logged in.

[bdougie]

This logic exists on insights/new

update: Does this help @diivi? https://github.com/open-sauced/insights/blob/0cedccc612c5080df3552e9d62580c540a4ac9c9/pages/hub/insights/new.tsx#L11

[diivi]

update: Does this help @diivi?

https://github.com/open-sauced/insights/blob/0cedccc612c5080df3552e9d62580c540a4ac9c9/pages/hub/insights/new.tsx#L11

I checked that, yes.
But this ended up being a little more complex than expected lol. The end solution finally works though.

[bdougie]

Mobile needs the same treatment

[babblebey]

Hey @diivi, I'd suggest we use next/router over here, considering its usage is already established... It should save the extra steps in instantiating the URLSearchParams multiple times.

Kindly note, I am just thinking out loud with the below suggestions, if there's a reason why you chose to use the URLSearchParams api, I'm curious to know.

[diivi]

I'm aware of router.query, but it didn't work when I started development for this PR, so I moved to the browser based solution. I think it was due to race conditions (had some trouble with these on this PR).

If router.query works, I'll use that.

[diivi]

The mobile form should now open up automatically when ?new=true

[brandonroberts]

It works. Question about the delay time

[brandonroberts]

@diivi nevermind on the delay. This will continue to check on the interval