fix(front): add missing sync button to people page (#107)

## 📝 Description
- Added missing `sync` button to refresh collaborators on people page.
- Refactored adding people component for clarity

## ✅ Checklist
- [x] I have tested this change
- [x] ~~This change requires documentation update~~

Author: skipi

front/assets/js/app.js

@@ -63,6 +63,7 @@ import { default as GetStarted } from "./get_started"
 import { default as Agents} from "./agents";
 import { default as AddPeople } from "./people/add_people";
 import { default as EditPerson } from "./people/edit_person";
+import { default as SyncPeople } from "./people/sync_people";
 
 import { InitializingScreen } from "./project_onboarding/initializing";
 import { AccountInitializingScreen } from "./me/initialization/initializing";
@@ -276,18 +277,25 @@ export var App = {
     GroupManagement.init();
     new Star();
 
-    const addPeopleApp = document.getElementById("add-people");
-    if (addPeopleApp) {
+    const addPeopleAppRoot = document.getElementById("add-people");
+    if (addPeopleAppRoot) {
       AddPeople({
-        dom: addPeopleApp,
-        config: addPeopleApp.dataset,
+        dom: addPeopleAppRoot,
+        config: addPeopleAppRoot.dataset,
       });
     }
 
-    document.querySelectorAll(".app-edit-person").forEach((person) => {
+    document.querySelectorAll(".app-edit-person").forEach((editPersonAppRoot) => {
       EditPerson({
-        dom: person,
-        config: person.dataset
+        dom: editPersonAppRoot,
+        config: editPersonAppRoot.dataset
+      })
+    });
+
+    document.querySelectorAll(".app-sync-people").forEach((syncPeopleAppRoot) => {
+      SyncPeople({
+        dom: syncPeopleAppRoot,
+        config: syncPeopleAppRoot.dataset
       })
     });
   },

front/assets/js/people/add_people/config.ts

@@ -0,0 +1,67 @@
+import { createContext } from "preact";
+import { APIRequest } from "js/toolbox";
+import { UserProvider } from "./types";
+
+export interface RawConfig {
+  config: string;
+}
+
+interface ParsedConfig {
+  users: {
+    collaborators_url: string;
+    create_url: string;
+    invite_url: string;
+    sync_url: string;
+    providers: string[];
+  };
+}
+
+export class AppConfig {
+  collaboratorListUrl: APIRequest.Url<{ collaborators: any, }>;
+  inviteMemberUrl: APIRequest.Url<{ message: string, }>;
+  createMemberUrl: APIRequest.Url<{
+    password: string;
+    message: string;
+  }>;
+
+  allowedProviders: UserProvider[] = [];
+  baseUrl: string;
+
+  static fromJSON(rawJson: RawConfig): AppConfig {
+    const config = AppConfig.default();
+    const json: ParsedConfig = JSON.parse(rawJson.config);
+
+    config.collaboratorListUrl = APIRequest.Url.fromJSON(
+      json.users.collaborators_url
+    );
+    config.createMemberUrl = APIRequest.Url.fromJSON(json.users.create_url);
+    config.inviteMemberUrl = APIRequest.Url.fromJSON(json.users.invite_url);
+
+    json.users.providers
+      .map((provider: string) => {
+        switch (provider) {
+          case `email`:
+            return UserProvider.Email;
+          case `github`:
+            return UserProvider.GitHub;
+          case `bitbucket`:
+            return UserProvider.Bitbucket;
+          case `gitlab`:
+            return UserProvider.GitLab;
+          default:
+            return null;
+        }
+      })
+      .filter((provider: UserProvider | null) => provider)
+      .forEach((provider) => config.allowedProviders.push(provider));
+
+    return config;
+  }
+
+  static default(): AppConfig {
+    const config = new AppConfig();
+    return config;
+  }
+}
+
+export const Config = createContext<AppConfig>(AppConfig.default());

front/assets/js/people/add_people/index.tsx

@@ -1,20 +1,22 @@
-import { createContext, Fragment, render, VNode } from "preact";
+import { Fragment, render, VNode } from "preact";
 import { Modal } from "js/toolbox";
 import { useContext, useEffect, useReducer, useState } from "preact/hooks";
 import * as toolbox from "js/toolbox";
 import _ from "lodash";
 import { ChangeEvent } from "react-dom/src";
 import styled from "styled-components";
+import { Config, AppConfig, RawConfig } from "./config";
+import { AddPeopleState, AvailableProviderTypes, Collaborator, PeopleStateReducer, Person, PersonState, UserProvider } from "./types";
 
 export default function ({
   dom,
   config: jsonConfig,
 }: {
   dom: HTMLElement;
-  config: any;
+  config: RawConfig;
 }) {
   render(
-    <Config.Provider value={State.fromJSON(jsonConfig as DOMStringMap)}>
+    <Config.Provider value={AppConfig.fromJSON(jsonConfig)}>
       <App/>
     </Config.Provider>,
     dom
@@ -63,6 +65,7 @@ const AddNewUsers = (props: { close: (reload: boolean) => void, }) => {
 
   const [loading, setLoading] = useState(true);
 
+
   useEffect(() => {
     void config.collaboratorListUrl
       .call()
@@ -140,7 +143,7 @@ const AddNewUsers = (props: { close: (reload: boolean) => void, }) => {
       </div>
 
       {userProviders.length > 1 && (
-        <div className="mb3 button-group ph4 w-100">
+        <div className="mb3 button-group ph4 w-100 items-center justify-center">
           {userProviders.map(userProviderBox)}
         </div>
       )}
@@ -193,9 +196,8 @@ const ProvideVia = (props: ProvideViaProps) => {
       (collaborator) => collaborator.provider === props.provider.toLowerCase()
     )
   );
-  const [selectedCollaborators, setSelectedCollaborators] = useState<
-  Collaborator[]
-  >([]);
+
+  const [selectedCollaborators, setSelectedCollaborators] = useState<Collaborator[]>([]);
 
   const toggleCollaborator = (collaborator: Collaborator) => {
     if (selectedCollaborators.includes(collaborator)) {
@@ -621,62 +623,6 @@ const ProvideViaEmail = (props: ProvideViaEmailProps) => {
   );
 };
 
-export class State {
-  collaboratorListUrl: toolbox.APIRequest.Url<{ collaborators: any, }>;
-  inviteMemberUrl: toolbox.APIRequest.Url<{ message: string, }>;
-  createMemberUrl: toolbox.APIRequest.Url<{
-    password: string;
-    message: string;
-  }>;
-  allowedProviders: UserProvider[] = [];
-
-  static fromJSON(rawJson: DOMStringMap): State {
-    const config = State.default();
-    const json = JSON.parse(rawJson.config);
-
-    config.collaboratorListUrl = toolbox.APIRequest.Url.fromJSON(
-      json.users.collaborators_url
-    );
-    config.createMemberUrl = toolbox.APIRequest.Url.fromJSON(
-      json.users.create_url
-    );
-    config.inviteMemberUrl = toolbox.APIRequest.Url.fromJSON(
-      json.users.invite_url
-    );
-
-    json.users.providers
-      .map((provider: string) => {
-        switch (provider) {
-          case `email`:
-            return config.allowedProviders.push(UserProvider.Email);
-          case `github`:
-            return config.allowedProviders.push(UserProvider.GitHub);
-          case `bitbucket`:
-            return config.allowedProviders.push(UserProvider.Bitbucket);
-          case `gitlab`:
-            return config.allowedProviders.push(UserProvider.GitLab);
-          default:
-            return null;
-        }
-      })
-      .filter((provider: UserProvider | null) => provider);
-    return config;
-  }
-
-  static default(): State {
-    const config = new State();
-    return config;
-  }
-}
-
-export const Config = createContext<State>(new State());
-
-enum UserProvider {
-  Email = `email`,
-  GitHub = `github`,
-  Bitbucket = `bitbucket`,
-  GitLab = `gitlab`,
-}
 
 const ActiveShadowLink = styled.button`
   &:hover,
@@ -686,138 +632,10 @@ const ActiveShadowLink = styled.button`
   }
 `;
 
-class Collaborator {
-  displayName: string;
-  uid: string;
-  login: string;
-  provider: string;
-  avatarUrl: string;
-
-  constructor() {
-    this.displayName = ``;
-    this.uid = ``;
-    this.login = ``;
-    this.provider = ``;
-    this.avatarUrl = ``;
-  }
-
-  static fromJSON(json: any): Collaborator {
-    const collaborator = new Collaborator();
-    collaborator.displayName = json.display_name as string;
-    collaborator.login = json.login as string;
-    collaborator.uid = json.uid as string;
-    collaborator.provider = json.provider as string;
-    collaborator.avatarUrl = json.avatar_url as string;
-
-    return collaborator;
-  }
-
-  hasAvatar(): boolean {
-    return this.avatarUrl.length != 0;
-  }
-}
-
-enum PersonState {
-  Empty,
-  Loading,
-  Invited,
-  Error,
-}
-
-class Person {
-  id: string;
-  email: string;
-  username: string;
-  password = ``;
-  errorMessage = ``;
-  state: PersonState = PersonState.Empty;
-  wasInvited: boolean;
-  emailValid = true;
-
-  constructor() {
-    this.id = _.uniqueId(`person_`);
-    this.email = ``;
-    this.username = ``;
-    this.wasInvited = false;
-  }
-
-  isEmpty(): boolean {
-    return _.isEmpty(this.email) && _.isEmpty(this.username);
-  }
-
-  init() {
-    this.password = ``;
-    this.errorMessage = ``;
-    this.state = PersonState.Empty;
-  }
-
-  setPassword(password: string) {
-    this.state = PersonState.Invited;
-    this.password = password;
-  }
-
-  setError(errorMessage: string) {
-    this.state = PersonState.Error;
-    this.errorMessage = errorMessage;
-  }
-  setLoading() {
-    this.wasInvited = true;
-    this.state = PersonState.Loading;
-  }
-}
-
-class AddPeopleState {
-  people: Person[] = [new Person()];
-  type: UserProvider;
-}
-
-export type AddPeopleAction =
-  | { type: `UPDATE_PERSON`, id: string, value: Person, }
-  | { type: `REMOVE_PERSON`, id: string, }
-  | { type: `RESET`, };
-
-const PeopleStateReducer = (state: AddPeopleState, action: AddPeopleAction) => {
-  switch (action.type) {
-    case `UPDATE_PERSON`: {
-      const newPeople = state.people
-        .map((person) => {
-          if (person.id == action.id) {
-            return action.value;
-          }
-          return person;
-        })
-        .filter((person) => !person.isEmpty());
-
-      newPeople.push(new Person());
-
-      return { ...state, people: newPeople };
-    }
-
-    case `REMOVE_PERSON`: {
-      const newPeople = state.people.filter((person) => person.id != action.id);
-
-      return { ...state, people: newPeople };
-    }
-
-    case `RESET`: {
-      return { ...state, people: [new Person()] };
-    }
-
-    default:
-      return state;
-  }
-};
-
 const ActiveShadowDiv = styled.div`
   &:hover,
   &.active {
     z-index: 2;
     box-shadow: 0 0 0 3px #00359f !important;
   }
 `;
-const AvailableProviderTypes: UserProvider[] = [
-  UserProvider.Email,
-  UserProvider.GitHub,
-  UserProvider.Bitbucket,
-  UserProvider.GitLab,
-];