infra
/
etesync
2
0
Fork 0
Code Issues Pull Requests Packages Activity

JournalsList: change to a functional component

master
Tal Leibman 2019-11-23 15:50:45 +02:00 committed by Tom Hacohen
parent 2c02ec839e
commit a8bdc076d9
1 changed files with 62 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
src/Journals/JournalsList.tsx
View File

@ -15,75 +15,67 @@ import { routeResolver } from '../App';
import { JournalsData, UserInfoData, CredentialsData } from '../store';
class JournalsList extends React.PureComponent {
public props: {
etesync: CredentialsData;
journals: JournalsData;
userInfo: UserInfoData;
history: History;
};
constructor(props: any) {
super(props);
this.journalClicked = this.journalClicked.bind(this);
}
public render() {
const derived = this.props.etesync.encryptionKey;
const journalMap = this.props.journals.reduce(
(ret, journal) => {
const userInfo = this.props.userInfo;
const keyPair = userInfo.getKeyPair(userInfo.getCryptoManager(derived));
const cryptoManager = journal.getCryptoManager(derived, keyPair);
const info = journal.getInfo(cryptoManager);
ret[info.type] = ret[info.type] || [];
ret[info.type].push(
<ListItem key={journal.uid} onClick={() => this.journalClicked(journal.uid)}>
{info.displayName} ({journal.uid.slice(0, 5)})
</ListItem>
);
return ret;
},
{ CALENDAR: [],
ADDRESS_BOOK: [],
TASKS: [],
});
return (
<Container>
<AppBarOverride title="Journals">
<IconButton
component={Link}
title="New"
{...{ to: routeResolver.getRoute('journals.new') }}
>
<IconAdd />
</IconButton>
</AppBarOverride>
<List>
<ListItem
primaryText="Address Books"
nestedItems={journalMap.ADDRESS_BOOK}
/>
<ListItem
primaryText="Calendars"
nestedItems={journalMap.CALENDAR}
/>
<ListItem
primaryText="Tasks"
nestedItems={journalMap.TASKS}
/>
</List>
</Container>
);
}
private journalClicked(journalUid: string) {
this.props.history.push(routeResolver.getRoute('journals._id', { journalUid }));
}
interface PropsType {
etesync: CredentialsData;
journals: JournalsData;
userInfo: UserInfoData;
history: History;
}
export default JournalsList;
export default function JournalsList(props: PropsType) {
const derived = props.etesync.encryptionKey;
function journalClicked(journalUid: string) {
props.history.push(routeResolver.getRoute('journals._id', { journalUid }));
}
const journalMap = props.journals.reduce(
(ret, journal) => {
const userInfo = props.userInfo;
const keyPair = userInfo.getKeyPair(userInfo.getCryptoManager(derived));
const cryptoManager = journal.getCryptoManager(derived, keyPair);
const info = journal.getInfo(cryptoManager);
ret[info.type] = ret[info.type] || [];
ret[info.type].push(
<ListItem key={journal.uid} onClick={() => journalClicked(journal.uid)}>
{info.displayName} ({journal.uid.slice(0, 5)})
</ListItem>
);
return ret;
},
{ CALENDAR: [],
ADDRESS_BOOK: [],
TASKS: [],
});
return (
<Container>
<AppBarOverride title="Journals">
<IconButton
component={Link}
title="New"
{...{ to: routeResolver.getRoute('journals.new') }}
>
<IconAdd />
</IconButton>
</AppBarOverride>
<List>
<ListItem
primaryText="Address Books"
nestedItems={journalMap.ADDRESS_BOOK}
/>
<ListItem
primaryText="Calendars"
nestedItems={journalMap.CALENDAR}
/>
<ListItem
primaryText="Tasks"
nestedItems={journalMap.TASKS}
/>
</List>
</Container>
);
}