-
-
Save jonidelv/c813da85320a9b6490b502a20d9781b2 to your computer and use it in GitHub Desktop.
| window.currentUser = { id: '19', name: 'Jane', email: 'jane@chameleon.io' }; | |
| export const ActiveProfiles({ profiles, onLaunchProfile }) => { | |
| var active = []; | |
| for(i=0; i < profiles.length; i++) { | |
| if(!profiles[i].disabled && profiles[i]['last_seen_time'] > new Date(new Date().getTime()-(24*60*1000)).toISOString()) { // within the last 24 hours | |
| active.push(profiles[i]); | |
| } | |
| } | |
| if(active.length == 1 && active[0].email === window.currentUser.email) { | |
| active.length = 0; | |
| } | |
| return ( | |
| <div> | |
| {active.map(function(a) { return <div onClick={() => onLaunchProfile(a.name, a.email)}>{a.name} - {a.email}</div> })} | |
| </div> | |
| ) | |
| } |
You could use the useMemo hook to optimize the performance of the ActiveProfiles component by memoizing the active array. This would prevent unnecessary re-computations of the active array if the profiles prop hasn't changed.
Here's an example of how you could implement this:
const active = useMemo(() => {
return profiles.filter(
profile =>
!profile.disabled &&
profile.last_seen_time >
new Date(new Date().getTime() - 24 * 60 * 1000).toISOString()
);
}, [profiles]);This way, the active array will only be re-computed if the profiles prop changes.
You could move the conditional statement that checks if the active array has only one element and if that element's email is equal to window.currentUser.email inside the useMemo hook. Instead of setting the length property of the active array to 0, you could return an empty array.
Here's an example of how you could implement this:
const active = useMemo(() => {
const filteredProfiles = profiles.filter(
profile =>
!profile.disabled &&
profile.last_seen_time >
new Date(new Date().getTime() - 24 * 60 * 1000).toISOString()
);
if (
filteredProfiles.length === 1 &&
filteredProfiles[0].email === window.currentUser.email
) {
return [];
}
return filteredProfiles;
}, [profiles]);This way, the active array will be an empty array if the conditional statement is true.
When rendering a list of elements in React, it's important to assign a unique key prop to each element. This helps React identify which items have changed, are added, or are removed, and can improve the performance of the component.
If the profiles array contains a unique identifier for each profile, such as an id, you could use that as the key prop.
return (
<div>
{active.map(({ id, name, email }) => (
<div key={id} onClick={() => onLaunchProfile(name, email)}>
{name} - {email}
</div>
))}
</div>
);
This is how I would modify this component to utilize the Dropdown component created above.
import React, { useMemo, useCallback } from 'react';
import Dropdown from './Dropdown';
export const ActiveProfiles = ({ profiles, onLaunchProfile }) => {
const active = useMemo(() => {
const filteredProfiles = profiles.filter(
profile =>
!profile.disabled &&
profile.last_seen_time >
new Date(new Date().getTime() - 24 * 60 * 1000).toISOString()
);
if (
filteredProfiles.length === 1 &&
filteredProfiles[0].email === window.currentUser.email
) {
return [];
}
return filteredProfiles;
}, [profiles]);
const items = active.map(({ id, name, email }) => ({
value: id,
label: `${name} - ${email}`,
name,
email
}));
const handleSelect = useCallback((selectedItem) => {
onLaunchProfile(selectedItem.name, selectedItem.email);
}, [onLaunchProfile]);
return (
<div>
<Dropdown
label="Select a profile"
items={items}
onSelect={handleSelect}
/>
</div>
);
};
Related to
pr-1.jsHere are a couple of suggestions:
Instead of using a
forloop to iterate over theprofilesarray, you could use thefilter()method to create a new array with all elements that pass the test implemented by the provided function. This would make the code more concise and easier to read.You could also consider destructuring the
profileobject in themapfunction to make the code more readable.