Skip to content

Commit 330cb8f

Browse files
author
Jonas Gossens
committed
✨ Add friends to personFinder
1 parent 064af66 commit 330cb8f

File tree

6 files changed

+67
-21
lines changed

6 files changed

+67
-21
lines changed

‎package-lock.json

+8-8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/react-chayns-personfinder/component/PersonFinderData.jsx

+38-4
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ export default class PersonFinderData extends Component {
5151

5252
state = {
5353
value: null,
54+
friends: [],
5455
persons: { related: [], unrelated: [] },
5556
sites: { related: [], unrelated: [] },
5657
showWaitCursor: false,
@@ -81,6 +82,7 @@ export default class PersonFinderData extends Component {
8182
this.fetchPersonRelations = this.fetchPersonRelations.bind(this);
8283
this.fetchSiteRelations = this.fetchRelations.bind(this, LOCATION_RELATION);
8384
this.handleLazyLoad = this.handleLazyLoad.bind(this);
85+
this.handleOnFocus = this.handleOnFocus.bind(this);
8486
}
8587

8688
componentDidUpdate() {
@@ -115,6 +117,17 @@ export default class PersonFinderData extends Component {
115117
this.fetchData(value, false, type);
116118
};
117119

120+
handleOnFocus() {
121+
const { friends } = this.state;
122+
const { persons, uacId, value } = this.props;
123+
if (friends.length === 0 && persons === true && !uacId && (!value || value.trim() === '')) {
124+
this.setState({ showWaitCursor: true });
125+
this.fetchFriends().then((result) => {
126+
this.setState({ friends: result, showWaitCursor: false });
127+
});
128+
}
129+
}
130+
118131
showWaitCursor() {
119132
const { lazyLoading } = this.state;
120133
clearTimeout(this.waitCursorTimeout);
@@ -287,10 +300,27 @@ export default class PersonFinderData extends Component {
287300
return this.promises[type].promise;
288301
}
289302

303+
async fetchFriends() {
304+
const config = {
305+
method: 'GET',
306+
headers: {
307+
Authorization: `Bearer ${chayns.env.user.tobitAccessToken}`,
308+
},
309+
mode: 'cors',
310+
};
311+
312+
const response = await fetch('https://webapi.tobit.com/AccountService/v1.0/chayns/friends', config);
313+
if (response.status === 200) {
314+
const json = await response.json();
315+
return Promise.resolve(json);
316+
}
317+
return Promise.resolve([]);
318+
}
319+
290320
hasEntries() {
291-
const { persons, sites } = this.state;
321+
const { persons, sites, friends } = this.state;
292322

293-
return persons.related.length > 0 || persons.unrelated.length > 0 || sites.related.length > 0 || sites.unrelated > 0;
323+
return persons.related.length > 0 || persons.unrelated.length > 0 || sites.related.length > 0 || sites.unrelated.length > 0 || friends.length > 0;
294324
}
295325

296326
renderChildren() {
@@ -305,21 +335,22 @@ export default class PersonFinderData extends Component {
305335
const {
306336
persons,
307337
sites,
338+
friends,
308339
showWaitCursor,
309340
lazyLoading,
341+
value,
310342
} = this.state;
311343

312344
const hasEntries = this.hasEntries();
313345
const showSeparators = showPersons && showSites;
314346

315347
if (!selectedValue && hasEntries) {
316348
const hasUnrelated = !!(persons && persons.unrelated && persons.unrelated.length);
317-
318349
const results = (
319350
<PersonFinderResults
320351
key="results"
321352
showId={showId}
322-
persons={persons}
353+
persons={{ ...persons, friends }}
323354
sites={sites}
324355
onSelect={onSelect}
325356
showSeparators={showSeparators}
@@ -328,6 +359,7 @@ export default class PersonFinderData extends Component {
328359
moreRelatedPersons={this.loadMore[PERSON_RELATION] && !hasUnrelated}
329360
moreRelatedSites={this.loadMore[LOCATION_RELATION]}
330361
moreUnrelatedPersons={this.loadMore[PERSON_RELATION] && hasUnrelated}
362+
showFriends={!value || value.trim() === ''}
331363
/>
332364
);
333365

@@ -367,10 +399,12 @@ export default class PersonFinderData extends Component {
367399

368400
return (
369401
<InputBox
402+
parent={document.querySelector('.tapp')}
370403
key="single"
371404
inputComponent={inputComponent}
372405
value={value}
373406
onChange={this.handleOnChange}
407+
onFocus={this.handleOnFocus}
374408
boxClassName={classnames('cc__person-finder__overlay', boxClassName)}
375409
overlayProps={{
376410
ref: (ref) => {

‎src/react-chayns-personfinder/component/PersonFinderResultItem.jsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import React, { PureComponent } from 'react';
44
import PropTypes from 'prop-types';
55

66
import getText from '../utils/getText';
7-
import { PERSON_RELATION, LOCATION_RELATION } from '../constants/relationTypes';
7+
import { PERSON_RELATION, LOCATION_RELATION, FRIEND_RELATION } from '../constants/relationTypes';
88

99
const SHOW_RELATIONS_COUNT = 5;
1010

@@ -22,7 +22,7 @@ export default class PersonFinderResultItem extends PureComponent {
2222
personId: PropTypes.string,
2323
userId: PropTypes.string,
2424
}).isRequired,
25-
type: PropTypes.oneOf([PERSON_RELATION, LOCATION_RELATION]).isRequired,
25+
type: PropTypes.oneOf([PERSON_RELATION, LOCATION_RELATION, FRIEND_RELATION]).isRequired,
2626
};
2727

2828
static getRelations(data, type) {
@@ -35,7 +35,7 @@ export default class PersonFinderResultItem extends PureComponent {
3535
let relationString = '';
3636

3737
for (let i = 0; i < show; i += 1) {
38-
if (type === PERSON_RELATION) {
38+
if (type === PERSON_RELATION || type === FRIEND_RELATION) {
3939
relationString += data[i].type === 'LIVING_IN' ? `${getText(data[i].type, data[i].name)}, ` : `${data[i].name}, `;
4040
} else {
4141
relationString += `${getText(data[i].type)}, `;
@@ -74,7 +74,7 @@ export default class PersonFinderResultItem extends PureComponent {
7474
};
7575
}
7676

77-
if (type === PERSON_RELATION) {
77+
if (type === PERSON_RELATION || type === FRIEND_RELATION) {
7878
return {
7979
personId: relation.personId,
8080
userId: relation.userId,
@@ -115,7 +115,7 @@ export default class PersonFinderResultItem extends PureComponent {
115115
if (!relationString) {
116116
return (
117117
<div className="identifier">
118-
{type === PERSON_RELATION ? relation.personId : relation.siteId}
118+
{type === PERSON_RELATION || type === FRIEND_RELATION ? relation.personId : relation.siteId}
119119
</div>
120120
);
121121
}
@@ -153,7 +153,7 @@ export default class PersonFinderResultItem extends PureComponent {
153153
<div className="name">{convertedRelation.name}</div>
154154
{relationString && (
155155
<div className="identifier">
156-
{`(${type === PERSON_RELATION ? convertedRelation.personId : convertedRelation.siteId})`}
156+
{`(${type === PERSON_RELATION || type === FRIEND_RELATION ? convertedRelation.personId : convertedRelation.siteId})`}
157157
</div>
158158
)}
159159
</div>

‎src/react-chayns-personfinder/component/PersonFinderResults.jsx

+10-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { PureComponent } from 'react';
22
import PropTypes from 'prop-types';
3-
import { PERSON_RELATION, LOCATION_RELATION } from '../constants/relationTypes';
3+
import { PERSON_RELATION, LOCATION_RELATION, FRIEND_RELATION } from '../constants/relationTypes';
44
import PersonFinderResultItem from './PersonFinderResultItem';
55
import getText from '../utils/getText';
66
import Divider from './Divider';
@@ -20,21 +20,25 @@ export default class PersonFinderResults extends PureComponent {
2020
moreRelatedPersons: PropTypes.bool,
2121
moreUnrelatedPersons: PropTypes.bool,
2222
showWaitCursor: PropTypes.bool,
23+
showFriends: PropTypes.bool,
2324
};
2425

2526
static defaultProps = {
26-
persons: { related: [], unrelated: [] },
27+
persons: { related: [], unrelated: [], friends: [] },
2728
sites: { related: [], unrelated: [] },
2829
onSelect: null,
2930
showSeparators: false,
3031
moreRelatedSites: false,
3132
moreRelatedPersons: false,
3233
moreUnrelatedPersons: false,
3334
showWaitCursor: false,
35+
showFriends: false,
3436
};
3537

3638
static getDividerText(type) {
3739
switch (type) {
40+
case FRIEND_RELATION:
41+
return getText('DIVIDER_FRIEND');
3842
case PERSON_RELATION:
3943
return getText('DIVIDER_PERSON');
4044
case PERSON_UNRELATED:
@@ -61,7 +65,7 @@ export default class PersonFinderResults extends PureComponent {
6165
}
6266

6367
renderResults(relations, type) {
64-
if (relations.length === 0) {
68+
if (!relations || relations.length === 0) {
6569
return null;
6670
}
6771

@@ -126,15 +130,18 @@ export default class PersonFinderResults extends PureComponent {
126130
moreRelatedPersons,
127131
moreRelatedSites,
128132
moreUnrelatedPersons,
133+
showFriends,
129134
} = this.props;
130135

131136
const relatedPersons = this.renderResults(persons.related, PERSON_RELATION);
132137
const relatedSites = this.renderResults(sites.related, LOCATION_RELATION);
133138
const unrelatedPersons = this.renderResults(persons.unrelated, PERSON_RELATION);
134139
const unrelatedSites = this.renderResults(sites.unrelated, LOCATION_RELATION);
140+
const friends = showFriends ? this.renderResults(persons.friends, FRIEND_RELATION) : null;
135141

136142
return (
137143
<div className="cc__person-finder__results">
144+
{friends ? this.renderRelated(FRIEND_RELATION, friends) : null}
138145
{this.renderRelated(PERSON_RELATION, relatedPersons, moreRelatedPersons)}
139146
{this.renderRelated(LOCATION_RELATION, relatedSites, moreRelatedSites)}
140147
{this.renderRelated(PERSON_UNRELATED, unrelatedPersons, moreUnrelatedPersons)}

‎src/react-chayns-personfinder/constants/relationTypes.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
1+
export const FRIEND_RELATION = 'FRIEND';
12
export const PERSON_RELATION = 'PERSON';
23
export const LOCATION_RELATION = 'LOCATION';

‎src/react-chayns-personfinder/utils/getText.js

+4
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ const DICTIONARY = {
33
de: 'eingelogged',
44
en: 'logged in',
55
},
6+
DIVIDER_FRIEND: {
7+
de: 'Freunde',
8+
en: ' friends',
9+
},
610
DIVIDER_PERSON: {
711
de: 'Personen',
812
en: ' persons',

0 commit comments

Comments
 (0)