diff options
| -rw-r--r-- | finished-application/backend/.graphqlconfig.yml | 2 | ||||
| -rw-r--r-- | sick-fits/frontend/README.md | 58 | ||||
| -rw-r--r-- | sick-fits/frontend/notes.md | 36 | ||||
| -rwxr-xr-x | stepped-solutions/07/frontend/components/Header.js | 50 | ||||
| -rwxr-xr-x | stepped-solutions/07/frontend/components/Page.js | 34 | ||||
| -rwxr-xr-x | stepped-solutions/08/frontend/components/Nav.js | 20 | ||||
| -rwxr-xr-x | stepped-solutions/08/frontend/components/Page.js | 29 | ||||
| -rwxr-xr-x | stepped-solutions/09/frontend/components/Header.js | 16 | ||||
| -rwxr-xr-x | stepped-solutions/21/frontend/components/DeleteItem.js | 2 |
9 files changed, 137 insertions, 110 deletions
diff --git a/finished-application/backend/.graphqlconfig.yml b/finished-application/backend/.graphqlconfig.yml index 2f01155..41bf8fc 100644 --- a/finished-application/backend/.graphqlconfig.yml +++ b/finished-application/backend/.graphqlconfig.yml @@ -7,4 +7,4 @@ projects: prisma: schemaPath: "src/generated/prisma.graphql" extensions: - prisma: prisma/prisma.yml
\ No newline at end of file + prisma: prisma.yml diff --git a/sick-fits/frontend/README.md b/sick-fits/frontend/README.md index 9914799..e7faab9 100644 --- a/sick-fits/frontend/README.md +++ b/sick-fits/frontend/README.md @@ -1,59 +1,3 @@ # Advanced-React -<!-- -## Marketing - -I love this look and feel: http://wes.io/lxQe -https://www.youtube.com/watch?v=Y0ePh9OxSWo - - - -Descriptions for Images - -Nudie Belt - -Our accessories are all about genuine leather and denim. Belts, leather wallets cases, denim bags, Knitted hats and scarves in wool or organic cotton. For our leather accessories, we only use vegetable tanned leather. Leather accessories will acquire a patina and become more beautiful the longer you use them. - -Triple Black Ultra Boost - -Ultraboost is the ultimate running shoe that delivers constant energy returns. The more you run the more energy you bring to your life. - -Patagonia Black Hole - -The Black Hole Duffle is highly weather-resistant, and protects your gear from rough handling. The U-shaped lid allows quick access to the main compartment, while 2 zippered internal mesh pockets keep small items organized. A padded bottom panel adds structure and helps cushion the load when it gets tossed out of the vehicle or dropped from the pack mule. - -Yeti cooler - -Keep your brie and bevies chilly. Heavy-duty insulation ensures cold temperatures persist. A self-stopping hinge and Yeti-tough details are durable. Non-slip rubber feet keep your drinks and snacks orderly through whitewater or rough approaches to the picnic site. - -Black Vapor Max - -With the radically reinvented VaporMax Air cushioning unit, the Nike Air VaporMax not only defies convention, it delivers a sensation that seems to defy gravity. - -Naked and Famous Jeans - -Naked & Famous Denim uses only the most unique and rare selvedge denim fabrics from Japan, with the best style and fits around. Made in Canada. - - -Rimowa Suitcase - -RIMOWA is one of Europe's leading manufacturers of premium travel and carry-on luggage made of aluminum and polycarbonate. - - -Canada goose Macmillian - -The MacMillan Parka offers active urban style with a quilt-through design and curved hem cut. Canada Goose. - -## The North Face Fanorak - -This versatile pullover offers wind and rain resistance, and packs into its own stylish fanny-pack-style kangaroo pocket. - - -Kith Hoodie - -Hat - -270s - ---> - +frontend diff --git a/sick-fits/frontend/notes.md b/sick-fits/frontend/notes.md deleted file mode 100644 index 9ea38ef..0000000 --- a/sick-fits/frontend/notes.md +++ /dev/null @@ -1,36 +0,0 @@ -## Commonly Used Terms - -Mutation - -Query - -Scalar - this means that it's an acutal value and not a relationship. A scalar type of ID might be ABC123, a scalar type of String might be "Wes Bos". These are the default scalar types: - -Int: A signed 32‐bit integer. -Float: A signed double-precision floating-point value. -String: A UTF‐8 character sequence. -Boolean: true or false. -ID - -## The process for adding a new field: - -1. First we need to add the field to our type in datamodel.graphql -2. Then, we need to add it to our schema.graphql file, which is how we define our GraphQL API. Here we will only include the fields that we want to be query-able -3. Now the database needs to know about the new field, so we run `prisma deploy` - -## The process for adding a new type - -1. First we need to add it to the database. Edit datamodel.graphql: - -```js -type Item { - id: ID! @unique - title: String! - description: String! - price: Int! -} -``` - -2. Now we need to either re-define it in our client-side schema, or import it carte blanche - -## The process for adding new queries or mutations diff --git a/stepped-solutions/07/frontend/components/Header.js b/stepped-solutions/07/frontend/components/Header.js index 51de94c..5a11aa4 100755 --- a/stepped-solutions/07/frontend/components/Header.js +++ b/stepped-solutions/07/frontend/components/Header.js @@ -1,16 +1,60 @@ +import Link from 'next/link'; +import styled from 'styled-components'; import Nav from './Nav'; +const Logo = styled.h1` + font-size: 4rem; + margin-left: 2rem; + position: relative; + z-index: 2; + transform: skew(-7deg); + a { + padding: 0.5rem 1rem; + background: ${props => props.theme.red}; + color: white; + text-transform: uppercase; + text-decoration: none; + } + @media (max-width: 1300px) { + margin: 0; + text-align: center; + } +`; + +const StyledHeader = styled.header` + .bar { + border-bottom: 10px solid ${props => props.theme.black}; + display: grid; + grid-template-columns: auto 1fr; + justify-content: space-between; + align-items: stretch; + @media (max-width: 1300px) { + grid-template-columns: 1fr; + justify-content: center; + } + } + .sub-bar { + display: grid; + grid-template-columns: 1fr auto; + border-bottom: 1px solid ${props => props.theme.lightgrey}; + } +`; + const Header = () => ( - <div> + <StyledHeader> <div className="bar"> - <a href="">Sick Fits</a> + <Logo> + <Link href="/"> + <a>Sick Fits</a> + </Link> + </Logo> <Nav /> </div> <div className="sub-bar"> <p>Search</p> </div> <div>Cart</div> - </div> + </StyledHeader> ); export default Header; diff --git a/stepped-solutions/07/frontend/components/Page.js b/stepped-solutions/07/frontend/components/Page.js index 11bb409..a8aefa4 100755 --- a/stepped-solutions/07/frontend/components/Page.js +++ b/stepped-solutions/07/frontend/components/Page.js @@ -1,15 +1,39 @@ import React, { Component } from 'react'; +import styled, { ThemeProvider, injectGlobal } from 'styled-components'; import Header from './Header'; import Meta from './Meta'; +const theme = { + red: '#FF0000', + black: '#393939', + grey: '#3A3A3A', + lightgrey: '#E1E1E1', + offWhite: '#EDEDED', + maxWidth: '1000px', + bs: '0 12px 24px 0 rgba(0, 0, 0, 0.09)', +}; + +const StyledPage = styled.div` + background: white; + color: ${props => props.theme.black}; +`; + +const Inner = styled.div` + max-width: ${props => props.theme.maxWidth}; + margin: 0 auto; + padding: 2rem; +`; + class Page extends Component { render() { return ( - <div> - <Meta /> - <Header /> - {this.props.children} - </div> + <ThemeProvider theme={theme}> + <StyledPage> + <Meta /> + <Header /> + <Inner>{this.props.children}</Inner> + </StyledPage> + </ThemeProvider> ); } } diff --git a/stepped-solutions/08/frontend/components/Nav.js b/stepped-solutions/08/frontend/components/Nav.js index 0bd20b7..a821bc1 100755 --- a/stepped-solutions/08/frontend/components/Nav.js +++ b/stepped-solutions/08/frontend/components/Nav.js @@ -1,14 +1,24 @@ import Link from 'next/link'; +import NavStyles from './styles/NavStyles'; const Nav = () => ( - <div> + <NavStyles> + <Link href="/items"> + <a>Items</a> + </Link> <Link href="/sell"> - <a>Sell!</a> + <a>Sell</a> + </Link> + <Link href="/signup"> + <a>Signup</a> + </Link> + <Link href="/orders"> + <a>Orders</a> </Link> - <Link href="/"> - <a>Home!</a> + <Link href="/me"> + <a>Account</a> </Link> - </div> + </NavStyles> ); export default Nav; diff --git a/stepped-solutions/08/frontend/components/Page.js b/stepped-solutions/08/frontend/components/Page.js index 0731f9f..99f3158 100755 --- a/stepped-solutions/08/frontend/components/Page.js +++ b/stepped-solutions/08/frontend/components/Page.js @@ -1,7 +1,7 @@ import React, { Component } from 'react'; +import styled, { ThemeProvider, injectGlobal } from 'styled-components'; import Header from './Header'; import Meta from './Meta'; -import styled, { ThemeProvider, injectGlobal } from 'styled-components'; const theme = { red: '#FF0000', @@ -24,6 +24,33 @@ const Inner = styled.div` padding: 2rem; `; +injectGlobal` + @font-face { + font-family: 'radnika_next'; + src: url('/static/radnikanext-medium-webfont.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + } + html { + box-sizing: border-box; + font-size: 10px; + } + *, *:before, *:after { + box-sizing: inherit; + } + body { + padding: 0; + margin: 0; + font-size: 1.5rem; + line-height: 2; + font-family: 'radnika_next'; + } + a { + text-decoration: none; + color: ${theme.black}; + } +`; + class Page extends Component { render() { return ( diff --git a/stepped-solutions/09/frontend/components/Header.js b/stepped-solutions/09/frontend/components/Header.js index b75fbc1..92b97aa 100755 --- a/stepped-solutions/09/frontend/components/Header.js +++ b/stepped-solutions/09/frontend/components/Header.js @@ -1,6 +1,20 @@ -import Nav from './Nav'; import Link from 'next/link'; import styled from 'styled-components'; +import Router from 'next/router'; +import NProgress from 'nprogress'; +import Nav from './Nav'; + +Router.onRouteChangeStart = () => { + NProgress.start(); +}; + +Router.onRouteChangeComplete = () => { + NProgress.done(); +}; + +Router.onRouteChangeError = () => { + NProgress.done(); +}; const Logo = styled.h1` font-size: 4rem; diff --git a/stepped-solutions/21/frontend/components/DeleteItem.js b/stepped-solutions/21/frontend/components/DeleteItem.js index 4d9bd2b..e1974e8 100755 --- a/stepped-solutions/21/frontend/components/DeleteItem.js +++ b/stepped-solutions/21/frontend/components/DeleteItem.js @@ -17,7 +17,7 @@ class DeleteItem extends Component { // 1. Read the cache for the items we want const data = cache.readQuery({ query: ALL_ITEMS_QUERY }); console.log(data, payload); - // 2. Filter the deleted itemout of the page + // 2. Filter the deleted item out of the page data.items = data.items.filter(item => item.id !== payload.data.deleteItem.id); // 3. Put the items back! cache.writeQuery({ query: ALL_ITEMS_QUERY, data }); |