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)