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 14 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
10 changes: 5 additions & 5 deletions components/tag/TagsInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
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, inputRef }) {


//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(",")) {
if (e.keyCode === comma || inputValue.endsWith(",") || e.keyCode === enter) {
const newTag = inputValue.trim().replace(/,/g, "");
if (!newTag) {
return;
Expand Down
7 changes: 6 additions & 1 deletion pages/account/manage/event/[[...data]].js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import Router from "next/router";
import { useState, useEffect } from "react";
import { useState, useEffect, useRef } from "react";
import { authOptions } from "../../../api/auth/[...nextauth]";
import { getServerSession } from "next-auth/next";

Expand Down Expand Up @@ -57,6 +57,7 @@ export default function ManageEvent({ BASE_URL, event }) {
const [endDate, setEndDate] = useState("");
const [speakingTopic, setspeakingTopic] = useState(event.speakingTopic || "");
const [tags, setTags] = useState(event.tags || []);
const inputRef = useRef(null);
Copy link
Contributor

Choose a reason for hiding this comment

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

I'm not sure why this variable named inputRef. I think naming the variable simply inputRef might not be very descriptive, because I see in the scope of this function has multiple input fields.

Copy link
Member

Choose a reason for hiding this comment

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

Yep 👍 Inside the tag component it can be inputRef but outside it should be tagInputRef

Copy link
Contributor

Choose a reason for hiding this comment

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

Yeah that makes sense

Copy link
Contributor Author

Choose a reason for hiding this comment

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

sorry for the late reply, I made the changes as you requested and pushed the changes.


useEffect(() => {
if (!isSpeaking) {
Expand Down Expand Up @@ -105,6 +106,9 @@ export default function ManageEvent({ BASE_URL, event }) {
const handleSubmit = async (e) => {
e.preventDefault();

if (document.activeElement === inputRef) {
return;
}
let alert = "created";
let putEvent = {
name,
Expand Down Expand Up @@ -336,6 +340,7 @@ export default function ManageEvent({ BASE_URL, event }) {
onTagAdd={handleTagAdd}
onTagRemove={handleTagRemove}
tags={tags}
inputRef={inputRef}
/>
<p className="text-sm text-primary-medium-low dark:text-primary-low-high">
Separate tags with commas.
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 @@ -76,6 +76,8 @@ export default function Profile({ BASE_URL, profile, fileExists }) {
};
});

const inputRef = useRef(null);
Copy link
Contributor

Choose a reason for hiding this comment

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

Same here


const { pronouns } = config;

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

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

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

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