Skip to content

Commit 8b4637d

Browse files
OksamiesOksamies
committed
Fix issues brought up in QA of PR #1206 
1 parent c6a68f4 commit 8b4637d

27 files changed

+767
-401
lines changed

Diff for: ‎.eslintrc.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,8 @@
3838
"@typescript-eslint/no-unused-vars": [
3939
"error",
4040
{ "ignoreRestSiblings": true }
41-
]
41+
],
42+
"linebreak-style": ["error", "unix"]
4243
},
4344
"overrides": [
4445
{

Diff for: ‎.pre-commit-config.yaml

+4-3
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,13 @@ repos:
1414
- id: prettier
1515
exclude_types: [markdown, yaml]
1616
- repo: https://github.com/thibaudcolas/pre-commit-stylelint
17-
rev: v14.4.0
17+
rev: v16.9.0
1818
hooks:
1919
- id: stylelint
2020
args: [--fix]
2121
additional_dependencies:
2222
# stylelint itself needs to be here when using additional_dependencies.
23-
- stylelint@14.14.0
24-
- stylelint-config-standard@29.0.0
23+
- stylelint@16.9.0
24+
- stylelint-config-standard@36.0.1
2525
- [email protected]
26+
- [email protected]

Diff for: ‎.prettierignore

-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
**/*.css
21
**/.git
32
**/node_modules
43
**/*.hbs

Diff for: ‎.stylelintrc

-5
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,6 @@
2323
],
2424
"font-weight-notation": "numeric",
2525
"import-notation": "string",
26-
"linebreaks": "unix",
27-
"max-line-length": [80, { "ignore": "non-comments" }],
2826
"number-max-precision": 3,
2927
"selector-class-pattern": [
3028
"^((?!\\-).)*$",
@@ -36,9 +34,6 @@
3634
],
3735
"selector-no-vendor-prefix": null,
3836
"selector-pseudo-element-colon-notation": "double",
39-
"value-list-comma-newline-after": "always-multi-line",
40-
"value-list-comma-space-after": "always-single-line",
41-
"value-list-comma-space-before": "never",
4237
"property-no-vendor-prefix": [
4338
true,
4439
{ "ignoreProperties": ["background-clip"] }

Diff for: ‎apps/cyberstorm-remix/app/communities/communities.tsx

+5-32
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ export default function CommunitiesPage() {
137137
csTextStyles={["fontWeightBold", "lineHeightAuto", "fontSizeS"]}
138138
>
139139
<div className={searchAndOrderStyles.searchTextInput}>
140-
<span>Search</span>
140+
<label htmlFor="communitiesSearchInput">Search</label>
141141
<NewTextInput
142142
onChange={(e) => setSearchValue(e.target.value)}
143143
value={searchValue}
@@ -146,15 +146,17 @@ export default function CommunitiesPage() {
146146
leftIcon={<FontAwesomeIcon icon={faSearch} />}
147147
csColor="cyber-green"
148148
rootClasses={searchAndOrderStyles.searchInput}
149+
id="communitiesSearchInput"
149150
/>
150151
</div>
151152
<div className={searchAndOrderStyles.searchFilters}>
152-
<span>Sort by</span>
153+
<label htmlFor="communitiesSortBy">Sort by</label>
153154
<NewSelect
154155
onChange={changeOrder}
155156
options={selectOptions}
156157
value={searchParams.get("order") ?? SortOptions.Popular}
157158
aria-label="Sort communities by"
159+
id="communitiesSortBy"
158160
/>
159161
</div>
160162
</Container>
@@ -169,46 +171,17 @@ export default function CommunitiesPage() {
169171
);
170172
}
171173

172-
function comparePackageCount(a: Community, b: Community) {
173-
if (a.total_package_count < b.total_package_count) {
174-
return 1;
175-
}
176-
if (a.total_package_count > b.total_package_count) {
177-
return -1;
178-
}
179-
return 0;
180-
}
181-
182174
function CommunitiesList(props: { communitiesData: Communities }) {
183175
const { communitiesData } = props;
184176

185-
const topDogs: Community[] = [];
186-
communitiesData.results.reduce((prevCommunity, currentCommunity) => {
187-
if (topDogs.length > 4) {
188-
topDogs.sort(comparePackageCount);
189-
const lastDog = topDogs.at(-1);
190-
if (
191-
(lastDog ? lastDog.total_package_count : 0) <
192-
currentCommunity.total_package_count
193-
) {
194-
topDogs.pop();
195-
topDogs.push(currentCommunity);
196-
}
197-
} else {
198-
topDogs.push(currentCommunity);
199-
}
200-
return topDogs;
201-
}, topDogs);
202-
const flatDogs = topDogs.map((community) => community.identifier);
203-
204177
if (communitiesData.results.length > 0) {
205178
return (
206179
<div className={communitiesListStyles.root}>
207180
{communitiesData.results.map((community) => (
208181
<CardCommunity
209182
key={community.identifier}
210183
community={community}
211-
isPopular={flatDogs.includes(community.identifier)}
184+
isPopular={community.total_package_count > 1000}
212185
isNew={
213186
new Date(community.datetime_created).getTime() >
214187
new Date().getTime() - 1000 * 60 * 60 * 336

Diff for: ‎apps/cyberstorm-remix/app/root.tsx

+34-3
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,11 @@ import {
1717
import { Footer } from "@thunderstore/cyberstorm/src/components/Footer/Footer";
1818
import { Provider as RadixTooltip } from "@radix-ui/react-tooltip";
1919

20-
import { Navigation } from "cyberstorm/navigation/Navigation";
20+
import {
21+
MobileNavigationMenu,
22+
MobileUserPopoverContent,
23+
Navigation,
24+
} from "cyberstorm/navigation/Navigation";
2125
import { LinkLibrary } from "cyberstorm/utils/LinkLibrary";
2226
import { AdContainer, LinkingProvider } from "@thunderstore/cyberstorm";
2327
import { DapperTs } from "@thunderstore/dapper-ts";
@@ -29,10 +33,12 @@ import {
2933
getPublicEnvVariables,
3034
publicEnvVariables,
3135
} from "cyberstorm/security/publicEnvVariables";
32-
import { useEffect, useRef } from "react";
36+
import { useEffect, useRef, useState } from "react";
3337
import { useHydrated } from "remix-utils/use-hydrated";
3438
import Toast from "@thunderstore/cyberstorm/src/components/Toast";
3539
import { SessionProvider } from "@thunderstore/ts-api-react";
40+
import { CurrentUser } from "@thunderstore/dapper/types";
41+
import { getDapper } from "cyberstorm/dapper/sessionUtils";
3642

3743
// REMIX TODO: https://remix.run/docs/en/main/route/links
3844
// export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
@@ -128,6 +134,22 @@ function Root() {
128134
? false
129135
: true;
130136

137+
const isHydrated = useHydrated();
138+
const startsHydrated = useRef(isHydrated);
139+
const [currentUser, setCurrentUser] = useState<CurrentUser>();
140+
141+
useEffect(() => {
142+
if (!startsHydrated.current && isHydrated) return;
143+
const fetchAndSetUser = async () => {
144+
const dapper = await getDapper(true);
145+
const fetchedUser = await dapper.getCurrentUser();
146+
if (fetchedUser?.username) {
147+
setCurrentUser(fetchedUser);
148+
}
149+
};
150+
fetchAndSetUser();
151+
}, []);
152+
131153
return (
132154
<html lang="en">
133155
<head>
@@ -173,7 +195,16 @@ function Root() {
173195
<RadixTooltip delayDuration={300}>
174196
<div className={styles.root}>
175197
{/* REMIX TODO: For whatever reason the Navigation seems to cause suspense boundary errors. Couldn't find a reason why */}
176-
<Navigation />
198+
<Navigation
199+
hydrationCheck={!startsHydrated.current && isHydrated}
200+
currentUser={currentUser}
201+
/>
202+
<MobileNavigationMenu />
203+
{!startsHydrated.current && isHydrated && currentUser ? (
204+
<MobileUserPopoverContent user={currentUser} />
205+
) : (
206+
<MobileUserPopoverContent />
207+
)}
177208
<section className={styles.content}>
178209
<div className={styles.sideContainers} />
179210
<div className={styles.middleContainer}>

Diff for: ‎apps/cyberstorm-remix/cyberstorm/navigation/DesktopLoginPopover.tsx

+104-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,18 @@
11
import styles from "./Navigation.module.css";
2-
import { Modal, NewButton, NewIcon } from "@thunderstore/cyberstorm";
3-
import { LoginList } from "./LoginList";
2+
import {
3+
Heading,
4+
Modal,
5+
NewButton,
6+
NewIcon,
7+
NewLink,
8+
NewText,
9+
} from "@thunderstore/cyberstorm";
410
import { faArrowRightToBracket } from "@fortawesome/free-solid-svg-icons";
511
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
12+
import { OverwolfLogo } from "@thunderstore/cyberstorm/src/svg/svg";
13+
import { classnames } from "@thunderstore/cyberstorm/src/utils/utils";
14+
import { buildAuthLoginUrl } from "cyberstorm/utils/ThunderstoreAuth";
15+
import { faDiscord, faGithub } from "@fortawesome/free-brands-svg-icons";
616

717
export function DesktopLoginPopover() {
818
return (
@@ -27,7 +37,98 @@ export function DesktopLoginPopover() {
2737
</NewButton>
2838
}
2939
>
30-
<LoginList />
40+
<div className={styles.loginList}>
41+
<svg
42+
xmlns="http://www.w3.org/2000/svg"
43+
width="50"
44+
height="45"
45+
viewBox="0 0 50 45"
46+
fill="none"
47+
className={styles.TSLoginLogo}
48+
>
49+
<path
50+
d="M0.710078 24.9394L9.78854 41.2481L14.6615 32.2309L10.0734 23.9981C9.52443 23.0474 9.52443 21.9529 10.0734 20.9973L16.2418 10.2767C16.7912 9.32224 17.734 8.77655 18.831 8.77697H22.1474L15.7292 23.2203H23.6593L12.8766 44.1116L34.5318 18.1671H27.8748L32.4178 8.77697H40.3769H45.006L49.96 0.167812H35.7761H26.3397H14.9641C13.1759 0.168228 11.6411 1.05689 10.7459 2.60758L0.710078 20.0561C-0.182994 21.6105 -0.18362 23.3929 0.710078 24.9394ZM17.1308 44.832H35.0372C36.8217 44.832 38.3601 43.9432 39.2578 42.3883L49.2938 24.9389C50.1816 23.3929 50.1816 21.6105 49.2938 20.0557L45.2805 13.0783H35.3738L39.93 20.9973C40.4744 21.9537 40.4744 23.048 39.9285 23.9985L33.7625 34.7217C33.2095 35.6776 32.2661 36.2225 31.1679 36.2225H26.6871L24.2827 36.1873L17.1308 44.832Z"
51+
fill="url(#paint0_linear_11481_128455)"
52+
/>
53+
<defs>
54+
<linearGradient
55+
id="paint0_linear_11481_128455"
56+
x1="28.2562"
57+
y1="44.832"
58+
x2="28.2562"
59+
y2="0.167812"
60+
gradientUnits="userSpaceOnUse"
61+
>
62+
<stop stopColor="#00B976" />
63+
<stop offset="0.796875" stopColor="#46FFBD" />
64+
</linearGradient>
65+
</defs>
66+
</svg>
67+
<Heading
68+
mode="heading"
69+
csLevel="2"
70+
csStyleLevel="3"
71+
rootClasses={styles.loginTitle}
72+
>
73+
Log in to Thunderstore
74+
</Heading>
75+
<div className={styles.loginLinkList}>
76+
<NewLink
77+
primitiveType="link"
78+
href={buildAuthLoginUrl({ type: "discord" })}
79+
rootClasses={classnames(styles.loginLink, styles.loginLinkDiscord)}
80+
csTextStyles={["fontSizeS", "fontWeightBold"]}
81+
>
82+
<NewIcon csMode="inline" noWrapper>
83+
<FontAwesomeIcon icon={faDiscord} />
84+
</NewIcon>
85+
Connect with Discord
86+
</NewLink>
87+
<NewLink
88+
primitiveType="link"
89+
href={buildAuthLoginUrl({ type: "github" })}
90+
rootClasses={classnames(styles.loginLink, styles.loginLinkGithub)}
91+
csTextStyles={["fontSizeS", "fontWeightBold"]}
92+
>
93+
<NewIcon csMode="inline" noWrapper>
94+
<FontAwesomeIcon icon={faGithub} />
95+
</NewIcon>
96+
Connect with Github
97+
</NewLink>
98+
<NewLink
99+
primitiveType="link"
100+
href={buildAuthLoginUrl({ type: "overwolf" })}
101+
rootClasses={classnames(styles.loginLink, styles.loginLinkOverwolf)}
102+
csTextStyles={["fontSizeS", "fontWeightBold"]}
103+
>
104+
<NewIcon csMode="inline" noWrapper>
105+
<OverwolfLogo />
106+
</NewIcon>
107+
Connect with Overwolf
108+
</NewLink>
109+
</div>
110+
<NewText
111+
rootClasses={styles.loginLegalText}
112+
csTextStyles={["lineHeightBody", "fontSizeXS", "fontWeightRegular"]}
113+
>
114+
By logging in and accessing the site you agree to{" "}
115+
<NewLink
116+
primitiveType="cyberstormLink"
117+
linkId="TermsOfService"
118+
csVariant="tertiary"
119+
>
120+
Terms and Conditions
121+
</NewLink>{" "}
122+
and{" "}
123+
<NewLink
124+
primitiveType="cyberstormLink"
125+
linkId="PrivacyPolicy"
126+
csVariant="tertiary"
127+
>
128+
Privacy Policy
129+
</NewLink>
130+
</NewText>
131+
</div>
31132
</Modal>
32133
);
33134
}

Diff for: ‎apps/cyberstorm-remix/cyberstorm/navigation/DevelopersDropDown.module.css

+4
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@
44
justify-content: space-between;
55
}
66

7+
.focus:not([data-highlighted]) a svg {
8+
color: var(--color-tertiary);
9+
}
10+
711
.root {
812
min-width: 14rem;
913
}

Diff for: ‎apps/cyberstorm-remix/cyberstorm/navigation/DevelopersDropDown.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export function DevelopersDropDown() {
2424
</NewButton>
2525
}
2626
csVariant="default"
27-
csColor="surface"
27+
csColor="surface-alpha"
2828
rootClasses={styles.root}
2929
>
3030
<NewDropDownItem>
@@ -67,7 +67,7 @@ export function DevelopersDropDown() {
6767
Markdown Preview
6868
</NewLink>
6969
</NewDropDownItem>
70-
<NewDropDownItem>
70+
<NewDropDownItem rootClasses={styles.focus}>
7171
<NewLink
7272
primitiveType="link"
7373
csVariant="primary"
@@ -76,7 +76,7 @@ export function DevelopersDropDown() {
7676
rootClasses={styles.externalLink}
7777
>
7878
Github
79-
<NewIcon csMode="inline" csVariant="tertiary">
79+
<NewIcon csMode="inline" noWrapper>
8080
<FontAwesomeIcon icon={faArrowUpRightFromSquare} />
8181
</NewIcon>
8282
</NewLink>

0 commit comments

Comments
 (0)