Skip to content
This repository was archived by the owner on May 4, 2023. It is now read-only.

Commit 01ed20e

Browse files
dastrong-codigadastrong-codiga
committed
chore: added two new routes and restructured how filters are shown
1 parent 143c058 commit 01ed20e

File tree

2 files changed

+135
-116
lines changed

2 files changed

+135
-116
lines changed

‎src/renderer/App.tsx

Lines changed: 30 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -24,37 +24,50 @@ import Filters from './components/Filters/Filters';
2424
import { UserProvider } from './components/UserContext';
2525
import { ThemeProvider } from './components/ThemeContext';
2626
import { FiltersProvider } from './components/FiltersContext';
27+
import ViewSnippet from './pages/ViewSnippet';
28+
import ViewCookbookSnippets from './pages/ViewCookbookSnippets';
2729

2830
export default function App() {
2931
return (
3032
<ApolloProvider client={client}>
3133
<ChakraProvider theme={theme}>
3234
<UserProvider>
3335
<ThemeProvider>
34-
<Router>
35-
<Layout>
36-
<FiltersProvider>
37-
<Filters />
38-
36+
<FiltersProvider>
37+
<Router>
38+
<Layout>
3939
<Routes>
40-
<Route path="/" element={<Home />} />
40+
<Route element={<Filters />}>
41+
<Route path="/" element={<Home />} />
42+
<Route path="/my-snippets" element={<MySnippets />} />
43+
<Route
44+
path="/favorite-snippets"
45+
element={<FavoriteSnippets />}
46+
/>
47+
<Route path="/my-cookbooks" element={<MyCookbooks />} />
48+
<Route
49+
path="/favorite-cookbooks"
50+
element={<FavoriteCookbooks />}
51+
/>
52+
<Route path="/team-snippets" element={<TeamSnippets />} />
53+
<Route
54+
path="/team-cookbooks"
55+
element={<TeamCookbooks />}
56+
/>
57+
</Route>
4158

42-
<Route path="/my-snippets" element={<MySnippets />} />
4359
<Route
44-
path="/favorite-snippets"
45-
element={<FavoriteSnippets />}
60+
path="/view-snippet/:snippetId"
61+
element={<ViewSnippet />}
4662
/>
47-
<Route path="/my-cookbooks" element={<MyCookbooks />} />
4863
<Route
49-
path="/favorite-cookbooks"
50-
element={<FavoriteCookbooks />}
64+
path="/view-cookbook/:cookbookId"
65+
element={<ViewCookbookSnippets />}
5166
/>
52-
<Route path="/team-snippets" element={<TeamSnippets />} />
53-
<Route path="/team-cookbooks" element={<TeamCookbooks />} />
5467
</Routes>
55-
</FiltersProvider>
56-
</Layout>
57-
</Router>
68+
</Layout>
69+
</Router>
70+
</FiltersProvider>
5871
</ThemeProvider>
5972
</UserProvider>
6073
</ChakraProvider>

‎src/renderer/components/Filters/Filters.tsx

Lines changed: 105 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ import {
1717
LanguageSelector,
1818
LibrarySelector,
1919
} from '@codiga/components';
20+
import { Outlet } from 'react-router-dom';
21+
2022
import { useFilters } from '../FiltersContext';
2123
import { ALL_LANGUAGES } from '../../lib/constants';
2224
import {
@@ -46,110 +48,114 @@ export default function Filters() {
4648
} = useFilters();
4749

4850
return (
49-
<Box bg="neutral.25" _dark={{ bg: 'base.dark' }}>
50-
<HStack w="full" spacing="space_16" py="space_16" pr="space_16">
51-
<Input
52-
flex={1}
53-
minWidth="200px"
54-
maxWidth="400px"
55-
placeholder="Search"
56-
value={searchTerm}
57-
onChange={(e) => setSearchTerm(e.target.value)}
58-
/>
59-
<LanguageSelector
60-
minW="150px"
61-
maxW="300px"
62-
value={language || ''}
63-
options={['', ...ALL_LANGUAGES]}
64-
emptyLabel="All Languages"
65-
onChange={(newLanguage) => {
66-
setLanguage(newLanguage as LanguageEnumeration);
67-
setLibrary('' as LibraryEnumeration);
68-
}}
69-
labelProps={{ hidden: true, children: 'Filter by language' }}
70-
/>
71-
<LibrarySelector
72-
minW="150px"
73-
maxW="300px"
74-
isCreatable
75-
value={library || ''}
76-
language={language || ''}
77-
onChange={(newLibrary) =>
78-
setLibrary(newLibrary as LibraryEnumeration)
79-
}
80-
emptyLabel="No library"
81-
isDisabled={!language}
82-
labelProps={{
83-
fontSize: 'md',
84-
fontWeight: 'bold',
85-
hidden: true,
86-
}}
87-
/>
88-
<Tooltip label="More Filters" isDisabled={isOpen}>
89-
<IconButton
90-
size="xs"
91-
variant="unstyled"
92-
aria-label="Open more filter options"
93-
icon={isOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
94-
onClick={onToggle}
95-
/>
96-
</Tooltip>
97-
</HStack>
98-
99-
<Collapse in={isOpen}>
100-
<Flex gridGap="space_16" mb="space_16" flexWrap="wrap" pr="space_16">
51+
<>
52+
<Box bg="neutral.25" _dark={{ bg: 'base.dark' }}>
53+
<HStack w="full" spacing="space_16" py="space_16" pr="space_16">
10154
<Input
10255
flex={1}
10356
minWidth="200px"
10457
maxWidth="400px"
105-
placeholder="Search by tags"
106-
value={tags}
107-
onChange={(e) => setTags(e.target.value)}
58+
placeholder="Search"
59+
value={searchTerm}
60+
onChange={(e) => setSearchTerm(e.target.value)}
61+
/>
62+
<LanguageSelector
63+
minW="150px"
64+
maxW="300px"
65+
value={language || ''}
66+
options={['', ...ALL_LANGUAGES]}
67+
emptyLabel="All Languages"
68+
onChange={(newLanguage) => {
69+
setLanguage(newLanguage as LanguageEnumeration);
70+
setLibrary('' as LibraryEnumeration);
71+
}}
72+
labelProps={{ hidden: true, children: 'Filter by language' }}
10873
/>
109-
<Flex flexWrap="nowrap" gridRowGap="0" gridColumnGap="space_16">
110-
<Radio
111-
isDisabled={!isAuthenticated}
112-
isChecked={privacy === 'all'}
113-
onChange={() => setPrivacy('all')}
114-
mb={0}
115-
>
116-
<Text as="span" size="sm" fontFamily="body">
117-
All
118-
</Text>
119-
</Radio>
120-
<Radio
121-
isDisabled={!isAuthenticated}
122-
isChecked={privacy === 'public'}
123-
onChange={() => setPrivacy('public')}
124-
mb={0}
125-
>
126-
<Text as="span" size="sm" fontFamily="body">
127-
Public
128-
</Text>
129-
</Radio>
130-
<Radio
131-
isDisabled={!isAuthenticated}
132-
isChecked={privacy === 'private'}
133-
onChange={() => setPrivacy('private')}
134-
mb={0}
135-
>
136-
<Text as="span" size="sm" fontFamily="body">
137-
Private
138-
</Text>
139-
</Radio>
140-
<Checkbox
141-
isDisabled={!isAuthenticated}
142-
checked={isSubscribed}
143-
onChange={(e) => setIsSubscribed(e.target.checked)}
144-
mb={0}
145-
>
146-
<Text as="span" size="sm" fontFamily="body">
147-
Favorites only
148-
</Text>
149-
</Checkbox>
74+
<LibrarySelector
75+
minW="150px"
76+
maxW="300px"
77+
isCreatable
78+
value={library || ''}
79+
language={language || ''}
80+
onChange={(newLibrary) =>
81+
setLibrary(newLibrary as LibraryEnumeration)
82+
}
83+
emptyLabel="No library"
84+
isDisabled={!language}
85+
labelProps={{
86+
fontSize: 'md',
87+
fontWeight: 'bold',
88+
hidden: true,
89+
}}
90+
/>
91+
<Tooltip label="More Filters" isDisabled={isOpen}>
92+
<IconButton
93+
size="xs"
94+
variant="unstyled"
95+
aria-label="Open more filter options"
96+
icon={isOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
97+
onClick={onToggle}
98+
/>
99+
</Tooltip>
100+
</HStack>
101+
102+
<Collapse in={isOpen}>
103+
<Flex gridGap="space_16" mb="space_16" flexWrap="wrap" pr="space_16">
104+
<Input
105+
flex={1}
106+
minWidth="200px"
107+
maxWidth="400px"
108+
placeholder="Search by tags"
109+
value={tags}
110+
onChange={(e) => setTags(e.target.value)}
111+
/>
112+
<Flex flexWrap="nowrap" gridRowGap="0" gridColumnGap="space_16">
113+
<Radio
114+
isDisabled={!isAuthenticated}
115+
isChecked={privacy === 'all'}
116+
onChange={() => setPrivacy('all')}
117+
mb={0}
118+
>
119+
<Text as="span" size="sm" fontFamily="body">
120+
All
121+
</Text>
122+
</Radio>
123+
<Radio
124+
isDisabled={!isAuthenticated}
125+
isChecked={privacy === 'public'}
126+
onChange={() => setPrivacy('public')}
127+
mb={0}
128+
>
129+
<Text as="span" size="sm" fontFamily="body">
130+
Public
131+
</Text>
132+
</Radio>
133+
<Radio
134+
isDisabled={!isAuthenticated}
135+
isChecked={privacy === 'private'}
136+
onChange={() => setPrivacy('private')}
137+
mb={0}
138+
>
139+
<Text as="span" size="sm" fontFamily="body">
140+
Private
141+
</Text>
142+
</Radio>
143+
<Checkbox
144+
isDisabled={!isAuthenticated}
145+
checked={isSubscribed}
146+
onChange={(e) => setIsSubscribed(e.target.checked)}
147+
mb={0}
148+
>
149+
<Text as="span" size="sm" fontFamily="body">
150+
Favorites only
151+
</Text>
152+
</Checkbox>
153+
</Flex>
150154
</Flex>
151-
</Flex>
152-
</Collapse>
153-
</Box>
155+
</Collapse>
156+
</Box>
157+
158+
<Outlet />
159+
</>
154160
);
155161
}

0 commit comments

Comments
 (0)