├── src
    ├── routes
    │   └── routes.js
    ├── components
    │   ├── SearchBar.css
    │   ├── PostItem.css
    │   ├── PostDetail.css
    │   ├── PostList.js
    │   ├── App.js
    │   ├── PostItem.js
    │   ├── SearchBar.js
    │   └── postDetail.js
    ├── setupTests.js
    ├── reportWebVitals.js
    ├── index.js
    ├── hooks
    │   └── usePosts.js
    └── api
    │   └── BlogAPI.js
├── public
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── robots.txt
    ├── manifest.json
    └── index.html
├── .gitignore
├── package.json
└── README.md


/src/routes/routes.js:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/runtime/runtime-blog/master/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/runtime/runtime-blog/master/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/runtime/runtime-blog/master/public/logo512.png


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/src/components/SearchBar.css:
--------------------------------------------------------------------------------
 1 | .search-bar input {
 2 |     max-height: 30px;
 3 | }
 4 | 
 5 | .search-bar Button {
 6 |     color: white;
 7 | }
 8 | 
 9 | /* Increase the specificity */
10 | .search-bar Button:disabled {
11 |     color: white;
12 | }


--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 | 


--------------------------------------------------------------------------------
/src/components/PostItem.css:
--------------------------------------------------------------------------------
 1 | .post-item  {
 2 |     display: flex !important;
 3 |     align-items: center !important;
 4 |     cursor: pointer;
 5 |     font-family: Roboto;
 6 | }
 7 | 
 8 | .post-item.item.img {
 9 |     /*max-width: 36px;*/
10 |     /*padding-right: 12px;*/
11 | }
12 | 
13 | .post-item.title {
14 |     padding: 3px;
15 | }
16 | 
17 | .post-item.body {
18 |     font-style: italic;
19 |     padding-bottom: 12px;
20 | }


--------------------------------------------------------------------------------
/src/reportWebVitals.js:
--------------------------------------------------------------------------------
 1 | const reportWebVitals = onPerfEntry => {
 2 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 3 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 4 |       getCLS(onPerfEntry);
 5 |       getFID(onPerfEntry);
 6 |       getFCP(onPerfEntry);
 7 |       getLCP(onPerfEntry);
 8 |       getTTFB(onPerfEntry);
 9 |     });
10 |   }
11 | };
12 | 
13 | export default reportWebVitals;
14 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 
25 | node_modules
26 | 
27 | .idea
28 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import App from './components/App';
 4 | import {createRoot} from "react-dom/client";
 5 | 
 6 | 
 7 | // ReactDOM.render(
 8 | //     <App />, document.querySelector('#root')
 9 | // )
10 | 
11 | // First, we create a root
12 | const root = ReactDOM.createRoot(document.querySelector('#root'));
13 | 
14 | // Initial render. Container is implicitly accessed.
15 | root.render(<App name="Runtime Blog" />);
16 | 
17 | // Subsequent renders. Container is implicitly accessed.
18 | root.render(<App name="Runtime Blog!" />);


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/src/components/PostDetail.css:
--------------------------------------------------------------------------------
 1 | .post-detail  {
 2 |     /*display: flex !important;*/
 3 |     /*align-items: center !important;*/
 4 | }
 5 | 
 6 | .post-detail.img {
 7 |     /*display: flex !important;*/
 8 |     /*align-item s: center !important;*/
 9 |     /*max-height: 1200px;*/
10 |     margin-bottom: 20px;
11 | }
12 | 
13 | .post-detail.title {
14 |     font-weight: 600;
15 | }
16 | 
17 | .post-detail.subtitle {
18 |    /*line-height: 1.5;*/
19 | }
20 | 
21 | .post-detail.desc {
22 |     /*font-style: italic;*/
23 |     margin-bottom: 24px;
24 |     /*font-family: "Arial";*/
25 |     /*font-size: large;*/
26 |     /*line-height: 24px;*/
27 | 
28 | }


--------------------------------------------------------------------------------
/src/components/PostList.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |     Box,
 3 |     ImageList,
 4 |     ImageListItem, Typography
 5 | } from '@mui/material';
 6 | import { theme } from "@mui/material/styles";
 7 | import React from 'react';
 8 | import PostItem from "./PostItem";
 9 | 
10 | const PostList = ({ posts, onPostSelect, theme }) => {
11 |     console.log('[PostList] posts : ', posts);
12 |      const renderedList = posts.map((post) => {
13 |           return <PostItem key={post.itemId} onPostSelect={onPostSelect} post={post} />
14 |     })
15 |     return (
16 |         <Box>
17 |             <Typography variant="h6" color="primary" component="a" className='post-list title'>
18 |                moar...
19 |             </Typography>
20 |             <ImageList sx={{ width: 'auto', height: {
21 |                 xs: 'auto', sm: 'auto', md: '160px', lg: '160px', xl: 'auto'
22 |                 }}} gap={20} cols={3} >{renderedList}</ImageList>
23 |         </Box>
24 |     )
25 |     // return <div> PostList </div>
26 | }
27 | 
28 | export default PostList;


--------------------------------------------------------------------------------
/src/hooks/usePosts.js:
--------------------------------------------------------------------------------
 1 | import React, {useState, useEffect} from "react";
 2 | import BlogAPI from "../api/BlogAPI";
 3 | 
 4 | const usePosts = (defaultSearchQuery) => {
 5 |     // input search
 6 |     // output list of videos
 7 |     const [posts, setPosts] = useState([]);
 8 | 
 9 |     useEffect(()=> {
10 |         search(defaultSearchQuery);
11 |     }, [defaultSearchQuery]);
12 | 
13 |     const search = async (query) => {
14 |         try {
15 |             const response = await BlogAPI.get(`items`, {
16 |                 params: {
17 |                     'itemId': `${query}`
18 |                 },
19 |                 // params: {
20 |                 //     'Key': {'itemId': `${query}`},
21 |                 // },
22 | 
23 |             });
24 | 
25 |             // console.log('[UsePosts] response, ', response);
26 |             // console.log('[UsePosts] response.data, ', response.data);
27 |             // console.log('[UsePosts] response.data.Items, ', response.data.Items);
28 | 
29 |             setPosts(response.data.Items);
30 |         } catch (err) {
31 |             console.error(err)
32 |         }
33 |     };
34 | 
35 |     return [posts, search]
36 | };
37 | 
38 | export default usePosts;
39 | 
40 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "runtime-blog",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@emotion/react": "^11.11.4",
 7 |     "@emotion/styled": "^11.11.5",
 8 |     "@fontsource/roboto": "^5.0.12",
 9 |     "@mui/icons-material": "^5.15.15",
10 |     "@mui/material": "^5.15.15",
11 |     "@testing-library/jest-dom": "^5.17.0",
12 |     "@testing-library/react": "^13.4.0",
13 |     "@testing-library/user-event": "^13.5.0",
14 |     "axios": "^1.6.7",
15 |     "mui-image": "^1.0.7",
16 |     "react": "^18.2.0",
17 |     "react-dom": "^18.2.0",
18 |     "react-scripts": "^5.0.1",
19 |     "web-vitals": "^2.1.4"
20 |   },
21 |   "scripts": {
22 |     "start": "react-scripts start",
23 |     "build": "react-scripts build",
24 |     "test": "react-scripts test",
25 |     "eject": "react-scripts eject"
26 |   },
27 |   "eslintConfig": {
28 |     "extends": [
29 |       "react-app",
30 |       "react-app/jest"
31 |     ]
32 |   },
33 |   "browserslist": {
34 |     "production": [
35 |       ">0.2%",
36 |       "not dead",
37 |       "not op_mini all"
38 |     ],
39 |     "development": [
40 |       "last 1 chrome version",
41 |       "last 1 firefox version",
42 |       "last 1 safari version"
43 |     ]
44 |   }
45 | }
46 | 


--------------------------------------------------------------------------------
/src/components/App.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |     Typography,
 3 |     Box, Container, AppBar, Grid,
 4 | } from '@mui/material';
 5 | import '@fontsource/roboto/300.css';
 6 | import '@fontsource/roboto/400.css';
 7 | import '@fontsource/roboto/500.css';
 8 | import '@fontsource/roboto/700.css';
 9 | 
10 | import React, {useState, useEffect} from 'react';
11 | import SearchBar from "./SearchBar";
12 | import PostList from "./PostList";
13 | import PostDetail from "./postDetail";
14 | import usePosts from "../hooks/usePosts";
15 | 
16 | 
17 | const App = () => {
18 |     const [currPost, setCurrPost] = useState(null);
19 |     const [posts, search] = usePosts('');
20 | 
21 |     useEffect(() => {
22 |         setCurrPost(posts[0]);
23 |     }, [posts])
24 | 
25 |     return (
26 |         <Container>
27 |             <Box>
28 |                 <AppBar
29 |                     color="secondary" >
30 |                     <SearchBar onSearchSubmit={search}/>
31 |                 </AppBar>
32 |                 <Box>
33 |                     <PostDetail post={currPost}/>
34 |                     <PostList
35 |                         //onPostSelect={onPostSelect}
36 |                         // shorthand the onPostSelect Function to remove extra function
37 |                         onPostSelect={setCurrPost}
38 |                         posts={posts}
39 |                     />
40 |                 </Box>
41 | 
42 |             </Box>
43 |         </Container>
44 |     );
45 | }
46 | 
47 | 
48 | export default App;
49 | 
50 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>React App</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/src/api/BlogAPI.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios';
 2 | 
 3 | export default axios.create({
 4 |     //baseURL: 'https://:aws:execute-api:us-east-1:926079816406:9dvbmeoem1/*/OPTIONS/',
 5 |     baseURL: 'https://6p4cy8nbz9.execute-api.us-east-1.amazonaws.com/prod',
 6 |     //baseURL: 'https://y5rgcm8zd0.execute-api.us-east-1.amazonaws.com/test/pets',
 7 |     //baseURL: 'https://6zjcsl5iid.execute-api.us-east-1.amazonaws.com/WhiskeyAPIStaging/',
 8 |     //baseURL: 'https://jsonplaceholder.typicode.com/posts',
 9 |     timeout: 3000,
10 |     // params: {
11 |     //      Key: {'itemId': 'id'}
12 |     // },
13 |     // headers: {
14 |     //     "Access-Control-Allow-Headers": "Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token",
15 |     //     "Access-Control-Allow-Methods": "OPTIONS, POST, GET",
16 |     //     "Access-Control-Allow-Origin": "*",
17 |     // },
18 |      body: JSON.stringify('success')
19 | })
20 | 
21 | //THIS VERSION IS THE WORKING HELLO PUT AND HAS NO HEADER
22 | //
23 | // import axios from 'axios';
24 | //
25 | // export default axios.create({
26 | //     //baseURL: 'https://:aws:execute-api:us-east-1:926079816406:9dvbmeoem1/*/OPTIONS/',
27 | //     baseURL: 'https://9dvbmeoem1.execute-api.us-east-1.amazonaws.com/prod/',
28 | //     //baseURL: 'https://y5rgcm8zd0.execute-api.us-east-1.amazonaws.com/test/pets',
29 | //     //baseURL: 'https://6zjcsl5iid.execute-api.us-east-1.amazonaws.com/WhiskeyAPIStaging/',
30 | //     //baseURL: 'https://jsonplaceholder.typicode.com/posts',
31 | //     timeout: 3000,
32 | //     // params: {
33 | //     //      Key: {'itemId': 'id'}
34 | //     // },
35 | //     // headers: {
36 | //     //     "Access-Control-Allow-Headers": "Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token",
37 | //     //     "Access-Control-Allow-Methods": "OPTIONS, POST, GET",
38 | //     //     "Access-Control-Allow-Origin": "*",
39 | //     // },
40 | //     body: JSON.stringify('success')
41 | // })
42 | //
43 | //
44 | //
45 | //
46 | //THIS VERSION WORKS PERFECTLY WITH PUBLIC API USES GET AND HAS A HEADER
47 | //
48 | //import axios from 'axios';
49 | 
50 | //const KEY = '1qRS60RkX1aurXTqlK4Wv36eSRSmIiTQ2F7V1zrR';
51 | 
52 | // export default axios.create({
53 | //     // baseURL: 'https://r1elapy211.execute-api.us-east-1.amazonaws.com/stage',
54 | //     baseURL: 'https://jsonplaceholder.typicode.com/',
55 | //     timeout: 3000,
56 | //     // params: {
57 | //     //     key: KEY
58 | //     // },
59 | //     headers: {
60 | //         "Access-Control-Allow-Origin": "*",
61 | //         "Content-Type": "application/json"
62 | //     },
63 | //     body: JSON.stringify('success')
64 | // })


--------------------------------------------------------------------------------
/src/components/PostItem.js:
--------------------------------------------------------------------------------
 1 | import './PostItem.css';
 2 | import React from 'react';
 3 | import {ImageListItem} from "@mui/material";
 4 | import { Image } from 'mui-image'
 5 | 
 6 | const PostItem = ({post, onPostSelect}) => {
 7 |     console.log('[PostItem] post: ', post);
 8 |     return (
 9 |             <ImageListItem
10 | 
11 |                 key={post.itemId} onClick={()=>{onPostSelect(post)}}>
12 |                 <Image
13 |                     // className='post-item item img'
14 |                     srcSet={`${post.media.thumb}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
15 |                     src={`${post.media.thumb}?w=164&h=164&fit=crop&auto=format`}
16 |                     alt={post.title}
17 |                     loading="lazy"
18 |                     duration={.25}
19 | 
20 |                 />
21 |             </ImageListItem>
22 | 
23 |     )
24 | }
25 | 
26 | export default PostItem;
27 | 
28 | 
29 | //////
30 | 
31 | // return(
32 | //     <Card>
33 | //         <img className="post-detail img" alt={post.title} src={post.media.image}/>
34 | //         <CardHeader
35 | //             title={post.title}
36 | //             subheader={post.subtitle}
37 | //
38 | //             titleTypographyProps={{ align: 'left' }}
39 | //             subheaderTypographyProps={{
40 | //                 align: 'left',
41 | //             }}
42 | //             descriptionTypographyProps={{
43 | //                 align: 'right',
44 | //                 variant: 'body2',
45 | //             }}
46 | //             // sx={{
47 | //             //     backgroundColor: '0xFF8800',
48 | //             // }}
49 | //
50 | //         />
51 | //         <CardContent>
52 | //             <Container maxWidth="lg">
53 | //                 <Grid container spacing={5} alignItems="flex-end">
54 | //                     <Grid item xs={12} md={12} lg={12}>
55 | //                         <Typography variant="body2" color="textSecondary" component="h4">
56 | //                             <Chip label={post.tags} variant="filled"/>
57 | //                             {post.client}
58 | //                         </Typography>
59 | //                     </Grid>
60 | //                     {/*<Grid item xs={12} md={4} lg={4}>*/}
61 | //                     {/*  */}
62 | //                     {/*</Grid>*/}
63 | //                     <Grid item xs={12} md={12} lg={12}>
64 | //                         <Typography variant="body2" color="textSecondary" component="p">
65 | //                             {post.description}
66 | //                         </Typography>
67 | //                     </Grid>
68 | //                 </Grid>
69 | //             </Container>
70 | //         </CardContent>
71 | //     </Card>
72 | //  )
73 | 
74 | 
75 | 
76 | //////
77 | 


--------------------------------------------------------------------------------
/src/components/SearchBar.js:
--------------------------------------------------------------------------------
 1 | import './SearchBar.css';
 2 | 
 3 | import {
 4 |     TextField,
 5 |     Button,
 6 |     Typography,
 7 |     Box,
 8 |     Toolbar,
 9 |     InputBase,
10 |     IconButton,
11 |     styled,
12 |     alpha
13 | } from '@mui/material';
14 | import SearchIcon from '@mui/icons-material/Search';
15 | import React, {useState} from 'react';
16 | 
17 | 
18 | const SearchBar = ({onSearchSubmit}) => {
19 |     const [query, setQuery] = useState('3');
20 |     const onInputChange = (e) => {
21 |         setQuery(e.target.value);
22 |     }
23 |     const onSubmit = (e) => {
24 |         e.preventDefault();
25 |         onSearchSubmit(query);
26 |     }
27 | 
28 |     const Search = styled('div')(({ theme }) => ({
29 |         position: 'relative',
30 |         borderRadius: theme.shape.borderRadius,
31 |         backgroundColor: alpha(theme.palette.common.white, 0.15),
32 |         '&:hover': {
33 |             backgroundColor: alpha(theme.palette.common.white, 0.25),
34 |         },
35 |         marginLeft: 0,
36 |         width: '100%',
37 |         [theme.breakpoints.up('sm')]: {
38 |             marginLeft: theme.spacing(1),
39 |             width: 'auto',
40 |         },
41 |     }));
42 | 
43 |     const SearchIconWrapper = styled('div')(({ theme }) => ({
44 |         padding: theme.spacing(0, 2),
45 |         height: '100%',
46 |         position: 'absolute',
47 |         pointerEvents: 'none',
48 |         display: 'flex',
49 |         alignItems: 'center',
50 |         justifyContent: 'center',
51 |     }));
52 | 
53 |     const StyledInputBase = styled(InputBase)(({ theme }) => ({
54 |         color: 'inherit',
55 |         width: '100%',
56 |         '& .MuiInputBase-input': {
57 |             padding: theme.spacing(1, 1, 1, 0),
58 |             // vertical padding + font size from searchIcon
59 |             paddingLeft: `calc(1em + ${theme.spacing(4)})`,
60 |             transition: theme.transitions.create('width'),
61 |             [theme.breakpoints.up('sm')]: {
62 |                 width: '12ch',
63 |                 '&:focus': {
64 |                     width: '20ch',
65 |                 },
66 |             },
67 |         },
68 |     }));
69 | 
70 |     const blogTitle = "{Code} & Culture"
71 |    // const subTitle = 'the missing .docs'
72 | 
73 |     return (
74 |       <Box>
75 |             <Toolbar>
76 |                 <Typography
77 |                     variant="h6"
78 |                     noWrap
79 |                     component="div"
80 |                     sx={{ flexGrow: 1, display: { xs: 'none', sm: 'block' } }}
81 |                 >
82 |                     {blogTitle}
83 |                 </Typography>
84 |                 <Search>
85 |                     <SearchIconWrapper>
86 |                         <SearchIcon />
87 |                     </SearchIconWrapper>
88 |                     <StyledInputBase
89 |                         placeholder="Search…"
90 |                         inputProps={{ 'aria-label': 'search' }}
91 |                     />
92 |                 </Search>
93 |             </Toolbar>
94 |         </Box>
95 |     );
96 | }
97 | 
98 | export default SearchBar;


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Getting Started with Create React App
 2 | 
 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 4 | 
 5 | ## Available Scripts
 6 | 
 7 | In the project directory, you can run:
 8 | 
 9 | ### `npm start`
10 | 
11 | Runs the app in the development mode.\
12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
13 | 
14 | The page will reload when you make changes.\
15 | You may also see any lint errors in the console.
16 | 
17 | ### `npm test`
18 | 
19 | Launches the test runner in the interactive watch mode.\
20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
21 | 
22 | ### `npm run build`
23 | 
24 | Builds the app for production to the `build` folder.\
25 | It correctly bundles React in production mode and optimizes the build for the best performance.
26 | 
27 | The build is minified and the filenames include the hashes.\
28 | Your app is ready to be deployed!
29 | 
30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
31 | 
32 | ### `npm run eject`
33 | 
34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!**
35 | 
36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
37 | 
38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
39 | 
40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
41 | 
42 | ## About
43 | 
44 | Single page react app that displays a post or case-study with an item list below it as navigation.
45 | this is an mvp to connect react with axios to an aws api gateway with lambda and dynamodb.
46 | 
47 | The app has three components
48 | 
49 | --Search - search the api set state 
50 | 
51 | --post detail - currentPost displayed on top 
52 | 
53 | --Post list - list of posts /items 
54 | 
55 | --Post item - single post /items/{proxy+} 
56 | 
57 | 
58 | 
59 | Essentially for now it is a single page case study app that calls the API, displays the case studies in tiles and populates the first one in a post-detail component.
60 | This would have to be expanded upon to make into a full blown website.
61 | 
62 | 
63 | 
64 | 
65 | ### BlogAPI 
66 | currently this only scans all items and will fetch an item by id when called.
67 | Currently the BlogAPI makes one call and the lambda function in the RTB CDK handles all of it but ideally we would have a separate lambda for the GET, POST, DELETE to the rtb-blog-db and separate apis for other components if needed.
68 | 
69 | ### MaterialUI
70 | 
71 | Box,
72 | CircularProgress,
73 | Chip,
74 | Grid,
75 | CardHeader,
76 | Container,
77 | Card,
78 | CardContent,
79 | Typography,
80 | 
81 | also Image 
82 | ### Deployment
83 | 
84 | localhost:3000 for now
85 | 
86 | ### `npm run build` fails to minify
87 | 
88 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
89 | 
90 | 
91 | ### todo
92 | create .env file and add to .gitignore
93 | 


--------------------------------------------------------------------------------
/src/components/postDetail.js:
--------------------------------------------------------------------------------
  1 | import './PostDetail.css';
  2 | import React from 'react';
  3 | import {
  4 |     Box,
  5 |     CircularProgress,
  6 |     Chip,
  7 |     Grid,
  8 |     CardHeader,
  9 |     Container,
 10 |     Card,
 11 |     CardContent,
 12 |     styled,
 13 |     Typography,
 14 |     alpha
 15 | } from "@mui/material";
 16 | import { Image } from 'mui-image'
 17 | import PostList from "./PostList";
 18 | const PostDetail = ({post}) => {
 19 |     if (!post) {
 20 |         return <CircularProgress color="primary"/>
 21 |     }
 22 |     //const postSrc = `https://www.youtube.com/embed/${post.id.postId}`;
 23 | 
 24 | 
 25 |     return (
 26 | 
 27 |         <Grid container direction="column">
 28 |             {/*page header, tags & client*/}
 29 |             <Grid item>
 30 |                 <Box sx={{marginTop: {xs: 4, sm: 8, md: 8, lg:8}}}>
 31 |                     <Grid container direction="row">
 32 |                         <Grid item xs={8} sm={8} md={9} lg={10}>
 33 |                             <Typography variant="h6" color="primary" component="a"
 34 |                                 sx={{display: { xs: 'none', sm: 'block'}}}
 35 |                             >
 36 |                                 Case Studies
 37 |                             </Typography>
 38 |                         </Grid>
 39 |                         <Grid item xs={4} sm={4} md={3} lg={2}>
 40 |                             <Chip
 41 |                                 size='small'
 42 |                                 position='relative'
 43 |                                 label={post.tags}
 44 |                                 variant="filled"
 45 |                                 color='primary'
 46 |                                 pointerEvents= 'none'
 47 |                                 sx={{marginTop: '3px', transitionDuration: '0.3s', transitionProperty: 'all', transitionTimingFunction: 'linear', opacity: { xs: 0, sm: 0.8, lg: 0.8}}}
 48 | 
 49 |                             />
 50 |                             <Typography
 51 |                                 variant="body1"
 52 |                                 position='absolute'
 53 |                                 color='textSecondary'
 54 |                                 noWrap
 55 |                                 pointerEvents= 'none'
 56 |                                 alignItems= 'center'
 57 |                                 justifyContent= 'center'
 58 |                                 sx={{ marginTop: '3px', paddingLeft: 1, display: { xs: 'none', sm: 'inline'}}}
 59 |                             >
 60 |                                 {post.client}
 61 |                             </Typography>
 62 |                         </Grid>
 63 |                         </Grid>
 64 | 
 65 |                         {/*banner image*/}
 66 |                         <Grid container direction="row">
 67 |                             <Grid item >
 68 |                                 <Image
 69 |                                     width='100%'
 70 |                                     fit='cover'
 71 |                                     className='post-detail img'
 72 |                                     src={post.media.image}
 73 |                                     sx={{ maxHeight: { xs: '95%', sm: '95%', lg: '97%'}, marginTop: { xs: '0px', sm: '4px', md: '0px', lg: '16px'}}}
 74 |                                 />
 75 |                         </Grid>
 76 |                     </Grid>
 77 |                 </Box>
 78 |             </Grid>
 79 | 
 80 |             {/*page content*/}
 81 |             <Grid item>
 82 |                 <Grid container direction="row">
 83 |                     <Grid item xs={12} sm={12} md={12} lg={12}>
 84 |                         <Typography
 85 |                             variant="h5"
 86 |                             color="primary"
 87 |                             component="a"
 88 |                             className='post-detail title'>
 89 |                             {post.title}
 90 |                         </Typography>
 91 |                     </Grid>
 92 |                     <Grid item xs={12} sm={12} md={12} lg={12}>
 93 |                         <Typography variant="subtitle1" color="textSecondary" align='right' component="a">
 94 |                             {post.subtitle}
 95 |                         </Typography>
 96 |                     </Grid>
 97 |                     <Grid item xs={12} sm={12} md={12} lg={12}>
 98 |                         <Typography className='post-detail desc' variant="body1" color="textSecondary" align='left' component="a">
 99 |                             {post.description}
100 |                         </Typography>
101 |                     </Grid>
102 |                 </Grid>
103 |             </Grid>
104 |         </Grid>
105 | 
106 | 
107 |     )
108 | }
109 | 
110 | export default PostDetail;
111 | 
112 | 
113 | 
114 | 


--------------------------------------------------------------------------------