From 00188cfa6423081ff4f1ce614a528e8398c7b61e Mon Sep 17 00:00:00 2001 From: Justice Otuya Date: Mon, 3 Jun 2019 10:51:55 +0100 Subject: [PATCH 1/9] integrated redux --- lib/middleware/with-redux-store.js | 52 ++++++++++++++++++++++++++++++ pages/_app.jsx | 28 ++++++++++++++++ pages/_document.jsx | 23 +++++++++++++ store/index.js | 12 +++++++ store/rootReducer.js | 8 +++++ 5 files changed, 123 insertions(+) create mode 100644 lib/middleware/with-redux-store.js create mode 100644 pages/_app.jsx create mode 100644 pages/_document.jsx create mode 100644 store/index.js create mode 100644 store/rootReducer.js diff --git a/lib/middleware/with-redux-store.js b/lib/middleware/with-redux-store.js new file mode 100644 index 0000000..a884d8c --- /dev/null +++ b/lib/middleware/with-redux-store.js @@ -0,0 +1,52 @@ +/* eslint-disable no-param-reassign */ +/* eslint-disable react/jsx-filename-extension */ +/* eslint-disable no-underscore-dangle */ +import React from 'react'; +import makeStore from '../../store'; + +const isServer = typeof window === 'undefined'; +const __NEXT_REDUX_STORE__ = '__NEXT_REDUX_STORE__'; + +function getOrCreateStore(initialState) { + // Always make a new store if server, otherwise state is shared between requests + if (isServer) { + return makeStore(initialState); + } + + // Create store if unavailable on the client and set it on the window object + if (!window[__NEXT_REDUX_STORE__]) { + window[__NEXT_REDUX_STORE__] = makeStore(initialState); + } + return window[__NEXT_REDUX_STORE__]; +} + +export default App => class AppWithRedux extends React.Component { + static async getInitialProps(appContext) { + // Get or Create the store with `undefined` as initialState + // This allows you to set a custom default initialState + const reduxStore = getOrCreateStore(); + + // Provide the store to getInitialProps of pages + appContext.ctx.reduxStore = reduxStore; + + let appProps = {}; + if (typeof App.getInitialProps === 'function') { + appProps = await App.getInitialProps(appContext); + } + + return { + ...appProps, + initialReduxState: reduxStore.getState(), + }; + } + + constructor(props) { + super(props); + // eslint-disable-next-line react/prop-types + this.reduxStore = getOrCreateStore(props.initialReduxState); + } + + render() { + return ; + } +}; diff --git a/pages/_app.jsx b/pages/_app.jsx new file mode 100644 index 0000000..f956a62 --- /dev/null +++ b/pages/_app.jsx @@ -0,0 +1,28 @@ +import App, { Container } from 'next/app'; +import React from 'react'; +import { Provider } from 'react-redux'; +import withReduxStore from '../lib/middleware/with-redux-store'; + +/** +* @param {object} initialState +* @param {boolean} options.isServer indicates whether it is a server side or client side +* @param {Request} options.req NodeJS Request object (not set when client applies initialState from server) +* @param {Request} options.res NodeJS Request object (not set when client applies initialState from server) +* @param {boolean} options.debug User-defined debug mode param +* @param {string} options.storeKey This key will be used to preserve store in global namespace for safe HMR +*/ + +class MyApp extends App { + render() { + const { Component, pageProps, reduxStore } = this.props; + return ( + + + + + + ); + } +} + +export default withReduxStore(MyApp); diff --git a/pages/_document.jsx b/pages/_document.jsx new file mode 100644 index 0000000..3543419 --- /dev/null +++ b/pages/_document.jsx @@ -0,0 +1,23 @@ +import React from 'react'; +import Document, { Head, Main, NextScript } from 'next/document'; + +export default class extends Document { + render() { + return ( + + + + + + + + + +
+ + + + + ); + } +} diff --git a/store/index.js b/store/index.js new file mode 100644 index 0000000..8930c91 --- /dev/null +++ b/store/index.js @@ -0,0 +1,12 @@ +import { createStore, applyMiddleware } from 'redux'; +import thunkMiddleware from 'redux-thunk'; +import { composeWithDevTools } from 'redux-devtools-extension'; +import rootReducer from './rootReducer'; + +const makeStore = initialState => createStore( + rootReducer, + initialState, + composeWithDevTools(applyMiddleware(thunkMiddleware)) +); + +export default makeStore; diff --git a/store/rootReducer.js b/store/rootReducer.js new file mode 100644 index 0000000..3200d20 --- /dev/null +++ b/store/rootReducer.js @@ -0,0 +1,8 @@ +import { combineReducers } from 'redux'; +import * as timeLine from '../components/timeLine'; + +const rootReducer = combineReducers({ + timeLine: timeLine.reducers, +}); + +export default rootReducer; From a9c6383f724561ad5e6394ce7ecfe5c2e94552d9 Mon Sep 17 00:00:00 2001 From: Justice Otuya Date: Mon, 3 Jun 2019 19:03:33 +0100 Subject: [PATCH 2/9] integrated redux, deleted authenication folder since Auth0 is providing the UI and fixed linting error --- .eslintrc.json | 1 + .../components/Authentication.css | 121 --------------- .../components/Authentication.test.jsx | 20 --- .../Authentication/components/Login.jsx | 102 ------------- .../components/LoginInputItemGenerator.jsx | 59 -------- .../components/PasswordReset.jsx | 140 ------------------ .../Authentication/components/SignUp.jsx | 125 ---------------- .../components/SignupInputItemGenerator.jsx | 112 -------------- components/Authentication/components/index.js | 5 - components/Authentication/constants.js | 128 ---------------- components/Authentication/index.js | 3 - .../LandingPage/components/LandingPage.css | 2 +- .../LandingPage/components/LandingPage.jsx | 38 ++--- .../components/LandingPage.test.jsx | 2 +- .../components/LandingPageContent.jsx | 23 +-- components/LandingPage/components/index.js | 6 +- components/LandingPage/constants.js | 80 ++++++---- components/LandingPage/index.js | 5 +- .../Layout/components/FooterListCreator.jsx | 5 +- components/Layout/components/NavHeader.jsx | 51 ++++--- components/Layout/components/PageFooter.jsx | 11 +- components/Layout/components/PageLayout.css | 4 - components/Layout/components/PageLayout.jsx | 18 ++- .../Layout/components/PageLayout.test.jsx | 2 +- components/Layout/components/Sidebar.jsx | 5 + components/Layout/components/index.js | 5 +- components/Layout/constants.js | 19 +-- components/Layout/index.js | 9 +- .../components/CreatePostComponent.jsx | 70 +++++---- .../TimeLine/components/CreatePostModal.jsx | 77 +++++----- components/TimeLine/components/TimeLine.jsx | 40 +++-- .../components/TimeLineOnlineFriends.jsx | 11 +- .../components/TimeLinePopularTopic.jsx | 1 + .../TimeLine/components/TimeLinePosts.jsx | 76 +++++++--- .../components/TimeLineProfileInfo.jsx | 6 +- components/TimeLine/components/index.js | 5 +- components/TimeLine/constant.js | 16 +- components/TimeLine/index.js | 5 +- package.json | 7 +- pages/_app.jsx | 9 +- pages/_document.jsx | 7 +- pages/index.js | 4 +- pages/login.js | 3 - pages/password_reset.js | 3 - pages/signup.js | 3 - pages/timeline.js | 5 +- store/rootReducer.js | 3 +- 47 files changed, 388 insertions(+), 1064 deletions(-) delete mode 100644 components/Authentication/components/Authentication.css delete mode 100644 components/Authentication/components/Authentication.test.jsx delete mode 100644 components/Authentication/components/Login.jsx delete mode 100644 components/Authentication/components/LoginInputItemGenerator.jsx delete mode 100644 components/Authentication/components/PasswordReset.jsx delete mode 100644 components/Authentication/components/SignUp.jsx delete mode 100644 components/Authentication/components/SignupInputItemGenerator.jsx delete mode 100644 components/Authentication/components/index.js delete mode 100644 components/Authentication/constants.js delete mode 100644 components/Authentication/index.js delete mode 100644 pages/login.js delete mode 100644 pages/password_reset.js delete mode 100644 pages/signup.js diff --git a/.eslintrc.json b/.eslintrc.json index 8fb3f49..e8eb80b 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -79,6 +79,7 @@ "react/no-danger": "error", "react/jsx-pascal-case": "error", "react/jsx-indent": ["error", 4], + "react/jsx-indent-props": ["error", 4], "react/jsx-closing-bracket-location": "error", "react/void-dom-elements-no-children": "error", "react/jsx-tag-spacing": "error", diff --git a/components/Authentication/components/Authentication.css b/components/Authentication/components/Authentication.css deleted file mode 100644 index 0490402..0000000 --- a/components/Authentication/components/Authentication.css +++ /dev/null @@ -1,121 +0,0 @@ -.login-form , .password-form{ - max-width: 300px; - margin: 1em auto; - height: 60vh; - display: grid; - place-content: center; -} - -.login-form-forgot, -.login-form-register,.password-form-register { - color: #1890ff; -} - -.login-form-button, .password-form-button { - width: 100%; -} - -.login-image-section, -.registration-image-section, -.password-image-section { - background: #1890ff; - /**fallback for old browsers*/ - background: -webkit-linear-gradient(to right, #1890ff, #40a9ff); - /**Chrome 10-25, Safari 5.1-6*/ - background: linear-gradient(to top right, #1890ff, #f6f7f8fb); - height: 40vh; -} - -.login-image, -.registration-image, -.password-image { - width: 100%; - height: 80%; -} - -.registration-image-section { - height: 20vh; -} - -.registration-image { - width: 100%; - height: 120%; -} - -.registration-form-section { - height: 80vh; - margin: 0 auto; -} - -.registration-form { - width: 90%; - margin: 1em auto; -} - -.form_icon{ - color: rgba(0,0,0,.25) -} - -@media screen and (max-width: 798px) { - .login-image-section, - .password-image-section { - position: relative; - } - - .login-image, - .password-image { - position: absolute; - bottom: -33px; - } - - .registration-form { - max-width: 300px; - margin: 0 auto - } -} - -@media screen and (min-width: 799px) { - .registration-form { - max-width: 300px; - margin: 0 auto - } - - .Login-Section, - .Registration-Section, - .password-Section { - display: flex; - } - - .Login-Form-section, - .password-Form-section { - display: grid; - place-items: center; - width: 50vw; - } - - section .login-form, - section .password-form { - max-width: 50vw; - place-content: center; - display: grid; - } - - .login-image, - .password-image, - .registration-image { - padding: 0 2em; - max-width: 35vw; - height: 80% - } - - .login-image-section,.password-image-section, - .registration-image-section { - height: 100vh; - width: 50vw; - display: grid; - place-items: center; - } -} -.input-icon{ - color: rgba(0,0,0,.25); -} diff --git a/components/Authentication/components/Authentication.test.jsx b/components/Authentication/components/Authentication.test.jsx deleted file mode 100644 index c8d062d..0000000 --- a/components/Authentication/components/Authentication.test.jsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import { Login, SignUp, PasswordReset } from './index'; - -describe('Authenticcation', () => { - it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - }); - - it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - }); - - it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - }); -}); diff --git a/components/Authentication/components/Login.jsx b/components/Authentication/components/Login.jsx deleted file mode 100644 index 08ec933..0000000 --- a/components/Authentication/components/Login.jsx +++ /dev/null @@ -1,102 +0,0 @@ -/* eslint-disable react/jsx-no-literals */ -import React from 'react'; -import { Form, Button, Typography } from 'antd'; -import Router from 'next/router'; - -import './Authentication.css'; -import 'antd/dist/antd.css'; -import LoginImage from '../../../static/login.svg'; -import LoginInputItemGenerator from './LoginInputItemGenerator'; -import { - WELCOME, - LOGIN_TO_CONTINUE, - FORGOT_PASSWORD, - LOGIN, - OR, - REGISTER_NOW -} from '../constants'; - -const { Title, Paragraph } = Typography; - -/** - * function that is used to display the Login Page - * @function - * @return {Object} the login page - */ -class NormalLoginForm extends React.Component { - state = { - iconLoading: false, // loading icon when code is accessing network - loading: false, - } - - /** - * function that is used to animate signup loading - * @function - * @return {Object} sets loading state to true - */ - enterLoading = () => { - this.setState({ loading: true }); - } - - /** - * function that is used to handle submit - * @function - * @return {Object} returns the user values - */ - handleSubmit = e => { - const { validateFields } = this.props.form; - e.preventDefault(); - - /** - * function that is used to handle submit, This function helps to Validate the - * specified fields and get theirs values and errors., if the target field is not in - * visible area of form, form will be automatically scrolled to the target field area. - * @function - * @return {Object} returns the values of the form - */ - validateFields((err, values) => { - if (!err) { - this.enterLoading(); - setTimeout(() => { - Router.push('/timeline'); - }, 1000); - } - }); - } - - render() { - const { getFieldDecorator } = this.props.form; - const { loading } = this.state; - - return ( -
-
- -
- -
-
- {WELCOME} - {LOGIN_TO_CONTINUE} - {/* inputs for username and password */} - {LoginInputItemGenerator(getFieldDecorator)} - {/* buttons */} - - {FORGOT_PASSWORD} - - {OR} - - {REGISTER_NOW} - - -
-
-
- ); - } -} - -const Login = Form.create({ name: 'normal_login' })(NormalLoginForm); -export default Login; diff --git a/components/Authentication/components/LoginInputItemGenerator.jsx b/components/Authentication/components/LoginInputItemGenerator.jsx deleted file mode 100644 index f2e04a4..0000000 --- a/components/Authentication/components/LoginInputItemGenerator.jsx +++ /dev/null @@ -1,59 +0,0 @@ -import React from 'react'; -import { - Form, Icon, Input, message -} from 'antd'; -import PropTypes from 'prop-types'; - -import { - LOGIN_INPUTS -} from '../constants'; - -/** -* function that is used to also handle password validation, this compares the two password field; -* @function -* @param {string} className class of the input field -* @param {string} id id of the input field -* @param {string} iconType preceding icon of the input field -* @param {function} decorator a Two-way binding for form -* @param {string} placeholder placeholder of the input field -* @param {Object[]} rules rules for input validation -* @param {string} inputType type of the input element -* @return {function} input item of the form -*/ - -const LoginInputItemGenerator = decorator => LOGIN_INPUTS.map(input => { - const { - className, - id, - iconType, - placeholder, - rules, - inputType, - } = input; - - return ( - - { - decorator(id, { - rules, - })( - } placeholder={placeholder} type={inputType} /> - ) - } - - ); -}); - -export default LoginInputItemGenerator; - -LoginInputItemGenerator.propTypes = { - className: PropTypes.string, - field: PropTypes.string, - iconType: PropTypes.string, - inputType: PropTypes.string, - placeholder: PropTypes.string, - rules: PropTypes.arrayOf(PropTypes.shape({ - message: PropTypes.string.isRequired, - required: PropTypes.bool.isRequired, - })).isRequired, -}; diff --git a/components/Authentication/components/PasswordReset.jsx b/components/Authentication/components/PasswordReset.jsx deleted file mode 100644 index 59d59b0..0000000 --- a/components/Authentication/components/PasswordReset.jsx +++ /dev/null @@ -1,140 +0,0 @@ -/* eslint-disable react/jsx-no-literals */ -import React from 'react'; -import { - Form, - Input, - Button, - notification, Icon -} from 'antd'; -import Router from 'next/router'; - -import './Authentication.css'; -import 'antd/dist/antd.css'; -import ForgotPassword from '../../../static/forgot_password.svg'; -import { - FORGET_PASSWORD_NOTIFICATION_TITLE, - FORGET_PASSWORD_NOTIFICATION_DESCRIPTION, - FORGET_PASSWORD_EMAIL_INPUT_ERROR, - FORGET_PASSWORD_EMAIL_INPUT_INSTRUCTION, - PASSWORD_CHANGE_TEXT, - REMEMBER_PASSWORD_TEXT, - LOGIN -} from '../constants'; - -/** - * function that is used to display the forget password Page - * @function - * @return {Object} the forget password page - */ -class PasswordResetForm extends React.Component { - state = { - loading: false, - }; - - /** - * function that is used to animate signup loading - * @function - * @return {Object} sets loading state to true - */ - enterLoading = () => { - this.setState({ loading: true }); - } - - /** - * function that is used to handle submit - * @function - * @return {Object} returns the user values - */ - handleSubmit = e => { - const { validateFieldsAndScroll, resetFields } = this.props.form; - e.preventDefault(); - - /** - * function that is used to handle submit, This function helps to Validate the - * specified fields and get theirs values and errors., if the target field is not in - * visible area of form, form will be automatically scrolled to the target field area. - * @function - * @return {Object} returns the values of the form - */ - validateFieldsAndScroll((err, values) => { - if (!err && values !== '') { - this.setState({ loading: true }); - setTimeout(() => { - this.openNotificationWithIcon('success', values.email); - this.setState({ loading: false, values }); - // resets the value on the input field - resetFields(); - }, 1000); - } - }); - } - - /** - * function that is used to close the message and redirect to the login page - * @function - * @return {Object} returns the values of the form - */ - close = () => { - Router.push('/login'); - }; - - /** - * function that is used to show info on successful password change - * @function - * @param {String} type this is the type of message (success, warning or failure) - * @param {String} email the email to whose password is been rest - * @return {Object} returns a messeage toast which prompt users - */ - openNotificationWithIcon = (type, email) => { - notification[type]({ - description: `${FORGET_PASSWORD_NOTIFICATION_DESCRIPTION} ${email}`, - duration: 0, - message: FORGET_PASSWORD_NOTIFICATION_TITLE, - onClose: this.close, - }); - }; - - render() { - const { getFieldDecorator } = this.props.form; - const { loading } = this.state; - return ( -
-
- -
- -
-
- - {getFieldDecorator('email', { - rules: [{ - message: FORGET_PASSWORD_EMAIL_INPUT_ERROR, - type: 'email', - }, { - message: FORGET_PASSWORD_EMAIL_INPUT_INSTRUCTION, - required: true, - }], - })( - } /> - )} - - - - -
- {REMEMBER_PASSWORD_TEXT} - {LOGIN} - -
-
-
- ); - } -} - -const PasswordReset = Form.create({ name: 'register' })(PasswordResetForm); - -export default PasswordReset; diff --git a/components/Authentication/components/SignUp.jsx b/components/Authentication/components/SignUp.jsx deleted file mode 100644 index d859e54..0000000 --- a/components/Authentication/components/SignUp.jsx +++ /dev/null @@ -1,125 +0,0 @@ -import React from 'react'; -import { - Form -} from 'antd'; -import Router from 'next/router'; - -import './Authentication.css'; -import 'antd/dist/antd.css'; -import RegistrationImage from '../../../static/register.svg'; -import { - SIGNUP_INPUTS -} from '../constants'; -import SignupInputGenerator from './SignupInputItemGenerator'; - -/** - * function that is used to display the registration Page - * @function - * @return {Object} the registration page - */ -class RegistrationForm extends React.Component { - state = { - confirmDirty: false, - autoCompleteResult: [], - iconLoading: false, - loading: false, - isAgreementChecked: false, - }; - - /** - * function that is used to animate signup loading - * @function - * @return {Object} sets loading state to true - */ - enterLoading = () => { - this.setState({ loading: true }); - } - - /** - * function that is used to handle submit - * @function - * @return {Object} returns the user values - */ - handleSubmit = e => { - e.preventDefault(); - const { validateFieldsAndScroll } = this.props.form; - - /** - * function that is used to handle submit, This function helps to Validate the specified - * fields and get theirs values and errors., if the target field is not in visible area of form, form will be automatically scrolled to the target field area. - * @function - * @return {Object} returns the values of the form - */ - validateFieldsAndScroll((err, values) => { - if (!err && values.agreement) { - this.enterLoading(); - setTimeout(() => { - Router.push('/timeline'); - }, 1000); - } - }); - } - - /** - * function that is used to handle password validation, this fires when the first password field has been filled and has lost focus. this will help in comparing the password in that field to the next input field; - * @function - * @return {Object} sets the state of isConfirmedDirty - */ - handleConfirmBlur = e => { - const { value } = e.target; - this.setState({ confirmDirty: this.state.confirmDirty || !!value }); - } - - /** - * function that is used to also handle password validation, this compares the two password field; - * @function - * @param {Array} rule the validation rule for the input field - * @param {String} value the value passed on the input field - * @param {function} callback error message to display - * @return {function} error message to display - */ - compareToFirstPassword = (rule, value, callback) => { - const { form } = this.props; - if (value && value !== form.getFieldValue('password')) { - callback('The Two passwords that you enter is inconsistent!'); - } else { - callback(); - } - } - - /** -* function that is used to handle checkbox agreement -* @function -* @return {Boolean} controls the state of of the checkbox -*/ - handleCheckBox = e => { - this.setState({ - isAgreementChecked: e.target.checked, - }); - } - - render() { - const { getFieldDecorator } = this.props.form; - return ( -
-
- -
- -
-
- { - SIGNUP_INPUTS.map(input => { - const { actions = {}, items } = input; - return SignupInputGenerator(actions, items, getFieldDecorator); - }) - } -
-
-
- ); - } -} - -const Signup = Form.create({ name: 'register' })(RegistrationForm); -export default Signup; diff --git a/components/Authentication/components/SignupInputItemGenerator.jsx b/components/Authentication/components/SignupInputItemGenerator.jsx deleted file mode 100644 index bf7ce95..0000000 --- a/components/Authentication/components/SignupInputItemGenerator.jsx +++ /dev/null @@ -1,112 +0,0 @@ -import React from 'react'; -import { - Form, Input, Checkbox, Button -} from 'antd'; -import PropTypes from 'prop-types'; - -import { - READ_ACCEPTED_AGREEMENT, - AGREEMENT, - REGISTER, LOGIN, ALREADY_HAVE_ACCOUNT -} from '../constants'; - -/** -* function that is used to also handle password validation, this compares the two password field; -* @function -* @param {function} actions actions attached to the input field for validation -* @param {Object} items the values passed on to the input field -* @param {function} decorator a Two-way binding for form -* @param {string} label label for the input field -* @param {string} id id of the input field -* @param {Object[]} rules rules for input validation -* @param {Boolean} hasOnBlur check if the input has an onChange function attached ot it -* @param {Boolean} hasOnChange check if the input has an onChange function attached ot it -* @param {function} valuePropName Props of checkbox -* @param {Boolean} isButton check if the form element is a button -* @param {Boolean} hasFieldChildren check if the input children -* @param {function} FieldType type of html form element -* @return {function} input item of the form -*/ -const SignupInputGenerator = (actions, items, decorator) => { - const { - label, id, rules, hasOnBlur, hasOnChange, valuePropName, isButton, hasFieldChildren, FieldType, - } = items; - const { onBlur, onChange } = actions; - const actionProps = { - onBlur: hasOnBlur && onBlur, - onChange: hasOnChange && onChange, - }; - - let Field; - let fieldChildren; - - switch (FieldType) { - case 'input': - Field = Input; - break; - case 'checkbox': - Field = Checkbox; - break; - case 'button': - Field = Button; - break; - default: - Field = null; - break; - } - - if (isButton && hasFieldChildren) { - fieldChildren = ( -
- {ALREADY_HAVE_ACCOUNT} - {LOGIN} -
- ); - } else if (FieldType === 'checkbox' && hasFieldChildren) { - fieldChildren = ( - - {READ_ACCEPTED_AGREEMENT} - - {AGREEMENT} - - - ); - } - - return ( - - { - isButton ? ( - <> - {REGISTER} - {fieldChildren} - - ) - : decorator(id, { rules }, { valuePropName })( - - {hasFieldChildren ? fieldChildren : null} - - ) - } - - ); -}; - -export default SignupInputGenerator; - -SignupInputGenerator.propTypes = { - FieldType: PropTypes.elementType, - hasFieldChildren: PropTypes.bool, - hasOnBlur: PropTypes.bool, - hasOnChange: PropTypes.bool, - id: PropTypes.string, - rules: PropTypes.arrayOf(PropTypes.shape({ - message: PropTypes.string.isRequired, - required: PropTypes.bool.isRequired, - type: PropTypes.string.isRequired, - whitespace: PropTypes.bool.isRequired, - })).isRequired, - isButton: PropTypes.bool, - label: PropTypes.string, - valuePropName: PropTypes.string, -}; diff --git a/components/Authentication/components/index.js b/components/Authentication/components/index.js deleted file mode 100644 index d9e7d73..0000000 --- a/components/Authentication/components/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import Login from './Login'; -import SignUp from './SignUp'; -import PasswordReset from './PasswordReset'; - -export { Login, SignUp, PasswordReset }; diff --git a/components/Authentication/constants.js b/components/Authentication/constants.js deleted file mode 100644 index 1e93304..0000000 --- a/components/Authentication/constants.js +++ /dev/null @@ -1,128 +0,0 @@ -const FORGET_PASSWORD_NOTIFICATION_TITLE = 'Link Sent'; -const FORGET_PASSWORD_NOTIFICATION_DESCRIPTION = 'The resent link has been sent to'; -const FORGET_PASSWORD_EMAIL_INPUT_ERROR = 'The input is not a valid E-mail !'; -// eslint-disable-next-line max-len -const FORGET_PASSWORD_EMAIL_INPUT_INSTRUCTION = 'Please input your E-mail so that we can send your reset link!'; -const PASSWORD_CHANGE_TEXT = 'Request for Password Change'; -const REMEMBER_PASSWORD_TEXT = 'remember your password? '; -const WELCOME = 'Welcome'; -const LOGIN_TO_CONTINUE = 'Login to continue'; -const FORGOT_PASSWORD = 'Forgot password'; -const REGISTER_NOW = ' register now!'; -const LOGIN = 'login'; -const OR = 'or'; -const READ_ACCEPTED_AGREEMENT = 'I have read and accepted the '; -const AGREEMENT = 'agreement'; -const REGISTER = 'Register'; -const ALREADY_HAVE_ACCOUNT = 'already have an account, please '; -const LOGIN_INPUTS = [ - { - className: 'form_icon', - iconType: 'user', - id: 'username', - placeholder: 'Username', - rules: [{ - message: 'Please input your username!', - required: true, - }], - }, { - className: 'form_icon', - iconType: 'lock', - id: 'password', - inputType: 'password', - placeholder: 'Password', - rules: [{ - message: 'Please input your Password!', - required: true, - }], - }, -]; - -const SIGNUP_INPUTS = [ - { - items: { - FieldType: 'input', - hasFieldChildren: false, - id: 'name', - label: 'Name', - rules: [{ message: 'Please input your name!', required: true, whitespace: true }], - }, - }, - - { - items: { - FieldType: 'input', - hasFieldChildren: false, - id: 'email', - label: 'E-mail', - rules: [{ message: 'The input is not a valid E-mail!', type: 'email' }, { - message: 'Please input your E-mail!', required: true, - }], - }, - }, - - { - items: { - FieldType: 'input', - hasFieldChildren: false, - id: 'password', - label: 'Password', - rules: [{ message: 'The input is not a valid E-mail!', required: true }, - // { validator: validateToNextPassword } - ], - }, - }, - - { - items: { - FieldType: 'input', - hasFieldChildren: false, - id: 'confirm', - label: 'Confirm Password', - rules: [{ message: 'Please confirm your password!', required: true }, - // { validator: compareToFirstPassword }, - ], - }, - }, - - { - items: { - FieldType: 'checkbox', - hasFieldChildren: true, - id: 'agreement', - rules: [{ message: 'Please accept the agreement ', required: true }, - ], - valuePropName: 'checked', - }, - }, - - { - items: { - FieldType: 'button', - hasFieldChildren: true, - id: 'submit', - isButton: true, - }, - }, -]; - -export { - LOGIN_INPUTS, - SIGNUP_INPUTS, - FORGET_PASSWORD_NOTIFICATION_TITLE, - FORGET_PASSWORD_NOTIFICATION_DESCRIPTION, - FORGET_PASSWORD_EMAIL_INPUT_ERROR, - FORGET_PASSWORD_EMAIL_INPUT_INSTRUCTION, - PASSWORD_CHANGE_TEXT, - REMEMBER_PASSWORD_TEXT, - WELCOME, - LOGIN_TO_CONTINUE, - FORGOT_PASSWORD, - LOGIN, - OR, - REGISTER_NOW, - READ_ACCEPTED_AGREEMENT, - AGREEMENT, - REGISTER, - ALREADY_HAVE_ACCOUNT -}; diff --git a/components/Authentication/index.js b/components/Authentication/index.js deleted file mode 100644 index 19bb4b3..0000000 --- a/components/Authentication/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import { Login, SignUp, PasswordReset } from './components'; - -export { Login, SignUp, PasswordReset }; diff --git a/components/LandingPage/components/LandingPage.css b/components/LandingPage/components/LandingPage.css index 46ec66d..d13a068 100644 --- a/components/LandingPage/components/LandingPage.css +++ b/components/LandingPage/components/LandingPage.css @@ -63,7 +63,7 @@ margin: 2em; } .LandingPage_hero > img { - width: 40%; + width: 30%; } .LandingPage_body > section { diff --git a/components/LandingPage/components/LandingPage.jsx b/components/LandingPage/components/LandingPage.jsx index eec24ec..eed708a 100644 --- a/components/LandingPage/components/LandingPage.jsx +++ b/components/LandingPage/components/LandingPage.jsx @@ -1,11 +1,11 @@ import React from 'react'; -import './LandingPage.css'; -import 'antd/dist/antd.css'; import LandingPageContent from './LandingPageContent'; -import PageLayout from '../../Layout'; -import { LANDING_PAGE_CONTENTS, PAGE_TITLE } from '../constants'; +import { components } from '../../layout'; +import { LANDING_PAGE_CONTENTS, STRING } from '../constants'; +const { PAGE_TITLE } = STRING; +const { PageLayout } = components; /** * Function for displaying the landing page * @@ -15,10 +15,10 @@ import { LANDING_PAGE_CONTENTS, PAGE_TITLE } from '../constants'; const LandingPage = () => ( { LANDING_PAGE_CONTENTS.map(landingPageContent => { @@ -37,17 +37,17 @@ const LandingPage = () => ( return ( ); }) diff --git a/components/LandingPage/components/LandingPage.test.jsx b/components/LandingPage/components/LandingPage.test.jsx index a0ce42a..5d35f8f 100644 --- a/components/LandingPage/components/LandingPage.test.jsx +++ b/components/LandingPage/components/LandingPage.test.jsx @@ -1,6 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import LandingPage from './index'; +import LandingPage from './LandingPage'; describe('LandingPage', () => { it('LandingPage should renders without crashing', () => { diff --git a/components/LandingPage/components/LandingPageContent.jsx b/components/LandingPage/components/LandingPageContent.jsx index b339fa1..13a4ad5 100644 --- a/components/LandingPage/components/LandingPageContent.jsx +++ b/components/LandingPage/components/LandingPageContent.jsx @@ -1,3 +1,4 @@ +/* eslint-disable jsx-a11y/anchor-is-valid */ import React from 'react'; import { Button, Typography } from 'antd'; import PropTypes from 'prop-types'; @@ -64,19 +65,19 @@ export default function LandingPageContent(props) { {/* displays image in a section */} - {isImagePresent ? {`${title} : null} + {isImagePresent ? {title} : null} ); } LandingPageContent.propTypes = { - level: PropTypes.number, - title: PropTypes.string, - paragraphText: PropTypes.string, - isButtonPresent: PropTypes.bool, - buttonText: PropTypes.string, - buttonLink: PropTypes.string, - isImagePresent: PropTypes.bool, - imageLink: PropTypes.string, - reverseSection: PropTypes.bool, - columnSection: PropTypes.bool, + buttonLink: PropTypes.string.isRequired, + buttonText: PropTypes.string.isRequired, + columnSection: PropTypes.bool.isRequired, + imageLink: PropTypes.string.isRequired, + isButtonPresent: PropTypes.bool.isRequired, + isImagePresent: PropTypes.bool.isRequired, + level: PropTypes.number.isRequired, + paragraphText: PropTypes.string.isRequired, + reverseSection: PropTypes.bool.isRequired, + title: PropTypes.string.isRequired, }; diff --git a/components/LandingPage/components/index.js b/components/LandingPage/components/index.js index 7b923f9..0ffd13e 100644 --- a/components/LandingPage/components/index.js +++ b/components/LandingPage/components/index.js @@ -1,4 +1,6 @@ - +/* eslint-disable import/prefer-default-export */ +import 'antd/dist/antd.css'; +import './LandingPage.css'; import LandingPage from './LandingPage'; -export default LandingPage; +export { LandingPage }; diff --git a/components/LandingPage/constants.js b/components/LandingPage/constants.js index 4044417..0504055 100644 --- a/components/LandingPage/constants.js +++ b/components/LandingPage/constants.js @@ -1,52 +1,68 @@ -/* eslint-disable max-len */ -const PAGE_TITLE = 'Home | Welcome to Help me'; // the title of the landing page - -const LANDING_PAGE_MAIN_CONTENT_TITLE = 'Help me Title'; - -const LANDING_PAGE_MAIN_CONTENT_PARAGRAPH_TEXT = 'Lorem ipsum dolor sit amet consectetur adipisicing elit.Deleniti porro vero'; - -const LANDING_PAGE_MAIN_CONTENT_BUTTON_TEXT = 'Lets begin this Journey'; - -const LANDING_PAGE_LEVEL_2_PARAGRAPH_TEXT = 'Lorem ipsum dolor sit amet consectetur adipisicing elit.Deleniti porro veroDeleniti porro vero'; - -const LANDING_PAGE_LEVEL_2_BUTTON_TEXT = 'Lets begin this Journey'; - -const LANDING_PAGE_LEVEL_3_CONTENT_TITLE = 'Lorem Ipsum dolor sit a '; - -const LANDING_PAGE_LEVEL_3_PARAGRAPH_TEXT = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti porro vero'; - -const LANDING_PAGE_LEVEL_4_CONTENT_TITLE = 'Title 2'; - -const LANDING_PAGE_LEVEL_4_PARAGRAPH_TEXT = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti porro vero'; - -const LANDING_PAGE_LEVEL_5_CONTENT_TITLE = 'Lorem Ipsum dolor sit a '; - -const LANDING_PAGE_LEVEL_5_PARAGRAPH_TEXT = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti porro vero Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti porro vero Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti porro vero Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti porro vero Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti porro vero v Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti porro vero'; +const STRING = { + LANDING_PAGE_LEVEL_2_BUTTON_TEXT: 'Lets begin this Journey', + LANDING_PAGE_LEVEL_2_PARAGRAPH_TEXT: `Lorem ipsum dolor sit amet consectetur adipisicing elit. + Deleniti porro veroDeleniti porro vero`, + LANDING_PAGE_LEVEL_3_CONTENT_TITLE: 'Lorem Ipsum dolor sit a ', + LANDING_PAGE_LEVEL_3_PARAGRAPH_TEXT: `Lorem ipsum dolor sit amet consectetur adipisicin + elit. Deleniti porro vero`, + LANDING_PAGE_LEVEL_4_CONTENT_TITLE: 'Title 2', + LANDING_PAGE_LEVEL_4_PARAGRAPH_TEXT: `Lorem ipsum dolor sit amet consectetur adipisicing elit. + Deleniti Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti Lorem ipsum dolor + consectetur adipisicing elit. Deleniti porro vero`, + LANDING_PAGE_LEVEL_5_BUTTON_TEXT: 'Create an Account', + LANDING_PAGE_LEVEL_5_CONTENT_TITLE: 'Lorem Ipsum dolor sit a ', + LANDING_PAGE_LEVEL_5_PARAGRAPH_TEXT: 'lorem dhjh jdijdj', + LANDING_PAGE_MAIN_CONTENT_BUTTON_TEXT: 'Lets begin this Journey', + LANDING_PAGE_MAIN_CONTENT_PARAGRAPH_TEXT: `Lorem ipsum dolor sit amet consectetur adipisicing + elit.Deleniti porro vero`, + LANDING_PAGE_MAIN_CONTENT_TITLE: 'Help me Title', + PAGE_TITLE: 'Home | Welcome to Help me', // the title of the landing page +}; -const LANDING_PAGE_LEVEL_5_BUTTON_TEXT = 'Create an Account'; +const { + LANDING_PAGE_MAIN_CONTENT_BUTTON_TEXT, + LANDING_PAGE_MAIN_CONTENT_PARAGRAPH_TEXT, + LANDING_PAGE_MAIN_CONTENT_TITLE, + LANDING_PAGE_LEVEL_2_PARAGRAPH_TEXT, + LANDING_PAGE_LEVEL_2_BUTTON_TEXT, + LANDING_PAGE_LEVEL_3_PARAGRAPH_TEXT, + LANDING_PAGE_LEVEL_3_CONTENT_TITLE, + LANDING_PAGE_LEVEL_4_PARAGRAPH_TEXT, + LANDING_PAGE_LEVEL_4_CONTENT_TITLE, + LANDING_PAGE_LEVEL_5_BUTTON_TEXT, + LANDING_PAGE_LEVEL_5_PARAGRAPH_TEXT, + LANDING_PAGE_LEVEL_5_CONTENT_TITLE, +} = STRING; const LANDING_PAGE_CONTENTS = [ { - buttonLink: '/signup', + buttonLink: 'http://localhost:3000/api/users/login', buttonText: LANDING_PAGE_MAIN_CONTENT_BUTTON_TEXT, + columnSection: false, imageLink: '../../../static/connected.svg', isButtonPresent: true, isImagePresent: true, level: 1, paragraphText: LANDING_PAGE_MAIN_CONTENT_PARAGRAPH_TEXT, + reverseSection: false, title: LANDING_PAGE_MAIN_CONTENT_TITLE, }, { + buttonLink: '', + buttonText: '', columnSection: true, imageLink: '../../../static/smile.svg', isButtonPresent: false, isImagePresent: true, level: 2, paragraphText: LANDING_PAGE_LEVEL_2_PARAGRAPH_TEXT, + reverseSection: false, title: LANDING_PAGE_LEVEL_2_BUTTON_TEXT, - }, { + buttonLink: '', + buttonText: '', + columnSection: false, imageLink: '../../../static/community.svg', isButtonPresent: false, isImagePresent: true, @@ -56,15 +72,21 @@ const LANDING_PAGE_CONTENTS = [ title: LANDING_PAGE_LEVEL_3_CONTENT_TITLE, }, { + buttonLink: '', + buttonText: '', + columnSection: false, + imageLink: '', isButtonPresent: false, isImagePresent: false, level: 2, paragraphText: LANDING_PAGE_LEVEL_4_PARAGRAPH_TEXT, + reverseSection: true, title: LANDING_PAGE_LEVEL_4_CONTENT_TITLE, }, { - buttonLink: '/signup', + buttonLink: 'http://localhost:3000/api/users/login', buttonText: LANDING_PAGE_LEVEL_5_BUTTON_TEXT, + columnSection: false, imageLink: '../../../static/hangout.svg', isButtonPresent: true, isImagePresent: true, @@ -76,6 +98,6 @@ const LANDING_PAGE_CONTENTS = [ ]; export { - PAGE_TITLE, + STRING, LANDING_PAGE_CONTENTS }; diff --git a/components/LandingPage/index.js b/components/LandingPage/index.js index e5e516f..121d0c0 100644 --- a/components/LandingPage/index.js +++ b/components/LandingPage/index.js @@ -1,3 +1,4 @@ -import LandingPage from './components/index'; +/* eslint-disable import/prefer-default-export */ +import * as components from './components'; -export default LandingPage; +export { components }; diff --git a/components/Layout/components/FooterListCreator.jsx b/components/Layout/components/FooterListCreator.jsx index 042c6bf..e01ba7a 100644 --- a/components/Layout/components/FooterListCreator.jsx +++ b/components/Layout/components/FooterListCreator.jsx @@ -1,3 +1,4 @@ +/* eslint-disable jsx-a11y/anchor-is-valid */ import React from 'react'; import Link from 'next/link'; import PropTypes from 'prop-types'; @@ -11,9 +12,7 @@ const FooterListCreator = props => { const { href, text } = link; return ( -
  • - {text} -
    • + {text} ); }) diff --git a/components/Layout/components/NavHeader.jsx b/components/Layout/components/NavHeader.jsx index 21c39a5..c8f0648 100644 --- a/components/Layout/components/NavHeader.jsx +++ b/components/Layout/components/NavHeader.jsx @@ -1,3 +1,4 @@ +/* eslint-disable jsx-a11y/anchor-is-valid */ import React from 'react'; import Head from 'next/head'; import { @@ -6,8 +7,11 @@ import { import Link from 'next/link'; import PropTypes from 'prop-types'; -import 'antd/dist/antd.css'; -import { HEADER_TITLE, MENU_ITEMS } from '../constants'; +import { + MENU_ITEMS, STRINGS +} from '../constants'; + +const { HEADER_TITLE, LOGIN, LOGOUT } = STRINGS; const { Header } = Layout; const { Search } = Input; @@ -19,7 +23,7 @@ const { Search } = Input; * @return {Object} head metadata which is inserted in every page */ function NavHeader(props) { - const { title } = props; + const { title, handleSearch, searchValue } = props; let isAuthenticated; // fake Authentication for development if (global.location !== undefined && global.location.pathname === '/') { @@ -38,14 +42,14 @@ function NavHeader(props) { {!title ? HEADER_TITLE : title} {/* navheader for mobile */}
    - + helpme logo @@ -53,8 +57,8 @@ function NavHeader(props) { {/* hide when authenticated */} {isAuthenticated ? null : ( )} @@ -70,16 +74,17 @@ function NavHeader(props) { <> {/* search */} console.log(value)} - style={{ width: 200 }} + placeholder="input search text" + onSearch={handleSearch} + style={{ width: 200 }} + value={searchValue} /> {/* navbar for authenticated desktop */} { MENU_ITEMS.map(menuItem => { @@ -96,14 +101,14 @@ function NavHeader(props) { ) : ( )} @@ -112,6 +117,14 @@ function NavHeader(props) { ); } export default NavHeader; -Head.propTypes = { +NavHeader.propTypes = { + handleSearch: PropTypes.func, + searchValue: PropTypes.string, title: PropTypes.string, }; + +NavHeader.defaultProps = { + handleSearch: null, + searchValue: '', + title: 'welcome to Helpme', +}; diff --git a/components/Layout/components/PageFooter.jsx b/components/Layout/components/PageFooter.jsx index 5fd49ac..ce31457 100644 --- a/components/Layout/components/PageFooter.jsx +++ b/components/Layout/components/PageFooter.jsx @@ -1,3 +1,4 @@ +/* eslint-disable jsx-a11y/anchor-is-valid */ import React from 'react'; import Link from 'next/link'; import { Layout } from 'antd'; @@ -19,14 +20,18 @@ export default function PageFooter() { diff --git a/components/Layout/components/PageLayout.css b/components/Layout/components/PageLayout.css index 79ece55..0e0f4cb 100644 --- a/components/Layout/components/PageLayout.css +++ b/components/Layout/components/PageLayout.css @@ -3,10 +3,6 @@ margin-top: 64px; } -.PageLayout_content_sidebar { - height: calc(100vh - 64px); -} - .layout_header-mobile { display: flex; justify-content: space-between; diff --git a/components/Layout/components/PageLayout.jsx b/components/Layout/components/PageLayout.jsx index 2b9972c..38705ba 100644 --- a/components/Layout/components/PageLayout.jsx +++ b/components/Layout/components/PageLayout.jsx @@ -6,9 +6,9 @@ import PropTypes from 'prop-types'; import NavHeader from './NavHeader'; import Sidebar from './Sidebar'; import PageFooter from './PageFooter'; -import './PageLayout.css'; -import { HEADER_TITLE } from '../constants'; +import { STRINGS } from '../constants'; +const { HEADER_TITLE } = STRINGS; const { Content } = Layout; /** * Function for displaying the landing page @@ -22,27 +22,35 @@ const { Content } = Layout; */ export default function PageLayout(props) { const { - title, isAuthenticated, children, isFooterPresent, isSiderPresent, + title, isAuthenticated, children, isFooterPresent, + isSiderPresent, handleSearch, searchValue, } = props; return ( <> - + {children} + {isFooterPresent ? : null} - {isFooterPresent ? : null} ); } PageLayout.propTypes = { children: PropTypes.node, + handleSearch: PropTypes.func, isAuthenticated: PropTypes.bool, isFooterPresent: PropTypes.bool, isSiderPresent: PropTypes.bool, + searchValue: PropTypes.string, title: PropTypes.string, }; diff --git a/components/Layout/components/PageLayout.test.jsx b/components/Layout/components/PageLayout.test.jsx index 075aa0d..00c552c 100644 --- a/components/Layout/components/PageLayout.test.jsx +++ b/components/Layout/components/PageLayout.test.jsx @@ -3,7 +3,7 @@ import ReactDOM from 'react-dom'; import NavHeader from './NavHeader'; import PageFooter from './PageFooter'; import Sidebar from './Sidebar'; -import PageLayout from './index'; +import PageLayout from './PageLayout'; describe('PageLayout , NavHeader, PageFooter,Sidebar and PageLayout', () => { it('NavHeader should render without crashing', () => { diff --git a/components/Layout/components/Sidebar.jsx b/components/Layout/components/Sidebar.jsx index 3968b67..234b6f4 100644 --- a/components/Layout/components/Sidebar.jsx +++ b/components/Layout/components/Sidebar.jsx @@ -1,3 +1,4 @@ +/* eslint-disable jsx-a11y/anchor-is-valid */ import React from 'react'; import { Layout, Menu, Icon } from 'antd'; import Link from 'next/link'; @@ -46,3 +47,7 @@ export default function Sidebar(props) { Sidebar.propTypes = { isSiderPresent: PropTypes.bool, }; + +Sidebar.defaultProps = { + isSiderPresent: false, +}; diff --git a/components/Layout/components/index.js b/components/Layout/components/index.js index 6b80de7..c908b9f 100644 --- a/components/Layout/components/index.js +++ b/components/Layout/components/index.js @@ -1,3 +1,6 @@ +/* eslint-disable import/prefer-default-export */ +import 'antd/dist/antd.css'; +import './PageLayout.css'; import PageLayout from './PageLayout'; -export default PageLayout; +export { PageLayout }; diff --git a/components/Layout/constants.js b/components/Layout/constants.js index 2919101..7aebe11 100644 --- a/components/Layout/constants.js +++ b/components/Layout/constants.js @@ -1,9 +1,8 @@ // eslint-disable-next-line import/prefer-default-export -const HEADER_TITLE = 'Helpme | Connect with Friends'; // title of the header -const MENU_ITEMS = [ +export const MENU_ITEMS = [ { - href: '/', + href: '/home', key: 1, text: 'Home', }, { @@ -17,9 +16,9 @@ const MENU_ITEMS = [ }, ]; -const FOOTER_FIRST_COLUMN = [ +export const FOOTER_FIRST_COLUMN = [ { - href: '/#', + href: '/', text: 'Home', }, { href: '/contact', @@ -30,7 +29,7 @@ const FOOTER_FIRST_COLUMN = [ }, ]; -const FOOTER_SECOND_COLUMN = [ +export const FOOTER_SECOND_COLUMN = [ { href: '/about-us', text: 'Security & Privacy', @@ -40,7 +39,7 @@ const FOOTER_SECOND_COLUMN = [ }, ]; -const SIDEBAR_MENU_ITEMS = [ +export const SIDEBAR_MENU_ITEMS = [ { href: '/#', key: 1, @@ -59,6 +58,8 @@ const SIDEBAR_MENU_ITEMS = [ }, ]; -export { - HEADER_TITLE, MENU_ITEMS, FOOTER_FIRST_COLUMN, FOOTER_SECOND_COLUMN, SIDEBAR_MENU_ITEMS +export const STRINGS = { + HEADER_TITLE: 'Helpme | Connect with Friends', // title of the header + LOGIN: 'Login', + LOGOUT: 'Logout', }; diff --git a/components/Layout/index.js b/components/Layout/index.js index 0728d99..5ce3c0b 100644 --- a/components/Layout/index.js +++ b/components/Layout/index.js @@ -1,3 +1,8 @@ -import PageLayout from './components/index'; +// import PageLayout from './components/index'; -export default PageLayout; +// export default PageLayout; + +/* eslint-disable import/prefer-default-export */ +import * as components from './components/index'; + +export { components }; diff --git a/components/TimeLine/components/CreatePostComponent.jsx b/components/TimeLine/components/CreatePostComponent.jsx index 0fdd816..a1ce3ca 100644 --- a/components/TimeLine/components/CreatePostComponent.jsx +++ b/components/TimeLine/components/CreatePostComponent.jsx @@ -13,31 +13,35 @@ const { TextArea } = Input; * Helper function that is used for creating the input part of the post *component * @function * @param {String} InputPlaceholder - the placeholder for the input component - * @param {integer} rowHeight - the minimum amount of rows that the input component will initially contain + * @param {integer} rowHeight - the minimum amount of rows that the input + * component will initially contain * @return {Object} the input part of the createpost component */ const CreatePostInput = props => { const { - InputPlaceholder, rowHeight, handleOnChange, postValue, textValue, + InputPlaceholder, rowHeight, handleOnChange, textValue, } = props; return (