Bug fixes and Plugin Versions content

src/components/Navbar/components/Search/Search.jsx

@@ -85,7 +85,7 @@ const Search = ({
             onChange={onChange}
             autoComplete="off"
             onKeyDown={(e) => {
-              if (e.key === 'Enter' && value.length >= 3 && !autoCompleteData.length) {
+              if (e.key === 'Enter' && value.length >= 3) {
                 onSearch(value, 'ENTER');
                 setShowAutoComplete(false);
               }

src/components/Plugin/Plugin.jsx

@@ -39,9 +39,22 @@ export class Plugin extends Component {
   async componentDidMount() {
     let { pluginData } = this.state;
 
-    if (!pluginData) {
+    /**
+     * When the user opens this page from `/plugins` or `/plugins/<name>`, 
+     * the incoming prop has a value and we use that.
+     * 
+     * If the incoming prop does not have a value, we assume 
+     * we are on `/p/<id>` and we fetch by ID `name_exact=<name>`.
+     */
+    if (!pluginData)
       pluginData = await this.fetchPluginData();
-    }
+    /**
+     * If pluginData was fetched (by ID), it will have a version, hence continue.
+     * If not, we fetch all plugins with `name_exact=<name>` 
+     * and select plugin.versions[0] from that to show on the install button.
+     */
+    else
+      this.fetchPluginVersions(pluginData.name)
 
     this.setState({ pluginData, loading: false });
     if (this.isLoggedIn()) {
@@ -65,9 +78,13 @@ export class Plugin extends Component {
 
   onStarClicked = () => {
     if (this.isLoggedIn()) {
-      return this.isFavorite() ? this.unfavPlugin() : this.favPlugin();
+      if (this.isFavorite()) 
+        this.unfavPlugin();
+      else 
+        this.favPlugin();
     }
-    return Promise.resolve();
+    else
+      this.showNotifications(new Error('You need to be logged in!'))
   }
 
   favPlugin = async () => {
@@ -132,6 +149,31 @@ export class Plugin extends Component {
     }
   }
 
+  /**
+   * Fetch all versions of a plugin by name.
+   * 
+   * @param {string} name Plugin name
+   * @returns Promise => void
+   */
+  async fetchPluginVersions(name) {
+    try {
+      const versions = await this.client.getPlugins({ limit: 10e6, name_exact: name });
+      const firstplg = await this.client.getPlugin(parseInt(versions.data[0].id, 10));
+      return this.setState((prevState) => ({ 
+        pluginData: { 
+          ...prevState.pluginData, 
+          versions: [
+            { ...versions.data[0], url: firstplg.url },
+            ...versions.data.slice(1)
+          ],
+        } 
+      }));
+    } catch (e) {
+      this.showNotifications(new HttpApiCallError(e));
+      return e
+    }
+  }
+
   async fetchIsPluginStarred({ name }) {
     try {
       const response = await this.client.getPluginStars({ plugin_name: name });