commit fe1de72b4067381f3bafefa191b03b38e24b3208
author simon <tran.simon2@gmail.com> Sun Oct 02 00:21:43 2022 -0400
committer Adrien Béraud <adrien.beraud@savoirfairelinux.com> Fri Oct 07 11:19:44 2022 -0400
tree 04e42ebcff94e0d27e594ca7251819cd73c91c75
parent 7f0b288d88d164a6efb7ba54fa6c24ccbd977cbc

Convert all pages to Typescript

Convert all files in `client/src/pages` to Typescript

Gitlab: #30

Change-Id: I9b5ec5b042487d732bb7d46b584f797049eb068c

client/src/components/AccountPreferences.tsx

diff --git a/client/src/components/AccountPreferences.js b/client/src/components/AccountPreferences.tsx
similarity index 89%
rename from client/src/components/AccountPreferences.js
rename to client/src/components/AccountPreferences.tsx
index 23b23f6..598d07f 100644
--- a/client/src/components/AccountPreferences.js
+++ b/client/src/components/AccountPreferences.tsx
@@ -21,6 +21,7 @@
 import { useState } from 'react';
 
 import Account from '../../../model/Account';
+import AccountDetails from '../../../model/AccountDetails';
 import authManager from '../AuthManager';
 import ConversationAvatar from './ConversationAvatar';
 import ConversationsOverviewCard from './ConversationsOverviewCard';
@@ -34,14 +35,19 @@
   exit: {
     scale: 0.5,
     opacity: 0,
-    transition: { duration: 1.5, ...transition },
+    transition: { ...transition, duration: 1.5 },
   },
 };
 
-export default function AccountPreferences(props) {
-  const account = props.account;
-  let devices = [];
-  for (var i in account.devices) devices.push([i, account.devices[i]]);
+type AccountPreferencesProps = {
+  account: Account;
+  onAccountChanged?: (account: Account) => void;
+};
+
+export default function AccountPreferences({ account }: AccountPreferencesProps) {
+  const devices: string[][] = [];
+  const accountDevices = account.getDevices();
+  for (const i in accountDevices) devices.push([i, accountDevices[i]]);
 
   console.log(devices);
 
@@ -59,12 +65,12 @@
     }
   };
 
-  const removeModerator = (uri) =>
+  const removeModerator = (uri: string) =>
     authManager.fetch(`/api/accounts/${account.getId()}/defaultModerators/${uri}`, { method: 'DELETE' });
 
-  const handleToggle = (key, value) => {
+  const handleToggle = (key: keyof AccountDetails, value: boolean) => {
     console.log(`handleToggle ${key} ${value}`);
-    const newDetails = {};
+    const newDetails: Partial<AccountDetails> = {};
     newDetails[key] = value ? 'true' : 'false';
     console.log(newDetails);
     authManager.fetch(`/api/accounts/${account.getId()}`, {
@@ -213,13 +219,13 @@
                 </ListItem>
               ) : (
                 moderators.map((moderator) => (
-                  <ListItem key={moderator.uri}>
+                  <ListItem key={moderator.getUri()}>
                     <ListItemAvatar>
-                      <ConversationAvatar name={moderator.getDisplayName()} />
+                      <ConversationAvatar displayName={moderator.getDisplayName()} />
                     </ListItemAvatar>
                     <ListItemText primary={moderator.getDisplayName()} />
                     <ListItemSecondaryAction>
-                      <IconButton onClick={(e) => removeModerator(moderator.uri)} size="large">
+                      <IconButton onClick={(e) => removeModerator(moderator.getUri())} size="large">
                         <DeleteRounded />
                       </IconButton>
                     </ListItemSecondaryAction>