Skip to content

Commit

Permalink
Hide JS only extensions and non-browser-based tools by default
Browse files Browse the repository at this point in the history
  • Loading branch information
@UnsignedArduino
UnsignedArduino committed Feb 21, 2024
1 parent fb27792 commit bf1250e
Show file tree
Hide file tree
Showing 7 changed files with 195 additions and 71 deletions.
16 changes: 15 additions & 1 deletion src/components/AwesomeArcadeList/extension.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,14 @@ export function AwesomeArcadeExtension({
}}
>
{ext.title}
{ext.javascriptOnly ? (
<>
{" "}
<span className="badge text-bg-warning me-1">
JavaScript only
</span>
</>
) : undefined}
{showCardLink ? (
<Link
className="ms-1"
Expand All @@ -78,7 +86,13 @@ export function AwesomeArcadeExtension({
</h6>
{showImportURL == undefined || showImportURL ? (
<>
Import this extension with the URL:
Import this{" "}
{ext.javascriptOnly ? (
<>
<b>JavaScript only</b>{" "}
</>
) : null}
extension with the URL:
<blockquote className="border-start border-secondary border-2 mt-1 mb-2">
{/* This transform is applied so the stretched-link only applies up to this div */}
<div style={{ transform: "rotate(0)" }}>
Expand Down
14 changes: 13 additions & 1 deletion src/components/AwesomeArcadeList/tool.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,12 @@ export function AwesomeArcadeTool({
}}
>
{tool.title}
{tool.notAWebsite ? (
<>
{" "}
<span className="badge text-bg-warning me-1">Not a website</span>
</>
) : undefined}
{showCardLink ? (
<Link
className="ms-1"
Expand All @@ -56,7 +62,13 @@ export function AwesomeArcadeTool({
</a>
</h6>
<>
Access this tool at:
Access this{" "}
{tool.notAWebsite ? (
<>
<b>not-browser based</b>{" "}
</>
) : null}
tool at:
<blockquote className="border-start border-secondary border-2 ps-3 mt-1 mb-2">
<Tippy content="Click to open in a new tab!">
<a
Expand Down
107 changes: 76 additions & 31 deletions src/pages/extensions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,11 @@ import { smoothScrollToID } from "@/components/OldAwesomeArcadeExtensionList/lin
import { AwesomeArcadeExtensionsList } from "@/components/AwesomeArcadeList";
import { debounce } from "@/scripts/Utils/Timers";
import { AnalyticEvents } from "@/components/Analytics";
import Tippy from "@tippyjs/react";
import { useSession } from "next-auth/react";
import { Extension, parseExtensionXML } from "@/scripts/Utils/ParseListXML";
import { useFeatureIsOn } from "@growthbook/growthbook-react";
import Tippy from "@tippyjs/react";
import { stringToBool } from "@/scripts/Utils/ParseListXML/helpers";

const pageName = "Extensions";

Expand All @@ -26,18 +27,26 @@ export function Extensions({ appProps, list }: ExtensionsProps): JSX.Element {
const { data: session } = useSession();

const [search, setSearch] = React.useState("");
const [showJSOnlyExts, setShowJSOnlyExts] = React.useState(false);
const [filteredList, setFilteredList] = React.useState(list);
const [resultCount, setResultCount] = React.useState<number | undefined>(
undefined,
);

const searchParam = "q";
const showJSOnlyParam = "showJSOnly";

React.useEffect(() => {
const q = new URLSearchParams(window.location.search).get(searchParam);
if (q !== null) {
setSearch(q);
}
const showJSOnly = new URLSearchParams(window.location.search).get(
showJSOnlyParam,
);
if (showJSOnly !== null) {
setShowJSOnlyExts(stringToBool(showJSOnly));
}
if (window.location.hash.length > 0) {
smoothScrollToID(window.location.hash.replace("#", ""));
}
Expand All @@ -50,8 +59,13 @@ export function Extensions({ appProps, list }: ExtensionsProps): JSX.Element {
} else {
url.searchParams.set(searchParam, search);
}
if (showJSOnlyExts) {
url.searchParams.set(showJSOnlyParam, "true");
} else {
url.searchParams.delete(showJSOnlyParam);
}
window.history.replaceState({}, "", url.toString());
}, [search]);
}, [search, showJSOnlyExts]);

// React.useEffect(() => {
// document.addEventListener("keydown", (e) => {
Expand All @@ -69,7 +83,7 @@ export function Extensions({ appProps, list }: ExtensionsProps): JSX.Element {
// }, []);

React.useEffect(() => {
if (search.length > 0) {
if (search.length > 0 || showJSOnlyExts) {
const filtered = structuredClone(list);
let extCount = 0;
const group = filtered;
Expand All @@ -83,8 +97,10 @@ export function Extensions({ appProps, list }: ExtensionsProps): JSX.Element {
!(
normalizeString(ext.repo).includes(normalizedSearch) ||
normalizeString(ext.url).includes(normalizedSearch) ||
normalizeString(ext.description).includes(normalizedSearch)
)
normalizeString(ext.description).includes(normalizedSearch) ||
normalizeString(ext.author).includes(normalizedSearch)
) ||
(!showJSOnlyExts && ext.javascriptOnly)
) {
group.splice(i, 1);
}
Expand All @@ -93,10 +109,14 @@ export function Extensions({ appProps, list }: ExtensionsProps): JSX.Element {
setFilteredList(filtered);
setResultCount(extCount);
} else {
setFilteredList(list);
setFilteredList(
list.filter((ext) => {
return !ext.javascriptOnly;
}),
);
setResultCount(undefined);
}
}, [search, list]);
}, [search, showJSOnlyExts, list]);

return (
<Layout
Expand All @@ -105,29 +125,6 @@ export function Extensions({ appProps, list }: ExtensionsProps): JSX.Element {
appProps={appProps}
description="This is a list of MakeCode Arcade extensions that I find super useful (or just plain cool) in my projects."
keywords="Game development, Awesome, Modules, Libraries, Extensions, Curated, Arcade, Useful, Curated list, MakeCode, Awesome extensions, Useful extensions, MakeCode Arcade, MakeCode Arcade Extensions, Arcade Extensions"
extraNavbarHTML={
<Tippy content="Search extensions by author, name, description, or URL!">
<input
type="text"
className="form-control"
placeholder="Search extensions by author, name, description, or URL!"
defaultValue={search}
id="searchBar"
onChange={(event) => {
const v = event.target.value;
setSearch(v);
debounce(
"extensionSearchChange",
() => {
AnalyticEvents.sendSearch(v);
},
1000,
);
}}
aria-label="Search query"
/>
</Tippy>
}
>
<h1>
Welcome to Awesome Arcade Extensions
Expand All @@ -154,12 +151,60 @@ export function Extensions({ appProps, list }: ExtensionsProps): JSX.Element {
note that this page will be removed soon.)
</p>
)}

<p>
Want to suggest a new extension or modification? Check out our{" "}
<Link href="/help/contributing/extensions">guide</Link> on how to submit
an extension to Awesome Arcade!
</p>
<div className="row g-3 align-items-center mb-2">
<div className="col-auto">
<label htmlFor="searchBar" className="col-form-label">
Search:
</label>
</div>
<div className="col-auto">
<Tippy content="Search extensions by author, name, description, or URL!">
<input
id="searchBar"
type="text"
className="form-control"
placeholder="Search extensions by author, name, description, or URL!"
defaultValue={search}
onChange={(event) => {
const v = event.target.value;
setSearch(v);
debounce(
"extensionSearchChange",
() => {
AnalyticEvents.sendSearch(v);
},
1000,
);
}}
aria-label="Search query"
/>
</Tippy>
</div>
<div className="col-auto">
<div className="form-check">
<input
className="form-check-input"
type="checkbox"
defaultChecked={showJSOnlyExts}
onChange={(e) => {
setShowJSOnlyExts(e.target.checked);
}}
id="showJSOnlyExtsCheckInput"
/>
<label
className="form-check-label"
htmlFor="showJSOnlyExtsCheckInput"
>
Show JavaScript-only extensions
</label>
</div>
</div>
</div>
<div>
{resultCount != undefined ? (
<p>
Expand Down
Loading

0 comments on commit bf1250e

Please sign in to comment.