Skip to content
This repository was archived by the owner on Aug 7, 2024. It is now read-only.

Fixes Using Chips in the "add Tags" section #9103 #9508

Merged
merged 18 commits into from
Nov 17, 2023
Merged

Fixes Using Chips in the "add Tags" section #9103 #9508

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
8ba32c0
Revert "data: alevel7 (#9459)"
Zopsss Oct 15, 2023
60cf8a2
Fixes #9103 Using Chips in the 'add Tags'
Zopsss Oct 15, 2023
4558d00
Revert "Revert "data: alevel7 (#9459)""
Zopsss Oct 16, 2023
520eb4c
Renamed inputRef to tagInputRef
Zopsss Oct 17, 2023
8733641
Merge branch 'main' into UsingChips#9103
eddiejaoude Oct 21, 2023
cf5ca14
renamed tagInputRef to inputRef
Zopsss Oct 21, 2023
3e98cdd
Merge branch 'main' of https://github.com/MauryanKansara/BioDrop into…
Zopsss Oct 21, 2023
8ed31d1
Merge branch 'main' of https://github.com/MauryanKansara/BioDrop into…
Zopsss Oct 21, 2023
ca711f7
Merge branch 'main' of https://github.com/MauryanKansara/BioDrop into…
Zopsss Oct 22, 2023
00847f5
Merge branch 'main' of https://github.com/MauryanKansara/BioDrop into…
Zopsss Oct 23, 2023
4be616c
solved 'inputRef.current is undefined' error on manage events page
Zopsss Oct 23, 2023
780390d
Merge branch 'main' of https://github.com/MauryanKansara/BioDrop into…
Zopsss Oct 26, 2023
d848495
Merge branch 'main' into UsingChips#9103
Zopsss Oct 26, 2023
e458552
Merge branch 'UsingChips#9103' of https://github.com/MauryanKansara/B…
Zopsss Oct 26, 2023
d2fa621
Merge branch 'main' of https://github.com/MauryanKansara/BioDrop into…
Zopsss Oct 31, 2023
08ad5d6
renamed inputRef to tagInputRef in profile.js and [[...data]].js files
Zopsss Oct 31, 2023
2eb3d15
Merge branch 'UsingChips#9103' of https://github.com/MauryanKansara/B…
Zopsss Oct 31, 2023
8334b43
removed debug code
Zopsss Nov 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions components/tag/TagsInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,37 @@
import { useRef } from "react";
import XMarkIcon from "@heroicons/react/20/solid/XMarkIcon";
import Input from "../form/Input";

export default function TagsInput({ tags, onTagAdd, onTagRemove }) {
const inputRef = useRef(null);
export default function TagsInput({ tags, onTagAdd, onTagRemove, tagInputRef }) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If this name was kept the same there would be less changes in the file. I think `inputRef is still descriptive in the scope of this function

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

so should I the tagInputref to inputRef?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes please 👍



//key code
const { comma, backspace } = {
const { comma, backspace, enter } = {
comma: 188,
backspace: 8,
enter: 13,
};

const handleKeyUp = (e) => {
const inputValue = inputRef.current.value;
if (e.keyCode === comma || inputValue.endsWith(",")) {
const inputValue = tagInputRef.current.value;
if (e.keyCode === comma || inputValue.endsWith(",") || e.keyCode === enter) {
const newTag = inputValue.trim().replace(/,/g, "");
if (!newTag) {
return;
}
onTagAdd(newTag);
inputRef.current.value = "";
tagInputRef.current.value = "";
}
};

const handleKeyDown = (e) => {
if (
e.keyCode === backspace &&
inputRef.current?.value === "" &&
tagInputRef.current?.value === "" &&
tags.length > 0
) {
const removedTag = tags.pop();
onTagRemove(removedTag);
inputRef.current.value = removedTag;
tagInputRef.current.value = removedTag;
}
};

Expand Down Expand Up @@ -67,7 +67,7 @@ export default function TagsInput({ tags, onTagAdd, onTagRemove }) {
<Input
name="tags"
className="w-full text-sm rounded-md font-mono outline-none dark:bg-primary-high focus:ring-0 focus:border-tertiary-medium focus:outline-0 p-1 hover:border-tertiary-medium"
ref={inputRef}
ref={tagInputRef}
type="text"
placeholder="type tag..."
onKeyUp={handleKeyUp}
Expand Down
10 changes: 9 additions & 1 deletion pages/account/manage/profile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import path from "path";

import { authOptions } from "../../api/auth/[...nextauth]";
import { getServerSession } from "next-auth/next";
import { useState } from "react";
import { useRef, useState } from "react";

import { clientEnv } from "@config/schemas/clientSchema";
import config from "@config/app.json";
Expand Down Expand Up @@ -85,6 +85,8 @@ export default function Profile({ BASE_URL, profile, fileExists }) {
};
});

const tagInputRef = useRef(null);

const { pronouns } = config;

const handleTagAdd = (newTag) => {
Expand All @@ -98,6 +100,11 @@ export default function Profile({ BASE_URL, profile, fileExists }) {

const handleSubmit = async (e) => {
e.preventDefault();

if (document.activeElement === tagInputRef.current) {
return;
}

const res = await fetch(`${BASE_URL}/api/account/manage/profile`, {
method: "PUT",
headers: {
Expand Down Expand Up @@ -252,6 +259,7 @@ export default function Profile({ BASE_URL, profile, fileExists }) {
onTagAdd={handleTagAdd}
onTagRemove={handleTagRemove}
tags={tags}
tagInputRef={tagInputRef}
/>
<p className="text-sm text-primary-medium-low dark:text-primary-low-high">
Separate tags with commas.
Expand Down