From b80ed99d6c760aecac875e3894a020646f3bdd71 Mon Sep 17 00:00:00 2001 From: Gabe Farrell Date: Mon, 15 May 2023 01:28:26 +0000 Subject: [PATCH] list state tracking --- client/README.md | 3 +- client/src/Components/Css/Menus.css | 4 ++ client/src/Components/Css/TeamCard.css | 2 +- client/src/Components/Menu.tsx | 21 +++++++-- client/src/Components/Nav.tsx | 1 + client/src/Components/Options.tsx | 1 + client/src/Components/Share.tsx | 27 +++++++++++ client/src/Components/TeamCard.tsx | 5 ++- client/src/Components/TierBreak.tsx | 16 ++++++- client/src/Pages/Build.tsx | 48 +++++++++++++++++++- client/src/Pages/Build/APACRegion.tsx | 32 +++++++------ client/src/Pages/Build/Combined.tsx | 54 +++++++++------------- client/src/Pages/Build/NARegion.tsx | 38 ++++++++-------- client/src/Pages/Build/SplitRegion.tsx | 62 +++++++++++++------------- client/src/Pages/Css/Main.css | 2 +- client/src/Pages/Home.tsx | 10 ++++- go.mod | 2 +- go.sum | 5 +++ 18 files changed, 223 insertions(+), 110 deletions(-) create mode 100644 client/src/Components/Share.tsx diff --git a/client/README.md b/client/README.md index 4647ece..acb06f0 100644 --- a/client/README.md +++ b/client/README.md @@ -1,2 +1,3 @@ # Dev Notes -should use this probably https://react-dnd.github.io/ \ No newline at end of file +## Tasks +https://www.notion.so/Client-Tasks-5ebfdaf9855144a78b975f960201ddfb \ No newline at end of file diff --git a/client/src/Components/Css/Menus.css b/client/src/Components/Css/Menus.css index 8c1fa2b..d7ac77b 100644 --- a/client/src/Components/Css/Menus.css +++ b/client/src/Components/Css/Menus.css @@ -3,6 +3,7 @@ width: 200px; display: flex; flex-direction: column; + margin-bottom: 35px; } .nav-right { align-items: flex-end; @@ -21,4 +22,7 @@ padding-bottom: 5px; border-bottom: 1px solid white; margin-bottom: 5px; +} +.pointer:hover { + cursor: pointer; } \ No newline at end of file diff --git a/client/src/Components/Css/TeamCard.css b/client/src/Components/Css/TeamCard.css index c4ae993..4485120 100644 --- a/client/src/Components/Css/TeamCard.css +++ b/client/src/Components/Css/TeamCard.css @@ -5,7 +5,7 @@ height: 48px; */ width: 240px; height: 36px; - margin: -2px auto -2px auto; + margin: -4px auto -4px auto; cursor: grab; background-size: contain; } diff --git a/client/src/Components/Menu.tsx b/client/src/Components/Menu.tsx index c6a804a..b090ea4 100644 --- a/client/src/Components/Menu.tsx +++ b/client/src/Components/Menu.tsx @@ -1,14 +1,29 @@ import { Link } from 'react-router-dom' interface MenuItem { - link: string + link?: string + action?: React.MouseEventHandler text: string } -export default function Menu(props: {title: string, items: Array, current: string, align: string}) { +export default function Menu(props: { + title: string, + items: Array, + current?: string, + align: string, + internal?: boolean + }) { let menuitems = [] for (let item of props.items) { - menuitems.push({item['text']}) + if (props.internal) { + menuitems.push({item['text']}) + } else { + if (item.action !== undefined) { + menuitems.push({item['text']}) + } else { + menuitems.push({item['text']}) + } + } } let align = props.align == 'left' ? 'nav-left' : 'nav-right' return ( diff --git a/client/src/Components/Nav.tsx b/client/src/Components/Nav.tsx index a1ebe38..530709b 100644 --- a/client/src/Components/Nav.tsx +++ b/client/src/Components/Nav.tsx @@ -13,6 +13,7 @@ export default function Options(props: {current: string}) { items={Items} current={props.current} align='right' + internal /> ) } \ No newline at end of file diff --git a/client/src/Components/Options.tsx b/client/src/Components/Options.tsx index facf52f..987b0a3 100644 --- a/client/src/Components/Options.tsx +++ b/client/src/Components/Options.tsx @@ -15,6 +15,7 @@ export default function Options(props: {current: string}) { items={Items} current={props.current} align='left' + internal /> ) } \ No newline at end of file diff --git a/client/src/Components/Share.tsx b/client/src/Components/Share.tsx new file mode 100644 index 0000000..6bc189b --- /dev/null +++ b/client/src/Components/Share.tsx @@ -0,0 +1,27 @@ +import Menu from './Menu' +import './Css/Menus.css' +import type { ListContext } from '../Pages/Build' + +function exportImage() { + alert('Image exported!') +} + +export default function Share(props: {current?: string, listContext: ListContext}) { + const [list] = props.listContext + const Items = [ + {action: publish, text: 'publish tier list'}, + {link: 'https://twitter.com', text: 'share on twitter'}, + {action: exportImage, text: 'export as image'}, + ] + function publish() { + console.log(list) + } + return ( + + ) +} \ No newline at end of file diff --git a/client/src/Components/TeamCard.tsx b/client/src/Components/TeamCard.tsx index c449072..f91b178 100644 --- a/client/src/Components/TeamCard.tsx +++ b/client/src/Components/TeamCard.tsx @@ -3,11 +3,12 @@ import './Css/TeamStyles.css' import { useSortable } from '@dnd-kit/sortable' import {CSS} from '@dnd-kit/utilities' import TierBreak from './TierBreak' +import { ListContext } from '../Pages/Build' // TODO figure out how to make transitions work smoothly -export default function TeamCard(props: {id: string}) { +export default function TeamCard(props: {id: string, listContext: ListContext, breakId: number}) { let teamCss = props.id.replaceAll(' ', '').toLowerCase() const { attributes, @@ -28,7 +29,7 @@ export default function TeamCard(props: {id: string}) {

{props.id}

- + ) } \ No newline at end of file diff --git a/client/src/Components/TierBreak.tsx b/client/src/Components/TierBreak.tsx index c95f057..0e979f0 100644 --- a/client/src/Components/TierBreak.tsx +++ b/client/src/Components/TierBreak.tsx @@ -1,13 +1,25 @@ import { useState } from 'react'; import './Css/TierBreak.css' +import { ListContext } from '../Pages/Build'; -export default function TierBreak() { +export default function TierBreak(props: {listContext: ListContext, id: number}) { const [isActive, setActive] = useState(false); + const [list, setList] = props.listContext return (
setActive(!isActive)} + onClick={() => { + setActive(!isActive) + let nb = list.breaks + nb[props.id] = isActive ? 0 : 1 + setList({ + format: list.format, + na: list.na, + apac: list.apac, + breaks: nb + }) + }} >
diff --git a/client/src/Pages/Build.tsx b/client/src/Pages/Build.tsx index b9b3ea6..8833a80 100644 --- a/client/src/Pages/Build.tsx +++ b/client/src/Pages/Build.tsx @@ -2,14 +2,60 @@ import { Outlet } from 'react-router-dom' import Options from '../Components/Options' import Nav from '../Components/Nav' import './Css/Main.css' +import Share from '../Components/Share' +import React from 'react' + +// TODO: List state only updates when a team is moved, SO +// we should define the initial state of the list here, and +// the build components will use that list as initial state + +// TODO: Need to track tier splits + +// TODO: Prop drilling list context all the way into TierBreak +// components feels super gross, should figure out a better way + +export type ListState = { format: string, na: Array, apac: Array, breaks: Array } +export type ListContext = [list: ListState, setter: React.Dispatch>] + +let initialList = { + format: 'split', + na: [ + "Boston Uprising", + "San Francisco Shock", + "Houston Outlaws", + "Los Angeles Gladiators", + "New York Excelsior", + "Washington Justice", + "Vegas Eternal", + "Toronto Defiant", + "Atlanta Reign", + "Florida Mayhem", + "London Spitfire", + "Los Angeles Valiant", + "Vancouver Titans" + ], + apac: [ + "Dallas Fuel", + "Seoul Infernal", + "Guangzhou Charge", + "Hangzhou Spark", + "Shanghai Dragons", + "Seoul Dynasty", + // "Chengdu Hunterss" + ], + // 20 teams + first blank spot + breaks: new Array(21).fill(0) +} export default function Build() { + const listContext = React.useState(initialList) return (
+
- +
diff --git a/client/src/Pages/Build/APACRegion.tsx b/client/src/Pages/Build/APACRegion.tsx index 154a094..6734c98 100644 --- a/client/src/Pages/Build/APACRegion.tsx +++ b/client/src/Pages/Build/APACRegion.tsx @@ -14,27 +14,23 @@ import { useSensor, useSensors, } from '@dnd-kit/core'; - -const teams = [ - "Seoul Infernal", - "Guangzhou Charge", - "Hangzhou Spark", - "Shanghai Dragons", - "Dallas Fuel", - "Seoul Dynasty", - // "Chengdu Hunters", -] +import { ListContext } from '../Build'; +import { useOutletContext } from 'react-router-dom'; // TODO fix styles export default function Combined() { - const [items, setItems] = useState(teams) + const lc = useOutletContext() + const [list, setList] = lc + const {apac} = list + const [items, setItems] = useState(apac) const sensors = useSensors( useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates, }) ) + let breakId = 0 return (
- {items.map((id) => )} + {items.map((id) => { + breakId += 1 + return + })}
@@ -60,7 +59,14 @@ export default function Combined() { const oldIndex = is.indexOf(active.id); const newIndex = is.indexOf(over.id); - return arrayMove(items, oldIndex, newIndex); + let narr = arrayMove(items, oldIndex, newIndex); + setList({ + format: 'apac', + na: list.na, + apac: narr, + breaks: list.breaks + }) + return narr }); } } diff --git a/client/src/Pages/Build/Combined.tsx b/client/src/Pages/Build/Combined.tsx index 84a16ba..003e01a 100644 --- a/client/src/Pages/Build/Combined.tsx +++ b/client/src/Pages/Build/Combined.tsx @@ -14,33 +14,16 @@ import { useSensor, useSensors, } from '@dnd-kit/core'; - -const teams = [ - "San Francisco Shock", - "Houston Outlaws", - "Boston Uprising", - "Los Angeles Gladiators", - "New York Excelsior", - "Washington Justice", - "Vegas Eternal", - "Toronto Defiant", - "Atlanta Reign", - "Florida Mayhem", - "London Spitfire", - "Los Angeles Valiant", - "Vancouver Titans", - "Seoul Infernal", - "Guangzhou Charge", - "Hangzhou Spark", - "Shanghai Dragons", - "Dallas Fuel", - "Seoul Dynasty", - // "Chengdu Hunters" -] +import { ListContext } from '../Build'; +import { useOutletContext } from 'react-router-dom'; // TODO fix styles export default function Combined() { + const lc = useOutletContext() + const [list, setList] = lc + const {na, apac} = list + const teams = na.concat(apac) const [items, setItems] = useState(teams) const sensors = useSensors( useSensor(PointerSensor), @@ -48,16 +31,9 @@ export default function Combined() { coordinateGetter: sortableKeyboardCoordinates, }) ) + let breakId = 0 return ( -
+
- {items.map((id) => )} + {items.map((id) => { + breakId++ + return + })}
@@ -81,7 +60,14 @@ export default function Combined() { const oldIndex = is.indexOf(active.id); const newIndex = is.indexOf(over.id); - return arrayMove(items, oldIndex, newIndex); + let narr = arrayMove(items, oldIndex, newIndex); + setList({ + format: 'combined', + na: narr, + apac: list.apac, + breaks: list.breaks + }) + return narr }); } } diff --git a/client/src/Pages/Build/NARegion.tsx b/client/src/Pages/Build/NARegion.tsx index 58ec769..f9c8bc2 100644 --- a/client/src/Pages/Build/NARegion.tsx +++ b/client/src/Pages/Build/NARegion.tsx @@ -14,33 +14,23 @@ import { useSensor, useSensors, } from '@dnd-kit/core'; - -const teams = [ - "San Francisco Shock", - "Houston Outlaws", - "Boston Uprising", - "Los Angeles Gladiators", - "New York Excelsior", - "Washington Justice", - "Vegas Eternal", - "Toronto Defiant", - "Atlanta Reign", - "Florida Mayhem", - "London Spitfire", - "Los Angeles Valiant", - "Vancouver Titans", -] +import { ListContext } from '../Build'; +import { useOutletContext } from 'react-router-dom'; // TODO fix styles export default function Combined() { - const [items, setItems] = useState(teams) + const lc = useOutletContext() + const [list, setList] = lc + const {na} = list + const [items, setItems] = useState(na) const sensors = useSensors( useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates, }) ) + let breakId = 0 return (
- {items.map((id) => )} + {items.map((id) => { + breakId += 1 + return + })}
@@ -66,7 +59,14 @@ export default function Combined() { const oldIndex = is.indexOf(active.id); const newIndex = is.indexOf(over.id); - return arrayMove(items, oldIndex, newIndex); + let narr = arrayMove(items, oldIndex, newIndex); + setList({ + format: 'na', + na: narr, + apac: list.apac, + breaks: list.breaks + }) + return narr }); } } diff --git a/client/src/Pages/Build/SplitRegion.tsx b/client/src/Pages/Build/SplitRegion.tsx index 1a1f0e5..187539c 100644 --- a/client/src/Pages/Build/SplitRegion.tsx +++ b/client/src/Pages/Build/SplitRegion.tsx @@ -1,5 +1,6 @@ -import { useState } from 'react' +import { useState, } from 'react' import TeamCard from '../../Components/TeamCard' +import type { ListContext } from '../Build' import { arrayMove, SortableContext, @@ -14,34 +15,12 @@ import { useSensor, useSensors, } from '@dnd-kit/core'; - -const na = [ - "San Francisco Shock", - "Houston Outlaws", - "Boston Uprising", - "Los Angeles Gladiators", - "New York Excelsior", - "Washington Justice", - "Vegas Eternal", - "Toronto Defiant", - "Atlanta Reign", - "Florida Mayhem", - "London Spitfire", - "Los Angeles Valiant", - "Vancouver Titans" -] - -const apac = [ - "Seoul Infernal", - "Guangzhou Charge", - "Hangzhou Spark", - "Shanghai Dragons", - "Dallas Fuel", - "Seoul Dynasty", - // "Chengdu Hunters", -] +import { useOutletContext } from 'react-router-dom'; export default function SplitRegion() { + const lc = useOutletContext() + const [list, setList] = lc + const {na, apac} = list const [nateams, setNA] = useState(na) const [apacteams, setAPAC] = useState(apac) const sensors = useSensors( @@ -50,6 +29,7 @@ export default function SplitRegion() { coordinateGetter: sortableKeyboardCoordinates, }) ) + let breakId = 0 return (
- {nateams.map((id) => )} + {nateams.map((id) => { + breakId += 1 + return + })}
@@ -81,7 +64,10 @@ export default function SplitRegion() { items={apacteams} strategy={verticalListSortingStrategy} > - {apacteams.map((id) => )} + {apacteams.map((id) => { + breakId += 1 + return + })}
@@ -96,7 +82,14 @@ export default function SplitRegion() { const oldIndex = items.indexOf(active.id); const newIndex = items.indexOf(over.id); - return arrayMove(nateams, oldIndex, newIndex); + let narr = arrayMove(nateams, oldIndex, newIndex); + setList({ + format: 'split', + na: narr, + apac: list.apac, + breaks: list.breaks + }) + return narr }); } } @@ -109,7 +102,14 @@ export default function SplitRegion() { const oldIndex = items.indexOf(active.id); const newIndex = items.indexOf(over.id); - return arrayMove(apacteams, oldIndex, newIndex); + let narr = arrayMove(apacteams, oldIndex, newIndex); + setList({ + format: 'split', + na: list.na, + apac: narr, + breaks: list.breaks + }) + return narr }); } } diff --git a/client/src/Pages/Css/Main.css b/client/src/Pages/Css/Main.css index 60bd6f6..d6cf36c 100644 --- a/client/src/Pages/Css/Main.css +++ b/client/src/Pages/Css/Main.css @@ -1,5 +1,5 @@ .page-content { - width: 1060px; + width: 920px; display: flex; justify-content: space-between; } diff --git a/client/src/Pages/Home.tsx b/client/src/Pages/Home.tsx index 1ec91d4..da58a6a 100644 --- a/client/src/Pages/Home.tsx +++ b/client/src/Pages/Home.tsx @@ -1,8 +1,16 @@ -import { Outlet } from 'react-router-dom' +import { Outlet, useLocation, useNavigate } from 'react-router-dom' import Header from '../Components/Header' import Footer from '../Components/Footer' +import { useEffect } from 'react' export default function Home() { + const navigate = useNavigate() + const location = useLocation() + useEffect(() => { + if (location.pathname == '/') { + navigate('/build/split-region') + } + }) return ( <>
diff --git a/go.mod b/go.mod index f0ea151..bcbb953 100644 --- a/go.mod +++ b/go.mod @@ -4,6 +4,7 @@ go 1.20 require ( github.com/aws/aws-sdk-go-v2 v1.18.0 + github.com/aws/aws-sdk-go-v2/credentials v1.13.23 github.com/go-chi/chi/v5 v5.0.8 github.com/golang-jwt/jwt/v5 v5.0.0 github.com/google/uuid v1.3.0 @@ -14,7 +15,6 @@ require ( ) require ( - github.com/aws/aws-sdk-go-v2/credentials v1.13.23 // indirect github.com/aws/aws-sdk-go-v2/feature/ec2/imds v1.13.3 // indirect github.com/aws/aws-sdk-go-v2/internal/configsources v1.1.33 // indirect github.com/aws/aws-sdk-go-v2/internal/endpoints/v2 v2.4.27 // indirect diff --git a/go.sum b/go.sum index 7739815..b4d6a2a 100644 --- a/go.sum +++ b/go.sum @@ -32,19 +32,23 @@ github.com/aws/aws-sdk-go-v2/service/sts v1.19.0 h1:2DQLAKDteoEDI8zpCzqBMaZlJuoE github.com/aws/aws-sdk-go-v2/service/sts v1.19.0/go.mod h1:BgQOMsg8av8jset59jelyPW7NoZcZXLVpDsXunGDrk8= github.com/aws/smithy-go v1.13.5 h1:hgz0X/DX0dGqTYpGALqXJoRKRj5oQ7150i5FdTePzO8= github.com/aws/smithy-go v1.13.5/go.mod h1:Tg+OJXh4MB2R/uN61Ko2f6hTZwB/ZYGOtib8J3gBHzA= +github.com/davecgh/go-spew v1.1.0 h1:ZDRjVQ15GmhC3fiQ8ni8+OwkZQO4DARzQgrnXU1Liz8= github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38= github.com/go-chi/chi/v5 v5.0.8 h1:lD+NLqFcAi1ovnVZpsnObHGW4xb4J8lNmoYVfECH1Y0= github.com/go-chi/chi/v5 v5.0.8/go.mod h1:DslCQbL2OYiznFReuXYUmQ2hGd1aDpCnlMNITLSKoi8= github.com/golang-jwt/jwt/v5 v5.0.0 h1:1n1XNM9hk7O9mnQoNBGolZvzebBQ7p93ULHRc28XJUE= github.com/golang-jwt/jwt/v5 v5.0.0/go.mod h1:pqrtFR0X4osieyHYxtmOUWsAWrfe1Q5UVIyoH402zdk= +github.com/google/go-cmp v0.5.8 h1:e6P7q2lk1O+qJJb4BtCQXlK8vWEO8V1ZeuEdJNOqZyg= github.com/google/go-cmp v0.5.8/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY= github.com/google/uuid v1.3.0 h1:t6JiXgmwXMjEs8VusXIJk2BXHsn+wx8BZdTaoZ5fu7I= github.com/google/uuid v1.3.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo= github.com/jmespath/go-jmespath v0.4.0 h1:BEgLn5cpjn8UN1mAw4NjwDrS35OdebyEtFe+9YPoQUg= github.com/jmespath/go-jmespath v0.4.0/go.mod h1:T8mJZnbsbmF+m6zOOFylbeCJqk5+pHWvzYPziyZiYoo= +github.com/jmespath/go-jmespath/internal/testify v1.5.1 h1:shLQSRRSCCPj3f2gpwzGwWFoC7ycTf1rcQZHOlsJ6N8= github.com/jmespath/go-jmespath/internal/testify v1.5.1/go.mod h1:L3OGu8Wl2/fWfCI6z80xFu9LTZmf1ZRjMHUOPmWr69U= github.com/joho/godotenv v1.5.1 h1:7eLL/+HRGLY0ldzfGMeQkb7vMd0as4CfYvUVzLqw0N0= github.com/joho/godotenv v1.5.1/go.mod h1:f4LDr5Voq0i2e/R5DDNOoa2zzDfwtkZa6DnEwAbqwq4= +github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM= github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4= github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME= github.com/wagslane/go-password-validator v0.3.0 h1:vfxOPzGHkz5S146HDpavl0cw1DSVP061Ry2PX0/ON6I= @@ -54,4 +58,5 @@ golang.org/x/crypto v0.8.0/go.mod h1:mRqEX+O9/h5TFCrQhkgjo2yKi0yYA+9ecGkdQoHrywE golang.org/x/exp v0.0.0-20230425010034-47ecfdc1ba53 h1:5llv2sWeaMSnA3w2kS57ouQQ4pudlXrR0dCgw51QK9o= golang.org/x/exp v0.0.0-20230425010034-47ecfdc1ba53/go.mod h1:V1LtkGg67GoY2N1AnLN78QLrzxkLyJw7RJb1gzOOz9w= gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0= +gopkg.in/yaml.v2 v2.2.8 h1:obN1ZagJSUGI0Ek/LBmuj4SNLPfIny3KsKFopxRdj10= gopkg.in/yaml.v2 v2.2.8/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=