better list state management

client/src/Components/Footer.tsx

@@ -6,9 +6,9 @@ export default function Footer() {
             <div className="left">
                 <a href='https://mnrva.dev'>view the source code on github</a>
             </div>
-            <div className="mid">&copy; MNRVA 2023</div>
+            <div className="mid">&copy;Min2rva 2023</div>
             <div className="right">
-                <a href='https://twitter.com/owltierdotcom'>follow owltier on twitter</a>
+                <a href='https://twitter.com/owltierdotcom'>follow owltier on twitter (or dont idc)</a>
             </div>
         </div>
     )

client/src/Components/Header.tsx

@@ -1,7 +1,7 @@
 export default function Header() {
     return (
         <div className="header">
-        <h1>owltier</h1>
+        <h1>owltier.com</h1>
         </div>
     )
 }

client/src/Components/Share.tsx

@@ -9,10 +9,14 @@ function exportImage() {
 export default function Share(props: {current?: string, listContext: ListContext}) {
     const [list] = props.listContext
     const Items = [
+        {action: save, text: 'save tier list'},
         {action: publish, text: 'publish tier list'},
         {link: 'https://twitter.com', text: 'share on twitter'},
         {action: exportImage, text: 'export as image'},
     ]
+    function save() {
+        alert('saved!')
+    }
     function publish() {
         console.log(list)
     }

client/src/Components/TeamCard.tsx

@@ -2,7 +2,6 @@ import './Css/TeamCard.css'
 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
@@ -29,7 +28,6 @@ export default function TeamCard(props: {id: string, listContext: ListContext, b
         <div className={`team-card ${teamCss}`} style={style} ref={setNodeRef} {...attributes} {...listeners}>
             <h3>{props.id}</h3>
         </div>
-        <TierBreak listContext={props.listContext} id={props.breakId} />
       </>
     )
 }

client/src/Pages/Build.tsx

@@ -4,6 +4,7 @@ import Nav from '../Components/Nav'
 import './Css/Main.css'
 import Share from '../Components/Share'
 import React from 'react'
+import ListDefaults from './Build/ListDefaults'
 
 // TODO: List state only updates when a team is moved, SO
 // we should define the initial state of the list here, and
@@ -14,35 +15,20 @@ import React from 'react'
 // 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 ListState = { 
+    format: string, 
+    na: Array<string>, 
+    apac: Array<string>, 
+    combined: Array<string>,
+    breaks: Array<number> 
+}
 export type ListContext = [list: ListState, setter: React.Dispatch<React.SetStateAction<ListState>>]
 
 let initialList = {
     format: 'split',
-    na: [
+    na: ListDefaults.na,
-     "Boston Uprising",
+    apac: ListDefaults.apac,
-     "San Francisco Shock",
+    combined: ListDefaults.apac.concat(ListDefaults.na),
-     "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)
 }

client/src/Pages/Build/APACRegion.tsx

@@ -16,8 +16,7 @@ import {
   } from '@dnd-kit/core';
 import { ListContext } from '../Build';
 import { useOutletContext } from 'react-router-dom';
-
+import TierBreak from '../../Components/TierBreak';
-// TODO fix styles
 
 export default function Combined() {
     const lc = useOutletContext<ListContext>()
@@ -30,7 +29,7 @@ export default function Combined() {
             coordinateGetter: sortableKeyboardCoordinates,
           })
         )
-    let breakId = 0
+    let breakId = -1
     return (
         <div>
            <DndContext
@@ -44,7 +43,13 @@ export default function Combined() {
                 >
                         {items.map((id) => {
                             breakId += 1
-                            return <TeamCard id={id} listContext={lc} breakId={breakId} />
+                            return (
+                                <>
+                                <TeamCard listContext={lc} id={id} breakId={breakId}/>
+                                {/* should not render the very last tier break */}
+                                {breakId != items.length-1 ? <TierBreak listContext={lc} id={breakId} /> : null}
+                                </>
+                                )
                         })}
                 </SortableContext>
             </DndContext>
@@ -64,6 +69,7 @@ export default function Combined() {
                 format: 'apac',
                 na: list.na,
                 apac: narr,
+                combined: list.combined,
                 breaks: list.breaks
             })
             return narr

client/src/Pages/Build/Combined.tsx

@@ -16,14 +16,15 @@ import {
   } from '@dnd-kit/core';
 import { ListContext } from '../Build';
 import { useOutletContext } from 'react-router-dom';
+import TierBreak from '../../Components/TierBreak';
 
-// TODO fix styles
+// TODO fix bottom margin
 
 export default function Combined() {
     const lc = useOutletContext<ListContext>()
     const [list, setList] = lc
-    const {na, apac} = list
+    const {combined} = list
-    const teams = na.concat(apac)
+    const teams = combined
     const [items, setItems] = useState(teams)
     const sensors = useSensors(
         useSensor(PointerSensor),
@@ -31,7 +32,7 @@ export default function Combined() {
             coordinateGetter: sortableKeyboardCoordinates,
           })
         )
-    let breakId = 0
+    let breakId = -1
     return (
         <div>
            <DndContext
@@ -45,7 +46,13 @@ export default function Combined() {
                 >
                         {items.map((id) => {
                             breakId++
-                            return <TeamCard id={id} listContext={lc} breakId={breakId} />
+                            return (
+                                <>
+                                <TeamCard listContext={lc} id={id} breakId={breakId}/>
+                                {/* should not render the very last tier break */}
+                                {breakId != items.length-1 ? <TierBreak listContext={lc} id={breakId} /> : null}
+                                </>
+                                )
                         })}
                 </SortableContext>
             </DndContext>
@@ -63,8 +70,9 @@ export default function Combined() {
             let narr = arrayMove(items, oldIndex, newIndex);
             setList({
                 format: 'combined',
-                na: narr,
+                na: list.na,
                 apac: list.apac,
+                combined: narr,
                 breaks: list.breaks
             })
             return narr

client/src/Pages/Build/ListDefaults.tsx

@@ -0,0 +1,27 @@
+const ListDefaults = {
+    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"
+       ],
+}
+export default ListDefaults

client/src/Pages/Build/NARegion.tsx

@@ -16,6 +16,7 @@ import {
   } from '@dnd-kit/core';
 import { ListContext } from '../Build';
 import { useOutletContext } from 'react-router-dom';
+import TierBreak from '../../Components/TierBreak';
 
 // TODO fix styles
 
@@ -30,7 +31,7 @@ export default function Combined() {
             coordinateGetter: sortableKeyboardCoordinates,
           })
         )
-    let breakId = 0
+    let breakId = -1
     return (
         <div>
            <DndContext
@@ -44,7 +45,13 @@ export default function Combined() {
                 >
                         {items.map((id) => {
                             breakId += 1
-                            return <TeamCard id={id} listContext={lc} breakId={breakId} />
+                            return (
+                                <>
+                                <TeamCard listContext={lc} id={id} breakId={breakId}/>
+                                {/* should not render the very last tier break */}
+                                {breakId != items.length-1 ? <TierBreak listContext={lc} id={breakId} /> : null}
+                                </>
+                                )
                         })}
                 </SortableContext>
             </DndContext>
@@ -64,6 +71,7 @@ export default function Combined() {
                 format: 'na',
                 na: narr,
                 apac: list.apac,
+                combined: list.combined,
                 breaks: list.breaks
             })
             return narr

client/src/Pages/Build/SplitRegion.tsx

@@ -16,6 +16,7 @@ import {
     useSensors,
   } from '@dnd-kit/core';
 import { useOutletContext } from 'react-router-dom';
+import TierBreak from '../../Components/TierBreak';
 
 export default function SplitRegion() {
     const lc = useOutletContext<ListContext>()
@@ -29,7 +30,8 @@ export default function SplitRegion() {
             coordinateGetter: sortableKeyboardCoordinates,
           })
         )
-    let breakId = 0
+    // start at -1 so that the first break is id 0
+    let breakId = -1
     return (
         <div style={{
             display: 'flex',
@@ -49,7 +51,13 @@ export default function SplitRegion() {
                     >
                         {nateams.map((id) => {
                             breakId += 1
-                            return <TeamCard listContext={lc} id={id} breakId={breakId}/>
+                            return (
+                            <>
+                            <TeamCard listContext={lc} id={id} breakId={breakId}/>
+                            {/* should not render the very last tier break */}
+                            {breakId != nateams.length-1 ? <TierBreak listContext={lc} id={breakId} /> : null}
+                            </>
+                            )
                         })}
                     </SortableContext>
                 </div>
@@ -66,7 +74,13 @@ export default function SplitRegion() {
                     >
                         {apacteams.map((id) => {
                             breakId += 1
-                            return <TeamCard listContext={lc} id={id} breakId={breakId}/>
+                            return (
+                                <>
+                                <TeamCard listContext={lc} id={id} breakId={breakId}/>
+                                {/* should not render the very last tier break */}
+                                {breakId != (nateams.length+apacteams.length)-1 ? <TierBreak listContext={lc} id={breakId} /> : null}
+                                </>
+                                )
                         })}
                     </SortableContext>
                 </div>
@@ -87,6 +101,7 @@ export default function SplitRegion() {
                 format: 'split',
                 na: narr,
                 apac: list.apac,
+                combined: list.combined,
                 breaks: list.breaks
             })
             return narr
@@ -107,6 +122,7 @@ export default function SplitRegion() {
                 format: 'split',
                 na: list.na,
                 apac: narr,
+                combined: list.combined,
                 breaks: list.breaks
             })
             return narr

client/src/Utils/Cookies.ts

@@ -0,0 +1,23 @@
+export function getCookie(name: string): string|null {
+	const nameLenPlus = (name.length + 1);
+	return document.cookie
+		.split(';')
+		.map(c => c.trim())
+		.filter(cookie => {
+			return cookie.substring(0, nameLenPlus) === `${name}=`;
+		})
+		.map(cookie => {
+			return decodeURIComponent(cookie.substring(nameLenPlus));
+		})[0] || null;
+}
+
+export function setCookie(name: string, val: string) {
+    const date = new Date();
+    const value = val;
+
+    // Set it expire in 7 days
+    date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000));
+
+    // Set it
+    document.cookie = name+"="+value+"; expires="+date.toUTCString()+"; path=/";
+}