Review before being eligible to powercord-community repo

[cyyynthia]

Hi, I reviewed your plugin and there is a few changes that must be done before being able to get a repo on the community org. I tried to provide as much details as possible, as well as some suggestion to improve code quality. Feel free to reply to this issue or ping me on Discord (Bowser65#0001) if you have any questions/fixed all of those! :D

Also english is not my native language, so there might be some mistakes :p

General

• use const/let instead of var
• Code style is inconsistent (use of both " and '). this one is not really important tho
• Function naming is also inconsistent (sometimes camelCase, sometimes PascalCase). this one is not really important as well

Manifest

• The repo key is deprecated and shouldn't be used
• pc-commands dependency is uselsss

index.js

• L8: powercord.pluginManager.get('alias') can and should be replaced by this. You should also specify a default value (2nd argument)
• L15: Passing this.settings as props is deprecated. See the section related to settings to learn more
• L17: Use .css instead. Your plugin doesn't make use of scss so it adds extra processing for nothing
• L19-20: Use alias as primary command name. Conflicts on the main command name will prevent the command from being registered, but alias conflicts will just make the alias ignored. As a is very common it have more chance of conflicting

Settings.jsx

• (general): class should be replaced by className in JSX
• L10: You should use function that Powercord provides to settings component to get and update settings this.props.getSetting(setting, defaultValue): grabs a setting this.props.toggleSetting(setting): toggles the setting value (booleans) this.props.updateSetting(setting, newValue): update a setting note that any update made to the settings will make your component re-render with new settings automatically
• L24: add a key to component props (due to how React handle array of components). You can also use JSX instead of React.createElement.
• L27: this function is uselsss (see feedback for L10)
• L34: this is useless as well (see feedback for L10). Even if it would be useful, you should use the Spinner component exported by the module powercord/components instead of creating your own copy
• L45: you could just inline this.displayItems() instead of creating a variable
• L48-50: you overuse <br/> tag. It works, but you should use CSS margins instead
• L49: Use Divider exported by powercord/components instead
• L51: Child component shouldn't receive the parent component as a prop
• L56: this is useless, see feedback for L10

Pair.jsx

• (general): You shoudln't use raw Discord classes. Fetch them with getModule or copy the Discord style in your css
• (general): class should be replaced by className in JSX
• L1: use strict is useless (modules are always strict)
• L7: Your class name should begin with an uppercase letter (Pair)
• L35-36: Overuse of <br/>. You should use css margins instead
• L53 and L72: Use autoclosing tags instead (<component/> vs <component></component>)
• L71: You could use a class and move that to the css file
• L80: Use Divider exported by powercord/components instead
• L85 and L103: You probably meant Discord button instead of html button. Use uppercase B and remove the div children (pass only text)
• L115: can be replaced by color={Button.Colors.RED} look={Button.Looks.OUTLINED}
• L129: ?

[Eir-nya]

First, thank you so much for reviewing my thing! You've helped a lot <3 This was actually my first time using React.JS! Sorry if it's not professional.

I've fixed most of what you said in my newest commit. But I have a few questions:

• I saw you mention this.props.getSetting/toggleSetting/updateSetting. I just updated Powercord with git clone but am having trouble. I searched through Powercord's source code and saw they're defined with this.settings.connectStore(). Even after putting this.settings.connectStore(this) in index.js, this.props.getSetting is always undefined from inside Settings.jsx. Am I missing a step?

• About the system I made to show a "refreshing" animation when you add or delete an alias. I did it for a specific reason. I tried absolutely everything I could think of, including forceUpdate and setState in Settings.jsx, and even trying to force-unload-and-reload the plugin. Even after a whole day, I couldn't fix it. Here's what it looks like: The "New Alias" box keeps its previous values (minor), and after deleting an alias, any aliases following it will not update (major)! I did as much as I could, but right now this refreshing system is the only solution I can see.

• Do you remember how I had Discord's class names in a lot of my elements? The point of that was to let people's themes style my settings screen easily, and without making any special exceptions or selectors. In my latest commit, I styled them manually in style.css, but also added the Powercord selector names to them (such as pc-card) for the same purpose. Is that okay?

---

I think that's all I wanted to ask! Thank you again! I hope I'm not being troublesome or anything. Powercord's great btw <3

[cyyynthia]

To get access to the 3 props I mentionned you need to pass the raw component in registerSettings (Settings instead of () => React.createElement(Settings). I'll review again soon and bring back a list of fixes you can make. Thanks for the feedback regarding Powercord ❤️

[cyyynthia]

Review version 2.0 I also added checkboxes so you can check stuff if you want to

index.js

• [x] L7-9, L25 and L28: you should inline this.pairs fetching in command handling so you don't need to manually update it, it'll be automatically done
• [x] L15: Just pass Settings to get access to the 3 settings props

Settings.jsx

• [x] L8: Everything in the constructor will become useless. Can remove it entirely
• [x] L25: add a key attribute. That's what causing everything to break. key must be a unique value, like the alias name for example
• [x] L31-35: you can remove all of those {}. return is also useless if you remove those

Pair.jsx

• [x] L71: Raw classes

Note that you can use random Discord classes, just dynamically grab them using getModule

[Eir-nya]

Hello again! I fixed everything you said!

• Commit 1

  L15: Just pass Settings to get access to the 3 settings props

• Commit 2

  L7-9, L25 and L28: you should inline this.pairs fetching in command handling so you don't need to manually update it, it'll be automatically done L71: Raw classes

• Commit 3

  L31-35: you can remove all of those {}. return is also useless if you remove those

• Commit 4

  L8: Everything in the constructor will become useless. Can remove it entirely L25: add a key attribute. That's what causing everything to break. key must be a unique value, like the alias name for example

I also added support for Light Mode in Commits 3 and 4, which I forgot to do before :)

 

It took me a while to figure out how to do the last one, but then I found a helpful page that taught me that key is a special component in React.js elements. I didn't know, as I'm still pretty new to React.js.

I'm so glad I found it! Thank you so much for helping me!

[cyyynthia]

👀 https://github.com/powercord-community/alias/invitations