diff --git a/package-lock.json b/package-lock.json index 159d1760..0fda9dba 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6830,19 +6830,6 @@ "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz", "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==" }, - "history": { - "version": "4.10.1", - "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", - "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", - "requires": { - "@babel/runtime": "^7.1.2", - "loose-envify": "^1.2.0", - "resolve-pathname": "^3.0.0", - "tiny-invariant": "^1.0.2", - "tiny-warning": "^1.0.0", - "value-equal": "^1.0.1" - } - }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -11960,6 +11947,21 @@ "react-is": "^16.6.0", "tiny-invariant": "^1.0.2", "tiny-warning": "^1.0.0" + }, + "dependencies": { + "history": { + "version": "4.10.1", + "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", + "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", + "requires": { + "@babel/runtime": "^7.1.2", + "loose-envify": "^1.2.0", + "resolve-pathname": "^3.0.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0", + "value-equal": "^1.0.1" + } + } } }, "react-router-dom": { @@ -11974,6 +11976,21 @@ "react-router": "5.2.0", "tiny-invariant": "^1.0.2", "tiny-warning": "^1.0.0" + }, + "dependencies": { + "history": { + "version": "4.10.1", + "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", + "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", + "requires": { + "@babel/runtime": "^7.1.2", + "loose-envify": "^1.2.0", + "resolve-pathname": "^3.0.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0", + "value-equal": "^1.0.1" + } + } } }, "react-scripts": { @@ -12074,6 +12091,14 @@ "tslib": "^1.0.0" } }, + "react-switch": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/react-switch/-/react-switch-5.0.1.tgz", + "integrity": "sha512-Pa5kvqRfX85QUCK1Jv0rxyeElbC3aNpCP5hV0LoJpU/Y6kydf0t4kRriQ6ZYA4kxWwAYk/cH51T4/sPzV9mCgQ==", + "requires": { + "prop-types": "^15.6.2" + } + }, "react-toastify": { "version": "6.0.5", "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-6.0.5.tgz", diff --git a/package.json b/package.json index 92342149..e686835f 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "react-cookies": "^0.1.1", "react-dom": "^16.12.0", "react-dropzone": "^11.0.1", - "react-icons": "^3.9.0", + "react-icons": "^3.10.0", "react-images": "^1.1.7", "react-lottie": "^1.2.3", "react-markdown-editor-lite": "^1.1.4", @@ -32,6 +32,7 @@ "react-router-dom": "^5.1.2", "react-scripts": "^3.4.0", "react-spinners": "^0.8.3", + "react-switch": "^5.0.1", "react-toastify": "^6.0.5", "redux": "^4.0.5", "redux-thunk": "^2.3.0", diff --git a/src/actions/adminAction.js b/src/actions/adminAction.js index 1504e9eb..6a15219c 100644 --- a/src/actions/adminAction.js +++ b/src/actions/adminAction.js @@ -40,6 +40,9 @@ export const loginAdmin = (adminInfo, history) => async (dispatch) => { localStorage.setItem('userId', decodedData._id) dispatch(setCurrentUser(decodedData)); + // update localStorage with admin status + localStorage.setItem('admin', true) + dispatch({ type: SET_ADMIN, payload: true diff --git a/src/actions/authAction.js b/src/actions/authAction.js index 543bb639..28687947 100644 --- a/src/actions/authAction.js +++ b/src/actions/authAction.js @@ -1,4 +1,4 @@ -import { SET_CURRENT_USER, GET_USER_PROFILE, PASSWORD_SUCCESSFULLY_CHANGED, PASSWORD_CHANGE_REQUEST_SUCCESS } from './types'; +import { SET_CURRENT_USER, GET_USER_PROFILE, PASSWORD_SUCCESSFULLY_CHANGED, PASSWORD_CHANGE_REQUEST_SUCCESS, SET_ADMIN } from './types'; import axios from 'axios'; import { setAuthToken } from '../utils/setAuthToken'; import jwt_decode from 'jwt-decode'; @@ -46,8 +46,19 @@ export const loginUser = (userInfo, history) => async (dispatch) => { const decodedData = await jwt_decode(token); localStorage.setItem('userId', decodedData._id) dispatch(setCurrentUser(decodedData)); - history.push("/dashboard"); + // update user role in localStorage + localStorage.setItem('admin', res.data.user.isAdmin) + + // store orgId in localStorage + localStorage.setItem('orgId', res.data.user.orgId); + + // if user is admin update admin in store + dispatch({ + type: SET_ADMIN, + payload: res.data.user.isAdmin + }) + history.push("/dashboard"); } } catch(error) { dispatch(errorHandler(error)); @@ -104,10 +115,10 @@ export const logoutUser = () => async (dispatch) => { // clear token from backend const res = await axios.post('/user/logout') if (res.status === 200) { - // remove token from the localStorage - localStorage.removeItem('jwtToken'); - // remove userID - localStorage.removeItem('userId') + // remove all keys from the localStorage except the orgId + const orgId = localStorage.getItem('orgId'); + localStorage.clear() + localStorage.setItem('orgId', orgId) // delete authorization from the header setAuthToken(false); // set user to {} diff --git a/src/actions/eventAction.js b/src/actions/eventAction.js index 5aa603a6..d680979b 100644 --- a/src/actions/eventAction.js +++ b/src/actions/eventAction.js @@ -80,4 +80,19 @@ export const getEventById = (eventId) => async (dispatch) => { } catch(error) { dispatch(errorHandler(error)) } +} + +// RSVP FOR EVENT SECTION +export const rsvpYes = (eventId, info) => async (dispatch) => { + try { + const res = await axios.patch(`/event/rsvp/${eventId}`, info); + dispatch(setRequestStatus(false)) + if(res.status === 200) { + dispatch(setRequestStatus(true)); + console.log('Doing rsvp for the event', res.data); + dispatch(getAllEvents()); + } + } catch (error) { + dispatch(errorHandler(error)) + } } \ No newline at end of file diff --git a/src/actions/orgAction.js b/src/actions/orgAction.js index 15a44800..c6470903 100644 --- a/src/actions/orgAction.js +++ b/src/actions/orgAction.js @@ -1,7 +1,7 @@ import axios from 'axios' import { setRequestStatus } from '../utils/setRequestStatus' import { errorHandler } from '../utils/errorHandler' -import { GET_ORG_PROFILE, UPDATE_ORG_PROFILE, DEACTIVATE_ORG, GET_ALL_MEMBERS } from './types' +import { GET_ORG_PROFILE, UPDATE_ORG_PROFILE, DEACTIVATE_ORG, GET_ALL_MEMBERS, TRIGGER_MAINTENANCE } from './types' // CREATE COMMUNITY export const registerCommunity = (orgInfo) => async (dispatch) => { @@ -120,4 +120,24 @@ export const deactivateOrg = () => async (dispatch) => { } catch(error) { dispatch(errorHandler(error)) } +} + +// TRIGGER MAINTENANCE MODE +export const TriggerMaintenance = () => async (dispatch) => { + try { + const orgId = localStorage.getItem('orgId') + const res = await axios.patch(`/org/${orgId}/maintenance`); + dispatch(setRequestStatus(false)) + if(res.status === 200) { + dispatch(setRequestStatus(true)) + // set maintenance to true in localStorage + localStorage.setItem('isMaintenance', res.data.maintenance); + dispatch({ + type: TRIGGER_MAINTENANCE, + payload: res.data.maintenance + }) + } + } catch (error) { + dispatch(errorHandler(error)) + } } \ No newline at end of file diff --git a/src/actions/postAction.js b/src/actions/postAction.js index f5b56f8c..83820d5d 100644 --- a/src/actions/postAction.js +++ b/src/actions/postAction.js @@ -37,4 +37,19 @@ export const getAllPinnedPosts = (pagination = 10, page = 1) => async (dispatch) } catch(error) { dispatch(errorHandler(error)) } -} \ No newline at end of file +} + +// UPVOTE POST +export const upVotePost = (postId) => async (dispatch) => { + try { + const res = await axios.patch(`/post/upvote/${postId}`) + dispatch(setRequestStatus(false)); + if(res.status === 200) { + dispatch(setRequestStatus(true)); + console.log('successfully upvoted post ', res.data) + dispatch(getAllPosts()); + } + } catch (error) { + dispatch(errorHandler(error)) + } +} diff --git a/src/actions/types.js b/src/actions/types.js index 8f945bdc..989dd57c 100644 --- a/src/actions/types.js +++ b/src/actions/types.js @@ -39,8 +39,8 @@ export const GET_EVENT_BY_ID = "GET_EVENT_BY_ID"; export const GET_ADMIN = "GET_ADMIN"; export const GET_COMMENTS_OF_A_POST = "GET_COMMENTS_OF_A_POST"; export const GET_SINGLE_PROJECT = "GET_SINGLE_PROJECT"; -export const PASSWORD_CHANGE_REQUEST_SUCCESS = - "PASSWORD_CHANGE_REQUEST_SUCCESS"; +export const PASSWORD_CHANGE_REQUEST_SUCCESS = "PASSWORD_CHANGE_REQUEST_SUCCESS"; export const PASSWORD_SUCCESSFULLY_CHANGED = "PASSWORD_SUCCESSFULLY_CHANGED"; export const GET_INVITE_LINK = "GET_INVITE_LINK"; export const PROCESS_INVITE_LINK = "PROCESS_INVITE_LINK"; +export const TRIGGER_MAINTENANCE = "TRIGGER_MAINTENANCE"; diff --git a/src/actions/usersAction.js b/src/actions/usersAction.js index 14fbe450..0e2c456a 100644 --- a/src/actions/usersAction.js +++ b/src/actions/usersAction.js @@ -1,4 +1,4 @@ -import { GET_USER_PROFILE, GET_ALL_MEMBERS, UPDATE_USER_PROFILE, GET_USER_EVENTS, GET_USER_PROJECTS, GET_USER_POSTS, GET_INVITE_LINK, PROCESS_INVITE_LINK } from './types' +import { GET_USER_PROFILE, GET_ALL_MEMBERS, UPDATE_USER_PROFILE, GET_USER_EVENTS, GET_USER_PROJECTS, GET_USER_POSTS, GET_INVITE_LINK, PROCESS_INVITE_LINK, SET_ADMIN } from './types' import { errorHandler } from '../utils/errorHandler' import axios from 'axios' import { setRequestStatus } from '../utils/setRequestStatus' @@ -15,6 +15,13 @@ export const getProfile = () => async (dispatch)=> { type: GET_USER_PROFILE, payload: res.data.user }) + // if user is admin + if(res.data.user.isAdmin === true) { + dispatch({ + type: SET_ADMIN, + payload: true + }) + } } } catch(error) { dispatch(errorHandler(error)) @@ -160,9 +167,9 @@ export const getPostsCreatedByUser = (pagination = 10, page = 1) => async (dispa } // GET INVITE LINK -export const getInviteLink = () => async (dispatch) => { +export const getInviteLink = (role) => async (dispatch) => { try { - const res = await axios.get('/user/invite') + const res = await axios.get(`/user/invite?role=${role}`) dispatch(setRequestStatus(false)); if(res.status === 200) { dispatch(setRequestStatus(true)); @@ -187,7 +194,7 @@ export const processInviteToken = (token) => async (dispatch) => { console.log('Processing the invite link ', res.data); dispatch({ type: PROCESS_INVITE_LINK, - payload: res.data.success || res.data.msg + payload: res.data.redirectTo || res.data.msg }) } } catch(error) { diff --git a/src/auth/login-form/login-form.scss b/src/auth/login-form/login-form.scss index ecdb7cf0..f5748c6c 100644 --- a/src/auth/login-form/login-form.scss +++ b/src/auth/login-form/login-form.scss @@ -2,7 +2,8 @@ padding: 15px 0; .form-group { label { - color: #00abff; + color: #1a73e8; + font-family: Inter; } } .cta-login { @@ -11,8 +12,9 @@ justify-content: center; margin-top: 30px; button { - padding: 8px 10px; - border-radius: 30px; + width: 104px; + background-color: #1a73e8; + // border-radius: 30px; } } } @@ -22,6 +24,7 @@ align-items: center; justify-content: center; margin-top: 10px; + color: #1a73e8; } #validation_msg { color: rgb(247, 134, 134); @@ -30,7 +33,7 @@ .loginbtn { border: 1px solid rgb(211, 220, 228); - border-radius: 3px; + // border-radius: 3px; width: 45%; } diff --git a/src/auth/login/login.js b/src/auth/login/login.js index 036c1070..dd068a8f 100644 --- a/src/auth/login/login.js +++ b/src/auth/login/login.js @@ -4,6 +4,8 @@ import LoginForm from "../login-form/login-form"; import SignUpForm from "../signup-form/signup-form"; import { DonutTitle } from "../../donutTitle/donutTitle"; import multipleDonuts from "../../images/extra-donuts.png"; +import GoogleLogin from '../../images/icons8-google-48.png' +import { FaGoogle, FaGithub } from 'react-icons/fa' import "./login.scss"; class Login extends Component { @@ -55,40 +57,24 @@ class Login extends Component { ? "Or Sign In with" : "Or SignUp with"}

- - +
+
- + Google - - +
+
- + - - +
+

{this.state.activeForm === "login" ? "Don't have an account? " diff --git a/src/auth/login/login.scss b/src/auth/login/login.scss index 97cc8757..7a53aac1 100644 --- a/src/auth/login/login.scss +++ b/src/auth/login/login.scss @@ -35,6 +35,7 @@ font-size: 20px; font-weight: normal; padding-right: 30px; + font-family: "Inter"; } } .user-details { @@ -44,6 +45,7 @@ box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.1); min-height: 380px; height: auto; + font-family: "Inter"; } } @media (min-width: 320px) and (max-width: 640px) { @@ -74,7 +76,7 @@ } .form-header { - font-family: Playfair Display; + font-family: "Playfair Display"; font-style: normal; font-weight: bold; font-size: 34px; @@ -98,7 +100,23 @@ text-align: center; margin: 0 auto; .selectorbtn { + font-family: "Inter"; border: 1px solid rgb(211, 220, 228); width: 55%; + background-color: #1a73e8; + width: 104px; + height: 38px; } } + +.login__options { + display: flex; + justify-content: space-around; + .google__login { + height: 30px; + } + .github__login { + height: 30px; + width: 30px; + } +} \ No newline at end of file diff --git a/src/auth/signup-form/signup-form.js b/src/auth/signup-form/signup-form.js index 85843061..666848aa 100644 --- a/src/auth/signup-form/signup-form.js +++ b/src/auth/signup-form/signup-form.js @@ -28,7 +28,7 @@ class SignUpForm extends Component { } componentWillReceiveProps(nextProps) { - if (nextProps.error?.msg.length > 0) { + if (nextProps.error?.msg?.length > 0) { this.setState({ error: { msg: "Something went wrong, Please recheck the input!", diff --git a/src/auth/signup-form/signup-form.scss b/src/auth/signup-form/signup-form.scss index a163a26f..439031de 100644 --- a/src/auth/signup-form/signup-form.scss +++ b/src/auth/signup-form/signup-form.scss @@ -1,8 +1,10 @@ .signup-details { padding: 15px 0; + font-family: "Inter"; .form-group { label { - color: #00abff; + color: #1a73e8; + font-family: "Inter"; } } .cta-signup { @@ -11,8 +13,12 @@ justify-content: center; margin-top: 30px; button { - padding: 8px 10px; - border-radius: 30px; + // padding: 8px 10px; + width: 104px; + height: 38px; + background-color: #1a73e8; + // border-radius: 30px; + } } .savebtn { @@ -35,10 +41,11 @@ border: 1px solid rgb(211, 220, 228); border-radius: 3px; width: 45%; + background-color: #1a73e8; } .signupbtn-text { - font-family: Inter; + font-family: "Inter"; font-style: normal; font-size: 16px; diff --git a/src/common/AdminRoute.js b/src/common/AdminRoute.js new file mode 100644 index 00000000..3731f0ac --- /dev/null +++ b/src/common/AdminRoute.js @@ -0,0 +1,44 @@ +import React, { useState, useEffect } from 'react' +import PropTypes from 'prop-types'; +import { Route, Redirect } from 'react-router-dom'; +import { connect } from 'react-redux'; + +function AdminRoute(props) { + // const [mount, setMount] = useState(false); + const [returnedRoute, setReturnedRoute] = useState("") + + useEffect(() => { + switch(props.role) { + case "admin": { + return setReturnedRoute( + props.auth.isAuthenticated && ( + props.auth.isAdmin || + props.user.userProfile.isAdmin || + props.admin.isAdmin ) ? ( + + ) : ( + + ) + ); + } + default: { + return setReturnedRoute(); + } + } + }, [props.role, props]) + return {returnedRoute}; +} + +AdminRoute.propTypes = { + auth: PropTypes.object.isRequired +} + +const mapStateToProps = (state) => { + return { + auth: state.auth, + user: state.user, + admin: state.admin + } +} + +export default connect(mapStateToProps)(AdminRoute); \ No newline at end of file diff --git a/src/common/Popups.js b/src/common/Popups.js index b23399ed..1f3c465c 100644 --- a/src/common/Popups.js +++ b/src/common/Popups.js @@ -1,6 +1,6 @@ import React, { Component } from 'react' import PropTypes from 'prop-types'; -import { Modal, Button, Form } from 'react-bootstrap'; +import { Modal, Button, Form, Col } from 'react-bootstrap'; import { MdVerifiedUser } from 'react-icons/md'; import { FaUserSlash } from 'react-icons/fa'; import { connect } from 'react-redux'; @@ -160,10 +160,10 @@ nextButton(){ ); const updateUsername = ( -

-
-
- + + + + - -
-
-
-
); @@ -219,7 +218,7 @@ nextButton(){ ) const updatePassword = ( -
+ +
); const deactivateAccount = ( @@ -261,11 +260,21 @@ nextButton(){ ) return ( - - - Update { " " + option } + + + +
+ Update { " " + option } +
+ - + {Boolean(option === "name") ? updateName : null} {Boolean(option === "email") ? updateEmail: null} {Boolean(option === "username") ? updateUsername: null} @@ -287,18 +296,24 @@ function Step1(props) { return null } return( -
- - -
+ + + + Registered-Email address + + + + ); } diff --git a/src/common/PrivateRoute.js b/src/common/PrivateRoute.js index 3d32943c..b641263a 100644 --- a/src/common/PrivateRoute.js +++ b/src/common/PrivateRoute.js @@ -3,11 +3,11 @@ import PropTypes from 'prop-types'; import { Route, Redirect } from 'react-router-dom'; import { connect } from 'react-redux'; -function PrivateRoute({ component: Component , auth, ...rest}) { +function PrivateRoute({ component: Component , auth, org, ...rest}) { return ( - auth.isAuthenticated === true ? ( + auth.isAuthenticated === true && org.isMaintenance === false ? ( ) : ( @@ -23,7 +23,8 @@ PrivateRoute.propTypes = { const mapStateToProps = (state) => { return { - auth: state.auth + auth: state.auth, + org: state.org } } export default connect(mapStateToProps)(PrivateRoute); \ No newline at end of file diff --git a/src/css/components/_modals.scss b/src/css/components/_modals.scss index 47702b99..74002205 100644 --- a/src/css/components/_modals.scss +++ b/src/css/components/_modals.scss @@ -5,8 +5,11 @@ max-height: 70vh; // width: 66%; border: 0px; - overflow-y: scroll; + // overflow-y: scroll; overflow-x: hidden; + background: #FFFFFF; + /* border: 1px solid #CCCCCC; */ + box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5); } .modal__header { .modal__title { @@ -34,7 +37,7 @@ width: 6vw; height: 5vh; background: rgb(250, 251, 252); - border-radius: 100px; + // border-radius: 100px; color: #1A73E8; padding: 0.3em; margin-left: 1em; @@ -130,7 +133,8 @@ border-radius: 20px; margin-top: 15px; margin-bottom: 10px; - justify-content: center; + // justify-content: center; + margin-left: 6px; align-items: center; .follower__image { border: 1px solid #e6e6e5; @@ -170,8 +174,8 @@ } .modal__followButton { background: #fff; - box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1); - border-radius: 34px; + // box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1); + // border-radius: 34px; width: 83px; height: 4.5vh; text-align: center; @@ -179,8 +183,8 @@ } .modal__unFollowButton { background: #007bff; - box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1); - border-radius: 34px; + // box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1); + // border-radius: 34px; width: 83px; height: 4.5vh; text-align: center; @@ -257,8 +261,8 @@ .modal__remove__followButton { border: 1px solid #eb5757; box-sizing: border-box; - box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1); - border-radius: 34px; + // box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1); + // border-radius: 34px; background: transparent; width: 83px; height: 4.5vh; @@ -277,8 +281,8 @@ .modal__removed__followButton { border: 1px solid #eb5757; box-sizing: border-box; - box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1); - border-radius: 34px; + // box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1); + // border-radius: 34px; background: #eb5757; width: 83px; height: 4.5vh; @@ -310,11 +314,13 @@ .invite__btn { margin-left: 3px; background: #1a73e8; - box-shadow: 1.26667px 2.53333px 6.33333px rgba(0, 0, 0, 0.1); - border-radius: 43.0667px; + // box-shadow: 1.26667px 2.53333px 6.33333px rgba(0, 0, 0, 0.1); + // border-radius: 43.0667px; width: 83px; - height: 4.5vh; - padding: 0px; + height: 5.2vh; + padding: 2px; + font-family: "Inter"; + font-size: 13px; } } .share__btn__container { @@ -323,14 +329,16 @@ .invite__btn { margin-right: 10px; background: #1a73e8; - box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1); - border-radius: 20px; + // box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1); + // border-radius: 20px; width: 83px; height: 4.5vh; padding: 0px; + font-family: "Inter"; + font-size: 13px; } .share__text { - font-family: Inter; + font-family: "Inter"; font-style: normal; font-weight: normal; font-size: 13px; @@ -347,9 +355,9 @@ .modal__save { background: $color-modal-button-active; box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1); - border-radius: 34px; - width: 104px; - height: 42px; + // border-radius: 34px; + width: 80px; + height: 38.5px; margin-right: 20px; margin-bottom: 10px; margin-left: 14px; @@ -357,7 +365,7 @@ font-family: $font-family-Inter; font-style: normal; font-weight: bold; - font-size: 18px; + font-size: 14px; line-height: 22px; /* identical to box height */ @@ -368,17 +376,16 @@ border: 1px solid #1a73e8; background: $color-modal-button-inactive; box-sizing: border-box; - box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1); - border-radius: 34px; + // border-radius: 34px; margin-right: 20px; margin-bottom: 10px; - width: 104px; - height: 42px; + width: 80px; + height: 38.5px; .modal__buttontext { font-family: $font-family-Inter; font-style: normal; font-weight: $font-weight-normal; - font-size: 18px; + font-size: 14px; line-height: 22px; /* identical to box height */ color: #1a73e8; diff --git a/src/images/icons8-google-48.png b/src/images/icons8-google-48.png new file mode 100644 index 00000000..f796db58 Binary files /dev/null and b/src/images/icons8-google-48.png differ diff --git a/src/reducers/orgReducer.js b/src/reducers/orgReducer.js index d07b4328..b51d9c66 100644 --- a/src/reducers/orgReducer.js +++ b/src/reducers/orgReducer.js @@ -1,6 +1,7 @@ -import { GET_ORG_PROFILE, UPDATE_ORG_PROFILE, DEACTIVATE_ORG } from '../actions/types' +import { GET_ORG_PROFILE, UPDATE_ORG_PROFILE, DEACTIVATE_ORG, TRIGGER_MAINTENANCE } from '../actions/types' const initialState = { isDeactivated: false, + isMaintenance: false, org: {} } @@ -18,6 +19,12 @@ export default (state = initialState, action) => { org: action.payload } } + case TRIGGER_MAINTENANCE: { + return { + ...state, + isMaintenance: action.payload + } + } case DEACTIVATE_ORG : { return { ...state, diff --git a/src/router.js b/src/router.js index a4d5b1cb..52abe660 100644 --- a/src/router.js +++ b/src/router.js @@ -19,6 +19,7 @@ import Admin from "./user/Admin/Admin"; import Setup from "./user/setup/Setup"; import CommunitySetting from "./user/dashboard/Community/CommunitySetting"; import Insight from "./user/dashboard/insights/Insight"; +import AdminRoute from "./common/AdminRoute"; const Router = () => ( @@ -42,7 +43,12 @@ const Router = () => ( /> - + diff --git a/src/user/Admin/register.scss b/src/user/Admin/register.scss index 6dfa0126..e3139a3b 100644 --- a/src/user/Admin/register.scss +++ b/src/user/Admin/register.scss @@ -54,12 +54,13 @@ align-items: center; .form-group { label { - color: #00abff; - font-size: 1.2vw; + color: #1A73E8; + font-family: "Inter"; } } .form-control { font-size: 1vw; + font-family: "Inter"; } .cta-register { @@ -69,8 +70,8 @@ padding-bottom: 1em; button { background: #1A73E8; - border-radius: 30px; - width: 22vw; + // border-radius: 30px; + width: 24vw; } } .user__data { @@ -91,11 +92,13 @@ .register__infos { padding: 15px 0; .form__group__label { - color: #00abff; + color: #1a73e8; + font-family: "Inter"; } } .already__account { text-align: center; + font-family: "Inter"; .link { cursor: pointer; @@ -116,11 +119,11 @@ height: auto; align-items: center; padding: 0; - + font-family: "Inter"; .form-group { label { - color: #00abff; - font-size: 1.2vw; + color: #1a73e8; + font-family: "Inter"; } } @@ -135,8 +138,8 @@ padding-bottom: 1em; button { background: #1A73E8; - border-radius: 30px; - width: 22vw; + // border-radius: 30px; + width: 24vw; } } .loginbtn { @@ -173,7 +176,8 @@ .login__infos { .form__group__label { - color: #00abff; + color: #1A73E8; + font-family: "Inter"; } } .already__account { @@ -321,10 +325,10 @@ display: flex; justify-content: flex-end; float: right; - height: 18vh; + height: 169px; margin-top: -9vh; opacity: 0.1; - width: 15vw; + width: 200px; } } diff --git a/src/user/dashboard/Community/components/OrgAuth.js b/src/user/dashboard/Community/components/OrgAuth.js index 4a420afc..0e007023 100644 --- a/src/user/dashboard/Community/components/OrgAuth.js +++ b/src/user/dashboard/Community/components/OrgAuth.js @@ -37,7 +37,7 @@ class OrgAuth extends Component { this.props.updateSettings(info) } - componentWillMount() { + componentDidMount() { this.props.getOrgProfile() } diff --git a/src/user/dashboard/Community/components/OrgPermission.js b/src/user/dashboard/Community/components/OrgPermission.js index 1c564a6e..669582d9 100644 --- a/src/user/dashboard/Community/components/OrgPermission.js +++ b/src/user/dashboard/Community/components/OrgPermission.js @@ -29,7 +29,7 @@ class OrgPermission extends Component { }); }; - componentWillMount() { + componentDidMount() { this.props.getOrgProfile() } @@ -152,23 +152,21 @@ class OrgPermission extends Component { as="select" name="canCreateManage" className="select_option" + value={canCreateManage} onChange={this.onChange} > diff --git a/src/user/dashboard/Community/components/OrgProfile.js b/src/user/dashboard/Community/components/OrgProfile.js index 61dad877..35070fa1 100644 --- a/src/user/dashboard/Community/components/OrgProfile.js +++ b/src/user/dashboard/Community/components/OrgProfile.js @@ -4,6 +4,7 @@ import UploadImg from '../../../../images/upload.jpg' import { connect } from 'react-redux' import { getOrgProfile, updateOrgProfile, deactivateOrg } from '../../../../actions/orgAction' import './profile.scss' +import ToggleSwitch from './Toggle/ToggleSwitch'; class OrgProfile extends Component { constructor(props){ @@ -14,19 +15,26 @@ class OrgProfile extends Component { orgName: "", shortDesc: "", longDesc: "", - error: '' + error: '', + isMaintenance: false } } // fetch data on page load - componentWillMount() { + componentDidMount() { this.props.getOrgProfile() } componentWillReceiveProps(nextProps) { const { name, description } = nextProps.org.org; - const { isDeactivated } = nextProps.org - this.setState({ orgName: name, shortDesc: description.shortDescription, longDesc: description.longDescription, isDeactivated: isDeactivated }, () => { + const { isDeactivated, isMaintenance } = nextProps.org + this.setState({ + orgName: name, + shortDesc: description.shortDescription, + longDesc: description.longDescription, + isDeactivated: isDeactivated, + isMaintenance: isMaintenance + }, () => { console.log('org info ', this.state) }) const { msg } = nextProps.error @@ -73,19 +81,24 @@ class OrgProfile extends Component { shortDesc, longDesc, // error, - isDeactivated + isDeactivated, + isMaintenance } = this.state; return (

Organization Profile

- {/* {Boolean(error !== null) ? (

{error}

): null } */} + {/* {Boolean(error !== null) ? (

{error}

): null } */}
LOGO + + Maintenance + +
@@ -94,8 +107,19 @@ class OrgProfile extends Component { alt="Upload" className="upload_img img-fluid" /> - -
@@ -158,10 +182,18 @@ class OrgProfile extends Component {
diff --git a/src/user/dashboard/Community/components/OrgSettings.js b/src/user/dashboard/Community/components/OrgSettings.js index 26a939aa..d2d1e105 100644 --- a/src/user/dashboard/Community/components/OrgSettings.js +++ b/src/user/dashboard/Community/components/OrgSettings.js @@ -43,7 +43,7 @@ class OrgSettings extends Component { this.props.updateSettings(info) } - componentWillMount() { + componentDidMount() { this.props.getOrgProfile() } @@ -155,19 +155,16 @@ class OrgSettings extends Component { > @@ -189,12 +186,10 @@ class OrgSettings extends Component { > diff --git a/src/user/dashboard/Community/components/Toggle/ToggleSwitch.js b/src/user/dashboard/Community/components/Toggle/ToggleSwitch.js new file mode 100644 index 00000000..de46a5e6 --- /dev/null +++ b/src/user/dashboard/Community/components/Toggle/ToggleSwitch.js @@ -0,0 +1,102 @@ +import React , { useState, useEffect } from 'react' +import Switch from "react-switch"; +import Confirm from './popup/Confirm'; +import { withRouter } from 'react-router-dom' +import { connect } from 'react-redux' + +function ToggleSwitch(props) { + const [checked, setCheck] = useState(false) + const [modalShow, setModalShow] = useState(false) + + useEffect(() => { + console.log('use effect from ToggleSwitch', props) + setCheck(props.isMaintenance) + }, [props, props.isMaintenance]) + + let handleChange = (checked) => { + console.log('checked ', checked) + setCheck(checked) + setModalShow(true) + } + + let handleClose = () => { + console.log('close clicked!') + setModalShow(false) + } + + let handleChecked = (checked) => { + console.log('checked handle', checked) + setCheck(checked); + } + + + return ( + <> +
+ } + checkedIcon={ +
+ On +
+ } + className="react-switch" + id="icon-switch" + /> + + + + ); +} + +// map state to props +const mapStateToProps = (state) => ({ + org: state.org, + auth: state.auth, + error: state.error +}) + +export default connect(mapStateToProps)(withRouter(ToggleSwitch)); \ No newline at end of file diff --git a/src/user/dashboard/Community/components/Toggle/popup/Confirm.js b/src/user/dashboard/Community/components/Toggle/popup/Confirm.js new file mode 100644 index 00000000..49d592ba --- /dev/null +++ b/src/user/dashboard/Community/components/Toggle/popup/Confirm.js @@ -0,0 +1,91 @@ +import React from 'react' +import { Col, Button, Form, Modal } from 'react-bootstrap' +import { withRouter } from 'react-router-dom' +import { connect } from 'react-redux' +import { TriggerMaintenance } from '../../../../../../actions/orgAction' + +function Confirm(props) { + + let onYesClick = () => { + console.log('yes sure!'); + if(props.text === "On") { + // turning maintenance mode on + props.handleChecked(true) + props.TriggerMaintenance(); + } + + if(props.text === "Off") { + // turning maintenance mode off + props.handleChecked(false) + props.TriggerMaintenance(); + } + + props.handleClose() + } + + let onCancelClick = () => { + console.log('no clicked!'); + if(props.text === "On") { + // cancel maintenance mode to be on + props.handleChecked(false); + } + if(props.text === "Off") { + // cancel maintenance mode to be off + props.handleChecked(true) + } + props.handleClose(); + } + + return ( +
+ + + +
Confirm?
+ + + + +
+ + +
+ Are you sure, You want to {props.text} maintenance mode? +
+ + +
+ +
+ + +
+ +
+ ) +} + +// map state to props +const mapStateToProps = (state) => ({ + auth: state.auth, + user: state.user, + org: state.org +}) + +export default connect(mapStateToProps, { TriggerMaintenance })(withRouter(Confirm)); \ No newline at end of file diff --git a/src/user/dashboard/Community/components/auth.scss b/src/user/dashboard/Community/components/auth.scss index b5c9a309..19065fe7 100644 --- a/src/user/dashboard/Community/components/auth.scss +++ b/src/user/dashboard/Community/components/auth.scss @@ -37,7 +37,7 @@ } .save_btn { background: #1A73E8; - border-radius: 100px; + // border-radius: 100px; font-family: Inter; font-style: normal; font-weight: normal; @@ -63,7 +63,7 @@ top: 100px; border: 1px solid #1A73E8; box-sizing: border-box; - border-radius: 100px; + // border-radius: 100px; } } } diff --git a/src/user/dashboard/Community/components/permission.scss b/src/user/dashboard/Community/components/permission.scss index fde907e6..eb01b89e 100644 --- a/src/user/dashboard/Community/components/permission.scss +++ b/src/user/dashboard/Community/components/permission.scss @@ -48,7 +48,6 @@ } .save_btn { background: #1A73E8; - border-radius: 100px; font-family: Inter; font-style: normal; font-weight: normal; @@ -74,7 +73,6 @@ top: 100px; border: 1px solid #1A73E8; box-sizing: border-box; - border-radius: 100px; } } } diff --git a/src/user/dashboard/Community/components/profile.scss b/src/user/dashboard/Community/components/profile.scss index 660a2c35..925d3a6e 100644 --- a/src/user/dashboard/Community/components/profile.scss +++ b/src/user/dashboard/Community/components/profile.scss @@ -49,7 +49,6 @@ } .save_btn { background: #1A73E8; - border-radius: 100px; font-family: Inter; font-style: normal; font-weight: normal; @@ -60,10 +59,10 @@ height: 30px; left: 200px; top: 100px; + padding: 2px; } .deactivate_btn { background: transparent; - border-radius: 100px; font-family: Inter; font-style: normal; font-weight: normal; @@ -76,10 +75,10 @@ height: 30px; left: 200px; top: 100px; + padding: 2px; } .deactivated_btn { background: #EB5757; - border-radius: 100px; font-family: Inter; font-style: normal; font-weight: normal; @@ -99,6 +98,9 @@ left: 0; top: 0; } + .toggle__switch { + float: right; + } } } } \ No newline at end of file diff --git a/src/user/dashboard/Community/components/settings.scss b/src/user/dashboard/Community/components/settings.scss index 4007fc7e..d37ce0b1 100644 --- a/src/user/dashboard/Community/components/settings.scss +++ b/src/user/dashboard/Community/components/settings.scss @@ -48,7 +48,6 @@ } .save_btn { background: #1A73E8; - border-radius: 100px; font-family: Inter; font-style: normal; font-weight: normal; @@ -74,7 +73,6 @@ top: 100px; border: 1px solid #1A73E8; box-sizing: border-box; - border-radius: 100px; } } } diff --git a/src/user/dashboard/dashboard.js b/src/user/dashboard/dashboard.js index ae42e0cd..428a5151 100644 --- a/src/user/dashboard/dashboard.js +++ b/src/user/dashboard/dashboard.js @@ -5,8 +5,6 @@ import UpcomingEvents from "./upcoming-events/upcoming-events"; import Notifications from "./notifications/notifications"; import Portfolio from "./portfolio/portfolio"; import NewsFeed from "./news-feed/news-feed"; -// import Updates from "./updates/updates"; -// import orgUpdatesLoading from "../../placeholderLoading/orgUpdatesLoading/orgUpdatesLoading"; import notifyUsersLoading from "../../placeholderLoading/notifyUsersLoading/notifyUsersLoading"; import portfolioLoading from "../../placeholderLoading/portfolioLoading/portfolioLoading"; import newsFeedLoading from "../../placeholderLoading/newsFeedLoading/newsFeedLoading"; @@ -77,7 +75,6 @@ class Dashboard extends Component {
{this.state.isLoading ? portfolioLoading() : } - {/* {this.state.isLoading ? orgUpdatesLoading() : } */}
); diff --git a/src/user/dashboard/dashboard.scss b/src/user/dashboard/dashboard.scss index 46a6cc7f..c38a2f0a 100644 --- a/src/user/dashboard/dashboard.scss +++ b/src/user/dashboard/dashboard.scss @@ -11,10 +11,12 @@ flex-grow: 4; .notify-user { display: flex; - padding: 20px 0px 20px 30px; + padding: 20px 10px 20px 30px; } } .promotions { + height: 256px; + flex-direction: row; flex-grow: 2; padding: 20px 12px 20px 0px; } diff --git a/src/user/dashboard/insights/components/CommunityStats.js b/src/user/dashboard/insights/components/CommunityStats.js index d2d0f69e..915f4e94 100644 --- a/src/user/dashboard/insights/components/CommunityStats.js +++ b/src/user/dashboard/insights/components/CommunityStats.js @@ -18,7 +18,7 @@ class CommunityStats extends Component { this.props.onTabChange(tabName); } - componentWillMount () { + componentDidMount() { setTimeout(() => { this.props.getOrgOverview() }) diff --git a/src/user/dashboard/insights/components/MemberInfo.js b/src/user/dashboard/insights/components/MemberInfo.js index ed7fc0bb..8695a5cb 100644 --- a/src/user/dashboard/insights/components/MemberInfo.js +++ b/src/user/dashboard/insights/components/MemberInfo.js @@ -33,7 +33,7 @@ class MemberInfo extends Component { this.props.onTabChange(tabName); } - componentWillMount() { + componentDidMount() { setTimeout(() => { this.props.getMembers() }) @@ -115,8 +115,8 @@ class MemberInfo extends Component { className="icon" > - // Simple tooltip - // - // ); - // } const ListItem = (props) => { const item = props.isMobile ? ( @@ -154,11 +147,11 @@ class Navigation extends Component { - +
- + ({ root: { @@ -40,11 +38,14 @@ const styles = makeStyles((theme) => ({ minWidth: "50%", }, listStyle: { - paddingBottom: 0, + background: "#ffffff", + border: "1px solid #cccccc", + boxShadow: "1px 2px 5px rgba(0, 0, 0, 0.1)", + borderRadius: "5px" }, listStyle2: { paddingTop: 0, - marginTop: "-4px", + marginTop: "-4px" }, info: { position: "absolute", @@ -92,30 +93,27 @@ const styles = makeStyles((theme) => ({ function NewsFeed(props) { const classes = styles(); const [type, changeType] = useState("All"); - const [first, second] = useState("f"); + // const [first, second] = useState("f"); const [showProject, setShowProject] = useState(false); const [showEvent, setShowEvent] = useState(false); const [writePost, showPostModal] = useState(false); const [showComment, toggle] = useState(false); const [commentId, setCommentId] = useState(''); - // const [all, setAll] = useState([]); const [events, setEvents] = useState([]); const [projects, setAllProjects] = useState([]); const [posts, setAllPosts] = useState([]); - // const [allCommentsOfPost, setAllCommentsOfPost] = useState({}) useEffect(() => { console.log("useEffect from news-feed ", props); setEvents(props?.allEvents); setAllProjects(props?.allProjects); setAllPosts(props?.allPosts); - // setAll(props?.allMix); - // setAllCommentsOfPost(props?.comment?.allComments) - }, [props]); + }, [props.allEvents, props.allPosts, props.allProjects, props]); let handleClick = (atrb) => () => { + console.log('attr ', atrb); changeType(atrb); - second("s"); + // second("s"); }; let handleShow = (modalName) => { @@ -148,15 +146,30 @@ function NewsFeed(props) { setCommentId(postId); toggle(!showComment); } + + let onUpvote = (postId) => { + console.log('upvote clicked!', postId); + props.upVotePost(postId) + } + + let onRsvpYes = (eventId) => { + console.log('On rsvp yes ', eventId); + const info = { + yes: localStorage.getItem('userId') + } + props.rsvpYes(eventId, info); + } + + let onViewProject = (projectId) => { + console.log('Redirecting to project ', projectId); + props.history.push(`/${projectId}/proj-info`); + } let postContent = posts?.map((post) => { return (
- {/* - */} @@ -168,24 +181,13 @@ function NewsFeed(props) {

{post?.userId?.name?.firstName + " " + post?.userId?.name?.lastName}

{post?.createdAt} - {/* - {post.note === true ? ( - - - - ) : post.schedule === true ? ( - - - - ) : null} - - - - */}
{post?.content}
- + onUpvote(post._id)} + > {post?.votes?.upVotes?.user.length} @@ -219,7 +221,12 @@ function NewsFeed(props) {

{project?.projectName}

By {project?.projectOwner || "CODEUINO"}

- +
@@ -235,36 +242,16 @@ function NewsFeed(props) {

{project?.createdBy?.name?.firstName + " " + project?.createdBy?.name?.lastName}

{project?.createdAt} - {/* - { (project?.note === true) ? - - - : (project.schedule === true) ? - - - : null } - - - - */}
{project?.description?.short}
- {/* - - - {project.upvotes} - - - - - {project.downVotes} */} @@ -278,7 +265,7 @@ function NewsFeed(props) { let eventsContent = events?.map((event) => { return ( -
+
- +
@@ -317,40 +309,8 @@ function NewsFeed(props) {

{event?.createdBy?.name?.firstName + " " + event?.createdBy?.name?.lastName}

{event?.createdAt} - {/* - { (event.note === true) ? - - - : (event.schedule === true) ? - - - : null } - - - - */}
{event?.description?.shortDescription}
- {/* - - - - {event.upvotes} - - - - - {event.downVotes} - - - - - */} @@ -452,8 +412,8 @@ function NewsFeed(props) { /> -
-
+ {/*
+ {first === "f" ? ( -
+ +
*/} +
+ +
    +
  • + All +
    • +
  • + Posts +
    • +
  • + Events +
    • +
  • + Projects +
    • +
+
- {Boolean(type !== 'All') ? - content - : - <> - {postContent} - {eventsContent} - {projectsContent} - - } + {Boolean(type !== "All") ? ( + content + ) : ( + <> + {postContent} + {eventsContent} + {projectsContent} + + )}
); @@ -526,4 +532,8 @@ const mapStateToProps = (state) => ({ comment: state.comment }) -export default connect(mapStateToProps, { getAllCommentsOfPost })(NewsFeed) +export default connect(mapStateToProps, { + getAllCommentsOfPost, + upVotePost, + rsvpYes +})(withRouter(NewsFeed)) diff --git a/src/user/dashboard/news-feed/news-feed.scss b/src/user/dashboard/news-feed/news-feed.scss index a25a98bf..223646e5 100644 --- a/src/user/dashboard/news-feed/news-feed.scss +++ b/src/user/dashboard/news-feed/news-feed.scss @@ -81,7 +81,7 @@ border-right: 1px solid rgba(204, 204, 204, 0.7); .date-content { width: 50%; - margin: 0 auto; + padding: 1vw; small { font-family: Inter; font-style: normal; @@ -367,8 +367,16 @@ color: #ff0000; } .news__feed__container { + .news-feed { + .post-article{ + .article { + margin-left: auto; + margin-right: auto; + } + } + } .post { - width: 130%; + width: 140%; margin-bottom: 17px; } } @@ -393,14 +401,13 @@ .optionbtn { background: #1a73e8; - border-radius: 100px; + // border-radius: 100px; .optionbtn-text { font-family: Inter; font-style: normal; font-weight: 600; font-size: 16px; line-height: 19px; - color: #ffffff; } } @@ -411,6 +418,10 @@ .posts { width: 140%; + // margin-top: 25px; + margin-left: 20px; + margin-right: 10px; + margin-bottom: 24px; .category { .category-btn { background-color: white; @@ -432,6 +443,43 @@ } } } +.tabs__container { + width: 140%; + margin-left: 27px; + margin-top: 10px; + .nav__tab { + .nav__list__container { + display: flex; + justify-content: center; + align-items: center; + list-style: none; + border-bottom: 2px solid #eee; + transition: all .5s; + font-weight: 300; + color: #262727; + + .nav__single__tab { + display: inline-block; + font-family: Inter; + font-style: normal; + font-weight: 500; + font-size: 18px; + line-height: 22px; + padding-left: 11px; + padding-right: 15px; + padding-bottom: 5px; + margin-left: 19px; + text-align: center; + cursor: pointer; + + &.selected { + border-bottom: 3px solid #337ab7; + color: #1a73e8; + } + } + } + } +} .grid { .rep-btn { .reply-text { @@ -457,3 +505,15 @@ display: none; } } +.post { + .grid { + .com-btn { + .btn-primary { + background-color: #ffffff; + border-radius: 0px; + border: 0px; + margin-bottom: 6px; + } + } + } +} \ No newline at end of file diff --git a/src/user/dashboard/news-feed/popups/AddProjectModal.js b/src/user/dashboard/news-feed/popups/AddProjectModal.js index 7a377ebb..0148e4c5 100644 --- a/src/user/dashboard/news-feed/popups/AddProjectModal.js +++ b/src/user/dashboard/news-feed/popups/AddProjectModal.js @@ -3,6 +3,7 @@ import { Button, Modal, Form, Col } from "react-bootstrap"; import PropTypes from "prop-types"; import { connect } from 'react-redux' import { createProject } from '../../../../actions/dashboardAction' +import TagsInput from '../../../projects/Utils/TagsInput' const AddProjectModal = (props) => { const [projectName, setProjectName] = useState("") @@ -11,6 +12,15 @@ const AddProjectModal = (props) => { const [githubLink, setGithubLink] = useState("") const [bitbucketLink, setBitbucketLink] = useState("") const [stacks, setTechStacks] = useState("") + const suggestedTags = [ + 'Node.js', + 'MongoDB', + 'Express.js', + 'Java', + 'C++', + 'HTML', + 'CSS' + ] const onProjectName = (event) => { setProjectName(event.target.value) @@ -28,21 +38,19 @@ const AddProjectModal = (props) => { setBitbucketLink(event.target.value) } - const onTechStacks = (event) => { - const stacks = event.target.value; - console.log('stacks ', stacks); - setTechStacks(stacks) + const selectedTags = (tags) => { + console.log('selected tags are ', tags); + setTechStacks(tags); } const onCreateProjectClick = () => { - const techStacks = stacks.split(','); const projectInfo = { projectName, description : { short, long }, - techStacks, + techStacks: stacks, links: [{ githubLink: githubLink }, {bitbucketLink: bitbucketLink}] } console.log('creating project!', projectInfo) @@ -147,10 +155,14 @@ const AddProjectModal = (props) => { className="modal__group" > Tech stacks - */} + diff --git a/src/user/dashboard/news-feed/popups/comment.js b/src/user/dashboard/news-feed/popups/comment.js index 7c2c0091..6f8d9ab2 100644 --- a/src/user/dashboard/news-feed/popups/comment.js +++ b/src/user/dashboard/news-feed/popups/comment.js @@ -15,7 +15,8 @@ class Comment extends Component { content: "", allComments: [], postId: '', - userId: '' + userId: '', + count: 0 }; } diff --git a/src/user/dashboard/portfolio/portfolio.js b/src/user/dashboard/portfolio/portfolio.js index ceada520..30fae54e 100644 --- a/src/user/dashboard/portfolio/portfolio.js +++ b/src/user/dashboard/portfolio/portfolio.js @@ -22,7 +22,7 @@ class Portfolio extends Component { } } - componentWillMount() { + componentDidMount() { setTimeout(() => { this.props.getMembers(); }) @@ -71,34 +71,34 @@ class Portfolio extends Component {

{members.length || 0}

-

Members

+

Members

{admins.length || 0}

-

Administrators

+

Administrators

{followers?.length || 0}

-

Followers

+

Followers

{personalInfo.events || 0}

-

Events Organized

+

Events Organized

{personalInfo.projects || 0 }

-

Projects

+

Projects

{followings?.length || 0}

-

Following

+

Following

diff --git a/src/user/dashboard/portfolio/portfolio.scss b/src/user/dashboard/portfolio/portfolio.scss index 4bc85eb1..d2377106 100644 --- a/src/user/dashboard/portfolio/portfolio.scss +++ b/src/user/dashboard/portfolio/portfolio.scss @@ -1,15 +1,15 @@ .portfolio { - box-shadow: -1px 2px 2px -1px rgba(0, 0, 0, 0.1); + // box-shadow: -1px 2px 2px -1px rgba(0, 0, 0, 0.1); display: flex; text-align: center; border-top-right-radius: 2%; border-bottom-right-radius: 2%; - flex:0.5; height: 269px; + flex-direction: row; .items-list { - flex: 0.8; padding: 40px 0px; border: solid 1px #dfe9f1; + width: 10vw; .item { padding: 12px; h1 { @@ -21,7 +21,7 @@ margin-bottom: 0px; } h3 { - font-size: 15px; + font-size: 1vw; color: #4457a5; font-family: Inter; font-style: normal; diff --git a/src/user/dashboard/upcoming-events/upcoming-events.js b/src/user/dashboard/upcoming-events/upcoming-events.js index b61bdde1..9ff86541 100644 --- a/src/user/dashboard/upcoming-events/upcoming-events.js +++ b/src/user/dashboard/upcoming-events/upcoming-events.js @@ -14,7 +14,7 @@ class UpcomingEvents extends Component { } // fetch upcoming events from the db - componentWillMount() { + componentDidMount() { this.props.upcomingEvents() } diff --git a/src/user/dashboard/updates/updates.scss b/src/user/dashboard/updates/updates.scss index c246f15d..32c0d885 100644 --- a/src/user/dashboard/updates/updates.scss +++ b/src/user/dashboard/updates/updates.scss @@ -2,7 +2,7 @@ min-height: 300px; margin: 30px 0 20px 40px; h1 { - font-family: Inter; + font-family: "Inter"; font-style: normal; font-weight: 600; font-size: 20px; diff --git a/src/user/events/events.js b/src/user/events/events.js index bba437e8..0d112925 100644 --- a/src/user/events/events.js +++ b/src/user/events/events.js @@ -2,7 +2,7 @@ import React, { Component } from "react"; import Navigation from "../dashboard/navigation/navigation"; import { Grid ,CardActions, Card} from "@material-ui/core"; // import Event_list from "../../jsonData/events"; -import { Row, Col } from "react-bootstrap"; +import { Row, Col, Button } from "react-bootstrap"; import "./events.scss"; import Popups from './popups/popups'; import DeleteEvent from "./popups/DeleteEvent"; @@ -26,7 +26,7 @@ class Events extends Component { } } - componentWillMount() { + componentDidMount() { setTimeout(() => { this.props.getAllEvents() }) @@ -43,10 +43,6 @@ class Events extends Component { render() { const { allEvents } = this.state - // const setOptionValue = (targetId) => { - // const event = Event_list.filter((x) => x._id === targetId); - // this.setState({optionValue: event[0]}) - // } const handleToggle = (eventId, event) => { console.log("-handletoggel",eventId) @@ -111,13 +107,15 @@ class Events extends Component {
- See More - + > + See More +
) diff --git a/src/user/events/popups/DeleteEvent.js b/src/user/events/popups/DeleteEvent.js index e6c0164a..5ec18666 100644 --- a/src/user/events/popups/DeleteEvent.js +++ b/src/user/events/popups/DeleteEvent.js @@ -1,5 +1,5 @@ import React, { Component } from 'react' -import { Modal, Button } from 'react-bootstrap'; +import { Modal, Button, Form } from 'react-bootstrap'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import "./popup.scss"; @@ -33,25 +33,37 @@ class DeleteEvent extends Component { return (
-
- - -
Delete Event?
-
Are you sure you want to delete this event?
- - - -
- - -
-
+ show={show} + onHide={onHide} + centered + backdrop={true} + animation={true} + className="modal" + > + + +
Delete Event?
+
Are you sure you want to delete this event?
+ + + +
+
+ + +
+
+
) diff --git a/src/user/events/popups/EditEvent.js b/src/user/events/popups/EditEvent.js index 7f7084eb..e2588848 100644 --- a/src/user/events/popups/EditEvent.js +++ b/src/user/events/popups/EditEvent.js @@ -82,101 +82,102 @@ class EditEvent extends Component { }; render() { - const { show, onHide } = this.props; + const { show, onHide, borderStyle } = this.props; const { eventName, shortDesc, longDesc, location } =this.state return ( -
- - -
Edit Event
-
Event Information
- - - - - - Event Name - - - - - Short description - - - - Long description - - - - Location - - - - Event Date - - + + +
Edit Event
+
Event Information
+ + + +
+ + + Event Name + + + + + + Short description + + + + + + Long description + + + + + + Location + + + + + + Event Date + + + +
-
- -
-
); } diff --git a/src/user/events/popups/popup.scss b/src/user/events/popups/popup.scss index 48a1f36c..e6a0741d 100644 --- a/src/user/events/popups/popup.scss +++ b/src/user/events/popups/popup.scss @@ -37,22 +37,40 @@ color: #2D2D2D; } +.edit__event__title { + font-family: Inter; + font-style: normal; + font-weight: 600; + font-size: 27px; + line-height: 29px; + color: #1a73e8; + padding-bottom: 3px; + margin-bottom: 2px; +} .form-footer { margin-top: 0; - margin-left: 2px; Button { - width: 90px; margin-right: 20px; margin-bottom: 30px; - border-radius: 100px; + // border-radius: 100px; + border-radius: 0px; font-weight: 600; } .savebtn { background-color: #1A73E8; + border-radius: 0px; + padding: 1px; + } + .cancelbtn { + background-color: #ffffff; + border-radius: 0px; + width: 80px; + height: 32.85px; + padding: 1px; } } .modal-backdrop { - background: rgba(0, 0, 0, 0.2) !important; + background: rgba(0, 0, 0, 0.7) !important; } .modal-backdrop.in{ opacity: 0.5; diff --git a/src/user/events/popups/popups.js b/src/user/events/popups/popups.js index 39ba646d..85e2a783 100644 --- a/src/user/events/popups/popups.js +++ b/src/user/events/popups/popups.js @@ -52,9 +52,14 @@ class Popups extends Component { return month + " " + year; }; + RefineTime = (d) => { + const time = d.split("T"); + const eventTime = time[1].slice(0, 5) + return eventTime; + } render() { - const { eventName, eventDate, description, location, isOnline, slots, rsvpMaybe, rsvpNo, rsvpYes } = this.state.eventInfo + const { eventName, eventDate, description, location, isOnline, slots, rsvpMaybe, rsvpNo, rsvpYes, eventTime } = this.state.eventInfo return ( - {eventDate ? ( -

{this.RefineDate(eventDate)}

+ {eventTime ? ( +

Time : {this.RefineTime(eventDate)}

) : null} {eventDate ? (

{" "} - {this.RefinedDay( - new Date(Date.parse(eventDate)).toString() - )} - , + {this.RefineDate(eventDate)}{" "} {this.RefinedYear( new Date(Date.parse(eventDate)).toString() )} diff --git a/src/user/organization/org-info/org-info.scss b/src/user/organization/org-info/org-info.scss index 46d5a5cf..68ddcd8a 100644 --- a/src/user/organization/org-info/org-info.scss +++ b/src/user/organization/org-info/org-info.scss @@ -3,8 +3,6 @@ flex-direction: row; border: solid 1px #dfe9f1; height: 269px; - - flex: 0.5 1; align-items: center; .org-image { flex: 0.5; @@ -12,7 +10,8 @@ margin: 35px 0; .useredit { margin-top: 10px; - border-radius: 20px; + // border-radius: 20px; + font-family: "Inter"; font-size: 14px; } .org-pic { @@ -69,7 +68,8 @@ padding: 0.7em; font-size: 14px; box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1); - border-radius: 20px; + // border-radius: 20px; + padding: 3px; width: 10vw; height: 2.5em; font-family: Inter; diff --git a/src/user/organization/organization.js b/src/user/organization/organization.js index 5dd8c664..55e41c87 100644 --- a/src/user/organization/organization.js +++ b/src/user/organization/organization.js @@ -23,6 +23,7 @@ class Organization extends Component { org: true, isLoading: true, orgProfile: {}, + type: "About", }; } @@ -40,8 +41,12 @@ class Organization extends Component { this.setState({ orgProfile: nextProps.org?.org }); } + handleClick = (type) => { + this.setState({ type: type }) + } + render() { - const { orgProfile } = this.state; + const { orgProfile, type } = this.state; const { // name, description, @@ -68,10 +73,56 @@ class Organization extends Component {

{/*

Posts

*/}
-
About Us
+ {/*
About Us
Donuts
Events
-
Projects
+
Projects
*/} +
+ +
    +
  • + Overview +
    • +
  • + Posts +
    • +
  • + Events +
    • +
  • + Projects +
    • +
+ +
diff --git a/src/user/organization/organization.scss b/src/user/organization/organization.scss index 22b276cc..98eb89fb 100644 --- a/src/user/organization/organization.scss +++ b/src/user/organization/organization.scss @@ -15,7 +15,7 @@ flex: 3; .notify-user { display: flex; - padding: 20px 0px 20px 30px; + padding: 20px 10px 20px 30px; } } .org { @@ -34,6 +34,7 @@ padding-right: 10px; .posts { flex-grow: 2; + margin-top: -1rem; h2 { margin: 0; padding: 10px 0 10px 30px; @@ -57,6 +58,43 @@ color: white; } } + .ul__container { + width: 140%; + margin-top: 10px; + display: flex; + .nav__tab { + .nav__list__container { + display: flex; + justify-content: flex-start; + align-items: center; + list-style: none; + border-bottom: 2px solid #eee; + transition: all .5s; + font-weight: 300; + color: #262727; + + .nav__single__tab { + display: inline-block; + font-family: Inter; + font-style: normal; + font-weight: 500; + font-size: 18px; + line-height: 22px; + padding-left: 11px; + padding-right: 15px; + padding-bottom: 5px; + margin-left: 19px; + text-align: center; + cursor: pointer; + + &.selected { + border-bottom: 3px solid #337ab7; + color: #1a73e8; + } + } + } + } + } } .about-us { margin: 10px 0px 0 27px; @@ -104,3 +142,9 @@ margin-top: -10px; margin-left: 30px; } +.form-control:disabled, +.form-control[readonly] { + background-color: #e9ecef; + opacity: 1; + font-family: "Inter"; +} \ No newline at end of file diff --git a/src/user/organization/popups/Admins.js b/src/user/organization/popups/Admins.js index 103a022a..4e2ce1ed 100644 --- a/src/user/organization/popups/Admins.js +++ b/src/user/organization/popups/Admins.js @@ -4,6 +4,10 @@ import { connect } from 'react-redux' import { removeAdmin } from '../../../actions/orgAction' import logo from "../../../svgs/logo-image.jpg"; import { getMember } from '../../../actions/insightAction' +import { getInviteLink } from '../../../actions/usersAction' +import { getOrgProfile } from '../../../actions/orgAction' +import { ToastContainer, toast } from "react-toastify"; +import "react-toastify/dist/ReactToastify.css"; class Admins extends Component { constructor(props) { @@ -11,7 +15,9 @@ class Admins extends Component { this.state = { text: 'Follow', admins: [], - query: '' + query: '', + inviteLink: '', + whoCanSendInvite: '' } } @@ -24,7 +30,8 @@ class Admins extends Component { componentWillReceiveProps(nextProps) { console.log('nextProps ', nextProps) const { query } = this.state; - const { insight } = nextProps + const { insight, org } = nextProps + const permissions = org?.org?.options?.permissions let res = []; if (query) { let allMembers = insight.member; @@ -40,7 +47,11 @@ class Admins extends Component { let allAdmins = nextProps.admins; res = this.mapHelper(allAdmins); } - this.setState({ admins: res }) + this.setState({ + admins: res, + inviteLink: nextProps.user?.inviteLink, + whoCanSendInvite: permissions?.sendInvite + }); } mapHelper = (allAdmins) => { @@ -69,8 +80,25 @@ class Admins extends Component { this.props.getMember(query) } + onGetInviteLink = () => { + this.props.getInviteLink('admin') + } + + copyToClipBoard = async (link) => { + try { + await navigator.clipboard.writeText(link); + if (this.state.inviteLink !== null) { + toast.success('Link copied to clipboard!'); + } + } catch (error) { + toast.error('Something went wrong!'); + console.log('error ', error) + } + } + render() { const { onHide, show } = this.props + const { inviteLink, whoCanSendInvite } = this.state const adminList = [...this.state.admins] let admins = adminList.map((item) => ( @@ -105,17 +133,19 @@ class Admins extends Component {
Administrators
- - + + + + @@ -125,14 +155,25 @@ class Admins extends Component {

ADD ADMINISTRATOR

- Email + Get invite link
- +
{/*

or share invite on

@@ -142,6 +183,17 @@ class Admins extends Component {
*/}
+ ); @@ -153,7 +205,9 @@ const mapStateToProps = (state) => ({ auth: state.auth, error: state.error, insight: state.insight, - status: state.status + user: state.user, + status: state.status, + org: state.org }) -export default connect(mapStateToProps, { removeAdmin, getMember })(Admins) \ No newline at end of file +export default connect(mapStateToProps, { removeAdmin, getMember, getInviteLink, getOrgProfile })(Admins) \ No newline at end of file diff --git a/src/user/organization/popups/Members.js b/src/user/organization/popups/Members.js index e4911ce1..815b9004 100644 --- a/src/user/organization/popups/Members.js +++ b/src/user/organization/popups/Members.js @@ -3,6 +3,7 @@ import { Modal, Button, Row, Image, Form } from "react-bootstrap"; import { connect } from 'react-redux'; import { removeUser, getInviteLink } from '../../../actions/usersAction' import { getMember } from '../../../actions/insightAction' +import { getOrgProfile } from '../../../actions/orgAction' import logo from "../../../svgs/logo-image.jpg"; import { checkRemoveRight } from '../../dashboard/utils/checkDeleteRights' import { ToastContainer, toast } from "react-toastify"; @@ -16,7 +17,8 @@ class Members extends Component { members: [], query: '', isAdmin: '', - inviteLink: null + inviteLink: null, + whoCanSendInvite: '' } } @@ -47,10 +49,11 @@ class Members extends Component { onGetInviteLink = () => { console.log('Get invite link clicked!'); - this.props.getInviteLink(); + this.props.getInviteLink('user'); } componentDidMount() { + this.props.getOrgProfile() checkRemoveRight() ? this.setState({ isAdmin: true }) : this.setState({ isAdmin: false }) @@ -58,6 +61,7 @@ class Members extends Component { componentWillReceiveProps(nextProps) { console.log('nextProps ', nextProps) + const permissions = nextProps.org?.org?.options?.permissions const { query } = this.state let res = [] if(query) { @@ -67,7 +71,12 @@ class Members extends Component { let allMembers = nextProps.insight.allMembers res = this.mapHelper(allMembers) } - this.setState({ members: res, inviteLink: nextProps.user.inviteLink }, () => { + this.setState({ + members: res, + isAdmin: nextProps.user?.userProfile?.isAdmin, + inviteLink: nextProps.user.inviteLink, + whoCanSendInvite: permissions?.sendInvite + }, () => { console.log("members ", this.state); }); } @@ -137,21 +146,20 @@ class Members extends Component {
Members
- - + + + + @@ -171,7 +179,13 @@ class Members extends Component { readOnly={true} onClick={this.copyToClipBoard.bind(this, inviteLink)} > - +

or share invite on

@@ -183,16 +197,16 @@ class Members extends Component {
+ position="top-right" + autoClose={5000} + hideProgressBar={false} + newestOnTop={false} + closeOnClick + rtl={false} + pauseOnFocusLoss + draggable + pauseOnHover + /> ); } @@ -203,7 +217,8 @@ const mapStateToProps = (state) => ({ error: state.error, user: state.user, insight: state.insight, - status: state.status + status: state.status, + org: state.org }) -export default connect(mapStateToProps, { removeUser, getMember, getInviteLink })(Members); \ No newline at end of file +export default connect(mapStateToProps, { removeUser, getMember, getInviteLink, getOrgProfile })(Members); \ No newline at end of file diff --git a/src/user/pinned-posts/pinned-posts.js b/src/user/pinned-posts/pinned-posts.js index 2b48de2c..1e1e48d6 100644 --- a/src/user/pinned-posts/pinned-posts.js +++ b/src/user/pinned-posts/pinned-posts.js @@ -1,10 +1,8 @@ import React, { Component } from "react"; import "./pinned-posts.scss"; import Navigation from "../dashboard/navigation/navigation"; -// import Updates from "../dashboard/updates/updates"; import PinPosts from "../pinned-posts/posts/pinPosts"; import pinnedPostsLoading from "../../placeholderLoading/pinnedPostsLoading/pinnedPostsLoading"; -// import orgUpdatesLoading from "../../placeholderLoading/orgUpdatesLoading/orgUpdatesLoading"; class PinnedPosts extends Component { constructor(props) { diff --git a/src/user/pinned-posts/pinned-posts.scss b/src/user/pinned-posts/pinned-posts.scss index 64b0b7b6..6713d1f1 100644 --- a/src/user/pinned-posts/pinned-posts.scss +++ b/src/user/pinned-posts/pinned-posts.scss @@ -16,7 +16,7 @@ flex: 2; .notify-user { display: flex; - padding: 20px 0px 20px 30px; + padding: 20px 10px 20px 30px; } } .promotions { diff --git a/src/user/pinned-posts/posts/pinPosts.js b/src/user/pinned-posts/posts/pinPosts.js index c8ac8fad..d3f51f44 100644 --- a/src/user/pinned-posts/posts/pinPosts.js +++ b/src/user/pinned-posts/posts/pinPosts.js @@ -2,34 +2,28 @@ import React , { useState, useEffect } from 'react'; import { List, Card, - Button, Paper, ListItem, ListItemAvatar, Avatar, ListItemText, - // ListItemSecondaryAction, IconButton, CardMedia } from '@material-ui/core'; import { makeStyles } from '@material-ui/core/styles'; -// import MoreHorizIcon from '@material-ui/icons/MoreHoriz'; +import { Button } from "react-bootstrap"; import ArrowDropUpIcon from '@material-ui/icons/ArrowDropUp'; -// import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown'; import ChatBubbleIcon from '@material-ui/icons/ChatBubble'; -// import EventNoteIcon from '@material-ui/icons/EventNote'; -// import EventIcon from '@material-ui/icons/Event'; -// import feed from '../../../jsonData/news-feed'; -// import ReplyIcon from '@material-ui/icons/Reply'; import { connect } from 'react-redux' -import { getEventsCreatedByUser, getProjectCreatedByUser } from '../../../actions/usersAction' import "./posts.scss"; import Comment from '../../dashboard/news-feed/popups/comment'; import { withRouter } from 'react-router-dom'; import profileImg from '../../../svgs/evt-creator.svg'; import eventImg from "../../../svgs/event-img-1.svg"; import eventImg2 from "../../../svgs/event-img-2.svg"; -import { getAllPinnedPosts } from '../../../actions/postAction' +import { getAllPinnedPosts, upVotePost } from '../../../actions/postAction' +import { getEventsCreatedByUser, getProjectCreatedByUser } from '../../../actions/usersAction' +import { rsvpYes } from '../../../actions/eventAction' const styles = makeStyles((theme) => ({ root: { @@ -96,13 +90,9 @@ function PinPosts(props){ useEffect(() => { console.log('props from PinPosts ', props) if(props.match?.path === '/pinned-posts') { - console.log('fetch all the pinned posts!', props) props.getAllPinnedPosts() - setTimeout(() => { - setPosts(props.posts?.pinnedPosts); - }) + setPosts(props.posts?.pinnedPosts); } - // debugger; if(props.match?.path === '/profile'){ setEvents(props.userEvents) setAllProjects(props.userProjects || []) @@ -110,7 +100,7 @@ function PinPosts(props){ // let all = [...userEvents, ...userProjects, ...userPosts] // setAll(all) } - }, [props]) + }, [props.userEvents, props.userProjects, props.userPosts]) let handleClick = atrb => () => { changeType(atrb); @@ -125,19 +115,42 @@ function PinPosts(props){ toggle(!showComment); } - let userProjectsContent = userProjects?.map((newsItem) => { + let onUpVoteClick = (postId) => { + console.log("On upvote clicked ", postId); + props.upVotePost(postId) + } + + let onRsvpYes = (eventId) => { + console.log('On rsvp yes ', eventId); + const info = { + yes: localStorage.getItem('userId') + } + props.rsvpYes(eventId, info); + } + + let onViewProject = (projectId) => { + console.log('Redirecting to project ', projectId); + props.history.push(`/${projectId}/proj-info`); + } + + let userProjectsContent = userProjects?.map((project) => { return ( -
+
+ image={project?.eventImage || eventImg } title="Project Image">
-

{newsItem?.projectName}

-

By {newsItem?.projectOwner || "CODEUINO"}

+

{project?.projectName}

+

By {project?.projectOwner || "CODEUINO"}

- +
@@ -146,48 +159,27 @@ function PinPosts(props){ - I + I -

{newsItem?.createdBy?.name?.firstName + " " + newsItem?.createdBy?.name?.lastName || "No Name"}

- {newsItem?.createdAt} +

{project?.createdBy?.name?.firstName + " " + project?.createdBy?.name?.lastName || "No Name"}

+ {project?.createdAt} - {/* - { (newsItem?.note === true) ? - - - : (newsItem.schedule === true) ? - - - : null } - - - - */} -
{newsItem?.description?.short}
+
{project?.description?.short}
- {/* - - - {newsItem.upvotes} - - - - - {newsItem.downVotes} */} - + @@ -195,32 +187,35 @@ function PinPosts(props){ ) }) - let userEventsContent = userEvents?.map((newsItem, index) => { + let userEventsContent = userEvents?.map((event, index) => { return (
+ image={event?.eventImage || eventImg2 } title="Event Image">
-

{newsItem?.eventName}

+

{event?.eventName}

DATE -

{newsItem?.eventDate}

+

{event?.eventDate}

Location -

{newsItem?.location}

+

{event?.location}

- +
@@ -229,48 +224,16 @@ function PinPosts(props){ - I + I -

{newsItem?.createdBy?.name?.firstName + " " + newsItem?.createdBy?.name?.lastName}

- {newsItem?.createdAt} +

{event?.createdBy?.name?.firstName + " " + event?.createdBy?.name?.lastName}

+ {event?.createdAt} - {/* - { (newsItem.note === true) ? - - - : (newsItem.schedule === true) ? - - - : null } - - - - */} -
{newsItem?.description?.shortDescription}
- {/* - - - - {newsItem.upvotes} - - - - - {newsItem.downVotes} - - - - - */} - +
{event?.description?.shortDescription}
+ @@ -278,59 +241,50 @@ function PinPosts(props){ ) }); - let userPostsContent = userPosts?.map((newsItem, index) => { + let userPostsContent = userPosts?.map((post, index) => { return (
{/* + image={post?.image || eventImg } title="Post Image"> */} - I + I -

{newsItem?.userId?.name?.firstName + " " + newsItem?.userId?.name?.lastName}

- {newsItem?.createdAt} +

{post?.userId?.name?.firstName + " " + post?.userId?.name?.lastName}

+ {post?.createdAt} - {/* - {newsItem.note === true ? ( - - - - ) : newsItem.schedule === true ? ( - - - - ) : null} - - - - */} -
{newsItem?.content}
+
{post?.content}
- + onUpVoteClick(post._id)} + > - {newsItem?.votes?.upVotes?.user.length} + + {post?.votes?.upVotes?.user.length} + @@ -345,44 +299,108 @@ function PinPosts(props){ posts = userProjectsContent }else if(type === "Event"){ posts = userEventsContent - }else if(type === "Donut"){ + }else if(type === "Post"){ posts = userPostsContent } return ( -
+
-

Pinned Posts

-
- { (first === 'f') ? - : - } - - - - - - +

Pinned Posts

+
+ {/* + + + + + + */} +
+ +
    +
  • + All +
    • +
  • + Posts +
    • +
  • + Events +
    • +
  • + Projects +
    • +
+
+
- { - Boolean(type !== 'All') ? posts - : - <> - {userEventsContent} - {userProjectsContent} - {userPostsContent} - - } -
+ {Boolean(type !== "All") ? ( + posts + ) : ( + <> + {userEventsContent} + {userProjectsContent} + {userPostsContent} + + )}
- ) +
+ ); }; // map state to props const mapStateToProps = (state) => ({ @@ -393,4 +411,4 @@ const mapStateToProps = (state) => ({ posts: state.post }) -export default connect(mapStateToProps , { getEventsCreatedByUser, getProjectCreatedByUser, getAllPinnedPosts })(withRouter(PinPosts)); \ No newline at end of file +export default connect(mapStateToProps , { getEventsCreatedByUser, getProjectCreatedByUser, getAllPinnedPosts, upVotePost, rsvpYes })(withRouter(PinPosts)); \ No newline at end of file diff --git a/src/user/pinned-posts/posts/posts.scss b/src/user/pinned-posts/posts/posts.scss index 9372f596..942f8dcb 100644 --- a/src/user/pinned-posts/posts/posts.scss +++ b/src/user/pinned-posts/posts/posts.scss @@ -14,24 +14,65 @@ flex-direction: column; } } + .categories { display: flex; margin: 10px 0px 10px 20px; + .tab__container { + width: 100%; + margin-left: 0px; + margin-top: 0px; + .nav__tab { + .nav__list__container { + display: flex; + justify-content: flex-start; + align-items: center; + list-style: none; + border-bottom: 2px solid #eee; + transition: all .5s; + font-weight: 300; + color: #262727; + + .nav__single__tab { + display: inline-block; + font-family: Inter; + font-style: normal; + font-weight: 500; + font-size: 18px; + line-height: 22px; + padding-left: 11px; + padding-right: 15px; + padding-bottom: 5px; + margin-left: 19px; + text-align: center; + cursor: pointer; + + &.selected { + border-bottom: 3px solid #337ab7; + color: #1a73e8; + } + } + } + } + } .btn { padding: 8px 20px; border: solid 1px #007bff; border-radius: 100px; color: #007bff; margin: 0 5px; - cursor: pointer; - &:focus { - background: #007bff; - color: white; - } - &.active { - background: #007bff; - color: white; - } + &:hover { + background-color: #1a73e8; + color: white; + } + + &:focus { + background-color: #1a73e8; + color: white; + } + } + .btn-primary { + background-color: #fff; } .space { width: 10px; @@ -52,7 +93,6 @@ margin: 0 5px; cursor: pointer; &:focus { - background: #007bff; color: white; box-shadow: none; } @@ -66,6 +106,7 @@ width: 10px; } } + .post-details2 { font-size: 14px; padding-left: 10px; @@ -158,7 +199,7 @@ border-right: 1px solid rgba(204, 204, 204, 0.7); .date-content { width: 50%; - margin: 0 auto; + padding: 1vw; small { font-family: Inter; font-style: normal; diff --git a/src/user/profile/popups/EditProfile.js b/src/user/profile/popups/EditProfile.js index 7d6ff760..14baf953 100644 --- a/src/user/profile/popups/EditProfile.js +++ b/src/user/profile/popups/EditProfile.js @@ -17,7 +17,9 @@ class EditProfile extends Component { linkedIn: '', designation: '', website: '', - longDesc: '' + longDesc: '', + canChangeName: '', + // canChangeEmail: '' } } @@ -50,6 +52,7 @@ class EditProfile extends Component { componentWillReceiveProps(nextProps) { console.log('nextProps ', nextProps) const { userProfile } = nextProps.user + const permissions = nextProps?.org?.org?.options?.permissions const about = userProfile.info?.about this.setState({ firstName: userProfile.name?.firstName, @@ -58,7 +61,9 @@ class EditProfile extends Component { designation: about?.designation, longDesc: about?.longDescription, shortDesc: about?.shortDescription, - location: about?.location + location: about?.location, + // canChangeEmail: permissions?.canChangeEmail, + canChangeName: permissions?.canChangeName }, () => { console.log('updated state ', this.state) }) @@ -66,7 +71,17 @@ class EditProfile extends Component { render() { const { borderStyle, onHide, show } = this.props - const { firstName, lastName, shortDesc, location, designation, website, longDesc } = this.state + const { + firstName, + lastName, + shortDesc, + location, + designation, + website, + longDesc, + canChangeName + // canChangeEmail + } = this.state return (
Edit Profile
@@ -96,6 +111,7 @@ class EditProfile extends Component { defaultValue={firstName} name="firstName" onChange={this.onChange} + readOnly={!canChangeName} /> @@ -111,6 +127,7 @@ class EditProfile extends Component { defaultValue={lastName} name="lastName" onChange={this.onChange} + readOnly={!canChangeName} /> @@ -246,7 +263,8 @@ EditProfile.propTypes = { const mapStateToProps = (state) => ({ auth: state.auth, error: state.error, - user: state.user + user: state.user, + org: state.org }) export default connect(mapStateToProps, { updateProfile })(EditProfile); diff --git a/src/user/profile/popups/Logout.js b/src/user/profile/popups/Logout.js index 7ff6b57c..9de538f3 100644 --- a/src/user/profile/popups/Logout.js +++ b/src/user/profile/popups/Logout.js @@ -44,7 +44,7 @@ class Logout extends Component {
- diff --git a/src/user/profile/profile.js b/src/user/profile/profile.js index bcdbac2e..cfbb2707 100644 --- a/src/user/profile/profile.js +++ b/src/user/profile/profile.js @@ -4,10 +4,10 @@ import Navigation from "../dashboard/navigation/navigation"; import UserInfo from "./user-info/user-info"; import Portfolio from "../dashboard/portfolio/portfolio"; import PinPosts from "../pinned-posts/posts/pinPosts"; -// import Updates from "../dashboard/updates/updates"; import { connect } from 'react-redux' import { getProfile, getEventsCreatedByUser, getProjectCreatedByUser, getPostsCreatedByUser } from '../../actions/usersAction' import { getAllPinnedPosts } from '../../actions/postAction' +import { getOrgProfile } from '../../actions/orgAction' class Profile extends Component { constructor(props) { @@ -23,13 +23,14 @@ class Profile extends Component { }; } - componentWillMount() { + componentDidMount() { console.log("match", this.props.match?.path); const path = this.props.match?.path; if (path === "/profile") { console.log("checking profile"); setTimeout(() => { this.props.getProfile(); + this.props.getOrgProfile(); }) setTimeout(() => { this.props.getPostsCreatedByUser(); @@ -103,7 +104,7 @@ const mapStateToProps = (state) => ({ user: state.user, posts: state.post, event: state.event, - project: state.project + project: state.project, }) export default connect(mapStateToProps, { @@ -111,5 +112,6 @@ export default connect(mapStateToProps, { getEventsCreatedByUser, getProjectCreatedByUser, getPostsCreatedByUser, - getAllPinnedPosts + getAllPinnedPosts, + getOrgProfile })(Profile); diff --git a/src/user/profile/profile.scss b/src/user/profile/profile.scss index a6e2a8cc..5ac1eb75 100644 --- a/src/user/profile/profile.scss +++ b/src/user/profile/profile.scss @@ -15,7 +15,7 @@ flex: 3; .notify-user { display: flex; - padding: 20px 0px 20px 30px; + padding: 20px 10px 20px 30px; } } .two{ diff --git a/src/user/profile/user-info/user-info.js b/src/user/profile/user-info/user-info.js index a095ab1e..29155609 100644 --- a/src/user/profile/user-info/user-info.js +++ b/src/user/profile/user-info/user-info.js @@ -3,7 +3,8 @@ import "./user-info.scss"; import { Button } from "react-bootstrap"; import { Avatar } from "@material-ui/core"; import EditProfile from "./../popups/EditProfile"; -// import Followers from "../popups/Followers"; +import { FaFacebookSquare, FaGithubSquare, FaLinkedin } from 'react-icons/fa' +import { withRouter } from 'react-router-dom' class UserInfo extends Component { constructor(props) { @@ -32,18 +33,26 @@ class UserInfo extends Component { }) } + onFbClick = () => { + // this.props.history.push() + } + + onLinkedInClick = () => { + + } + + onGithubClick = () => { + + } + render() { const { designation, location, shortDesc, name } = this.state let cancel = () => this.setState({ editProfile: false, }); - // let cancelf = () => - // this.setState({ - // followersList: false, - // }); return ( -
+
@@ -59,25 +68,39 @@ class UserInfo extends Component {
-

- {name || "NA"}{" "} - {/* - */} -

-

{designation || "NA" }

-

{location || "NA"}

-

- {shortDesc || "Short description"} -

-
- - - +
+ + + + + + + + + +
+
+

{name || "NA"}

+

{designation || "NA"}

+

{location || "NA"}

+

{shortDesc || "Short description"}

+
+ {/* */} + {/* */} + {/* */} +
@@ -85,4 +108,4 @@ class UserInfo extends Component { } } -export default UserInfo; +export default withRouter(UserInfo); diff --git a/src/user/profile/user-info/user-info.scss b/src/user/profile/user-info/user-info.scss index d9756243..27e3c39d 100644 --- a/src/user/profile/user-info/user-info.scss +++ b/src/user/profile/user-info/user-info.scss @@ -1,30 +1,28 @@ -.user-details { +.user-detail { display: flex; flex-direction: row; border: solid 1px #dfe9f1; - min-height: 198px; - height: auto; align-items: center; - flex: 0.5; + height: 268px; + min-width: 58%; .user-image { - flex: 1; text-align: center; - margin: 35px 0; + margin: 35px 10px; .edit-option { margin-top: 10px; - border-radius: 20px; + // border-radius: 20px; font-size: 14px; .useredit { margin-top: 10px; - border-radius: 20px; + // border-radius: 20px; font-size: 14px; } } .user-pic { display: inline-block; .userpic { - width: 120px; - height: 120px; + width: 182px; + height: 182px; } } } @@ -32,47 +30,77 @@ flex: 3; padding: 10px 14px; h1 { - color: #0069d9; + color: #1a73e8; font-size: 20px; font-weight: bold; margin: 0; padding: 0; + font-family: "Inter"; } .profession { - color: #748391; - font-size: 14px; margin: 4px 0; padding: 0; + font-family: "Inter"; + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 17px; + color: #1d2129; + text-align: justify; } .place { color: #2c3e50; - font-size: 12px; + font-family: "Inter"; + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 17px; + color: #1d2129; + text-align: justify; margin: 4px 0; padding: 0; } .desc { - color: #5d5d5d; + font-family: "Inter"; + font-style: normal; + font-weight: normal; font-size: 14px; + line-height: 17px; + color: #1d2129; + text-align: justify; margin: 0; padding: 0; } .social-icons { .btn-primary { margin: 5px 7px 0 0; - padding: 8px; + padding: 0.7em; font-size: 14px; box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1); - border-radius: 20px; - width: 80px; - height: 35px; + padding: 3px; + width: 10vw; + height: 2.5em; font-family: Inter; font-style: normal; font-weight: 600; - font-size: 14px; + font-size: 0.8em; line-height: 17px; text-align: center; } } + .fa_icon__container { + display: flex; + justify-content: flex-end; + margin-top: -10vh; + .fa__icon { + font-size: 30px; + padding: 3px; + cursor: pointer; + } + } + .user__infos { + padding: 5px; + } } } diff --git a/src/user/projects/Utils/TagsInput.js b/src/user/projects/Utils/TagsInput.js new file mode 100644 index 00000000..18635af0 --- /dev/null +++ b/src/user/projects/Utils/TagsInput.js @@ -0,0 +1,68 @@ +import React, { useState } from 'react' +import HighlightOffOutlinedIcon from '@material-ui/icons/HighlightOffOutlined'; +import './style.scss' + +function TagsInput(props) { + const [tags, setTags] = useState([]); + const [suggestedTags, setSuggestedTags] = useState([]); + // const inputRef = useRef(null) + + // function to add tags + const addTags = (event) => { + // set suggestedTags + setSuggestedTags(props.suggestedTags); + if(event.target.value !== "" && event.key === "Enter") { + // set tags to tag array + setTags([...tags, event.target.value]) + props.selectedTags([...tags, event.target.value]) + // set input to blank + event.target.value = "" + } + } + + // function to remove tags + const removeTag = (index) => { + setTags([...tags.filter(tag => tags.indexOf(tag) !== index )]) + } + + // search tag + const searchTag = (event) => { + const hint = event.target.value; + const regex = new RegExp(hint, "gi"); + let tags = suggestedTags.filter((tag) => regex.test(tag) === true); + console.log('suggested tag ', tags) + // inputRef.current.innerHTML = tags.forEach((tag, index) => ( + // "
  • " + // + {tag} + + // "
    • " + // )) + } + + return ( +
    +
      + {tags.map((tag, index) => ( +
    • + {tag} + removeTag(index)} + className="tag-close-icon" + > + close + +
      • + ))} +
    + addTags(event)} + onKeyPress={event => searchTag(event)} + placeholder="Press enter to add tags" + /> + {/* */} +
    + ) +} + +export default TagsInput; \ No newline at end of file diff --git a/src/user/projects/Utils/style.scss b/src/user/projects/Utils/style.scss new file mode 100644 index 00000000..3cf1a4d7 --- /dev/null +++ b/src/user/projects/Utils/style.scss @@ -0,0 +1,67 @@ +.tags-input { + display: flex; + align-items: flex-start; + flex-wrap: wrap; + min-height: 37px; + padding: 0 8px; + border: 1px solid rgb(214, 216, 218); + border-radius: 6px; + // &:focus-within { + // border: 1px solid #6694da; + // } + + input { + flex: 1; + border: none; + height: 37px; + font-size: 14px; + padding: 4px; + + &:focus { + outline: transparent; + } + } + .suggested__tags { + font-size: 13px; + } +} + +#tags { + display: flex; + flex-wrap: wrap; + padding: 0; + margin: 8px 0 0 0; +} + +.single-tag { + width: auto; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + color: #fff; + padding: 0 8px; + font-size: 14px; + list-style: none; + border-radius: 7px; + margin: 0 8px 8px 0; + background: #007bff; + + .tag-title { + margin-top: 3px; + } + + .tag-close-icon { + display: block; + width: 16px; + height: 16px; + line-height: 16px; + text-align: center; + font-size: 14px; + margin-left: 8px; + color: #0052cc; + border-radius: 50%; + background: #fff; + cursor: pointer; + } +} diff --git a/src/user/projects/popups/delete-project.js b/src/user/projects/popups/delete-project.js index 9c986565..20215f72 100644 --- a/src/user/projects/popups/delete-project.js +++ b/src/user/projects/popups/delete-project.js @@ -3,6 +3,7 @@ import { Modal, Button } from "react-bootstrap"; import { connect } from 'react-redux' import { deleteProjectById } from '../../../actions/projectAction' import { withRouter } from 'react-router-dom' +import './popups.scss' class DeleteProject extends Component { onRemove = () => { @@ -23,7 +24,10 @@ class DeleteProject extends Component { Delete This Project - + +

    This will permanently delete the project from the platform?

    +     + diff --git a/src/user/projects/popups/edit-project.js b/src/user/projects/popups/edit-project.js index 79f4a1c3..4c22b401 100644 --- a/src/user/projects/popups/edit-project.js +++ b/src/user/projects/popups/edit-project.js @@ -168,20 +168,20 @@ class EditProject extends Component { /> -
    - - -
    +
    + + +
    ); diff --git a/src/user/projects/popups/popups.scss b/src/user/projects/popups/popups.scss index f5889254..d411bf11 100644 --- a/src/user/projects/popups/popups.scss +++ b/src/user/projects/popups/popups.scss @@ -1,8 +1,17 @@ .delete_project_title{ - color:rgb(224, 101, 101); + // color: } .delete_project_description{ color:rgb(26, 24, 24); font-weight: 500; } +.modal-footer { + display: flex; + flex-direction: row; + justify-content: flex-start; +} +.danger__text { + font-size: 17px; + color:rgb(224, 101, 101); +} \ No newline at end of file diff --git a/src/user/projects/proj-info/proj-info.js b/src/user/projects/proj-info/proj-info.js index 41a4045f..f0c8f0b1 100644 --- a/src/user/projects/proj-info/proj-info.js +++ b/src/user/projects/proj-info/proj-info.js @@ -5,12 +5,11 @@ import LanguageIcon from '@material-ui/icons/Language'; import Navigation from "../../dashboard/navigation/navigation"; import { Card, Button, Badge, Col, Row } from "react-bootstrap"; import "./proj-info.scss"; -import ArrowBackIcon from "@material-ui/icons/ArrowBack"; import proj_img from "../../../images/project.png"; import EditProject from "../popups/edit-project"; import DeleteIcon from "@material-ui/icons/Delete"; import DeleteProject from "../popups/delete-project"; -import { makeStyles,Grid, Fab} from "@material-ui/core"; +import { makeStyles, Grid } from "@material-ui/core"; // import { CardActionArea, CardActions, CardContent, CardMedia, Typography } from "@material-ui/core" import { connect } from 'react-redux' import { getProjectById } from '../../../actions/projectAction' @@ -103,9 +102,9 @@ class ProjInfo extends Component { let variant = ["primary", "secondary", "success", "danger", "warning", "light", "dark"] const techBadge = techStacks?.map((techs, index) => ( - <> + {techs}{" "} - + )) return ( @@ -114,15 +113,6 @@ class ProjInfo extends Component {
    - - - diff --git a/src/user/projects/projects.js b/src/user/projects/projects.js index 1ae4da1a..b2e988fd 100644 --- a/src/user/projects/projects.js +++ b/src/user/projects/projects.js @@ -1,13 +1,12 @@ import React, { Component } from "react"; import "./projects.scss"; import Navigation from "../dashboard/navigation/navigation"; -// import Project_list from "../../jsonData/projects"; import { makeStyles,Grid , Card, CardActionArea, CardActions, CardContent, CardMedia, Typography} from "@material-ui/core"; import { Button } from "react-bootstrap"; -// import Popups from "../../common/Popups"; import { connect } from 'react-redux' import { createProject, getAllProjects } from '../../actions/projectAction' import projectImage from '../../images/project.png' +import { withRouter } from "react-router-dom"; class Projects extends Component { constructor(props) { @@ -18,7 +17,6 @@ class Projects extends Component { allProjects: [] }; } - componentDidMount() { setTimeout(() => { this.props.getAllProjects(); @@ -72,8 +70,12 @@ class Projects extends Component { - @@ -93,11 +95,6 @@ class Projects extends Component {
    - {/* */}
    ); } @@ -110,4 +107,7 @@ const mapStateToProps = (state) => ({ project: state.project }) -export default connect(mapStateToProps, { createProject, getAllProjects })(Projects); +export default connect(mapStateToProps, { + createProject, + getAllProjects +})(withRouter(Projects)); diff --git a/src/user/proposals/UserProposalDashboard/DashboardRightPanel/DashboardRightPanel.js b/src/user/proposals/UserProposalDashboard/DashboardRightPanel/DashboardRightPanel.js index d815fd99..0ecc824b 100644 --- a/src/user/proposals/UserProposalDashboard/DashboardRightPanel/DashboardRightPanel.js +++ b/src/user/proposals/UserProposalDashboard/DashboardRightPanel/DashboardRightPanel.js @@ -1,6 +1,5 @@ import React, { Component } from "react"; import "./DashboardRightPanel.scss"; -import Comments from "./Comments/Comments"; import Notifications from "./Notifications/Notifications"; class DashboardRightPanel extends Component { diff --git a/src/user/setup/components/SetupPreview.js b/src/user/setup/components/SetupPreview.js index e6a0328d..17e6ffff 100644 --- a/src/user/setup/components/SetupPreview.js +++ b/src/user/setup/components/SetupPreview.js @@ -65,7 +65,7 @@ class SetupPreview extends Component {

    Community Setup

    - {values.error ? (

    {values.error}

    ): null} + {values.error ?

    {values.error}

    : null}

    2 / 2

    @@ -89,7 +89,7 @@ class SetupPreview extends Component { onChange={this.onChangeColor} style={{ color: this.state.color }} > -
    - + diff --git a/src/user/setup/components/about.scss b/src/user/setup/components/about.scss index 8487bb32..bc7bec79 100644 --- a/src/user/setup/components/about.scss +++ b/src/user/setup/components/about.scss @@ -66,7 +66,7 @@ width: 9vw; height: 5vh; background: #1A73E8; - border-radius: 100px; + // border-radius: 100px; } } } \ No newline at end of file diff --git a/src/user/setup/components/preview.scss b/src/user/setup/components/preview.scss index 50044f11..847148ff 100644 --- a/src/user/setup/components/preview.scss +++ b/src/user/setup/components/preview.scss @@ -71,13 +71,13 @@ width: 9vw; height: 5vh; background: #1A73E8; - border-radius: 100px; + // border-radius: 100px; } .prev_btn { width: 9vw; height: 5vh; background: rgb(250, 251, 252); - border-radius: 100px; + // border-radius: 100px; color: #1A73E8; margin-right: 1em; } diff --git a/src/user/setup/components/setupform.scss b/src/user/setup/components/setupform.scss index 19d01d78..e97980e8 100644 --- a/src/user/setup/components/setupform.scss +++ b/src/user/setup/components/setupform.scss @@ -62,13 +62,13 @@ width: 9vw; height: 5vh; background: #1A73E8; - border-radius: 100px; + // border-radius: 100px; } .prev_btn { width: 9vw; height: 5vh; background: rgb(250, 251, 252); - border-radius: 100px; + // border-radius: 100px; color: #1A73E8; margin-right: 1em; } diff --git a/src/user/setup/setup.scss b/src/user/setup/setup.scss index eaa58ee6..166c8d49 100644 --- a/src/user/setup/setup.scss +++ b/src/user/setup/setup.scss @@ -4,14 +4,14 @@ .donut_header_logo { padding-bottom: 1.3em; .donut_logo_text { - width: 15vw; - height: 10vh; + width: 177px; + height: 66px; padding-top: 1em; } .donut_shadow { float: right; - height: 20vh; - width: 29vh; + height: 169px; + width: 200px; margin-top: -80px; } } @@ -36,5 +36,6 @@ margin-left: 13.22%; margin-right: 13.22%; box-shadow: 1px 3px 18px rgba(0, 0, 0, 0.1); + position: relative; } } \ No newline at end of file