From e961379e3f4214ee5381937064b39be301de3e37 Mon Sep 17 00:00:00 2001 From: Leon Liang Date: Thu, 26 Sep 2019 13:59:39 -0400 Subject: [PATCH] added new files for structural purpose --- .../redux/actions/dataActions.js | 0 .../redux/actions/userActions.js | 0 .../redux/reducers/dataReducer.js | 0 twistter-frontend/redux/reducers/uiReducer.js | 0 .../redux/reducers/userReducer.js | 0 twistter-frontend/redux/store.js | 18 +++++ twistter-frontend/redux/types.js | 0 .../src/components/ChipsArray.js | 52 +++++++++++++ twistter-frontend/src/components/NavBar.js | 19 +++++ twistter-frontend/src/images/no-img.png | Bin 0 -> 1837 bytes twistter-frontend/src/pages/user.js | 21 +++++ twistter-frontend/src/util/PostSkeleton.js | 73 ++++++++++++++++++ twistter-frontend/src/util/ProfileSkeleton.js | 64 +++++++++++++++ 13 files changed, 247 insertions(+) create mode 100644 twistter-frontend/redux/actions/dataActions.js create mode 100644 twistter-frontend/redux/actions/userActions.js create mode 100644 twistter-frontend/redux/reducers/dataReducer.js create mode 100644 twistter-frontend/redux/reducers/uiReducer.js create mode 100644 twistter-frontend/redux/reducers/userReducer.js create mode 100644 twistter-frontend/redux/store.js create mode 100644 twistter-frontend/redux/types.js create mode 100644 twistter-frontend/src/components/ChipsArray.js create mode 100644 twistter-frontend/src/components/NavBar.js create mode 100644 twistter-frontend/src/images/no-img.png create mode 100644 twistter-frontend/src/pages/user.js create mode 100644 twistter-frontend/src/util/PostSkeleton.js create mode 100644 twistter-frontend/src/util/ProfileSkeleton.js diff --git a/twistter-frontend/redux/actions/dataActions.js b/twistter-frontend/redux/actions/dataActions.js new file mode 100644 index 0000000..e69de29 diff --git a/twistter-frontend/redux/actions/userActions.js b/twistter-frontend/redux/actions/userActions.js new file mode 100644 index 0000000..e69de29 diff --git a/twistter-frontend/redux/reducers/dataReducer.js b/twistter-frontend/redux/reducers/dataReducer.js new file mode 100644 index 0000000..e69de29 diff --git a/twistter-frontend/redux/reducers/uiReducer.js b/twistter-frontend/redux/reducers/uiReducer.js new file mode 100644 index 0000000..e69de29 diff --git a/twistter-frontend/redux/reducers/userReducer.js b/twistter-frontend/redux/reducers/userReducer.js new file mode 100644 index 0000000..e69de29 diff --git a/twistter-frontend/redux/store.js b/twistter-frontend/redux/store.js new file mode 100644 index 0000000..4536cfe --- /dev/null +++ b/twistter-frontend/redux/store.js @@ -0,0 +1,18 @@ +import { createStore, combineReducers, applyMiddleware, compose } from 'redux'; +import thunk from 'redux-thunk'; + +import userReducer from './reducers/userReducer'; +import dataReducer from './reducers/dataReducer'; +import uiReducer from './reducers/uiReducer'; + +const initialState = {}; + +const middleware = {thunk}; + +const reducers = combineReducers({ + user: userReducer, + data: dataReducer, + UI: uiReducer +}); + +//const store = createStore(reducers, ) \ No newline at end of file diff --git a/twistter-frontend/redux/types.js b/twistter-frontend/redux/types.js new file mode 100644 index 0000000..e69de29 diff --git a/twistter-frontend/src/components/ChipsArray.js b/twistter-frontend/src/components/ChipsArray.js new file mode 100644 index 0000000..a99afd1 --- /dev/null +++ b/twistter-frontend/src/components/ChipsArray.js @@ -0,0 +1,52 @@ +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import Chip from '@material-ui/core/Chip'; +import Paper from '@material-ui/core/Paper'; + +const useStyles = makeStyles(theme => ({ + root: { + display: 'flex', + justifyContent: 'center', + flexWrap: 'wrap', + padding: theme.spacing(0.5), + }, + chip: { + margin: theme.spacing(0.5), + }, +})); + +export default function ChipsArray() { + const classes = useStyles(); + const [chipData, setChipData] = React.useState([ + { key: 0, label: 'Angular' }, + { key: 1, label: 'jQuery' }, + { key: 2, label: 'Polymer' }, + { key: 3, label: 'React' }, + { key: 4, label: 'Vue.js' }, + ]); + + const handleDelete = chipToDelete => () => { + if (chipToDelete.label === 'React') { + alert('Why would you want to delete React?! :)'); + return; + } + + setChipData(chips => chips.filter(chip => chip.key !== chipToDelete.key)); + }; + + return ( + + {chipData.map(data => { + + return ( + + ); + })} + + ); +} \ No newline at end of file diff --git a/twistter-frontend/src/components/NavBar.js b/twistter-frontend/src/components/NavBar.js new file mode 100644 index 0000000..9e9fcee --- /dev/null +++ b/twistter-frontend/src/components/NavBar.js @@ -0,0 +1,19 @@ +import React, { Component } from 'react'; + +import AppBar from '@material-ui/core/AppBar'; +import ToolBar from '@material-ui/core/Toolbar'; +import Button from '@material-ui/core/Button'; + +export class Navbar extends Component { + render() { + return ( + + + + + + ) + } +} + +export default Navbar; diff --git a/twistter-frontend/src/images/no-img.png b/twistter-frontend/src/images/no-img.png new file mode 100644 index 0000000000000000000000000000000000000000..d0dd6912e210138e288b33fcf0f12cff70c60aec GIT binary patch literal 1837 zcmV+|2h#Y7P)<>>43_V@bJ+2`Ws@7LVv+TZKniISrr6h-lg#NGe@+Yz!%I&ll!>&ls_sh+NGiW3xhEKijjgY1p`Mf;%Z zx%HHe#!_3Vo}wpBQ)9GNO08SpscODz`K+X^Wna(!ueK;<>#LMZqb6DOfzEuMUlslT zY0gz{c|{RuRem-5{R1`k5A^Yg&eWP;Q4B_WZkMsH&>2o2Gm& zvJ|VDucj-yZnMFKsBXn&3~ATU6;-zrYlCfLR$66RLs#@|el_&A%0JED`Fw*N|7(NO_E#_t8%XoRacfb?HzU}Ejd$nsyiO0;QIEuhE=v6e9q2L zQGJQJ#>X~Es2wy2V5_U#<#8k*(MFRVv3>*x|aKBAAdFL1g$Ic^KeVSN8%}77x2)1fWMjvx~QIt z5h@tGF6OCg!AA=C)&-20pWyqdUKc!i@t(yP(8bnFF?5S-=|bWImTnPs!w8+oc-Mt@ zRd`+47?Pn|p>=;=7K*x27eo!$#RWuBHIQK&-LS8d*KN)DA5Ux0L+=8x(xgRe2qySyMN|4kF>Y z*a$!B1_9T_hP+l6TO1f{P$bx0!@v!K55S`;ur6@Ge5XQIZ~wa3J-%pNY>1GcH|T?P zk-LnJpbOkG=Roh91M32J_d3vvVqjhLgBLxqj@AWt&EVN8jqVJ98$d1C$1YwM`^pgX zF;4^U>VbO%@yiG){-hny7Jh~ouZwJ6@SW?DY`N)isHlv~F zB4(^8NsTDFkQpmVPBM-z;>0rHsp|%OgkpnIk=@A{jcZ2)jAFxYUP}Hok}hCEl9HW^ zr5oJ5_;cB=S|r`zyO)!C&9(xi;K0tAlu3}M8)l;tv<%8zUC%I|m+{nIaICVub%_aW_o&OuSIpJ*d=_0ymzRC}YPva7*K<BUFEZwX$a7`vkhkUUY+3RKn$|8~B=mNH)Fc$CK!WF($#Bmc!jL&IZ#I8BY(2CN!n3HjgML>=&WaCcQ!BK{ zoK;BOzG2~c6)f2e7VN`xMT!odGvh^DVVbzc=t^4hTpd}7Xkvt}2r|9gI9<4Ku&zi7 z@0~_zL*JSns4J$V^iHGXVRN!gfUZcr%0>K_tWo~P{<^Hk&LUw?#8+1oyDOd)_PnIs ze6Yu_X?SXzAIZHsEic`^FWy+zl6wp;J#-}nrmPLZ4laK){#kcFvX1<>v6hR(f05nb z$umPq@iX*w}||V(xNISBj0Io)E_4hdJGY+_WFGUb3~V-ZHK$#lgC$4+gi9j_Tr4Y;DERa_N{ZHXYzL4ET=d9=MZwTE@U%CG+rkS8_>M5!*MtkDot=l&DZrzyouHKru bf1U0>3WIN^06*`F00000NkvXXu0mjfBXh0Y literal 0 HcmV?d00001 diff --git a/twistter-frontend/src/pages/user.js b/twistter-frontend/src/pages/user.js new file mode 100644 index 0000000..1567e85 --- /dev/null +++ b/twistter-frontend/src/pages/user.js @@ -0,0 +1,21 @@ +import React, { Component } from 'react'; +import ReactDOM from 'react-dom'; +import NavBar from '../components/NavBar'; +import ChipsArray from '../components/ChipsArray'; + +class user extends Component { + render() { + return ( +
+ + + +
+ ) + } +} + +//ReactDOM.render(, node); +ReactDOM.render(, document.querySelector('#root')); + +export default user diff --git a/twistter-frontend/src/util/PostSkeleton.js b/twistter-frontend/src/util/PostSkeleton.js new file mode 100644 index 0000000..5cc82c0 --- /dev/null +++ b/twistter-frontend/src/util/PostSkeleton.js @@ -0,0 +1,73 @@ +import React, { Fragment } from 'react'; +import NoImg from '../images/no-img.png'; +import PropTypes from 'prop-types'; +// MUI +import Card from '@material-ui/core/Card'; +import CardMedia from '@material-ui/core/CardMedia'; +import CardContent from '@material-ui/core/CardContent'; + +import withStyles from '@material-ui/core/styles/withStyles'; + +const styles = (theme) => ({ + ...theme, + card: { + display: 'flex', + marginBottom: 20 + }, + cardContent: { + width: '100%', + flexDirection: 'column', + padding: 25 + }, + cover: { + minWidth: 200, + objectFit: 'cover' + }, + handle: { + width: 60, + height: 18, + backgroundColor: theme.palette.primary.main, + marginBottom: 7 + }, + date: { + height: 14, + width: 100, + backgroundColor: 'rgba(0,0,0, 0.3)', + marginBottom: 10 + }, + fullLine: { + height: 15, + width: '90%', + backgroundColor: 'rgba(0,0,0, 0.6)', + marginBottom: 10 + }, + halfLine: { + height: 15, + width: '50%', + backgroundColor: 'rgba(0,0,0, 0.6)', + marginBottom: 10 + } +}); + +const PostSkeleton = (props) => { + const { classes } = props; + + const content = Array.from({ length: 5 }).map((item, index) => ( + + + +
+
+
+
+
+ + + )); + + return {content}; +}; + +PostSkeleton.propTypes = { + classes: PropTypes.object.isRequired +}; diff --git a/twistter-frontend/src/util/ProfileSkeleton.js b/twistter-frontend/src/util/ProfileSkeleton.js new file mode 100644 index 0000000..f6b8cf3 --- /dev/null +++ b/twistter-frontend/src/util/ProfileSkeleton.js @@ -0,0 +1,64 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import withStyles from '@material-ui/core/styles/withStyles'; +import NoImg from '../images/no-img.png'; +// MUI +import Paper from '@material-ui/core/Paper'; +// Icons +import LocationOn from '@material-ui/icons/LocationOn'; +import LinkIcon from '@material-ui/icons/Link'; +import CalendarToday from '@material-ui/icons/CalendarToday'; + +const styles = (theme) => ({ + ...theme, + handle: { + height: 20, + backgroundColor: theme.palette.primary.main, + width: 60, + margin: '0 auto 7px auto' + }, + fullLine: { + height: 15, + backgroundColor: 'rgba(0,0,0,0.6)', + width: '100%', + marginBottom: 10 + }, + halfLine: { + height: 15, + backgroundColor: 'rgba(0,0,0,0.6)', + width: '50%', + marginBottom: 10 + } +}); + +const ProfileSkeleton = (props) => { + const { classes } = props; + return ( + +
+
+ profile +
+
+
+
+
+
+
+
+ Location +
+ https://website.com +
+ Joined date +
+
+ + ); +}; + +ProfileSkeleton.propTypes = { + classes: PropTypes.object.isRequired +}; + +export default withStyles(styles)(ProfileSkeleton); \ No newline at end of file