Skip to content

Commit 99fcdbc

Browse files
technoph1letechnoph1le
committed
Fix language & sublanguage selection url issue
1 parent fad9310 commit 99fcdbc

17 files changed

+172
-208
lines changed

‎.husky/pre-commit

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ npm run cspell:frontend
55
npm run format
66
npm run lint
77

8+
npm run build:backend
9+
810
# Run production consolidate script before commit
911
.husky/scripts/consolidateForProd.sh
10-
11-
npm run build:backend

‎backend/.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
node_modules
2-
.env*
2+
.env*
3+
data/

‎backend/utils/consts.ts

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎frontend/src/AppRouter.tsx

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,9 @@
1-
import { Navigate, Route, Routes } from "react-router-dom";
1+
import { Route, Routes } from "react-router-dom";
22

33
import App from "@components/App";
44
import SnippetList from "@components/SnippetList";
5-
import {
6-
defaultCategoryName,
7-
defaultLanguage,
8-
defaultSlugifiedSubLanguageName,
9-
} from "@utils/consts";
10-
import { slugify } from "@utils/slugify";
115

126
const AppRouter = () => {
13-
const defaultURLPath = `/${slugify(defaultLanguage.name)}/${slugify(defaultSlugifiedSubLanguageName)}/${slugify(defaultCategoryName)}`;
14-
157
return (
168
<Routes>
179
<Route element={<App />}>
@@ -25,7 +17,6 @@ const AppRouter = () => {
2517
path="/:languageName/:subLanguageName/:categoryName"
2618
element={<SnippetList />}
2719
/>
28-
<Route path="*" element={<Navigate to={defaultURLPath} replace />} />
2920
</Route>
3021
</Routes>
3122
);

‎frontend/src/components/CategoryList.tsx

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { useNavigate, useSearchParams } from "react-router-dom";
33

44
import { useAppContext } from "@contexts/AppContext";
55
import { useCategories } from "@hooks/useCategories";
6+
import { configureUserSelection } from "@utils/configureUserSelection";
67
import { defaultCategoryName } from "@utils/consts";
78
import { slugify } from "@utils/slugify";
89

@@ -16,13 +17,24 @@ const CategoryListItem: FC<CategoryListItemProps> = ({ categoryName }) => {
1617

1718
const { language, subLanguage, category } = useAppContext();
1819

19-
const langSlug = slugify(language.name);
20-
const subLangSlug = slugify(subLanguage);
21-
const categorySlug = slugify(categoryName);
20+
const handleSelect = async () => {
21+
const {
22+
language: newLanguage,
23+
subLanguage: newSubLanguage,
24+
category: newCategory,
25+
} = await configureUserSelection({
26+
languageName: language.name,
27+
subLanguageName: subLanguage || undefined,
28+
categoryName,
29+
});
30+
31+
const navigatePath =
32+
newSubLanguage === null
33+
? `/${slugify(newLanguage.name)}/s/${slugify(newCategory)}`
34+
: `/${slugify(newLanguage.name)}/${slugify(newSubLanguage)}/${slugify(newCategory)}`;
2235

23-
const handleSelect = () => {
2436
navigate({
25-
pathname: `/${langSlug}/${subLangSlug}/${categorySlug}`,
37+
pathname: navigatePath,
2638
search: searchParams.toString(),
2739
});
2840
};
@@ -31,7 +43,9 @@ const CategoryListItem: FC<CategoryListItemProps> = ({ categoryName }) => {
3143
<li className="category">
3244
<button
3345
className={`category__btn ${
34-
categorySlug === slugify(category) ? "category__btn--active" : ""
46+
slugify(categoryName) === slugify(category)
47+
? "category__btn--active"
48+
: ""
3549
}`}
3650
onClick={handleSelect}
3751
>

‎frontend/src/components/CodePreview.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const CodePreview = ({ extension = "markdown", languageName, code }: Props) => {
4040
return (
4141
<div className="code-preview">
4242
<div className="code-preview__header">
43-
<p>{slugify(languageName)}</p>
43+
<p>{languageName ? slugify(languageName) : ""}</p>
4444
<div className="code-preview__buttons">
4545
<CopyToClipboard text={code} />
4646
<CopyURLButton />

‎frontend/src/components/LanguageSelector.tsx

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -83,9 +83,11 @@ const LanguageSelector = () => {
8383
});
8484

8585
setSearchText("");
86-
navigate(
87-
`/${slugify(newLanguage.name)}/${slugify(newSubLanguage)}/${slugify(newCategory)}`
88-
);
86+
const navigatePath =
87+
newSubLanguage === null
88+
? `/${slugify(newLanguage.name)}/s/${slugify(newCategory)}`
89+
: `/${slugify(newLanguage.name)}/${slugify(newSubLanguage)}/${slugify(newCategory)}`;
90+
navigate(navigatePath);
8991
setIsOpen(false);
9092
setOpenedLanguages([]);
9193
};
@@ -110,9 +112,11 @@ const LanguageSelector = () => {
110112
});
111113

112114
setSearchText("");
113-
navigate(
114-
`/${slugify(newLanguage.name)}/${slugify(newSubLanguage)}/${slugify(newCategory)}`
115-
);
115+
const navigatePath =
116+
newSubLanguage === null
117+
? `/${slugify(newLanguage.name)}/${slugify(newCategory)}`
118+
: `/${slugify(newLanguage.name)}/${slugify(newSubLanguage)}/${slugify(newCategory)}`;
119+
navigate(navigatePath);
116120
afterSelect();
117121
};
118122

‎frontend/src/components/SnippetList.tsx

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -41,10 +41,6 @@ const SnippetList = () => {
4141
setSearchParams(searchParams);
4242
};
4343

44-
useEffect(() => {
45-
console.log("Snippets changed:", fetchedSnippets);
46-
}, [fetchedSnippets]);
47-
4844
/**
4945
* open the relevant modal if the snippet is in the search params
5046
*/

‎frontend/src/components/SnippetModal.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -65,9 +65,7 @@ const SnippetModal: React.FC<Props> = ({
6565
<div className="modal__body | flow">
6666
{/* TODO: update the language name and remove all-sub-languages */}
6767
<CodePreview
68-
languageName={
69-
subLanguage === "all-sub-languages" ? language.name : subLanguage
70-
}
68+
languageName={subLanguage === null ? language.name : subLanguage}
7169
extension={extension}
7270
code={snippet.code}
7371
/>

‎frontend/src/components/SubLanguageSelector.tsx

Lines changed: 32 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useNavigate } from "react-router-dom";
33
import { useAppContext } from "@contexts/AppContext";
44
import { LanguageType } from "@types";
55
import { configureUserSelection } from "@utils/configureUserSelection";
6-
import { defaultSlugifiedSubLanguageName } from "@utils/consts";
6+
import { defaultSubLanguageName } from "@utils/consts";
77
import { slugify } from "@utils/slugify";
88

99
type SubLanguageSelectorProps = {
@@ -37,9 +37,11 @@ const SubLanguageSelector = ({
3737
});
3838

3939
setSearchText("");
40-
navigate(
41-
`/${slugify(newLanguage.name)}/${slugify(newSubLanguage)}/${slugify(newCategory)}`
42-
);
40+
const navigatePath =
41+
newSubLanguage === null
42+
? `/${slugify(newLanguage.name)}/s/${slugify(newCategory)}`
43+
: `/${slugify(newLanguage.name)}/${slugify(newSubLanguage)}/${slugify(newCategory)}`;
44+
navigate(navigatePath);
4345
afterSelect();
4446
};
4547

@@ -49,13 +51,13 @@ const SubLanguageSelector = ({
4951
role="option"
5052
tabIndex={0}
5153
className={`selector__item ${
52-
subLanguage === defaultSlugifiedSubLanguageName &&
54+
subLanguage === defaultSubLanguageName &&
5355
language.name === parentLanguage.name
5456
? "selected"
5557
: ""
5658
}`}
5759
aria-selected={
58-
subLanguage === defaultSlugifiedSubLanguageName &&
60+
subLanguage === defaultSubLanguageName &&
5961
language.name === parentLanguage.name
6062
}
6163
onClick={() => handleParentSelect(parentLanguage)}
@@ -78,24 +80,30 @@ const SubLanguageSelector = ({
7880
</label>
7981
</li>
8082

81-
{parentLanguage.subLanguages.map((sl) => (
82-
<li
83-
key={sl.name}
84-
role="option"
85-
tabIndex={opened ? 0 : -1}
86-
aria-disabled={!opened}
87-
className={`selector__item sublanguage__item ${opened ? "" : "hidden"} ${
88-
slugify(subLanguage) === slugify(sl.name) ? "selected" : ""
89-
}`}
90-
aria-selected={slugify(subLanguage) === slugify(sl.name)}
91-
onClick={handleSubLanguageSelect(sl)}
92-
>
93-
<label>
94-
<img src={sl.icon} alt={sl.name} />
95-
<span>{sl.name}</span>
96-
</label>
97-
</li>
98-
))}
83+
{parentLanguage.subLanguages.map((sl) => {
84+
const isSelected = subLanguage
85+
? slugify(subLanguage) === slugify(sl.name)
86+
: false;
87+
88+
return (
89+
<li
90+
key={sl.name}
91+
role="option"
92+
tabIndex={opened ? 0 : -1}
93+
aria-disabled={!opened}
94+
className={`selector__item sublanguage__item ${opened ? "" : "hidden"} ${
95+
isSelected ? "selected" : ""
96+
}`}
97+
aria-selected={isSelected}
98+
onClick={handleSubLanguageSelect(sl)}
99+
>
100+
<label>
101+
<img src={sl.icon} alt={sl.name} />
102+
<span>{sl.name}</span>
103+
</label>
104+
</li>
105+
);
106+
})}
99107
</>
100108
);
101109
};

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy