{"version":3,"sources":["components/Day.js","components/Week.js","components/Planner.js","App.js","index.js"],"names":["useStyles","makeStyles","theme","root","maxWidth","media","height","task","fontSize","color","palette","grey","DayStyled","styled","div","CheckboxStyled","Checkbox","TaskTextFieldStyled","TextField","props","complete","AddIconStyled","Add","Day","date","tasks","autoFocus","onTaskAdd","onTaskToggle","onTaskUpdate","onTaskDelete","useState","newTask","setNewTask","imgUrl","setImgUrl","classes","useEffect","fetch","getDate","then","response","url","handleTaskKeyPress","id","e","value","target","key","focusable","document","querySelectorAll","found","element","focus","console","log","preventDefault","addNewTask","name","Card","className","CardMedia","image","title","format","CardContent","Typography","variant","component","Box","display","alignItems","mb","isToday","isPast","map","p","size","onChange","checked","flexGrow","disabled","fullWidth","autoComplete","multiline","defaultValue","InputProps","disableUnderline","inputProps","onBlur","onKeyPress","endAdornment","InputAdornment","position","WeekStyled","Week","dates","index","filter","t","isEqual","Planner","setTasks","startOfWeek","Date","weekStartsOn","firstDate","totalDays","Array","u","i","addDays","gutterBottom","length","concat","newTasks","Grid","container","justify","item","Button","AppStyled","PaperStyled","Paper","App","exact","path","baseUrl","getElementsByTagName","getAttribute","rootElement","getElementById","ReactDOM","render","Fragment","CssBaseline","basename"],"mappings":"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","file":"static/js/main.dcc3488c.chunk.js","sourcesContent":["import React, { useState, useEffect } from 'react'\r\nimport styled from 'styled-components'\r\nimport { format, isToday, isPast } from 'date-fns'\r\nimport { Input, TextField, Checkbox, Grid } from '@material-ui/core';\r\nimport InputAdornment from '@material-ui/core/InputAdornment'\r\nimport Add from '@material-ui/icons/Add'\r\n\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport Card from '@material-ui/core/Card';\r\nimport CardContent from '@material-ui/core/CardContent';\r\nimport CardMedia from '@material-ui/core/CardMedia';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport Box from '@material-ui/core/Box';\r\nimport TodayIcon from '@material-ui/icons/Today';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n  root: {\r\n    maxWidth: 345,\r\n  },\r\n  media: {\r\n    height: 140,\r\n  },\r\n  task: {\r\n    '& > *': {\r\n      fontSize: '14px',\r\n      color: theme.palette.grey[600],      \r\n    },\r\n  },\r\n}));\r\n\r\nconst DayStyled = styled.div`\r\n  background-color: white;\r\n  min-height: 200px;\r\n  font-weight: 500;\r\n  padding: .5rem;\r\n  &:hover { transform: scale(1.01);\r\n`\r\n\r\nconst CheckboxStyled = styled(Checkbox)`\r\n  margin-left: -16px;\r\n  margin-top: -8px;\r\n  margin-right: -16px;\r\n  margin-bottom: -8px;\r\n`\r\n\r\nconst TaskTextFieldStyled = styled(TextField)`\r\n  & > * {   \r\n    ${props => `\r\n      text-decoration: ${props.complete ? 'line-through' : 'none'};\r\n    `}\r\n    font-size: 14px;\r\n  }  \r\n`\r\n\r\nconst AddIconStyled = styled(Add)`\r\n  cursor: pointer;\r\n`\r\n\r\nexport function Day({date, tasks, autoFocus, onTaskAdd, onTaskToggle, onTaskUpdate, onTaskDelete}) {\r\n  const [newTask, setNewTask] = useState('')\r\n  const [imgUrl, setImgUrl] = useState()\r\n  const classes = useStyles();\r\n  \r\n  useEffect(() => {\r\n    // Based on this article by Mike Heavers\r\n    // https://medium.com/quick-code/how-to-quickly-generate-a-random-gallery-of-images-from-an-unsplash-collection-in-javascript-4ddb2a6a4faf\r\n    fetch(`https://source.unsplash.com/collection/475977/480x480/?sig=${date.getDate()}`).then((response)=> {    \r\n      setImgUrl(response.url)\r\n    }) \r\n  }, [date])\r\n\r\n  const handleTaskBlur = id => e => {\r\n    const value = e.target.value\r\n\r\n    if (!value) {\r\n      onTaskDelete(id)\r\n    }\r\n    else {\r\n      onTaskUpdate(value, id)\r\n    }\r\n  }\r\n\r\n  const handleTaskKeyPress = id => e => {\r\n    const value = e.target.value\r\n\r\n    if (e.key === 'Enter') {\r\n      if (!value) {\r\n        onTaskDelete(id)\r\n      }\r\n      else {\r\n        onTaskUpdate(value, id)\r\n      }\r\n      let focusable = document.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])')\r\n      let found = false\r\n      for (const element of focusable) {\r\n        if (found) {\r\n          element.focus()\r\n          console.log(element)\r\n          break\r\n        }\r\n        if (e.target === element)\r\n          found = true;\r\n      }\r\n\r\n      e.preventDefault()\r\n      return false\r\n    }\r\n  }\r\n\r\n  const handleNewTaskBlur = e => {\r\n    addNewTask(e.target.value)\r\n  }\r\n  \r\n  const handleNewTaskKeyPress = e => {\r\n    if (e.key === 'Enter') {\r\n      if (!e.target.value) {\r\n        // todo: advance to next focusable item.\r\n      }\r\n      else {\r\n        addNewTask(e.target.value)\r\n      }\r\n      e.preventDefault()\r\n      return false\r\n    }\r\n  }\r\n  \r\n  const addNewTask = name => {\r\n    if (!!name) {\r\n      onTaskAdd(name, date)\r\n      setNewTask('')\r\n    }\r\n  }\r\n\r\n  return (\r\n    <DayStyled>\r\n      \r\n      {!!imgUrl &&        \r\n        <Card className={classes.root}>          \r\n          <CardMedia\r\n            className={classes.media}\r\n            image={imgUrl}\r\n            title={format(date, 'iiii')}\r\n          />\r\n          <CardContent>\r\n            <Typography variant=\"h5\" component=\"h2\">\r\n              {format(date, 'iiii')}\r\n            </Typography>\r\n            <Box color={'grey.500'} display={'flex'} alignItems={'center'} mb={1}>\r\n              <TodayIcon color={isToday(date) ? 'primary' : isPast(date) ? 'action' : 'disabled'}/>\r\n              &nbsp;\r\n              {format(date, 'M/dd')}\r\n            </Box>\r\n            \r\n            {tasks.map(task => {\r\n              return (\r\n                <Box display=\"flex\" key={task.id}>\r\n                  <Box p={1}>\r\n                    <CheckboxStyled \r\n                      color='primary' \r\n                      size=\"small\"\r\n                      value={task.complete}\r\n                      onChange={e=>onTaskToggle(e.target.checked, task.id)} \r\n                    />\r\n                  </Box>\r\n                  <Box p={1} flexGrow={1}>\r\n                    <TaskTextFieldStyled\r\n                      className={classes.task}\r\n                      complete={task.complete}\r\n                      disabled={task.complete}\r\n                      fullWidth \r\n                      autoComplete='false' \r\n                      size=\"small\"\r\n                      multiline  \r\n                      defaultValue={task.name}                      \r\n                      InputProps={{\r\n                        disableUnderline: true,\r\n                        \r\n                      }}\r\n                      inputProps={{\r\n                        onBlur: handleTaskBlur(task.id),\r\n                        onKeyPress: handleTaskKeyPress(task.id)\r\n                      }}                \r\n                    />\r\n                  </Box>\r\n                </Box>\r\n              )\r\n            })}\r\n            \r\n            <TextField              \r\n              className={classes.task}\r\n              autoComplete='false'\r\n              autoFocus={autoFocus}\r\n              size='small'\r\n              fullWidth\r\n              variant=\"outlined\"\r\n              multiline\r\n              InputProps={{\r\n                endAdornment: (\r\n                  <InputAdornment position=\"end\">\r\n                    <AddIconStyled />\r\n                  </InputAdornment>\r\n                ),\r\n              }}\r\n              value={newTask}\r\n              onChange={e=>setNewTask(e.target.value)}\r\n              inputProps={{\r\n                onBlur: handleNewTaskBlur,\r\n                onKeyPress: handleNewTaskKeyPress\r\n              }}        \r\n            />            \r\n          </CardContent>          \r\n        </Card>\r\n      }\r\n    </DayStyled>\r\n  )\r\n}","import React from 'react'\r\nimport styled from 'styled-components'\r\nimport { isEqual } from 'date-fns'\r\nimport { Day } from './Day'\r\n\r\nconst WeekStyled = styled.div`\r\n  display: grid;\r\n  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\r\n  grid-gap: 2px;\r\n  /*background-color: #CCCCCC;\r\n  border: 2px solid #CCCCCC;*/\r\n`\r\n\r\nexport function Week({tasks, dates, onTaskAdd, onTaskToggle, onTaskUpdate, onTaskDelete}) {\r\n  return (\r\n    <WeekStyled>\r\n      {dates.map((date, index) => (        \r\n        <Day \r\n          key={date}\r\n          date={date}\r\n          tasks={tasks.filter(t=>isEqual(t.date, date))} \r\n          autoFocus={index===0}\r\n          onTaskAdd={onTaskAdd} \r\n          onTaskToggle={onTaskToggle} \r\n          onTaskUpdate={onTaskUpdate}\r\n          onTaskDelete={onTaskDelete}\r\n        />        \r\n      ))}      \r\n    </WeekStyled>\r\n  )\r\n}","import React, { useState } from 'react'\r\nimport Typography from '@material-ui/core/Typography';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport Button from '@material-ui/core/Button';\r\nimport { startOfWeek, addDays } from 'date-fns'\r\nimport { Week } from './Week'\r\n\r\nexport function Planner() {\r\n  const [tasks, setTasks] = useState([])\r\n  const [firstDate, setFirstDate] = useState(startOfWeek(new Date(), { weekStartsOn: 1 })) // First date to display.\r\n  const [totalDays, setTotalDays] = useState(5) // Total days to display.\r\n  const [dates] = useState([...Array(totalDays)].map((u, i) => addDays(firstDate, i)))\r\n\r\n  const handleTaskAdd = (name, date) => {\r\n    let task = {name, date}\r\n    let newTask = {...task, id: tasks.length + 1}\r\n    setTasks(tasks.concat(newTask))\r\n  }\r\n\r\n  const handleTaskToggle = (complete, id) => {\r\n    let newTasks = tasks.map(t => {\r\n      if (t.id === id) {\r\n        return {...t, complete}\r\n      }\r\n      else {\r\n        return t\r\n      }\r\n    })\r\n    setTasks(newTasks)\r\n  }\r\n\r\n  const handleTaskUpdate = (name, id) => {\r\n    let newTasks = tasks.map(t => {\r\n      if (t.id === id) {\r\n        return {...t, name}\r\n      }\r\n      else {\r\n        return t\r\n      }\r\n    })\r\n    setTasks(newTasks)\r\n  }\r\n\r\n  const handleTaskDelete = (id) => {\r\n    let newTasks = tasks.filter(t => t.id !== id)\r\n    setTasks(newTasks)\r\n  }\r\n\r\n  return (\r\n    <div>\r\n      <Typography  variant='h4' gutterBottom>\r\n        Brodie Weekly Planner\r\n      </Typography>\r\n\r\n      <Week \r\n        tasks={tasks}\r\n        dates={dates}\r\n        onTaskAdd={handleTaskAdd}\r\n        onTaskToggle={handleTaskToggle}\r\n        onTaskUpdate={handleTaskUpdate}\r\n        onTaskDelete={handleTaskDelete}\r\n      />\r\n\r\n      &nbsp;\r\n\r\n      <Grid container justify='space-between'>\r\n        <Grid item>\r\n          <Button variant=\"outlined\" color=\"primary\">\r\n            Previous week\r\n          </Button>\r\n        </Grid>\r\n        \r\n        <Grid item>\r\n          <Button variant=\"outlined\" color=\"primary\">\r\n            Next week\r\n          </Button>\r\n        </Grid>\r\n      </Grid>\r\n\r\n    </div>\r\n  );\r\n}\r\n","import React from 'react'\r\nimport { Route } from 'react-router'\r\nimport styled from 'styled-components'\r\nimport Paper from '@material-ui/core/Paper'\r\n\r\nimport { Planner } from './components/Planner'\r\nimport { AppLayout } from '@findrobbrodie/find-rob-brodie-common'\r\n\r\nconst AppStyled = styled.div`\r\n  padding: .5rem;\r\n`\r\n\r\nconst PaperStyled = styled(Paper)`\r\n  padding: 1rem;\r\n`\r\n\r\nexport default function App() {\r\n  return (\r\n    <AppLayout>\r\n      <AppStyled>\r\n        <PaperStyled>\r\n          <Route exact path='/' component={Planner} />\r\n        </PaperStyled>\r\n      </AppStyled>\r\n    </AppLayout>\r\n  )\r\n}","import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { BrowserRouter } from 'react-router-dom';\r\nimport App from './App';\r\nimport CssBaseline from '@material-ui/core/CssBaseline'\r\n\r\nconst baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');\r\n// /brodieweeklyplanner\r\nconst rootElement = document.getElementById('root');\r\n\r\nReactDOM.render(\r\n  <React.Fragment>\r\n    <CssBaseline />\r\n    <BrowserRouter basename={baseUrl}>\r\n      <App />\r\n    </BrowserRouter>\r\n  </React.Fragment>,\r\n  rootElement);"],"sourceRoot":""}