Skip to content

Commit 193e340

Browse files
wlee261wlee261
committed
fix: prettier
1 parent 90e55cc commit 193e340

File tree

2 files changed

+80
-80
lines changed

2 files changed

+80
-80
lines changed

‎src/components/Themes/ThemeCard.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ const ThemeCard: React.FC<Props> = ({ theme, isPreviewed, onPreview }) => {
3636
<span className="text-accent-300 text-sm">{theme.description}</span>
3737
</div>
3838
<div className="flex-1 basis-1/5 md:basis-1/6 flex flex-col">
39-
<span className="text-blue-500 text-sm my-4">More Info (i)</span>
39+
<span className="text-blue-500 text-sm my-4">More Info (i)</span>
4040
<label className="text-accent-50">
4141
Select
4242
<input

‎src/pages/Themes.tsx

Lines changed: 79 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -17,104 +17,104 @@ import DesktopThemePreview from '../components/Themes/DesktopThemePreview';
1717
* // todo: dynamically load themes as user scrolls instead of fetching wholesale from backend
1818
*/
1919
const Themes: React.FC = () => {
20-
//search param hook to access URL
21-
const [searchParams, setSearchParams] = useSearchParams();
20+
//search param hook to access URL
21+
const [searchParams, setSearchParams] = useSearchParams();
2222

23-
// search query for filtering themes to show
24-
const [searchQuery, setSearchQuery] = useState(
25-
() => searchParams.get('searchQuery') || ''
26-
);
23+
// search query for filtering themes to show
24+
const [searchQuery, setSearchQuery] = useState(
25+
() => searchParams.get('searchQuery') || ''
26+
);
2727

28-
// id of themes being selected to be preview (and applied to the interactive chatbot)
29-
const [previewIds, setPreviewIds] = useState<string[]>([]);
28+
// id of themes being selected to be preview (and applied to the interactive chatbot)
29+
const [previewIds, setPreviewIds] = useState<string[]>([]);
3030

31-
// theme data fetched from backend
31+
// theme data fetched from backend
3232

33-
const { themes, loading, error } = useFetchData(
34-
Endpoints.fetchApiThemes,
35-
30,
36-
1,
37-
searchQuery
38-
);
33+
const { themes, loading, error } = useFetchData(
34+
Endpoints.fetchApiThemes,
35+
30,
36+
1,
37+
searchQuery
38+
);
3939

40-
console.log(themes)
41-
/**
40+
console.log(themes)
41+
/**
4242
* Handles setting of search query when user hits enter.
4343
*
4444
* @param query query user inputted
4545
*/
46-
const handleSearch = (query: string) => {
47-
if (query === '') {
48-
searchParams.delete('searchQuery');
49-
} else {
50-
searchParams.set('searchQuery', query);
51-
}
52-
setSearchParams(searchParams);
53-
setSearchQuery(query);
54-
};
46+
const handleSearch = (query: string) => {
47+
if (query === '') {
48+
searchParams.delete('searchQuery');
49+
} else {
50+
searchParams.set('searchQuery', query);
51+
}
52+
setSearchParams(searchParams);
53+
setSearchQuery(query);
54+
};
5555

56-
/**
56+
/**
5757
* Handles setting and unsetting of theme ids to preview.
5858
*
5959
* @param id id of theme to set or unset
6060
*/
61-
const onPreview = (id: string) => {
62-
setPreviewIds((prevPreviewId) =>
63-
prevPreviewId.includes(id)
64-
? prevPreviewId.filter((item) => item !== id)
65-
: [...prevPreviewId, id]
66-
);
67-
};
61+
const onPreview = (id: string) => {
62+
setPreviewIds((prevPreviewId) =>
63+
prevPreviewId.includes(id)
64+
? prevPreviewId.filter((item) => item !== id)
65+
: [...prevPreviewId, id]
66+
);
67+
};
6868

69-
/**
69+
/**
7070
* Clears all preview ids.
7171
*/
72-
const clearPreviewIds = () => {
73-
setPreviewIds([]);
74-
};
72+
const clearPreviewIds = () => {
73+
setPreviewIds([]);
74+
};
7575

76-
// todo: show a proper error message if themes are not able to be fetched
77-
if (error) {
78-
return <div>Error: {error.message}</div>;
79-
}
76+
// todo: show a proper error message if themes are not able to be fetched
77+
if (error) {
78+
return <div>Error: {error.message}</div>;
79+
}
8080

81-
return (
82-
<div className="bg-accent-950 flex h-screen w-full">
83-
{/* Main Content Section */}
84-
<div className="overflow-y-scroll hide-scrollbar w-full flex flex-col">
85-
<div className="ml-14 mt-6 text-accent-50">
86-
{/* Headers */}
87-
<h1 className="text-2xl font-semibold pb-3">Select Theme(s)</h1>
88-
<h2 className="text-accent-300 text-sm mb-2">
89-
You can select multiple themes and combine them however you like.
90-
</h2>
91-
{/* TODO: this will be a button that opens a modal or redirects */}
92-
<h2 className="text-blue-500 text-sm">How choosing multiple themes work (i)</h2>
93-
<div className="mt-4">
94-
<SearchBar onSearch={handleSearch} /></div>
95-
</div>
96-
<div className="flex flex-col md:grid md:grid-cols-[repeat(auto-fill,270px)] justify-center">
97-
{/* Card Content */}
98-
{themes.map((theme) => {
99-
return (
100-
<ThemeCard
101-
key={theme.id}
102-
theme={theme}
103-
isPreviewed={previewIds.includes(theme.id)}
104-
onPreview={() => onPreview(theme.id)}
105-
/>
106-
);
107-
})}
108-
</div>
109-
</div>
110-
{/* Drawer Section */}
111-
<DesktopThemePreview
112-
setPreviewIds={setPreviewIds}
113-
previewIds={previewIds}
114-
clearPreviewIds={clearPreviewIds}
115-
/>
116-
</div>
117-
);
81+
return (
82+
<div className="bg-accent-950 flex h-screen w-full">
83+
{/* Main Content Section */}
84+
<div className="overflow-y-scroll hide-scrollbar w-full flex flex-col">
85+
<div className="ml-14 mt-6 text-accent-50">
86+
{/* Headers */}
87+
<h1 className="text-2xl font-semibold pb-3">Select Theme(s)</h1>
88+
<h2 className="text-accent-300 text-sm mb-2">
89+
You can select multiple themes and combine them however you like.
90+
</h2>
91+
{/* TODO: this will be a button that opens a modal or redirects */}
92+
<h2 className="text-blue-500 text-sm">How choosing multiple themes work (i)</h2>
93+
<div className="mt-4">
94+
<SearchBar onSearch={handleSearch} /></div>
95+
</div>
96+
<div className="flex flex-col md:grid md:grid-cols-[repeat(auto-fill,270px)] justify-center">
97+
{/* Card Content */}
98+
{themes.map((theme) => {
99+
return (
100+
<ThemeCard
101+
key={theme.id}
102+
theme={theme}
103+
isPreviewed={previewIds.includes(theme.id)}
104+
onPreview={() => onPreview(theme.id)}
105+
/>
106+
);
107+
})}
108+
</div>
109+
</div>
110+
{/* Drawer Section */}
111+
<DesktopThemePreview
112+
setPreviewIds={setPreviewIds}
113+
previewIds={previewIds}
114+
clearPreviewIds={clearPreviewIds}
115+
/>
116+
</div>
117+
);
118118
};
119119

120120
export default Themes;

0 commit comments

Comments
 (0)