Fix community dropdown, create axios API instance

package.json

@@ -6,11 +6,11 @@
   "license": "AGPL-3.0-or-later",
   "scripts": {
     "api-test": "jest src/api_tests/api.spec.ts",
-    "test": "jest",
     "build": "node generate_translations.js && tsc --noEmit && NODE_ENV=production vite build --base=/static/",
     "lint": "tsc --noEmit && eslint --report-unused-disable-directives --ext .js,.ts,.tsx src",
     "start": "node generate_translations.js && vite --port 4444 --open",
-    "storybook": "start-storybook -p 9009"
+    "storybook": "start-storybook -p 9009",
+    "test": "jest"
   },
   "keywords": [],
   "dependencies": {
@@ -33,6 +33,7 @@
     "@types/testing-library__jest-dom": "^5.9.2",
     "@types/theme-ui": "^0.3.6",
     "autosize": "^4.0.2",
+    "axios": "^0.19.2",
     "body-scroll-lock": "^3.0.3",
     "bootswatch": "^4.5.0",
     "choices.js": "^9.0.1",

src/components/community-dropdown.tsx

@@ -15,7 +15,7 @@ import React, { Component, createRef } from 'react';
 import { Subscription } from 'rxjs';
 import { WebSocketService, UserService } from '../services';
 import { retryWhen, delay, take } from 'rxjs/operators';
-import { wsJsonToRes, toast } from '../utils';
+import { wsJsonToRes, toast, api } from '../utils';
 import { i18n } from '../i18next';
 import { Link } from 'react-router-dom';
 import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';
@@ -70,10 +70,6 @@ export class CommunityDropdown extends Component<
     this.handleClickOutside = this.handleClickOutside.bind(this);
 
     document.addEventListener('mousedown', this.handleClickOutside);
-
-    // @TODO Refactor into an HTTP call when CORS issues are resolved
-    // const res = await fetch('http://localhost:8536/api/v1/community/list?sort=TopAll', { mode: 'no-cors', method: 'GET', headers: { 'Content-Type': 'application/json' } });
-    // const data = await res.text();
   }
 
   componentWillUnmount() {
@@ -193,13 +189,9 @@ export class CommunityDropdown extends Component<
     );
   }
 
-  fetch() {
-    let listCommunitiesForm: ListCommunitiesForm = {
-      sort: SortType[SortType.TopAll],
-      limit: this.maxLoad,
-      page: this.state.page,
-    };
-    WebSocketService.Instance.listCommunities(listCommunitiesForm);
+  async fetch() {
+    const res = await api.get('community/list?sort=TopAll');
+    this.setState({ communities: res.data.communities, loading: false });
 
     if (UserService.Instance.user) {
       let getUserDetailsForm: GetUserDetailsForm = {
@@ -297,11 +289,11 @@ export class CommunityDropdown extends Component<
       toast(i18n.t(msg.error), 'danger');
       return;
     } else if (res.op == UserOperation.ListCommunities) {
-      let data = res.data as ListCommunitiesResponse;
-      this.setState({
-        communities: data.communities,
-        loading: false,
-      });
+      // let data = res.data as ListCommunitiesResponse;
+      // this.setState({
+      //   communities: data.communities,
+      //   loading: false,
+      // });
     } else if (res.op == UserOperation.GetUserDetails) {
       let data = res.data as UserDetailsResponse;
       this.setState(

src/utils.ts

@@ -62,7 +62,8 @@ import tippy from 'tippy.js';
 
 import { customEmojis, replaceEmojis } from './custom-emojis';
 import moment from 'moment';
-import { BASE_PATH } from './isProduction';
+import { BASE_PATH, isProduction } from './isProduction';
+import axios from 'axios';
 
 export const repoUrl = 'https://gitlab.com/chapo-sandbox/production';
 export const helpGuideUrl = '/docs/about_guide.html';
@@ -1147,3 +1148,7 @@ export function isMessageChanged(operation: UserOperation): boolean {
     operation == UserOperation.DeletePrivateMessage
   );
 }
+
+export const api = axios.create({
+  baseURL: isProduction ? '/api/v1/' : 'http://localhost:8536/api/v1/',
+});

yarn.lock

@@ -4214,6 +4214,13 @@ [email protected]^3.5.4:
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-3.5.5.tgz#84315073b53fa3c0c51676c588d59da09a192227"
   integrity sha512-5P0QZ6J5xGikH780pghEdbEKijCTrruK9KxtPZCFWUpef0f6GipO+xEZ5GKCb020mmqgbiNO6TcA55CriL784Q==
 
+[email protected]^0.19.2:
+  version "0.19.2"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.2.tgz#3ea36c5d8818d0d5f8a8a97a6d36b86cdc00cb27"
+  integrity sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==
+  dependencies:
+    follow-redirects "1.5.10"
+
 [email protected]^2.1.2:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
@@ -5968,6 +5975,13 @@ [email protected], [email protected]^2.2.0, [email protected]^2.3.3, [email protected]^2.6.0, [email protected]^2.6.9:
   dependencies:
     ms "2.0.0"
 
+[email protected]=3.1.0, [email protected]~3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+  integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
+  dependencies:
+    ms "2.0.0"
+
 [email protected]^3.0.0, [email protected]^3.1.0:
   version "3.2.6"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
@@ -5982,13 +5996,6 @@ [email protected]^4.0.1, [email protected]^4.1.0, [email protected]^4.1.1:
   dependencies:
     ms "^2.1.1"
 
-[email protected]~3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
-  integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
-  dependencies:
-    ms "2.0.0"
-
 [email protected]^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
@@ -7405,6 +7412,13 @@ [email protected]^0.7.0:
   resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.7.0.tgz#b2bfb0ca7beacc8710a1ff74275fe0dc60a1d88a"
   integrity sha512-LI7v2mH02R55SekHYdv9pRHR9RajVNyIJ2N5IEkWbg7FT5ZmJ9Hw4mWxHeEUcd+dJo0QmzztHvDvWcc7prVFsw==
 
+[email protected]:
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
+  integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==
+  dependencies:
+    debug "=3.1.0"
+
 [email protected]^1.0.0:
   version "1.12.1"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.12.1.tgz#de54a6205311b93d60398ebc01cf7015682312b6"