-
-
Save jonidelv/c813da85320a9b6490b502a20d9781b2 to your computer and use it in GitHub Desktop.
| window.currentUser = { id: '19', name: 'Jane', email: '[email protected]' }; | |
| 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> | |
| ) | |
| } |
Related to pr-1.js
Here are a couple of suggestions:
Instead of using a for loop to iterate over the profiles array, you could use the filter() 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.
const active = profiles.filter(profile => !profile.disabled && profile.last_seen_time > new Date(new Date().getTime()-(24*60*1000)).toISOString());You could also consider destructuring the profile object in the map function to make the code more readable.
{active.map(({ name, email }) => (
<div onClick={() => onLaunchProfile(name, email)}>
{name} - {email}
</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>
);
};
Release notes:
I’ve just released an update to our Dropdown component! It now includes a searchable option and the ability to sync selections with the server.
Props and API:
label: A string that specifies the label for the dropdown button.items: An array of objects representing the options in the dropdown. Each object should have avalueand alabelproperty.initialSelected: An object representing the initially selected item in the dropdown. It should have avalueand alabelproperty.searchable: A boolean that specifies whether the dropdown should include a search input to filter the options.onSelect: A function that is called when an item is selected. It receives the selected item as an argument.