From decc86dad0f96a17d57ceb18d8550c94af74c702 Mon Sep 17 00:00:00 2001
From: Tin Geber <tin@greenhost.nl>
Date: Mon, 4 Dec 2023 17:37:25 +0100
Subject: [PATCH] first drafty tagging feature
---
frontend/package.json | 19 +++----
frontend/src/components/Tags/Tags.tsx | 53 ++++++++++---------
.../src/components/UserModal/UserModal.tsx | 2 +-
frontend/yarn.lock | 12 +++++
4 files changed, 49 insertions(+), 37 deletions(-)
diff --git a/frontend/package.json b/frontend/package.json
index 2d24ff2a..612f159a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -20,6 +20,7 @@
"@types/md5": "^2.3.5",
"@types/node": "^18.0.0",
"@types/react-dom": "^17.0.2",
+ "@types/react-tag-autocomplete": "^6.3.3",
"axios": "^0.21.1",
"clsx": "^1.1.1",
"gray-matter": "^4.0.3",
@@ -40,6 +41,7 @@
"react-scripts": "4.0.3",
"react-simple-code-editor": "^0.11.0",
"react-table": "^7.7.0",
+ "react-tag-autocomplete": "^6.3.0",
"redux": "^4.1.0",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0",
@@ -64,18 +66,11 @@
"react-app/jest"
]
},
- "browserslist": {
- "production": [
- ">0.2%",
- "not dead",
- "not op_mini all"
- ],
- "development": [
- "last 1 chrome version",
- "last 1 firefox version",
- "last 1 safari version"
- ]
- },
+ "browserslist": [
+ ">0.2%",
+ "not dead",
+ "not op_mini all"
+ ],
"devDependencies": {
"@types/lodash": "^4.14.171",
"@types/prismjs": "^1.16.6",
diff --git a/frontend/src/components/Tags/Tags.tsx b/frontend/src/components/Tags/Tags.tsx
index 36267f83..9682a823 100644
--- a/frontend/src/components/Tags/Tags.tsx
+++ b/frontend/src/components/Tags/Tags.tsx
@@ -1,39 +1,44 @@
-import React, { useCallback, useState } from 'react';
-import { ReactTags } from 'react-tag-autocomplete';
+import React, { useCallback, useState, useRef } from 'react';
+import ReactTags from 'react-tag-autocomplete';
+
// import { User } from 'src/services/users/types';
// import { suggestions } from './country-list';
-const suggestions = [
- { id: 0, name: 'tag one' },
- { id: 1, name: 'tag two' },
- { id: 2, name: 'tag three' },
-];
+type Tag = {
+ id: number;
+ name: string;
+};
+// const tags: Tag[] = [];
export const Tags = () => {
- const [selected, setSelected] = useState<any>([]);
+ const [tags, setTags] = useState<Tag[]>([]);
- const onAdd = useCallback(
- (newTag) => {
- setSelected([...selected, newTag]);
- },
- [selected],
- );
+ const [suggestions, setSuggestions] = useState([
+ { id: 1, name: 'Apples' },
+ { id: 2, name: 'Pears' },
+ { id: 3, name: 'Bananas' },
+ { id: 4, name: 'Mangos' },
+ { id: 5, name: 'Lemons' },
+ { id: 6, name: 'Apricots' },
+ ]);
+
+ const reactTags = useRef(null);
const onDelete = useCallback(
(tagIndex) => {
- setSelected(selected.filter((_: any, i: any) => i !== tagIndex));
+ setTags(tags.filter((_, i) => i !== tagIndex));
+ },
+ [tags],
+ );
+
+ const onAddition = useCallback(
+ (newTag) => {
+ setTags([...tags, newTag]);
},
- [selected],
+ [tags],
);
return (
- <ReactTags
- labelText="Select countries"
- selected={selected}
- suggestions={suggestions}
- onAdd={onAdd}
- onDelete={onDelete}
- noOptionsText="No matching countries"
- />
+ <ReactTags ref={reactTags} tags={tags} suggestions={suggestions} onDelete={onDelete} onAddition={onAddition} />
);
};
diff --git a/frontend/src/components/UserModal/UserModal.tsx b/frontend/src/components/UserModal/UserModal.tsx
index fbcd5cb8..6df1f038 100644
--- a/frontend/src/components/UserModal/UserModal.tsx
+++ b/frontend/src/components/UserModal/UserModal.tsx
@@ -366,7 +366,7 @@ export const UserModal = ({ open, onClose, userId, setUserId, apps }: UserModalP
<div className="mt-8">
<h3 className="text-lg leading-6 font-medium text-gray-900">Tags</h3>
</div>
- {/* <Tags /> */}
+ <Tags />
</div>
)}
{isAdmin && userId && !userModalLoading && (
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 54688fd0..82a1ef82 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -2086,6 +2086,13 @@
dependencies:
"@types/react" "*"
+"@types/react-tag-autocomplete@^6.3.3":
+ version "6.3.3"
+ resolved "https://registry.yarnpkg.com/@types/react-tag-autocomplete/-/react-tag-autocomplete-6.3.3.tgz#1c42a7d7742607403764c16b20ae0ce9998353fe"
+ integrity sha512-lMjrtsbZYlNXyFiCvi2gwi7gt/ulJhVT4wjGaj/sFve0RbINUVhV6m5WCK65sD4uKoPKsKztf+VGT4SpL2JTJw==
+ dependencies:
+ "@types/react" "*"
+
"@types/react@*", "@types/react@17.0.2", "@types/react@^17":
version "17.0.2"
resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.2.tgz#3de24c4efef902dd9795a49c75f760cbe4f7a5a8"
@@ -10596,6 +10603,11 @@ react-table@^7.7.0:
resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.8.0.tgz#07858c01c1718c09f7f1aed7034fcfd7bda907d2"
integrity sha512-hNaz4ygkZO4bESeFfnfOft73iBUj8K5oKi1EcSHPAibEydfsX2MyU6Z8KCr3mv3C9Kqqh71U+DhZkFvibbnPbA==
+react-tag-autocomplete@^6.3.0:
+ version "6.3.0"
+ resolved "https://registry.yarnpkg.com/react-tag-autocomplete/-/react-tag-autocomplete-6.3.0.tgz#ce064bbab77b4daf7706be1c08413e7d0335ff4d"
+ integrity sha512-MUBVUFh5eOqshUm5NM20qp7zXk8TzSiKO4GoktlFzBLIOLs356npaMKtL02bm0nFV2f1zInUrXn1fq6+i5YX0w==
+
react@17.0.2:
version "17.0.2"
resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
--
GitLab