Organize utils.ts into folder, update imports

[alectrocute]

Hi Lemdevs!

This is my first milestone of refactoring the utils.ts file into a folder with logical structure:

utils/
├─ browser/ – browser/`navigator`-related
├─ helpers/ – simple js/ts helper functions
├─ roles/ – utils related to checking user roles/permissions
├─ types/ – y'know... types and interfaces, etc.

Next PR will expand upon this, adding more folders as necessary. The finish line isn't yet in sight, but I'm confident I can finish the entire refactor/tidying project. utils.ts can be a thing of the past soon. 😄

Thanks so much!

[alectrocute]

Wow, I totally ruined this branch. Somehow I pulled in a bunch of arbitrary changes, need to sort this out.

[alectrocute]

Resolved it. Please squash on merge when/if possible.

[SleeplessOne1917]

If we're using a single function, a default export may be better. Same for other similar files.

[alectrocute]

I’m not sure I understand. 😅

[SleeplessOne1917]

I meant default export lol. No idea where subreddit came from.

[dessalines]

LGTM, thanks! There's still a check that's failing lint.

[alectrocute]

Not sure why CI is failing, but I'd love to get this merged and get started on the second pass. 🙌

[SleeplessOne1917]

The only change I would make (which I messed up saying earlier) would be to use default exports for single-function modules. E.g., for can-share.ts,

export default function canShare() {
  return isBrowser() && !!navigator.canShare;
}

instead of

export function canShare() {
  return isBrowser() && !!navigator.canShare;
}

[alectrocute]

@SleeplessOne1917 I'm planning on making those changes ASAP. Totally slipped my mind!

[alectrocute]

Just need to fix the imports later tonight and we'll be good to go! Will comment and tag reviewers when it's ready. Thanks for your patience.

[jsit]

I've found that a common pattern is to set up an index.ts inside of each utils subdirectory, and then you can do things like:

import {
  amAdmin,
  amCommunityCreator,
  amMod,
  canAdmin,
  canMod,
  isAdmin,
  isBanned,
  isMod,
} from "@utils/roles";

Especially if we also set up paths in tsconfig.json:

https://www.typescriptlang.org/tsconfig#paths

Just a convention though, I also understand the desire to be as explicit as possible and not make imports at all mysterious.

---

Also is this PR re-writing any utils, or just organizing them? If it's just organizing them, I think it would be good to make that super clear in the PR description/title, so that it can be more easily reviewed without worrying if it's breaking anything.

[SleeplessOne1917]

Also is this PR re-writing any utils, or just organizing them? If it's just organizing them, I think it would be good to make that super clear in the PR description/title, so that it can be more easily reviewed without worrying if it's breaking anything.

I second this.

[alectrocute]

Also is this PR re-writing any utils, or just organizing them?

Just organizing for now. I'll update the PR title!

I've found that a common pattern is to set up an index.ts inside of each utils subdirectory, and then you can do things like...

Ooh, I like this.

[alectrocute]

@jsit @SleeplessOne1917 Would you mind taking a look at my changes? For some reason, I'm getting Module not found errors for the paths I setup in tsconfig.json. What am I doing wrong? Aside from the errors, the paths seem to resolve just fine in my IDE.

[alectrocute]

@jsit @SleeplessOne1917 @dessalines Upon adding TSConfigPathsWebpackPlugin, we're good to go!

Let me know if you'd like any other changes. This is ready for final review.

[dessalines]

Looks good, thanks!

[alectrocute]

Looks good, thanks!

You're welcome! Immediately after we merge this, I'll get started on the second pass which should completely eliminate our utils.ts file.

[jsit]

Thanks @alectrocute! Is adding this extra dependency necessary? I wonder if it would be cleaner just to manually do resolve in the webpack config.

[alectrocute]

Thanks @alectrocute! Is adding this extra dependency necessary? I wonder if it would be cleaner just to manually do resolve in the webpack config.

Any idea how to do this without the dependency?

It would definitely be cleaner to do it manually, but I'm unsure how at the moment.