list state tracking

client/README.md

@@ -1,2 +1,3 @@
 # Dev Notes
-should use this probably https://react-dnd.github.io/
+## Tasks
+https://www.notion.so/Client-Tasks-5ebfdaf9855144a78b975f960201ddfb

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;
 }

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;
 }

client/src/Components/Menu.tsx

@@ -1,14 +1,29 @@
 import { Link } from 'react-router-dom'
 
 interface MenuItem {
-    link: string
+    link?: string
+    action?: React.MouseEventHandler<HTMLAnchorElement>
     text: string
 }
 
-export default function Menu(props: {title: string, items: Array<MenuItem>, current: string, align: string}) {
+export default function Menu(props: {
+            title: string, 
+            items: Array<MenuItem>, 
+            current?: string, 
+            align: string, 
+            internal?: boolean
+        }) {
     let menuitems = []
     for (let item of props.items) {
-        menuitems.push(<Link to={`${item['link']}`} className='nav-link'>{item['text']}</Link>)
+        if (props.internal) {
+            menuitems.push(<Link to={`${item['link']}`} className='nav-link'>{item['text']}</Link>)
+        } else {
+            if (item.action !== undefined) {
+                menuitems.push(<a onClick={item.action} className='nav-link pointer'>{item['text']}</a>)
+            } else {
+                menuitems.push(<a href={`${item['link']}`} className='nav-link'>{item['text']}</a>)
+            }
+        }
     }
     let align = props.align == 'left' ? 'nav-left' : 'nav-right'
     return (

client/src/Components/Nav.tsx

@@ -13,6 +13,7 @@ export default function Options(props: {current: string}) {
             items={Items} 
             current={props.current} 
             align='right'
+            internal
         />
     )
 }

client/src/Components/Options.tsx

@@ -15,6 +15,7 @@ export default function Options(props: {current: string}) {
             items={Items} 
             current={props.current} 
             align='left'
+            internal
         />
     )
 }

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 (
+        <Menu 
+            title='Share' 
+            items={Items} 
+            current={props.current} 
+            align='left'
+        />
+    )
+}

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}) {
         <div className={`team-card ${teamCss}`} style={style} ref={setNodeRef} {...attributes} {...listeners}>
             <h3>{props.id}</h3>
         </div>
-        <TierBreak />
+        <TierBreak listContext={props.listContext} id={props.breakId} />
       </>
     )
 }

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 (
         <div className='tier-break'>
             <div 
                 className={'triangle-right' + (isActive ? ' active' : '')}
-                onClick={() => 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
+                    })
+                }}
             >
             </div>
             <hr className={'break-line' + (isActive ? ' active' : '')}/>

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<string>, apac: Array<string>, breaks: Array<number> }
+export type ListContext = [list: ListState, setter: React.Dispatch<React.SetStateAction<ListState>>]
+
+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<ListState>(initialList)
     return (
         <div className="page-content">
             <div className="left-menus">
                 <Options current='split-region' />
+                <Share listContext={listContext} />
             </div>
-            <Outlet />
+            <Outlet context={listContext}/>
             <div className="right-menus">
                 <Nav current='build' />
             </div>

client/src/Pages/Build/APACRegion.tsx

@@ -14,27 +14,23 @@ import {
     useSensor,
     useSensors,
   } from '@dnd-kit/core';
-
+import { ListContext } from '../Build';
-const teams = [
+import { useOutletContext } from 'react-router-dom';
-    "Seoul Infernal",
-    "Guangzhou Charge",
-    "Hangzhou Spark",
-    "Shanghai Dragons",
-    "Dallas Fuel",
-    "Seoul Dynasty",
-    // "Chengdu Hunters",
-]
 
 // TODO fix styles
 
 export default function Combined() {
-    const [items, setItems] = useState(teams)
+    const lc = useOutletContext<ListContext>()
+    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 (
         <div>
            <DndContext
@@ -46,7 +42,10 @@ export default function Combined() {
                     items={items}
                     strategy={verticalListSortingStrategy}
                 >
-                        {items.map((id) => <TeamCard id={id} />)}
+                        {items.map((id) => {
+                            breakId += 1
+                            return <TeamCard id={id} listContext={lc} breakId={breakId} />
+                        })}
                 </SortableContext>
             </DndContext>
         </div>
@@ -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
           });
         }
     }

client/src/Pages/Build/Combined.tsx

@@ -14,33 +14,16 @@ import {
     useSensor,
     useSensors,
   } from '@dnd-kit/core';
-
+import { ListContext } from '../Build';
-const teams = [
+import { useOutletContext } from 'react-router-dom';
-    "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"
-]
 
 // TODO fix styles
 
 export default function Combined() {
+    const lc = useOutletContext<ListContext>()
+    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 (
-        <div 
+        <div>
-            // style={{
-            // display: 'flex',
-            // flexDirection: 'column',
-            // flexWrap: 'wrap',
-            // height: '600px',
-            // width: '700px',
-            // }}
-        >
            <DndContext
                 sensors={sensors}
                 collisionDetection={closestCenter}
@@ -67,7 +43,10 @@ export default function Combined() {
                     items={items}
                     strategy={verticalListSortingStrategy}
                 >
-                        {items.map((id) => <TeamCard id={id} />)}
+                        {items.map((id) => {
+                            breakId++
+                            return <TeamCard id={id} listContext={lc} breakId={breakId} />
+                        })}
                 </SortableContext>
             </DndContext>
         </div>
@@ -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
           });
         }
     }

client/src/Pages/Build/NARegion.tsx

@@ -14,33 +14,23 @@ import {
     useSensor,
     useSensors,
   } from '@dnd-kit/core';
-
+import { ListContext } from '../Build';
-const teams = [
+import { useOutletContext } from 'react-router-dom';
-    "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",
-]
 
 // TODO fix styles
 
 export default function Combined() {
-    const [items, setItems] = useState(teams)
+    const lc = useOutletContext<ListContext>()
+    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 (
         <div>
            <DndContext
@@ -52,7 +42,10 @@ export default function Combined() {
                     items={items}
                     strategy={verticalListSortingStrategy}
                 >
-                        {items.map((id) => <TeamCard id={id} />)}
+                        {items.map((id) => {
+                            breakId += 1
+                            return <TeamCard id={id} listContext={lc} breakId={breakId} />
+                        })}
                 </SortableContext>
             </DndContext>
         </div>
@@ -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
           });
         }
     }

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';
-
+import { useOutletContext } from 'react-router-dom';
-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",
-]
 
 export default function SplitRegion() {
+    const lc = useOutletContext<ListContext>()
+    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 (
         <div style={{
             display: 'flex',
@@ -67,7 +47,10 @@ export default function SplitRegion() {
                         items={nateams}
                         strategy={verticalListSortingStrategy}
                     >
-                            {nateams.map((id) => <TeamCard id={id} />)}
+                        {nateams.map((id) => {
+                            breakId += 1
+                            return <TeamCard listContext={lc} id={id} breakId={breakId}/>
+                        })}
                     </SortableContext>
                 </div>
             </DndContext>
@@ -81,7 +64,10 @@ export default function SplitRegion() {
                         items={apacteams}
                         strategy={verticalListSortingStrategy}
                     >
-                            {apacteams.map((id) => <TeamCard id={id} />)}
+                        {apacteams.map((id) => {
+                            breakId += 1
+                            return <TeamCard listContext={lc} id={id} breakId={breakId}/>
+                        })}
                     </SortableContext>
                 </div>
             </DndContext>
@@ -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
           });
         }
     }

client/src/Pages/Css/Main.css

@@ -1,5 +1,5 @@
 .page-content {
-    width: 1060px;
+    width: 920px;
     display: flex;
     justify-content: space-between;
 }

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 (
         <>
         <div className='full-container'>

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

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=