Skip to content

Commit 48e812c

Browse files
martinalongmartinalong
authored
Merge pull request #954 from filecoin-project/@aminejv/new-filtering
Filtering feature
2 parents b6e4d24 + 64d4ddf commit 48e812c

File tree

33 files changed

+1156
-180
lines changed

33 files changed

+1156
-180
lines changed

‎common/constants.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ export const sizes = {
77
mobile: 768,
88
navigation: 288,
99
sidebar: 416,
10-
header: 56,
10+
// NOTE(amine): header's height + filter navbar's height
11+
header: 52 + 40,
1112
tablet: 960,
1213
desktop: 1024,
1314
topOffset: 0, //NOTE(martina): Pushes UI down. 16 when there is a persistent announcement banner, 0 otherwise

‎common/filter-utilities.js‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import {
2+
isImageType,
3+
isVideoType,
4+
isAudioType,
5+
isDocument,
6+
isTwitterLink,
7+
isYoutubeLink,
8+
isTwitchLink,
9+
isGithubLink,
10+
isInstagramLink,
11+
} from "~/common/validations";
12+
13+
export const FILTER_VIEWS_IDS = {
14+
initial: "initial",
15+
browser: "browser",
16+
};
17+
18+
export const FILTER_SUBVIEWS_IDS = {
19+
browser: { saved: "saved" },
20+
};
21+
22+
export const FILTER_TYPES = {
23+
[FILTER_VIEWS_IDS.initial]: {
24+
filters: {
25+
initial: "library",
26+
library: "library",
27+
images: "images",
28+
videos: "videos",
29+
audios: "audios",
30+
documents: "documents",
31+
},
32+
},
33+
[FILTER_VIEWS_IDS.browser]: {
34+
filters: { all: "all", initial: "all" },
35+
subviews: {
36+
[FILTER_SUBVIEWS_IDS.browser.saved]: {
37+
filters: {
38+
initial: "all",
39+
all: "all",
40+
twitter: "twitter",
41+
youtube: "youtube",
42+
twitch: "twitch",
43+
github: "github",
44+
instagram: "instagram",
45+
},
46+
},
47+
},
48+
},
49+
};
50+
51+
const FILTERING_HANDLERS = {
52+
[FILTER_VIEWS_IDS.initial]: {
53+
filters: {
54+
library: (object) => object,
55+
images: (object) => isImageType(object.type),
56+
videos: (object) => isVideoType(object.type),
57+
audios: (object) => isAudioType(object.type),
58+
documents: (object) => isDocument(object.filename, object.type),
59+
},
60+
},
61+
[FILTER_VIEWS_IDS.browser]: {
62+
filters: { all: (object) => object.isLink },
63+
subviews: {
64+
[FILTER_SUBVIEWS_IDS.browser.saved]: {
65+
filters: {
66+
all: (object) => object.isLink,
67+
twitter: isTwitterLink,
68+
youtube: isYoutubeLink,
69+
twitch: isTwitchLink,
70+
github: isGithubLink,
71+
instagram: isInstagramLink,
72+
},
73+
},
74+
},
75+
},
76+
};
77+
78+
export const getViewData = (view) => {
79+
return FILTER_TYPES[view];
80+
};
81+
82+
export const getFilterHandler = ({ view, subview, type }) => {
83+
const nextView = FILTERING_HANDLERS[view];
84+
if (subview) return nextView.subviews[subview].filters[type];
85+
return nextView.filters[type];
86+
};

‎common/hooks.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -424,3 +424,30 @@ export const useLockScroll = ({ lock = true } = {}) => {
424424
return () => (document.body.style.overflow = "visible");
425425
}, [lock]);
426426
};
427+
428+
export const useWorker = ({ onStart, onMessage, onError } = {}, dependencies = []) => {
429+
const workerRef = React.useRef();
430+
431+
const onStartRef = React.useRef();
432+
onStartRef.current = onStart;
433+
434+
const onMessageRef = React.useRef();
435+
onMessageRef.current = onMessage;
436+
437+
const onErrorRef = React.useRef();
438+
onErrorRef.current = onError;
439+
440+
React.useEffect(() => {
441+
const worker = new Worker(new URL("../workers/filter-files.js", import.meta.url));
442+
if (!worker) return;
443+
444+
workerRef.current = worker;
445+
worker.onmessage = onMessageRef.current;
446+
worker.onerror = onErrorRef.current;
447+
448+
onStartRef.current(worker);
449+
return () => worker?.terminate();
450+
}, dependencies);
451+
452+
return workerRef.current;
453+
};

‎common/strings.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -335,4 +335,4 @@ export const createSlug = (text, base = "untitled") => {
335335
return text;
336336
};
337337

338-
export const capitalize = (str = "") => str[0].toUpperCase() + str.slice(1);
338+
export const capitalize = (str = "") => str[0]?.toUpperCase() + str?.slice(1);

‎common/styles.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,15 @@ export const H5 = css`
7171
${TEXT}
7272
`;
7373

74+
export const H6 = css`
75+
font-family: ${Constants.font.medium};
76+
font-size: 0.75rem;
77+
line-height: 1.666;
78+
letter-spacing: -0.01px;
79+
80+
${TEXT}
81+
`;
82+
7483
export const P1 = css`
7584
font-family: ${Constants.font.text};
7685
font-size: 1rem;

‎common/svg.js‎

Lines changed: 185 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1890,10 +1890,10 @@ export const MehCircle = (props) => (
18901890
);
18911891

18921892
export const Heart = (props) => (
1893-
<svg width={20} height={21} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
1893+
<svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
18941894
<path
1895-
d="M17.367 4.342a4.584 4.584 0 00-6.484 0L10 5.225l-.883-.883a4.584 4.584 0 00-6.484 6.483l.884.883L10 18.192l6.483-6.484.884-.883a4.584 4.584 0 000-6.483v0z"
1896-
stroke="#48484A"
1895+
d="M13.893 3.073a3.667 3.667 0 00-5.186 0L8 3.78l-.707-.707A3.667 3.667 0 102.107 8.26l.706.707L8 14.153l5.187-5.186.706-.707a3.667 3.667 0 000-5.187v0z"
1896+
stroke="currentColor"
18971897
strokeWidth={1.25}
18981898
strokeLinecap="round"
18991899
strokeLinejoin="round"
@@ -2019,7 +2019,8 @@ export const Mail = (props) => (
20192019
</svg>
20202020
);
20212021

2022-
export const Twitter = (props) => (
2022+
// TODO(amine): update this logo when working on object sharing
2023+
export const TwitterWhiteLogo = (props) => (
20232024
<svg width={16} height={14} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
20242025
<path
20252026
d="M15.333 1a7.268 7.268 0 01-2.093 1.02 2.987 2.987 0 00-5.24 2v.667a7.107 7.107 0 01-6-3.02s-2.667 6 3.333 8.666a7.76 7.76 0 01-4.666 1.334C6.667 15 14 11.667 14 4c0-.186-.018-.371-.053-.553A5.147 5.147 0 0015.333 1z"
@@ -2062,3 +2063,183 @@ export const List = (props) => (
20622063
/>
20632064
</svg>
20642065
);
2066+
2067+
export const Radio = (props) => (
2068+
<svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
2069+
<path
2070+
d="M8 9.333a1.333 1.333 0 100-2.666 1.333 1.333 0 000 2.666zM10.827 5.173a4 4 0 010 5.66m-5.654-.006a4 4 0 010-5.66m7.54-1.88a6.667 6.667 0 010 9.426m-9.426 0a6.667 6.667 0 010-9.426"
2071+
stroke="currentColor"
2072+
strokeWidth={1.25}
2073+
strokeLinecap="round"
2074+
strokeLinejoin="round"
2075+
/>
2076+
</svg>
2077+
);
2078+
2079+
export const FileText = (props) => (
2080+
<svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
2081+
<path
2082+
d="M9.333 1.333H4a1.333 1.333 0 00-1.333 1.334v10.666A1.333 1.333 0 004 14.667h8a1.333 1.333 0 001.333-1.334v-8l-4-4z"
2083+
stroke="currentColor"
2084+
strokeWidth={1.25}
2085+
strokeLinecap="round"
2086+
strokeLinejoin="round"
2087+
/>
2088+
<path
2089+
d="M9.333 1.333v4h4M10.667 8.667H5.333M10.667 11.333H5.333M6.667 6H5.333"
2090+
stroke="#00050A"
2091+
strokeWidth={1.25}
2092+
strokeLinecap="round"
2093+
strokeLinejoin="round"
2094+
/>
2095+
</svg>
2096+
);
2097+
2098+
export const Sidebar = (props) => (
2099+
<svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
2100+
<path
2101+
d="M12.667 2H3.333C2.597 2 2 2.597 2 3.333v9.334C2 13.403 2.597 14 3.333 14h9.334c.736 0 1.333-.597 1.333-1.333V3.333C14 2.597 13.403 2 12.667 2z"
2102+
stroke="currentColor"
2103+
strokeWidth={1.25}
2104+
strokeLinecap="round"
2105+
strokeLinejoin="round"
2106+
/>
2107+
<path d="M6 2v12" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
2108+
</svg>
2109+
);
2110+
2111+
export const Clock = (props) => (
2112+
<svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
2113+
<path
2114+
d="M8 14.667A6.667 6.667 0 108 1.333a6.667 6.667 0 000 13.334z"
2115+
stroke="currentColor"
2116+
strokeWidth={1.25}
2117+
strokeLinecap="round"
2118+
strokeLinejoin="round"
2119+
/>
2120+
<path
2121+
d="M8 4v4l2.667 1.333"
2122+
stroke="currentColor"
2123+
strokeWidth={1.25}
2124+
strokeLinecap="round"
2125+
strokeLinejoin="round"
2126+
/>
2127+
</svg>
2128+
);
2129+
2130+
export const Layout = (props) => (
2131+
<svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
2132+
<path
2133+
d="M12.667 2H3.333C2.597 2 2 2.597 2 3.333v9.334C2 13.403 2.597 14 3.333 14h9.334c.736 0 1.333-.597 1.333-1.333V3.333C14 2.597 13.403 2 12.667 2zM2 6h12M6 14V6"
2134+
stroke="currentColor"
2135+
strokeWidth={1.25}
2136+
strokeLinecap="round"
2137+
strokeLinejoin="round"
2138+
/>
2139+
</svg>
2140+
);
2141+
2142+
export const Twitter = (props) => (
2143+
<svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
2144+
<path
2145+
d="M15.333 2a7.268 7.268 0 01-2.093 1.02 2.987 2.987 0 00-5.24 2v.667a7.107 7.107 0 01-6-3.02s-2.667 6 3.333 8.666a7.76 7.76 0 01-4.666 1.334C6.667 16 14 12.667 14 5c0-.186-.018-.371-.053-.553A5.147 5.147 0 0015.333 2v0z"
2146+
stroke="currentColor"
2147+
strokeWidth={1.25}
2148+
strokeLinecap="round"
2149+
strokeLinejoin="round"
2150+
/>
2151+
</svg>
2152+
);
2153+
2154+
export const Bookmark = (props) => (
2155+
<svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
2156+
<path
2157+
d="M12.667 14L8 10.667 3.333 14V3.333A1.333 1.333 0 014.667 2h6.666a1.333 1.333 0 011.334 1.333V14z"
2158+
stroke="currentColor"
2159+
strokeWidth={1.25}
2160+
strokeLinecap="round"
2161+
strokeLinejoin="round"
2162+
/>
2163+
</svg>
2164+
);
2165+
2166+
export const FilePlus = (props) => (
2167+
<svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
2168+
<path
2169+
d="M9.333 1.333H4a1.333 1.333 0 00-1.333 1.334v10.666A1.333 1.333 0 004 14.667h8a1.334 1.334 0 001.333-1.334v-8l-4-4z"
2170+
stroke="currentColor"
2171+
strokeWidth={1.25}
2172+
strokeLinecap="round"
2173+
strokeLinejoin="round"
2174+
/>
2175+
<path
2176+
d="M9.333 1.333v4h4M8 12V8M6 10h4"
2177+
stroke="#00050A"
2178+
strokeWidth={1.25}
2179+
strokeLinecap="round"
2180+
strokeLinejoin="round"
2181+
/>
2182+
</svg>
2183+
);
2184+
2185+
export const Youtube = (props) => (
2186+
<svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
2187+
<path
2188+
d="M15.027 4.28a1.853 1.853 0 00-1.294-1.333C12.587 2.667 8 2.667 8 2.667s-4.587 0-5.733.306A1.853 1.853 0 00.973 4.307a19.333 19.333 0 00-.306 3.526c-.008 1.192.095 2.381.306 3.554a1.853 1.853 0 001.294 1.28c1.146.306 5.733.306 5.733.306s4.587 0 5.733-.306a1.853 1.853 0 001.294-1.334 19.33 19.33 0 00.306-3.5 19.33 19.33 0 00-.306-3.553v0z"
2189+
stroke="currentColor"
2190+
strokeWidth={1.25}
2191+
strokeLinecap="round"
2192+
strokeLinejoin="round"
2193+
/>
2194+
<path
2195+
d="M6.5 10.013l3.833-2.18L6.5 5.653v4.36z"
2196+
stroke="currentColor"
2197+
strokeWidth={1.25}
2198+
strokeLinecap="round"
2199+
strokeLinejoin="round"
2200+
/>
2201+
</svg>
2202+
);
2203+
2204+
export const Github = (props) => (
2205+
<svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
2206+
<path
2207+
d="M6 12.667c-3.333 1-3.333-1.667-4.667-2m9.334 4v-2.58a2.246 2.246 0 00-.627-1.74c2.093-.234 4.293-1.027 4.293-4.667 0-.93-.358-1.826-1-2.5a3.38 3.38 0 00-.06-2.513s-.786-.234-2.606.986a8.92 8.92 0 00-4.667 0C4.18.433 3.393.667 3.393.667a3.38 3.38 0 00-.06 2.513 3.627 3.627 0 00-1 2.52c0 3.613 2.2 4.407 4.294 4.667A2.246 2.246 0 006 12.087v2.58"
2208+
stroke="currentColor"
2209+
strokeWidth={1.25}
2210+
strokeLinecap="round"
2211+
strokeLinejoin="round"
2212+
/>
2213+
</svg>
2214+
);
2215+
2216+
export const Twitch = (props) => (
2217+
<svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
2218+
<path
2219+
d="M10.667 7.333V4.667M14 1.333H2V12h3.333v2.667L8 12h3.333L14 9.333v-8zm-6.667 6V4.667v2.666z"
2220+
stroke="currentColor"
2221+
strokeWidth={1.25}
2222+
strokeLinecap="round"
2223+
strokeLinejoin="round"
2224+
/>
2225+
</svg>
2226+
);
2227+
2228+
export const Instagram = (props) => (
2229+
<svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
2230+
<path
2231+
d="M11.333 1.333H4.667a3.333 3.333 0 00-3.334 3.334v6.666a3.333 3.333 0 003.334 3.334h6.666a3.333 3.333 0 003.334-3.334V4.667a3.333 3.333 0 00-3.334-3.334z"
2232+
stroke="currentColor"
2233+
strokeWidth={1.25}
2234+
strokeLinecap="round"
2235+
strokeLinejoin="round"
2236+
/>
2237+
<path
2238+
d="M10.667 7.58a2.667 2.667 0 11-5.276.782 2.667 2.667 0 015.276-.782zM11.667 4.333h.006"
2239+
stroke="currentColor"
2240+
strokeWidth={1.25}
2241+
strokeLinecap="round"
2242+
strokeLinejoin="round"
2243+
/>
2244+
</svg>
2245+
);

‎common/validations.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -265,6 +265,9 @@ export const isMarkdown = (filename = "", type = "") => {
265265
return filename.toLowerCase().endsWith(".md") || type.startsWith("text/plain");
266266
};
267267

268+
export const isDocument = (fileName = "", type = "") =>
269+
isMarkdown(fileName, type) || isPdfType(type) || isEpubType(type);
270+
268271
export const isUnityFile = async (file) => {
269272
try {
270273
const zip = new JSZip();
@@ -288,3 +291,9 @@ export const isNFTLink = (file) => {
288291
domain = domain.toLowerCase();
289292
return Constants.NFTDomains.includes(domain);
290293
};
294+
const isLinkWithSource = (source) => (file) => file.isLink && file.source === source;
295+
export const isTwitterLink = isLinkWithSource("Twitter");
296+
export const isYoutubeLink = isLinkWithSource("YouTube");
297+
export const isTwitchLink = isLinkWithSource("Twitch");
298+
export const isGithubLink = isLinkWithSource("GitHub");
299+
export const isInstagramLink = isLinkWithSource("Instagram");

‎components/core/ActivityGroup/components/index.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
export { default as ViewMoreContent } from "./ViewMoreContent";
2-
export { default as ProfileInfo } from "./ProfileInfo";
3-
export { default as ActivityCollectionGroup } from "./ActivityCollectionGroup";
4-
export { default as ActivityFileGroup } from "./ActivityFileGroup";
5-
export { default as ActivityProfileGroup } from "./ActivityProfileGroup";
1+
export { default as ViewMoreContent } from "~/components/core/ActivityGroup/components/ViewMoreContent";
2+
export { default as ProfileInfo } from "~/components/core/ActivityGroup/components/ProfileInfo";
3+
export { default as ActivityCollectionGroup } from "~/components/core/ActivityGroup/components/ActivityCollectionGroup";
4+
export { default as ActivityFileGroup } from "~/components/core/ActivityGroup/components/ActivityFileGroup";
5+
export { default as ActivityProfileGroup } from "~/components/core/ActivityGroup/components/ActivityProfileGroup";

0 commit comments

Comments
 (0)