Society of Socks

import React from 'react'
import Head from 'next/head'
import {DateTime} from 'luxon'

import Hero from '~/components/hero'
import Card from '~/components/card'

Index.getInitialProps = async ({ctx})=>{
  const {data: items} = await ctx.axios.get('/api/items')

  items.sort((a,b) => {
    // One or both has a preorder - favor item with earliest preorder availability
    if(a.preorder_availability_date && !b.preorder_availability_date)
      return -1;
    if(b.preorder_availability_date && !a.preorder_availability_date)
      return 1;

    if(a.preorder_availability_date && b.preorder_availability_date) {
      const aDate = DateTime.fromISO(a.preorder_availability_date)
      const bDate = DateTime.fromISO(b.preorder_availability_date)

      if (aDate > bDate)
        return 1

      if (bDate > aDate)
        return -1

      return 0
    }

    // One or both is in stock - favor item with the most stock
    return b.number_in_stock - a.number_in_stock;
  })
  console.log(items)

  return {items}
}

export default function Index({items}){
  return (
    <>
      <Head>
        <title>Society of Socks</title>
      </Head>
      <Hero/>
      <div className="cardContainer">
        {items.map(item=>
          <Card key={item.uuid} item={item}/>
        )}
      </div>
    </>
  )
}