Skip to content

Commit 6d74d35

Browse files
shakyShaneshakyShane
committed
static icon list
1 parent 1bd9b68 commit 6d74d35

File tree

3 files changed

+159
-36
lines changed

3 files changed

+159
-36
lines changed

‎special-pages/pages/new-tab/app/activity/components/Activity.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -210,8 +210,10 @@ function TrackerStatus({ id, trackersFound }) {
210210
// }
211211

212212
const companyIconsMax = other === 0 ? DDG_MAX_TRACKER_ICONS : DDG_MAX_TRACKER_ICONS - 1;
213-
const icons = status.value.trackerCompanies.slice(0, companyIconsMax).map((item, index) => {
214-
return <CompanyIcon displayName={item.displayName} key={item} />;
213+
const icons = useComputed(() => {
214+
return status.value.trackerCompanies.slice(0, companyIconsMax).map((item, index) => {
215+
return <CompanyIcon displayName={item.displayName} key={item} />;
216+
});
215217
});
216218

217219
const otherIcon = other > 0 ? <span class={styles.otherIcon}>+{other + 1}</span> : null;

‎special-pages/pages/new-tab/app/activity/mocks/activity.mock-transport.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,13 @@ export function activityMockTransport() {
134134
const patch = toPatchItem(dataset.activity, nth);
135135
cb(patch);
136136
},
137+
increaseTrackerCount(nth) {
138+
const item = dataset.activity[nth];
139+
item.trackingStatus.totalCount += 1;
140+
// dataset.activity.splice(dataset.activity.length - count, count);
141+
const patch = toPatchItem(dataset.activity, nth);
142+
cb(patch);
143+
},
137144
};
138145
return () => {};
139146
}

‎special-pages/pages/new-tab/app/components/CompanyIcon.js

Lines changed: 148 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,13 @@
11
import styles from './CompanyIcon.module.css';
22
import { DDG_STATS_OTHER_COMPANY_IDENTIFIER } from '../privacy-stats/constants.js';
33
import { h } from 'preact';
4-
import { useState } from 'preact/hooks';
54
import { memo } from 'preact/compat';
65

76
const mappings = {
87
'google-analytics-google': 'google-analytics',
8+
'google-ads-google': 'google-ads',
99
};
1010

11-
const states = /** @type {const} */ ({
12-
loading: 'loading',
13-
loaded: 'loaded',
14-
loadingFallback: 'loadingFallback',
15-
loadedFallback: 'loadedFallback',
16-
errored: 'errored',
17-
});
18-
19-
/**
20-
* @typedef {states[keyof states]} State
21-
*/
2211
export const CompanyIcon = memo(
2312
/**
2413
* @param {object} props
@@ -29,38 +18,23 @@ export const CompanyIcon = memo(
2918
const cleaned = icon.replace(/[^a-z ]/g, '').replace(/ /g, '-');
3019
const id = cleaned in mappings ? mappings[cleaned] : cleaned;
3120
const firstChar = id[0];
32-
const [state, setState] = useState(/** @type {State} */ (states.loading));
33-
34-
const src =
35-
state === 'loading' || state === 'loaded'
36-
? `./company-icons/${id}.svg`
37-
: state === 'loadingFallback' || state === 'loadedFallback'
38-
? `./company-icons/${firstChar}.svg`
39-
: null;
4021

41-
if (src === null || icon === DDG_STATS_OTHER_COMPANY_IDENTIFIER) {
22+
if (icon === DDG_STATS_OTHER_COMPANY_IDENTIFIER) {
4223
return (
4324
<span className={styles.icon}>
4425
<Other />
4526
</span>
4627
);
4728
}
4829

30+
// prettier-ignore
31+
const src = names.has(id)
32+
? `./company-icons/${id}.svg`
33+
: `./company-icons/${firstChar}.svg`;
34+
4935
return (
5036
<span className={styles.icon}>
51-
<img
52-
src={src}
53-
alt={''}
54-
class={styles.companyImgIcon}
55-
data-loaded={state === states.loaded || state === states.loadedFallback}
56-
onLoad={() => setState((prev) => (prev === states.loading ? states.loaded : states.loadedFallback))}
57-
onError={() => {
58-
setState((prev) => {
59-
if (prev === states.loading) return states.loadingFallback;
60-
return states.errored;
61-
});
62-
}}
63-
/>
37+
<img src={src} alt={''} class={styles.companyImgIcon} data-loaded="true" />
6438
</span>
6539
);
6640
},
@@ -78,3 +52,143 @@ function Other() {
7852
</svg>
7953
);
8054
}
55+
56+
/**
57+
* A static list of names representing the icons in `./public/company-icons`
58+
* We don't want the bundler to crawl through that folder, or include the SVGs in JS,
59+
* so this static list have to do for now. Perhaps it can be generated later.
60+
*
61+
* @type {Set<string>}
62+
*/
63+
const names = new Set([
64+
'33across',
65+
'a',
66+
'acuityads',
67+
'adform',
68+
'adjust',
69+
'adobe',
70+
'akamai',
71+
'amazon',
72+
'amplitude',
73+
'appsflyer',
74+
'automattic',
75+
'b',
76+
'beeswax',
77+
'bidtellect',
78+
'branch-metrics',
79+
'braze',
80+
'bugsnag',
81+
'bytedance',
82+
'c',
83+
'chartbeat',
84+
'cloudflare',
85+
'cognitiv',
86+
'comscore',
87+
'crimtan-holdings',
88+
'criteo',
89+
'd',
90+
'deepintent',
91+
'e',
92+
'exoclick',
93+
'eyeota',
94+
'f',
95+
'facebook',
96+
'g',
97+
'google',
98+
'google-ads',
99+
'google-analytics',
100+
'gumgum',
101+
'h',
102+
'hotjar',
103+
'i',
104+
'id5',
105+
'improve-digital',
106+
'index-exchange',
107+
'inmar',
108+
'instagram',
109+
'intent-iq',
110+
'iponweb',
111+
'j',
112+
'k',
113+
'kargo',
114+
'kochava',
115+
'l',
116+
'line',
117+
'linkedin',
118+
'liveintent',
119+
'liveramp',
120+
'loopme-ltd',
121+
'lotame-solutions',
122+
'm',
123+
'magnite',
124+
'mediamath',
125+
'medianet-advertising',
126+
'mediavine',
127+
'merkle',
128+
'microsoft',
129+
'mixpanel',
130+
'n',
131+
'narrative',
132+
'nativo',
133+
'neustar',
134+
'new-relic',
135+
'o',
136+
'onetrust',
137+
'openjs-foundation',
138+
'openx',
139+
'opera-software',
140+
'oracle',
141+
'other',
142+
'other-dark',
143+
'outbrain',
144+
'p',
145+
'pinterest',
146+
'prospect-one',
147+
'pubmatic',
148+
'pulsepoint',
149+
'q',
150+
'quantcast',
151+
'r',
152+
'rhythmone',
153+
'roku',
154+
'rtb-house',
155+
'rubicon',
156+
's',
157+
'salesforce',
158+
'semasio',
159+
'sharethrough',
160+
'simplifi-holdings',
161+
'smaato',
162+
'snap',
163+
'sonobi',
164+
'sovrn-holdings',
165+
'spotx',
166+
'supership',
167+
'synacor',
168+
't',
169+
'taboola',
170+
'tapad',
171+
'teads',
172+
'the-nielsen-company',
173+
'the-trade-desk',
174+
'triplelift',
175+
'twitter',
176+
'u',
177+
'unruly-group',
178+
'urban-airship',
179+
'v',
180+
'verizon-media',
181+
'w',
182+
'warnermedia',
183+
'wpp',
184+
'x',
185+
'xaxis',
186+
'y',
187+
'yahoo-japan',
188+
'yandex',
189+
'yieldmo',
190+
'youtube',
191+
'z',
192+
'zeotap',
193+
'zeta-global',
194+
]);

0 commit comments

Comments
 (0)