1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
import * as Sentry from '@sentry/browser';
import AccessorUtilities from '~/lib/utils/accessor';
import { FREQUENT_ITEMS, FIFTEEN_MINUTES_IN_MS } from '~/frequent_items/constants';
import { truncateNamespace } from '~/lib/utils/text_utility';
/**
* This takes an array of project or groups that were stored in the local storage, to be shown in
* the context switcher, and sorts them by frequency and last access date.
* In the resulting array, the most popular item (highest frequency and most recent access date) is
* placed at the first index, while the least popular is at the last index.
*
* @param {Array} items The projects or groups stored in the local storage
* @returns The items, sorted by frequency and last access date
*/
const sortItemsByFrequencyAndLastAccess = (items) =>
items.sort((itemA, itemB) => {
// Sort all frequent items in decending order of frequency
// and then by lastAccessedOn with recent most first
if (itemA.frequency !== itemB.frequency) {
return itemB.frequency - itemA.frequency;
} else if (itemA.lastAccessedOn !== itemB.lastAccessedOn) {
return itemB.lastAccessedOn - itemA.lastAccessedOn;
}
return 0;
});
// This imitates getTopFrequentItems from app/assets/javascripts/frequent_items/utils.js, but
// adjusts the rules to accommodate for the context switcher's designs.
export const getTopFrequentItems = (items, maxCount) => {
if (!Array.isArray(items)) return [];
const frequentItems = items.filter((item) => item.frequency >= FREQUENT_ITEMS.ELIGIBLE_FREQUENCY);
sortItemsByFrequencyAndLastAccess(frequentItems);
return frequentItems.slice(0, maxCount);
};
const updateItemAccess = (contextItem, { lastAccessedOn, frequency = 0 } = {}) => {
const now = Date.now();
const neverAccessed = !lastAccessedOn;
const shouldUpdate = neverAccessed || Math.abs(now - lastAccessedOn) / FIFTEEN_MINUTES_IN_MS > 1;
return {
...contextItem,
frequency: shouldUpdate ? frequency + 1 : frequency,
lastAccessedOn: shouldUpdate ? now : lastAccessedOn,
};
};
export const trackContextAccess = (username, context) => {
if (!AccessorUtilities.canUseLocalStorage()) {
return false;
}
const storageKey = `${username}/frequent-${context.namespace}`;
const storedRawItems = localStorage.getItem(storageKey);
const storedItems = storedRawItems ? JSON.parse(storedRawItems) : [];
const existingItemIndex = storedItems.findIndex(
(cachedItem) => cachedItem.id === context.item.id,
);
if (existingItemIndex > -1) {
storedItems[existingItemIndex] = updateItemAccess(context.item, storedItems[existingItemIndex]);
} else {
const newItem = updateItemAccess(context.item);
if (storedItems.length === FREQUENT_ITEMS.MAX_COUNT) {
sortItemsByFrequencyAndLastAccess(storedItems);
storedItems.pop();
}
storedItems.push(newItem);
}
return localStorage.setItem(storageKey, JSON.stringify(storedItems));
};
export const formatContextSwitcherItems = (items) =>
items.map(({ id, name: title, namespace, avatarUrl: avatar, webUrl: link }) => ({
id,
title,
subtitle: truncateNamespace(namespace),
avatar,
link,
}));
export const getItemsFromLocalStorage = ({ storageKey, maxItems }) => {
if (!AccessorUtilities.canUseLocalStorage()) {
return [];
}
try {
const parsedCachedFrequentItems = JSON.parse(localStorage.getItem(storageKey));
return getTopFrequentItems(parsedCachedFrequentItems, maxItems);
} catch (e) {
Sentry.captureException(e);
return [];
}
};
export const removeItemFromLocalStorage = ({ storageKey, item }) => {
try {
const parsedCachedFrequentItems = JSON.parse(localStorage.getItem(storageKey));
const filteredItems = parsedCachedFrequentItems.filter((i) => i.id !== item.id);
localStorage.setItem(storageKey, JSON.stringify(filteredItems));
return filteredItems;
} catch (e) {
Sentry.captureException(e);
return [];
}
};
export const ariaCurrent = (isActive) => (isActive ? 'page' : null);
|
