Profile Card
A pop over card component that displays user information and provides some relevant links.
###Installation
Add "@influitive/profile-card": "X.X.XX"
to the projects package JSON ( replaces X.X.XX with the version you want to use)
Run npm install
###Usage In your component:
import ProfileCard from '@influitive/profile-card/lib';
<ProfileCard
id={contactUUID}
disableViewProfile={aBooleanProp}
anonymous={aBooleanProp}
disableMessage={aBooleanProp}
children={wrappedElement} />
###Props
-
id
(Uuid) of the user whose information is to be display in the card. -
disableViewProfile
(bool) When true hides the link to the user public profile. -
disableMessage
(bool) When true hides the link to message that contact. -
anonymous
(bool) when true renders the generic anonymous advocate information. -
children
(node) Corresponds to the element to be wrapped. The profile card will toggle when clicking on this element.
Extra Considerations:
You will need to style the element that is being wrapped, as the profile-card
does not make assumptions about its children. E.g for avatar images we are normally using:
.profile {
width: 32px;
border-radius: 100%;
}
###How it works
profile-card
is just a regular component built using react-redux. When the children element is clicked an ajax call is fired to the hub's /api/people/${id}.json
to retrieve that especific user information.
RELEASING
We currently maintain 2 versions of profile card due to mismatched deps that break in one of the places we use this repo. The master branch is v2 while there is also a v3 branch. Changes need to be duplicated in both branches.
-
before releasing, make sure you remove node_modules and re-install. There seems to be an error when publishing where there is no lib folder, but getting fresh node_modules seems to somehow fix it. This is because each version has diff package.json.
-
you can try
npm publish --dry-run
, I haven't tested this yet, but it should list all the files without actually publishing.
Infl-fe
To run locally in infl-fe for testing purposes, follow these steps:
- In Profile Card (v3), run:
npm run buildmodule
npm pack
- copy resulting .tgz file name
- In Infl-fe stop it running then run:
rm -rf node_modules
yarn cache clean
- `yarn add ../profile-card/ --ignore-engines
yarn install --ignore-engines
yarn start