diff --git a/components/common/SegmentedControl/index.scss b/components/common/SegmentedControl/index.scss index 31d49e83..5866f6ad 100644 --- a/components/common/SegmentedControl/index.scss +++ b/components/common/SegmentedControl/index.scss @@ -4,7 +4,7 @@ } .SegmentedControl { - border-radius: $unit * 3; + // border-radius: $unit * 3; display: inline-flex; padding: 3px; position: relative; diff --git a/components/party/PartyHeader/index.tsx b/components/party/PartyHeader/index.tsx index c42484ee..eca33de7 100644 --- a/components/party/PartyHeader/index.tsx +++ b/components/party/PartyHeader/index.tsx @@ -1,40 +1,27 @@ import React, { useEffect, useState, ChangeEvent, KeyboardEvent } from 'react' import Link from 'next/link' import { useRouter } from 'next/router' -import { subscribe, useSnapshot } from 'valtio' +import { useSnapshot } from 'valtio' import { useTranslation } from 'next-i18next' -import clonedeep from 'lodash.clonedeep' - -import Linkify from 'react-linkify' -import LiteYouTubeEmbed from 'react-lite-youtube-embed' import classNames from 'classnames' -import reactStringReplace from 'react-string-replace' -import Alert from '~components/common/Alert' import Button from '~components/common/Button' import CharLimitedFieldset from '~components/common/CharLimitedFieldset' import DurationInput from '~components/common/DurationInput' -import GridRepCollection from '~components/GridRepCollection' -import GridRep from '~components/GridRep' import Input from '~components/common/Input' import RaidDropdown from '~components/RaidDropdown' import Switch from '~components/common/Switch' import Tooltip from '~components/common/Tooltip' -import TextFieldset from '~components/common/TextFieldset' import Token from '~components/common/Token' import PartyDropdown from '~components/party/PartyDropdown' -import api from '~utils/api' import { accountState } from '~utils/accountState' import { appState, initialAppState } from '~utils/appState' import { formatTimeAgo } from '~utils/timeAgo' -import { youtube } from '~utils/youtube' import CheckIcon from '~public/icons/Check.svg' -import CrossIcon from '~public/icons/Cross.svg' import EditIcon from '~public/icons/Edit.svg' -import EllipsisIcon from '~public/icons/Ellipsis.svg' import RemixIcon from '~public/icons/Remix.svg' import type { DetailsObject } from 'types' @@ -58,9 +45,6 @@ const PartyHeader = (props: Props) => { const router = useRouter() const locale = router.locale || 'en' - const youtubeUrlRegex = - /(?:https:\/\/www\.youtube\.com\/watch\?v=|https:\/\/youtu\.be\/)([\w-]+)/g - const nameInput = React.createRef() const descriptionInput = React.createRef() @@ -77,11 +61,7 @@ const PartyHeader = (props: Props) => { const [turnCount, setTurnCount] = useState(undefined) const [clearTime, setClearTime] = useState(0) - const [remixes, setRemixes] = useState([]) - const [raidSlug, setRaidSlug] = useState('') - const [embeddedDescription, setEmbeddedDescription] = - useState() const readOnlyClasses = classNames({ PartyDetails: true, @@ -121,7 +101,6 @@ const PartyHeader = (props: Props) => { setFullAuto(props.party.full_auto) setChargeAttack(props.party.charge_attack) setClearTime(props.party.clear_time) - setRemixes(props.party.remixes) if (props.party.turn_count) setTurnCount(props.party.turn_count) if (props.party.button_count) setButtonCount(props.party.button_count) if (props.party.chain_count) setChainCount(props.party.chain_count) @@ -140,7 +119,6 @@ const PartyHeader = (props: Props) => { setFullAuto(party.fullAuto) setChargeAttack(party.chargeAttack) setClearTime(party.clearTime) - setRemixes(party.remixes) setTurnCount(party.turnCount) setButtonCount(party.buttonCount) setChainCount(party.chainCount) @@ -148,39 +126,6 @@ const PartyHeader = (props: Props) => { }) }, []) - useEffect(() => { - // Extract the video IDs from the description - if (appState.party.description) { - const videoIds = extractYoutubeVideoIds(appState.party.description) - - // Fetch the video titles for each ID - const fetchPromises = videoIds.map(({ id }) => fetchYoutubeData(id)) - - // Wait for all the video titles to be fetched - Promise.all(fetchPromises).then((videoTitles) => { - // Replace the video URLs in the description with LiteYoutubeEmbed elements - const newDescription = reactStringReplace( - appState.party.description, - youtubeUrlRegex, - (match, i) => ( - - ) - ) - - // Update the state with the new description - setEmbeddedDescription(newDescription) - }) - } else { - setEmbeddedDescription('') - } - }, [appState.party.description]) - function handleInputChange(event: React.ChangeEvent) { event.preventDefault() @@ -191,15 +136,6 @@ const PartyHeader = (props: Props) => { setErrors(newErrors) } - function handleTextAreaChange(event: React.ChangeEvent) { - event.preventDefault() - - const { name, value } = event.target - let newErrors = errors - - setErrors(newErrors) - } - function handleChargeAttackChanged(checked: boolean) { setChargeAttack(checked) } @@ -275,12 +211,6 @@ const PartyHeader = (props: Props) => { } } - async function fetchYoutubeData(videoId: string) { - return await youtube - .getVideoById(videoId, { maxResults: 1 }) - .then((data) => data.items[0].snippet.localized.title) - } - 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. @@ -323,79 +253,11 @@ const PartyHeader = (props: Props) => { toggleDetails() } - function handleClick() { - setAlertOpen(!alertOpen) - } - - function deleteParty() { - props.deleteCallback() - } - // Methods: Navigation function goTo(shortcode?: string) { if (shortcode) router.push(`/p/${shortcode}`) } - // Methods: Favorites - function toggleFavorite(teamId: string, favorited: boolean) { - if (favorited) unsaveFavorite(teamId) - else saveFavorite(teamId) - } - - function saveFavorite(teamId: string) { - api.saveTeam({ id: teamId }).then((response) => { - if (response.status == 201) { - const index = remixes.findIndex((p) => p.id === teamId) - const party = remixes[index] - - party.favorited = true - - let clonedParties = clonedeep(remixes) - clonedParties[index] = party - - setRemixes(clonedParties) - } - }) - } - - function unsaveFavorite(teamId: string) { - api.unsaveTeam({ id: teamId }).then((response) => { - if (response.status == 200) { - const index = remixes.findIndex((p) => p.id === teamId) - const party = remixes[index] - - party.favorited = false - - let clonedParties = clonedeep(remixes) - clonedParties[index] = party - - setRemixes(clonedParties) - } - }) - } - - function extractYoutubeVideoIds(text: string) { - // Initialize an array to store the video IDs - const videoIds = [] - - // Use the regular expression to find all the Youtube URLs in the text - let match - while ((match = youtubeUrlRegex.exec(text)) !== null) { - // Extract the video ID from the URL - const videoId = match[1] - - // Add the video ID to the array, along with the character position of the URL - videoIds.push({ - id: videoId, - url: match[0], - position: match.index, - }) - } - - // Return the array of video IDs - return videoIds - } - const userImage = (picture?: string, element?: string) => { if (picture && element) return ( @@ -471,44 +333,6 @@ const PartyHeader = (props: Props) => { ) } - function renderRemixes() { - return remixes.map((party, i) => { - return ( - - ) - }) - } - - const deleteAlert = () => { - if (party.editable) { - return ( - setAlertOpen(false)} - cancelActionText={t('modals.delete_team.buttons.cancel')} - message={t('modals.delete_team.description')} - /> - ) - } - } - const editable = () => { return (
@@ -630,30 +454,8 @@ const PartyHeader = (props: Props) => { -
-
- {router.pathname !== '/new' ? ( -
{readOnly()} {editable()} - - {deleteAlert()}
)