Skip to content

Commit 3cd2688

Browse files
pawelmalakpawelmalak
committed
Include tags with snippets. Filter by tags. Display tags on single snippet view.
1 parent 5b0fc69 commit 3cd2688

File tree

12 files changed

+95
-43
lines changed

12 files changed

+95
-43
lines changed

‎client/src/components/Snippets/SnippetDetails.tsx

+12-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useHistory } from 'react-router-dom';
33
import { SnippetsContext } from '../../store';
44
import { Snippet } from '../../typescript/interfaces';
55
import { dateParser } from '../../utils';
6-
import { Button, Card } from '../UI';
6+
import { Badge, Button, Card } from '../UI';
77
import copy from 'clipboard-copy';
88
import { SnippetPin } from './SnippetPin';
99

@@ -15,6 +15,7 @@ export const SnippetDetails = (props: Props): JSX.Element => {
1515
const {
1616
title,
1717
language,
18+
tags,
1819
createdAt,
1920
updatedAt,
2021
description,
@@ -61,6 +62,16 @@ export const SnippetDetails = (props: Props): JSX.Element => {
6162
</div>
6263
<hr />
6364

65+
{/* TAGS */}
66+
<div>
67+
{tags.map(tag => (
68+
<span className='me-2'>
69+
<Badge text={tag} color='dark' />
70+
</span>
71+
))}
72+
</div>
73+
<hr />
74+
6475
{/* ACTIONS */}
6576
<div className='d-grid g-2' style={{ rowGap: '10px' }}>
6677
<Button

‎client/src/containers/Snippets.tsx

+12-12
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,24 @@ import { Button, Card, EmptyState, Layout } from '../components/UI';
55
import { Snippet } from '../typescript/interfaces';
66

77
export const Snippets = (): JSX.Element => {
8-
const { snippets, languageCount, getSnippets, countSnippets } =
8+
const { snippets, tagCount, getSnippets, countTags } =
99
useContext(SnippetsContext);
1010

1111
const [filter, setFilter] = useState<string | null>(null);
1212
const [localSnippets, setLocalSnippets] = useState<Snippet[]>([]);
1313

1414
useEffect(() => {
1515
getSnippets();
16-
countSnippets();
16+
countTags();
1717
}, []);
1818

1919
useEffect(() => {
2020
setLocalSnippets([...snippets]);
2121
}, [snippets]);
2222

23-
const filterHandler = (language: string) => {
24-
setFilter(language);
25-
const filteredSnippets = snippets.filter(s => s.language === language);
23+
const filterHandler = (tag: string) => {
24+
setFilter(tag);
25+
const filteredSnippets = snippets.filter(s => s.tags.includes(tag));
2626
setLocalSnippets(filteredSnippets);
2727
};
2828

@@ -44,21 +44,21 @@ export const Snippets = (): JSX.Element => {
4444
<span>Total</span>
4545
<span>{snippets.length}</span>
4646
</div>
47-
<h5 className='card-title'>Filter by language</h5>
47+
<h5 className='card-title'>Filter by tags</h5>
4848
<Fragment>
49-
{languageCount.map((el, idx) => {
50-
const isActiveFilter = filter === el.language;
49+
{tagCount.map((tag, idx) => {
50+
const isActiveFilter = filter === tag.name;
5151

5252
return (
5353
<div
54+
key={idx}
5455
className={`d-flex justify-content-between cursor-pointer ${
5556
isActiveFilter && 'text-dark fw-bold'
5657
}`}
57-
key={idx}
58-
onClick={() => filterHandler(el.language)}
58+
onClick={() => filterHandler(tag.name)}
5959
>
60-
<span>{el.language}</span>
61-
<span>{el.count}</span>
60+
<span>{tag.name}</span>
61+
<span>{tag.count}</span>
6262
</div>
6363
);
6464
})}

‎client/src/store/SnippetsContext.tsx

+9-9
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,22 @@ import {
55
Context,
66
Snippet,
77
Response,
8-
LanguageCount,
8+
TagCount,
99
NewSnippet
1010
} from '../typescript/interfaces';
1111

1212
export const SnippetsContext = createContext<Context>({
1313
snippets: [],
1414
currentSnippet: null,
15-
languageCount: [],
15+
tagCount: [],
1616
getSnippets: () => {},
1717
getSnippetById: (id: number) => {},
1818
setSnippet: (id: number) => {},
1919
createSnippet: (snippet: NewSnippet) => {},
2020
updateSnippet: (snippet: NewSnippet, id: number, isLocal?: boolean) => {},
2121
deleteSnippet: (id: number) => {},
2222
toggleSnippetPin: (id: number) => {},
23-
countSnippets: () => {}
23+
countTags: () => {}
2424
});
2525

2626
interface Props {
@@ -30,7 +30,7 @@ interface Props {
3030
export const SnippetsContextProvider = (props: Props): JSX.Element => {
3131
const [snippets, setSnippets] = useState<Snippet[]>([]);
3232
const [currentSnippet, setCurrentSnippet] = useState<Snippet | null>(null);
33-
const [languageCount, setLanguageCount] = useState<LanguageCount[]>([]);
33+
const [tagCount, setTagCount] = useState<TagCount[]>([]);
3434

3535
const history = useHistory();
3636

@@ -132,25 +132,25 @@ export const SnippetsContextProvider = (props: Props): JSX.Element => {
132132
}
133133
};
134134

135-
const countSnippets = (): void => {
135+
const countTags = (): void => {
136136
axios
137-
.get<Response<LanguageCount[]>>('/api/snippets/statistics/count')
138-
.then(res => setLanguageCount(res.data.data))
137+
.get<Response<TagCount[]>>('/api/snippets/statistics/count')
138+
.then(res => setTagCount(res.data.data))
139139
.catch(err => redirectOnError());
140140
};
141141

142142
const context = {
143143
snippets,
144144
currentSnippet,
145-
languageCount,
145+
tagCount,
146146
getSnippets,
147147
getSnippetById,
148148
setSnippet,
149149
createSnippet,
150150
updateSnippet,
151151
deleteSnippet,
152152
toggleSnippetPin,
153-
countSnippets
153+
countTags
154154
};
155155

156156
return (

‎client/src/typescript/interfaces/Context.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
import { LanguageCount, NewSnippet, Snippet } from '.';
1+
import { TagCount, NewSnippet, Snippet } from '.';
22

33
export interface Context {
44
snippets: Snippet[];
55
currentSnippet: Snippet | null;
6-
languageCount: LanguageCount[];
6+
tagCount: TagCount[];
77
getSnippets: () => void;
88
getSnippetById: (id: number) => void;
99
setSnippet: (id: number) => void;
1010
createSnippet: (snippet: NewSnippet) => void;
1111
updateSnippet: (snippet: NewSnippet, id: number, isLocal?: boolean) => void;
1212
deleteSnippet: (id: number) => void;
1313
toggleSnippetPin: (id: number) => void;
14-
countSnippets: () => void;
14+
countTags: () => void;
1515
}

‎client/src/typescript/interfaces/Snippet.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export interface NewSnippet {
77
code: string;
88
docs?: string;
99
isPinned: boolean;
10-
tags: string;
10+
tags: string[];
1111
}
1212

1313
export interface Snippet extends Model, NewSnippet {}

‎client/src/typescript/interfaces/Statistics.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export interface LanguageCount {
1+
export interface TagCount {
22
count: number;
3-
language: string;
3+
name: string;
44
}

‎src/controllers/snippets.ts

+34-12
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,10 @@ import { Request, Response, NextFunction } from 'express';
22
import { QueryTypes } from 'sequelize';
33
import { sequelize } from '../db';
44
import { asyncWrapper } from '../middleware';
5-
import { SnippetModel } from '../models';
6-
import { ErrorResponse, tagsParser } from '../utils';
5+
import { SnippetInstance, SnippetModel } from '../models';
6+
import { ErrorResponse, getTags, tagsParser, Logger } from '../utils';
7+
8+
const logger = new Logger('snippets-controller');
79

810
/**
911
* @description Create new snippet
@@ -37,7 +39,22 @@ export const createSnippet = asyncWrapper(
3739
*/
3840
export const getAllSnippets = asyncWrapper(
3941
async (req: Request, res: Response, next: NextFunction): Promise<void> => {
40-
const snippets = await SnippetModel.findAll();
42+
const snippets = await SnippetModel.findAll({
43+
raw: true
44+
});
45+
46+
await new Promise<void>(async resolve => {
47+
try {
48+
for await (let snippet of snippets) {
49+
const tags = await getTags(+snippet.id);
50+
snippet.tags = tags;
51+
}
52+
} catch (err) {
53+
logger.log('Error while fetching tags');
54+
} finally {
55+
resolve();
56+
}
57+
});
4158

4259
res.status(200).json({
4360
data: snippets
@@ -46,14 +63,15 @@ export const getAllSnippets = asyncWrapper(
4663
);
4764

4865
/**
49-
* @description Get single sinppet by id
66+
* @description Get single snippet by id
5067
* @route /api/snippets/:id
5168
* @request GET
5269
*/
5370
export const getSnippet = asyncWrapper(
5471
async (req: Request, res: Response, next: NextFunction): Promise<void> => {
5572
const snippet = await SnippetModel.findOne({
56-
where: { id: req.params.id }
73+
where: { id: req.params.id },
74+
raw: true
5775
});
5876

5977
if (!snippet) {
@@ -65,6 +83,9 @@ export const getSnippet = asyncWrapper(
6583
);
6684
}
6785

86+
const tags = await getTags(+req.params.id);
87+
snippet.tags = tags;
88+
6889
res.status(200).json({
6990
data: snippet
7091
});
@@ -144,19 +165,20 @@ export const deleteSnippet = asyncWrapper(
144165
);
145166

146167
/**
147-
* @description Count snippets by language
168+
* @description Count tags
148169
* @route /api/snippets/statistics/count
149170
* @request GET
150171
*/
151-
export const countSnippets = asyncWrapper(
172+
export const countTags = asyncWrapper(
152173
async (req: Request, res: Response, next: NextFunction): Promise<void> => {
153174
const result = await sequelize.query(
154175
`SELECT
155-
COUNT(language) AS count,
156-
language
157-
FROM snippets
158-
GROUP BY language
159-
ORDER BY language ASC`,
176+
COUNT(tags.name) as count,
177+
tags.name
178+
FROM snippets_tags
179+
INNER JOIN tags ON snippets_tags.tag_id = tags.id
180+
GROUP BY tags.name
181+
ORDER BY name ASC`,
160182
{
161183
type: QueryTypes.SELECT
162184
}

‎src/db/migrations/02_tags.ts

-1
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,6 @@ export const up = async (queryInterface: QueryInterface): Promise<void> => {
7676
}
7777
} catch (err) {
7878
logger.log('Error while assigning tags to snippets');
79-
console.log(err);
8079
} finally {
8180
resolve();
8281
}

‎src/routes/snippets.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Router } from 'express';
22
import {
3-
countSnippets,
3+
countTags,
44
createSnippet,
55
deleteSnippet,
66
getAllSnippets,
@@ -22,4 +22,4 @@ snippetRouter
2222
.put(updateSnippet)
2323
.delete(deleteSnippet);
2424

25-
snippetRouter.route('/statistics/count').get(countSnippets);
25+
snippetRouter.route('/statistics/count').get(countTags);

‎src/typescript/interfaces/Snippet.ts

+1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export interface Snippet extends Model {
88
code: string;
99
docs: string;
1010
isPinned: number;
11+
tags?: string[];
1112
}
1213

1314
export interface SnippetCreationAttributes

‎src/utils/getTags.ts

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { sequelize } from '../db';
2+
import { QueryTypes } from 'sequelize';
3+
4+
export const getTags = async (snippetId: number): Promise<string[]> => {
5+
const tags = await sequelize.query<{ name: string }>(
6+
`SELECT tags.name
7+
FROM tags
8+
INNER JOIN
9+
snippets_tags ON tags.id = snippets_tags.tag_id
10+
INNER JOIN
11+
snippets ON snippets.id = snippets_tags.snippet_id
12+
WHERE
13+
snippets_tags.snippet_id = ${snippetId};`,
14+
{ type: QueryTypes.SELECT }
15+
);
16+
17+
return tags.map(tag => tag.name);
18+
};

‎src/utils/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
export * from './Logger';
22
export * from './ErrorResponse';
33
export * from './tagsParser';
4+
export * from './getTags';

0 commit comments

Comments
 (0)