From bbe909d52ee016da7cfba72e692091b1bdd78900 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sun, 18 Jun 2023 00:06:35 -0700 Subject: [PATCH] Remove edit functionality --- components/party/PartyHeader/index.tsx | 316 ++----------------------- 1 file changed, 14 insertions(+), 302 deletions(-) diff --git a/components/party/PartyHeader/index.tsx b/components/party/PartyHeader/index.tsx index 33f806e0..269f1d7a 100644 --- a/components/party/PartyHeader/index.tsx +++ b/components/party/PartyHeader/index.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState, ChangeEvent, KeyboardEvent } from 'react' +import React, { useEffect, useState } from 'react' import Link from 'next/link' import { useRouter } from 'next/router' import { useSnapshot } from 'valtio' @@ -6,21 +6,16 @@ import { useTranslation } from 'next-i18next' import classNames from 'classnames' import Button from '~components/common/Button' -import CharLimitedFieldset from '~components/common/CharLimitedFieldset' -import DurationInput from '~components/common/DurationInput' -import Input from '~components/common/Input' -import RaidCombobox from '~components/raids/RaidCombobox' -import Switch from '~components/common/Switch' import Tooltip from '~components/common/Tooltip' import Token from '~components/common/Token' +import EditPartyModal from '~components/party/EditPartyModal' import PartyDropdown from '~components/party/PartyDropdown' import { accountState } from '~utils/accountState' import { appState, initialAppState } from '~utils/appState' import { formatTimeAgo } from '~utils/timeAgo' -import CheckIcon from '~public/icons/Check.svg' import EditIcon from '~public/icons/Edit.svg' import RemixIcon from '~public/icons/Remix.svg' import SaveIcon from '~public/icons/Save.svg' @@ -41,7 +36,7 @@ interface Props { } const PartyHeader = (props: Props) => { - const { party, raids } = useSnapshot(appState) + const { party } = useSnapshot(appState) const { t } = useTranslation('common') const router = useRouter() @@ -49,12 +44,7 @@ const PartyHeader = (props: Props) => { const { party: partySnapshot } = useSnapshot(appState) - const nameInput = React.createRef() - const descriptionInput = React.createRef() - - const [open, setOpen] = useState(false) const [name, setName] = useState('') - const [alertOpen, setAlertOpen] = useState(false) const [chargeAttack, setChargeAttack] = useState(true) const [fullAuto, setFullAuto] = useState(false) @@ -65,18 +55,9 @@ const PartyHeader = (props: Props) => { const [turnCount, setTurnCount] = useState(undefined) const [clearTime, setClearTime] = useState(0) - const [raidSlug, setRaidSlug] = useState('') - - const readOnlyClasses = classNames({ + const classes = classNames({ PartyDetails: true, ReadOnly: true, - Visible: !open, - }) - - const editableClasses = classNames({ - PartyDetails: true, - Editable: true, - Visible: open, }) const userClass = classNames({ @@ -93,11 +74,6 @@ const PartyHeader = (props: Props) => { light: party && party.element == 6, }) - const [errors, setErrors] = useState<{ [key: string]: string }>({ - name: '', - description: '', - }) - useEffect(() => { if (props.party) { setName(props.party.name) @@ -130,112 +106,6 @@ const PartyHeader = (props: Props) => { }) }, []) - function handleInputChange(event: React.ChangeEvent) { - event.preventDefault() - - const { name, value } = event.target - setName(value) - - let newErrors = errors - setErrors(newErrors) - } - - function handleChargeAttackChanged(checked: boolean) { - setChargeAttack(checked) - } - - function handleFullAutoChanged(checked: boolean) { - setFullAuto(checked) - } - - function handleAutoGuardChanged(checked: boolean) { - setAutoGuard(checked) - } - - function handleClearTimeInput(value: number) { - if (!isNaN(value)) setClearTime(value) - } - - function handleTurnCountInput(event: React.ChangeEvent) { - const value = parseInt(event.currentTarget.value) - if (!isNaN(value)) setTurnCount(value) - } - - function handleButtonCountInput(event: ChangeEvent) { - const value = parseInt(event.currentTarget.value) - if (!isNaN(value)) setButtonCount(value) - } - - function handleChainCountInput(event: ChangeEvent) { - const value = parseInt(event.currentTarget.value) - if (!isNaN(value)) setChainCount(value) - } - - function handleInputKeyDown(event: KeyboardEvent) { - if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) { - // Allow the key to be processed normally - return - } - - // Get the current value - const input = event.currentTarget - let value = event.currentTarget.value - - // Check if the key that was pressed is the backspace key - if (event.key === 'Backspace') { - // Remove the colon if the value is "12:" - if (value.length === 4) { - value = value.slice(0, -1) - } - - // Allow the backspace key to be processed normally - input.value = value - return - } - - // Check if the key that was pressed is the tab key - if (event.key === 'Tab') { - // Allow the tab key to be processed normally - return - } - - // Get the character that was entered and check if it is numeric - const char = parseInt(event.key) - const isNumber = !isNaN(char) - - // Check if the character should be accepted or rejected - const numberValue = parseInt(`${value}${char}`) - const minValue = parseInt(event.currentTarget.min) - const maxValue = parseInt(event.currentTarget.max) - - if (!isNumber || numberValue < minValue || numberValue > maxValue) { - // Reject the character if it isn't a number, - // or if it exceeds the min and max values - event.preventDefault() - } - } - - function toggleDetails() { - // Enabling this code will make live updates not work, - // but I'm not sure why it's here, so we're not going to remove it. - - // if (name !== party.name) { - // const resetName = party.name ? party.name : '' - // setName(resetName) - // if (nameInput.current) nameInput.current.value = resetName - // } - setOpen(!open) - } - - function receiveRaid(raid?: Raid) { - if (raid) setRaidSlug(raid?.slug) - } - - function switchValue(value: boolean) { - if (value) return 'on' - else return 'off' - } - // Actions: Favorites function toggleFavorite() { if (appState.party.favorited) unsaveFavorite() @@ -258,28 +128,6 @@ const PartyHeader = (props: Props) => { else console.error('Failed to unsave team: No party ID') } - function updateDetails(event: React.MouseEvent) { - const descriptionValue = descriptionInput.current?.value - const allRaids = appState.raidGroups.flatMap((group) => group.raids) - const raid = allRaids.find((raid) => raid.slug === raidSlug) - - const details: DetailsObject = { - fullAuto: fullAuto, - autoGuard: autoGuard, - chargeAttack: chargeAttack, - clearTime: clearTime, - buttonCount: buttonCount, - turnCount: turnCount, - chainCount: chainCount, - name: name, - description: descriptionValue, - raid: raid, - } - - props.updateCallback(details) - toggleDetails() - } - // Methods: Navigation function goTo(shortcode?: string) { if (shortcode) router.push(`/p/${shortcode}`) @@ -487,145 +335,6 @@ const PartyHeader = (props: Props) => { ) } - const editable = () => { - return ( -
- - -
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
-
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
- -
-
-
-
-
- ) - } - - const readOnly = () => { - return
{renderTokens()}
- } return ( <> @@ -666,11 +375,15 @@ const PartyHeader = (props: Props) => { {party.editable ? (
-
)} - {readOnly()} - {editable()} +
{renderTokens()}
)