Author: Matthew Holder Version: 0.3
Deployed URL ReactI PR ReactII PR ReactIII PR ReactIV
-
pages/Index.jsshould… - Have
<Head>component with page title set to Cookie Stand Admin - Have a header component that matches spec.
- Have a
<main>component containing<form>and a placeholder component showing JSON string of last created Cookie Stand. - Have a
<footer>component that matches spec. - Style app using TailwindCSS utility classes.
-
pages/Index.jsshould return top level component<CookieStandAdmin> -
<CookieStandAdmin>details…- Have a
<Head>component. - Have a custom
<Header>component that matches spec. - Have a
<main>component.- Within
<main>have custom<CreateForm>and<ReportTable>components.
- Within
- Have a custom
<Footer>component that matches spec. - Import time slot data from supplied data.js file.
- Have a
-
<Head>should set page title Cookie Stand Admin -
<Header>component should have Next<Link>to overview page. -
<CreateForm>component details…- Receive an onCreate function to be called when form is submitted.
- onCreate should be passed argument object representing new cookie stand.
- Object should have location property.
- Object should have hourly_sales property with hard coded [48, 42, 30, 24, 42, 24, 36, 42, 42, 48, 36, 42, 24, 36]
-
<ReportTable>details…- should receive hours on props that is an array cookie stand hours of operation.
- should receive reports on props that is an array all cookie stand objects.
- If reports is empty then render
<h2>No Cookie Stands Available</h2> - If reports is not empty then render a table with thead,tbody and tfoot components.
- Component should render to match spec.
- Component is responsible for tallying totals for each cookie stand as well as all cookie stands per hourly slot.
----- FIND A WAY TO ADD THAT TD TO THE END OF THE LIST. HOPEFULLY CLEANLY IN THE
.mapBUT PRIOIRITIZE SPEED
-
<Footer>component details…- Should receive reports array on props.
- Should display X Locations World Wide where X is number of cookie stands.
-
<Header>,<Footer>,<CreateForm>and<ReportTable>should each be in own file inside top level components folder. - Those components should be imported into Index.js
- Overview page details…
- should live in pages/overview.js
- should render
<Link href="/"><a>Return to Main page</a></Link> - Style all components using TailwindCSS utility classes to match spec.
- pages/Index.js should export a
<Home>component. -
<Home>requirements- If user is NOT logged in then
<LoginForm>should render. - If user IS logged in then
<CookieStandAdmin>component should render.
- If user is NOT logged in then
-
<LoginForm>requirements- Should receive a function passed in to call when form is submitted.
- The function should be called with username and password arguments.
-
<CookieStandAdmin>requirements- When user fills out form to add location then the data should be posted to API
- While waiting for API response the
<CookieStandTable>should render the new row in a pending state. - When API response is complete then
<CookieStandTable>should render latest data.
-
<CookieStandTable>requirements- Component should continue to display Cookie Stand info as in version 2
- Add a delete icon in each stand’s location cell.
- Clicking delete icon should immediately delete the Cookie Stand.
- API should be informed that Cookie Stand was deleted.
- Continue to style all components using TailwindCSS utility classes to match spec.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
