UsersModule moved to old repos
This commit is contained in:
Luis Fernando Molina committed
1 parent
b291894227
commit
121af47510
65 files changed
No files matched your search
@@ -0,0 +1,3 @@
|
||||
# See https://help.github.com/ignore-files/ for more about ignoring files.
|
||||
/node_modules
|
||||
/coverage
|
||||
@@ -0,0 +1 @@
|
||||
build/
|
||||
@@ -0,0 +1,46 @@
|
||||
# Contributor Covenant Code of Conduct
|
||||
|
||||
## Our Pledge
|
||||
|
||||
In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
|
||||
|
||||
## Our Standards
|
||||
|
||||
Examples of behavior that contributes to creating a positive environment include:
|
||||
|
||||
* Using welcoming and inclusive language
|
||||
* Being respectful of differing viewpoints and experiences
|
||||
* Gracefully accepting constructive criticism
|
||||
* Focusing on what is best for the community
|
||||
* Showing empathy towards other community members
|
||||
|
||||
Examples of unacceptable behavior by participants include:
|
||||
|
||||
* The use of sexualized language or imagery and unwelcome sexual attention or advances
|
||||
* Trolling, insulting/derogatory comments, and personal or political attacks
|
||||
* Public or private harassment
|
||||
* Publishing others' private information, such as a physical or electronic address, without explicit permission
|
||||
* Other conduct which could reasonably be considered inappropriate in a professional setting
|
||||
|
||||
## Our Responsibilities
|
||||
|
||||
Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
|
||||
|
||||
Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
|
||||
|
||||
## Scope
|
||||
|
||||
This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
|
||||
|
||||
## Enforcement
|
||||
|
||||
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at feedback at advancedalgos dot org. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
|
||||
|
||||
Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
|
||||
|
||||
## Attribution
|
||||
|
||||
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
|
||||
|
||||
[homepage]: http://contributor-covenant.org
|
||||
[version]: http://contributor-covenant.org/version/1/4/
|
||||
@@ -0,0 +1,45 @@
|
||||
# Contributing
|
||||
|
||||
We are thrilled you are interested in contributing to this repository. Your help may be essential to the project's success and we want you in!
|
||||
|
||||
Advanced Algos LTD is a startup, currently at a very early stage. Although this repository is not open source software yet, we do welcome contributions from the community.
|
||||
|
||||
Contributions are deemed _voluntary work_. There might be incentives in place for certain kinds of contributions. Contact us for more information in this regards.
|
||||
|
||||
In any case, contributors agree to provide an express grant of patent rights for their contributions. Submitting Pull Requests to this repository represents an express agreement with the terms of our Balanced Contributor Intellectual Property Agreement. This agreement is a direct implementation of GitHub's [Balanced Employee Intellectual Property Agreement 1.0.1](https://github.com/github/balanced-employee-ip-agreement/blob/master/Balanced_Employee_IP_Agreement.md).
|
||||
|
||||
# Balanced Contributor Intellectual Property Agreement 1.0.1
|
||||
|
||||
This BALANCED CONTRIBUTOR INTELLECTUAL PROPERTY AGREEMENT is between person or team submitting Pull Requests to this repository and Advanced Algos LTD ("Company").
|
||||
|
||||
**What is this?** This is the Company's Intellectual Property Agreement ("Agreement"). If you've worked in the technology space before, there's a good chance that you've run across one or more of these in the past. This document is the official, entire and exclusive agreement on what intellectual property ("IP") is yours, and what belongs to the Company.
|
||||
|
||||
**Why is this?** The Company needs to be clear on what IP it owns and has rights to. Its customers, contributors, and investors depend on the Company having the legal rights to the products and services it is providing so that the Company can continue operating and doing business.
|
||||
|
||||
The Company also believes that it's important to be clear on what it doesn't own. The Company doesn't want you looking over your shoulder every time you work on something personal or worrying that the Company will someday seize your open source non-lethal mousetrap simulation software. In other words, the Company isn't interested in appropriating your personal projects.
|
||||
|
||||
**Read this.** Please read this document and be sure you understand it before you submit any Pull Requests. Due to legal risk and corporate obligations, the Company cannot, by and large, negotiate its terms. If you feel you have a particular circumstance that keeps you from signing, please let the Company's legal department ("Legal") know. And, of course, you're always free and encouraged to get your own legal counsel to explain anything you're not clear on.
|
||||
|
||||
Cool? Then, by submitting your first Pull Request, and as a condition of your contribution, you agree to the following:
|
||||
|
||||
1. **What the Company owns.** The Company owns any IP ("Company IP") that you create, or help create _as its contributor_, but only if it meets one or more of these additional conditions: The IP was (i) related to an existing or prospective Company product or service at the time you developed, invented, or created it, (ii) developed for use by the Company, or (iii) developed or promoted with existing Company IP or with the Company's endorsement. You hereby grant and assign, and will grant and assign, to the Company all rights and interests in all Company IP.
|
||||
|
||||
"Company IP" includes concepts, designs, developments, discoveries, ideas, improvements, inventions, trade secrets, trademarks, and works of authorship.
|
||||
|
||||
2. **What the Company doesn't own.** If you create IP that doesn't fit into one of the categories listed above, the Company doesn't own it. In other words, the Company doesn't own concepts, designs, developments, discoveries, ideas, improvements, inventions, trade secrets, trademarks, or works of authorship that you develop, invent, or create that do not meet any of the conditions in Section 1.
|
||||
|
||||
3. **Contribution of your IP to Company projects.** If you include your own IP – such as IP you created prior to working for the Company – into a Company product or service, it's still yours, of course, but you grant the Company a non-exclusive, irrevocable, fully paid-up, royalty-free, perpetual, sublicensable, transferable, worldwide license to use it without restriction in any way or implementation, in modified form, or as is, by itself, or incorporated into another product or service ("License"). If you include your name in any project over which the Company would have rights under this Agreement, such as in a copyright notice or a comment in code or documentation, then the License covers the rights associated with that use of your name as well.
|
||||
|
||||
4. **Your contributions to non-Company projects.** The Company recognizes that you may be engaged in work that requires you to submit IP to entities other than the Company, such as open source projects used by the Company. Please make sure that Legal is aware of what you're working on so that Legal can help with any licensing issues. If any project asks you to sign a contribution agreement, you should check with Legal before doing so. These agreements may be legally binding on the Company and so should be run through Legal first.
|
||||
|
||||
5. **Voluntary Works** All Company IP that you are involved with or create as part of your work for the Company is voluntary work which does not require compensation. There might be incentives in place for certain kinds of contributions. Feel free to contact the Company to learn more.
|
||||
|
||||
6. **No conflicts.** You agree that you don't have any outstanding agreements or obligations that conflict with those in this Agreement, and that you won't enter into conflicting agreements in the future.
|
||||
|
||||
7. **IP protection.** The Company might someday need to show the work that went into the development of IP that it uses or has used, or to make government filings to establish that it owns the IP or has rights over it. To help in those situations, you agree not to destroy any records you maintain relating to the development of any Company IP or IP under License (together, "All IP"), and, if the Company asks, to provide those records to the Company. You agree to help the Company secure and defend its rights in All IP. For your help the Company will compensate you at a reasonable rate. If the Company is unable to secure your help, you authorize the Company to act on your behalf (as your agent and attorney-in-fact) in securing all rights related to All IP.
|
||||
|
||||
8. **Confidentiality.** As an contributor or contractor of the Company, you will have access to sensitive confidential information that is important to the Company's business. You are responsible for keeping this information confidential, including after you end your work for the Company.
|
||||
|
||||
"Confidential Information" includes non-public technical details about our products or services, financial information, business strategies and forecasts, customer data, or any other information, data or know-how that is valuable to the Company because it is not publicly known.
|
||||
|
||||
The Company's Confidential Information is sensitive and we expect that you'll treat it as such. You agree to only use the Company's Confidential Information for the purpose of performing your contribution and for the benefit of the Company. You will do your best to keep Confidential Information secret. If you are not sure if something is Confidential Information, you should assume that it is, until you can confirm otherwise.
|
||||
@@ -0,0 +1,201 @@
|
||||
Apache License
|
||||
Version 2.0, January 2004
|
||||
http://www.apache.org/licenses/
|
||||
|
||||
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
||||
|
||||
1. Definitions.
|
||||
|
||||
"License" shall mean the terms and conditions for use, reproduction,
|
||||
and distribution as defined by Sections 1 through 9 of this document.
|
||||
|
||||
"Licensor" shall mean the copyright owner or entity authorized by
|
||||
the copyright owner that is granting the License.
|
||||
|
||||
"Legal Entity" shall mean the union of the acting entity and all
|
||||
other entities that control, are controlled by, or are under common
|
||||
control with that entity. For the purposes of this definition,
|
||||
"control" means (i) the power, direct or indirect, to cause the
|
||||
direction or management of such entity, whether by contract or
|
||||
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
||||
outstanding shares, or (iii) beneficial ownership of such entity.
|
||||
|
||||
"You" (or "Your") shall mean an individual or Legal Entity
|
||||
exercising permissions granted by this License.
|
||||
|
||||
"Source" form shall mean the preferred form for making modifications,
|
||||
including but not limited to software source code, documentation
|
||||
source, and configuration files.
|
||||
|
||||
"Object" form shall mean any form resulting from mechanical
|
||||
transformation or translation of a Source form, including but
|
||||
not limited to compiled object code, generated documentation,
|
||||
and conversions to other media types.
|
||||
|
||||
"Work" shall mean the work of authorship, whether in Source or
|
||||
Object form, made available under the License, as indicated by a
|
||||
copyright notice that is included in or attached to the work
|
||||
(an example is provided in the Appendix below).
|
||||
|
||||
"Derivative Works" shall mean any work, whether in Source or Object
|
||||
form, that is based on (or derived from) the Work and for which the
|
||||
editorial revisions, annotations, elaborations, or other modifications
|
||||
represent, as a whole, an original work of authorship. For the purposes
|
||||
of this License, Derivative Works shall not include works that remain
|
||||
separable from, or merely link (or bind by name) to the interfaces of,
|
||||
the Work and Derivative Works thereof.
|
||||
|
||||
"Contribution" shall mean any work of authorship, including
|
||||
the original version of the Work and any modifications or additions
|
||||
to that Work or Derivative Works thereof, that is intentionally
|
||||
submitted to Licensor for inclusion in the Work by the copyright owner
|
||||
or by an individual or Legal Entity authorized to submit on behalf of
|
||||
the copyright owner. For the purposes of this definition, "submitted"
|
||||
means any form of electronic, verbal, or written communication sent
|
||||
to the Licensor or its representatives, including but not limited to
|
||||
communication on electronic mailing lists, source code control systems,
|
||||
and issue tracking systems that are managed by, or on behalf of, the
|
||||
Licensor for the purpose of discussing and improving the Work, but
|
||||
excluding communication that is conspicuously marked or otherwise
|
||||
designated in writing by the copyright owner as "Not a Contribution."
|
||||
|
||||
"Contributor" shall mean Licensor and any individual or Legal Entity
|
||||
on behalf of whom a Contribution has been received by Licensor and
|
||||
subsequently incorporated within the Work.
|
||||
|
||||
2. Grant of Copyright License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
copyright license to reproduce, prepare Derivative Works of,
|
||||
publicly display, publicly perform, sublicense, and distribute the
|
||||
Work and such Derivative Works in Source or Object form.
|
||||
|
||||
3. Grant of Patent License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
(except as stated in this section) patent license to make, have made,
|
||||
use, offer to sell, sell, import, and otherwise transfer the Work,
|
||||
where such license applies only to those patent claims licensable
|
||||
by such Contributor that are necessarily infringed by their
|
||||
Contribution(s) alone or by combination of their Contribution(s)
|
||||
with the Work to which such Contribution(s) was submitted. If You
|
||||
institute patent litigation against any entity (including a
|
||||
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
||||
or a Contribution incorporated within the Work constitutes direct
|
||||
or contributory patent infringement, then any patent licenses
|
||||
granted to You under this License for that Work shall terminate
|
||||
as of the date such litigation is filed.
|
||||
|
||||
4. Redistribution. You may reproduce and distribute copies of the
|
||||
Work or Derivative Works thereof in any medium, with or without
|
||||
modifications, and in Source or Object form, provided that You
|
||||
meet the following conditions:
|
||||
|
||||
(a) You must give any other recipients of the Work or
|
||||
Derivative Works a copy of this License; and
|
||||
|
||||
(b) You must cause any modified files to carry prominent notices
|
||||
stating that You changed the files; and
|
||||
|
||||
(c) You must retain, in the Source form of any Derivative Works
|
||||
that You distribute, all copyright, patent, trademark, and
|
||||
attribution notices from the Source form of the Work,
|
||||
excluding those notices that do not pertain to any part of
|
||||
the Derivative Works; and
|
||||
|
||||
(d) If the Work includes a "NOTICE" text file as part of its
|
||||
distribution, then any Derivative Works that You distribute must
|
||||
include a readable copy of the attribution notices contained
|
||||
within such NOTICE file, excluding those notices that do not
|
||||
pertain to any part of the Derivative Works, in at least one
|
||||
of the following places: within a NOTICE text file distributed
|
||||
as part of the Derivative Works; within the Source form or
|
||||
documentation, if provided along with the Derivative Works; or,
|
||||
within a display generated by the Derivative Works, if and
|
||||
wherever such third-party notices normally appear. The contents
|
||||
of the NOTICE file are for informational purposes only and
|
||||
do not modify the License. You may add Your own attribution
|
||||
notices within Derivative Works that You distribute, alongside
|
||||
or as an addendum to the NOTICE text from the Work, provided
|
||||
that such additional attribution notices cannot be construed
|
||||
as modifying the License.
|
||||
|
||||
You may add Your own copyright statement to Your modifications and
|
||||
may provide additional or different license terms and conditions
|
||||
for use, reproduction, or distribution of Your modifications, or
|
||||
for any such Derivative Works as a whole, provided Your use,
|
||||
reproduction, and distribution of the Work otherwise complies with
|
||||
the conditions stated in this License.
|
||||
|
||||
5. Submission of Contributions. Unless You explicitly state otherwise,
|
||||
any Contribution intentionally submitted for inclusion in the Work
|
||||
by You to the Licensor shall be under the terms and conditions of
|
||||
this License, without any additional terms or conditions.
|
||||
Notwithstanding the above, nothing herein shall supersede or modify
|
||||
the terms of any separate license agreement you may have executed
|
||||
with Licensor regarding such Contributions.
|
||||
|
||||
6. Trademarks. This License does not grant permission to use the trade
|
||||
names, trademarks, service marks, or product names of the Licensor,
|
||||
except as required for reasonable and customary use in describing the
|
||||
origin of the Work and reproducing the content of the NOTICE file.
|
||||
|
||||
7. Disclaimer of Warranty. Unless required by applicable law or
|
||||
agreed to in writing, Licensor provides the Work (and each
|
||||
Contributor provides its Contributions) on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
||||
implied, including, without limitation, any warranties or conditions
|
||||
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
||||
PARTICULAR PURPOSE. You are solely responsible for determining the
|
||||
appropriateness of using or redistributing the Work and assume any
|
||||
risks associated with Your exercise of permissions under this License.
|
||||
|
||||
8. Limitation of Liability. In no event and under no legal theory,
|
||||
whether in tort (including negligence), contract, or otherwise,
|
||||
unless required by applicable law (such as deliberate and grossly
|
||||
negligent acts) or agreed to in writing, shall any Contributor be
|
||||
liable to You for damages, including any direct, indirect, special,
|
||||
incidental, or consequential damages of any character arising as a
|
||||
result of this License or out of the use or inability to use the
|
||||
Work (including but not limited to damages for loss of goodwill,
|
||||
work stoppage, computer failure or malfunction, or any and all
|
||||
other commercial damages or losses), even if such Contributor
|
||||
has been advised of the possibility of such damages.
|
||||
|
||||
9. Accepting Warranty or Additional Liability. While redistributing
|
||||
the Work or Derivative Works thereof, You may choose to offer,
|
||||
and charge a fee for, acceptance of support, warranty, indemnity,
|
||||
or other liability obligations and/or rights consistent with this
|
||||
License. However, in accepting such obligations, You may act only
|
||||
on Your own behalf and on Your sole responsibility, not on behalf
|
||||
of any other Contributor, and only if You agree to indemnify,
|
||||
defend, and hold each Contributor harmless for any liability
|
||||
incurred by, or claims asserted against, such Contributor by reason
|
||||
of your accepting any such warranty or additional liability.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
APPENDIX: How to apply the Apache License to your work.
|
||||
|
||||
To apply the Apache License to your work, attach the following
|
||||
boilerplate notice, with the fields enclosed by brackets "[]"
|
||||
replaced with your own identifying information. (Don't include
|
||||
the brackets!) The text should be enclosed in the appropriate
|
||||
comment syntax for the file format. We also recommend that a
|
||||
file or class name and description of purpose be included on the
|
||||
same "printed page" as the copyright notice for easier
|
||||
identification within third-party archives.
|
||||
|
||||
Copyright [yyyy] [name of copyright owner]
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,41 @@
|
||||
import { createLogger, format, transports } from 'winston'
|
||||
const { combine, timestamp, simple } = format
|
||||
import { inspect } from 'util'
|
||||
|
||||
const options = {
|
||||
file: {
|
||||
level: 'info',
|
||||
filename: '../logs/app.log',
|
||||
handleExceptions: true,
|
||||
json: true,
|
||||
maxsize: 5242880, // 5MB
|
||||
maxFiles: 5,
|
||||
colorize: false,
|
||||
timestamp: true
|
||||
},
|
||||
console: {
|
||||
level: 'debug',
|
||||
handleExceptions: true,
|
||||
json: false,
|
||||
colorize: true,
|
||||
timestamp: true
|
||||
}
|
||||
}
|
||||
|
||||
const logger = createLogger({
|
||||
level: 'info',
|
||||
format: format.combine(
|
||||
format.colorize(),
|
||||
format.timestamp({ format: 'YY/MM/DD HH:mm' }),
|
||||
format.printf(
|
||||
info => `${info.timestamp} - ${info.level}: ${JSON.parse(JSON.stringify(inspect(info.message)))}`
|
||||
)
|
||||
),
|
||||
transports: [
|
||||
new transports.File(options.file),
|
||||
new transports.Console(options.console)
|
||||
],
|
||||
exitOnError: false // do not exit on handled exceptions
|
||||
})
|
||||
|
||||
export default logger
|
||||
+13357
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,35 @@
|
||||
{
|
||||
"name": "@superalgos/users-client",
|
||||
"version": "0.0.27",
|
||||
"description": "Superalgos Users client-side web app",
|
||||
"author": "Superalgos, ltd.",
|
||||
"license": "Apache-2.0",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/Superalgos/UsersModule.git"
|
||||
},
|
||||
"main": "src/index.js",
|
||||
"dependencies": {
|
||||
"@material-ui/core": "^3.2.2",
|
||||
"@material-ui/icons": "^3.0.1",
|
||||
"apollo-client": "2.4.2",
|
||||
"graphql": "^14.0.2",
|
||||
"graphql-tag": "^2.10.0",
|
||||
"prop-types": "^15.6.2",
|
||||
"react": "^16.6.1",
|
||||
"react-apollo": "^2.2.4",
|
||||
"react-dom": "^16.6.1",
|
||||
"react-router-dom": "^4.3.1",
|
||||
"react-scripts": "^3.0.0",
|
||||
"recompose": "^0.30.0"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test --env=jsdom",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"devDependencies": {
|
||||
"react-hot-loader": "^4.3.11"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import React from 'react'
|
||||
import Typography from '@material-ui/core/Typography'
|
||||
|
||||
const BannerTopBar = ({
|
||||
size,
|
||||
backgroundUrl,
|
||||
title,
|
||||
text
|
||||
}) => (
|
||||
<div className={`bannerTopBar ${size}`} style={backgroundUrl ? { backgroundImage: `url(${backgroundUrl})` } : {}}>
|
||||
<div className='caption'>
|
||||
<Typography className='title' variant='h1' align='center'>{title}</Typography>
|
||||
<Typography className='text' variant='h2' align='center'>{text}</Typography>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
export default BannerTopBar
|
||||
@@ -0,0 +1,24 @@
|
||||
import React, { Component } from 'react'
|
||||
import UserList from './UserList'
|
||||
import BannerTopBar from './BannerTopBar'
|
||||
|
||||
class Browse extends Component {
|
||||
|
||||
render () {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<BannerTopBar
|
||||
size='medium'
|
||||
title='Users Directory'
|
||||
text='Everyone involved in Advanced Algos is here.'
|
||||
backgroundUrl='https://superalgos.org/img/photos/users.jpg'
|
||||
/>
|
||||
<div className='container'>
|
||||
<UserList />
|
||||
</div>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Browse
|
||||
@@ -0,0 +1,258 @@
|
||||
import React, { Component } from 'react'
|
||||
import {graphql, compose} from 'react-apollo'
|
||||
import {getDescendentsQuery} from '../queries/queries'
|
||||
|
||||
// Materia UI
|
||||
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
import Card from '@material-ui/core/Card'
|
||||
import CardActionArea from '@material-ui/core/CardActionArea'
|
||||
import CardActions from '@material-ui/core/CardActions'
|
||||
import CardContent from '@material-ui/core/CardContent'
|
||||
import CardMedia from '@material-ui/core/CardMedia'
|
||||
import Typography from '@material-ui/core/Typography'
|
||||
import Grid from '@material-ui/core/Grid'
|
||||
|
||||
// Material UI Nestled Lists
|
||||
import ListSubheader from '@material-ui/core/ListSubheader';
|
||||
import List from '@material-ui/core/List';
|
||||
import ListItem from '@material-ui/core/ListItem';
|
||||
import ListItemIcon from '@material-ui/core/ListItemIcon';
|
||||
import ListItemText from '@material-ui/core/ListItemText';
|
||||
import Collapse from '@material-ui/core/Collapse';
|
||||
import ExpandLess from '@material-ui/icons/ExpandLess';
|
||||
import ExpandMore from '@material-ui/icons/ExpandMore';
|
||||
import StarBorder from '@material-ui/icons/StarBorder';
|
||||
|
||||
// Images
|
||||
import UserDefaultPicture from '../img/user-default-pic.jpg'
|
||||
|
||||
const styles = theme => ({
|
||||
card: {
|
||||
maxWidth: 300,
|
||||
minWidth: 300,
|
||||
paddingTop: '30'
|
||||
},
|
||||
media: {
|
||||
height: 0,
|
||||
paddingTop: '56.25%', // 16:9,
|
||||
marginTop: '30',
|
||||
minWidth: 300
|
||||
},
|
||||
typography: {
|
||||
maxWidth: 345,
|
||||
minWidth: 300,
|
||||
paddingTop: '30'
|
||||
},
|
||||
appBar: {
|
||||
position: 'relative'
|
||||
},
|
||||
flex: {
|
||||
flex: 1
|
||||
},
|
||||
grid: {
|
||||
paddingTop: '30',
|
||||
marginTop: 30
|
||||
},
|
||||
list: {
|
||||
width: '80%',
|
||||
marginLeft: '10%',
|
||||
marginTop: 25
|
||||
},
|
||||
button: {
|
||||
margin: theme.spacing.unit,
|
||||
marginTop: theme.spacing.unit * 3
|
||||
},
|
||||
nested: {
|
||||
paddingLeft: theme.spacing.unit * 4,
|
||||
},
|
||||
})
|
||||
|
||||
class DescendentsTree extends Component {
|
||||
|
||||
constructor (props) {
|
||||
super(props)
|
||||
|
||||
this.state = {
|
||||
id: '',
|
||||
open: true
|
||||
}
|
||||
}
|
||||
|
||||
handleClick = () => {
|
||||
this.setState(state => ({ open: !state.open }));
|
||||
};
|
||||
|
||||
displayIcons(amount) {
|
||||
|
||||
switch (amount) {
|
||||
case 1: return (
|
||||
<div>
|
||||
<ListItemIcon>
|
||||
<StarBorder />
|
||||
</ListItemIcon>
|
||||
</div>
|
||||
)
|
||||
case 2: return (
|
||||
<div>
|
||||
<ListItemIcon>
|
||||
<StarBorder />
|
||||
</ListItemIcon>
|
||||
<ListItemIcon>
|
||||
<StarBorder />
|
||||
</ListItemIcon>
|
||||
</div>
|
||||
)
|
||||
case 3: return (
|
||||
<div>
|
||||
<ListItemIcon>
|
||||
<StarBorder />
|
||||
</ListItemIcon>
|
||||
<ListItemIcon>
|
||||
<StarBorder />
|
||||
</ListItemIcon>
|
||||
<ListItemIcon>
|
||||
<StarBorder />
|
||||
</ListItemIcon>
|
||||
</div>
|
||||
)
|
||||
default: return(<div/>)
|
||||
}
|
||||
}
|
||||
|
||||
displayNestedListItems(node, level) {
|
||||
|
||||
const { classes } = this.props
|
||||
return node.descendents.map(descendent => {
|
||||
return (
|
||||
<div key={descendent.alias}>
|
||||
<ListItem button className={classes.nested}>
|
||||
{this.displayIcons(level)}
|
||||
<Card className={classes.card}>
|
||||
<CardActionArea>
|
||||
<CardMedia
|
||||
className={classes.media}
|
||||
image={UserDefaultPicture}
|
||||
title='User Profile'
|
||||
|
||||
/>
|
||||
<CardContent>
|
||||
<Typography gutterBottom variant='headline' component='h2'>
|
||||
{descendent.alias}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</CardActionArea>
|
||||
<CardActions>
|
||||
<Grid container justify='center' spacing={8}>
|
||||
<Grid item />
|
||||
</Grid>
|
||||
</CardActions>
|
||||
</Card>
|
||||
</ListItem>
|
||||
{this.displayNestedList(descendent, level)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
displayNestedList(descendent, level) {
|
||||
const primaryText = "Children of " + descendent.alias
|
||||
if (descendent.descendents !== undefined) {
|
||||
if (descendent.descendents.length > 0) {
|
||||
return(
|
||||
<List component="div" disablePadding>
|
||||
<ListItem button onClick={ () => {
|
||||
this.setState(state => ({ [descendent.alias]: !state[descendent.alias] }));
|
||||
}
|
||||
}>
|
||||
<ListItemText inset primary={primaryText} />
|
||||
{this.state[descendent.alias] ? <ExpandLess /> : <ExpandMore />}
|
||||
</ListItem>
|
||||
<Collapse in={this.state[descendent.alias]} timeout="auto" unmountOnExit>
|
||||
{this.displayNestedListItems(descendent, level + 1)}
|
||||
</Collapse>
|
||||
</List>
|
||||
)
|
||||
} else {
|
||||
return (<div/>)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
displayTopList () {
|
||||
let data = this.props.data
|
||||
const { classes } = this.props
|
||||
|
||||
if (data.loading) {
|
||||
return (<div> Loading Descendents... </div>)
|
||||
} else {
|
||||
if (data.users_Descendents === undefined) {
|
||||
return (<div> No Descendents to Display </div>)
|
||||
} else {
|
||||
return data.users_Descendents.map(descendent => {
|
||||
return (
|
||||
<div key={descendent.alias}>
|
||||
|
||||
<ListItem button>
|
||||
{this.displayIcons(1)}
|
||||
<Card className={classes.card}>
|
||||
<CardActionArea>
|
||||
<CardMedia
|
||||
className={classes.media}
|
||||
image={UserDefaultPicture}
|
||||
title='User Profile'
|
||||
|
||||
/>
|
||||
<CardContent>
|
||||
<Typography gutterBottom variant='headline' component='h2'>
|
||||
{descendent.alias}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</CardActionArea>
|
||||
<CardActions>
|
||||
<Grid container justify='center' spacing={8}>
|
||||
<Grid item />
|
||||
</Grid>
|
||||
</CardActions>
|
||||
</Card>
|
||||
</ListItem>
|
||||
|
||||
{this.displayNestedList(descendent, 1)}
|
||||
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
const { classes } = this.props
|
||||
return (
|
||||
<div>
|
||||
<List
|
||||
component="nav"
|
||||
subheader={<ListSubheader component="div"></ListSubheader>}
|
||||
className={classes.list}
|
||||
>
|
||||
{this.displayTopList()}
|
||||
</List>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default compose(
|
||||
graphql(getDescendentsQuery, { // What follows is the way to pass a parameter to a query.
|
||||
options: (props) => {
|
||||
return {
|
||||
variables: {
|
||||
name: 'getDescendentsQuery',
|
||||
id: props.userId
|
||||
}
|
||||
}
|
||||
}}),
|
||||
withStyles(styles)
|
||||
)(DescendentsTree) // This technique binds more than one query to a single component.
|
||||
@@ -0,0 +1,41 @@
|
||||
import React, { Component } from 'react'
|
||||
import BannerTopBar from './BannerTopBar'
|
||||
import { Typography } from '@material-ui/core'
|
||||
|
||||
class Home extends Component {
|
||||
|
||||
render () {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<BannerTopBar
|
||||
size='big'
|
||||
title='Users Module'
|
||||
text='Responsible for all human users of the Advanced Algos Platform.'
|
||||
backgroundUrl='https://superalgos.org/img/photos/users.jpg'
|
||||
/>
|
||||
<div className='homePage container'>
|
||||
<Typography variant='h1' align='center' className='title'>Welcome to the Users Module!</Typography>
|
||||
<Typography variant='h2' align='center' className='subtitle'>The human component of the Advanced Algos Ecosystem.</Typography>
|
||||
<div className='column'>
|
||||
<Typography align='justify'>
|
||||
The Advanced Algos Ecosystem is made out of humans, financial beings and other entities such as teams.
|
||||
</Typography>
|
||||
<Typography align='justify'>
|
||||
Humans are either <strong>users</strong> or <strong>guests</strong>. If you haven’t signed up yet or you are logged off, then you are acting as a guest, with limited features. Please sign-up or log-in for a richer experience.
|
||||
</Typography>
|
||||
</div>
|
||||
<div className='column'>
|
||||
<Typography align='justify'>
|
||||
Users may have different roles, such as developer, trader, analyst, etc. Each of these roles usually have personalized features throughout the system.
|
||||
</Typography>
|
||||
<Typography align='justify'>
|
||||
The Users Module allows you to handle all of your details as a user of the system as well as finding other people in the ecosystem.
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Home
|
||||
@@ -0,0 +1,196 @@
|
||||
import React, { Component } from 'react'
|
||||
import {graphql, compose} from 'react-apollo'
|
||||
import {getUserByAuthIdQuery} from '../queries/queries'
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
import classNames from 'classnames'
|
||||
|
||||
import Button from '@material-ui/core/Button'
|
||||
import IconButton from '@material-ui/core/IconButton'
|
||||
|
||||
// icons
|
||||
import UserIcon from '@material-ui/icons/Person'
|
||||
import { Link } from 'react-router-dom'
|
||||
|
||||
import ProfileSheetIcon from '@material-ui/icons/Create'
|
||||
import ProfileImagesIcon from '@material-ui/icons/Wallpaper'
|
||||
import YourReferrerIcon from '@material-ui/icons/AccessibilityNew'
|
||||
import DescendentsIcon from '@material-ui/icons/DeviceHub'
|
||||
|
||||
const ProfileSheetLink = props => <Link to='/users/profile-sheet' {...props} />
|
||||
const ProfileImagesLink = props => <Link to='/users/profile-images' {...props} />
|
||||
const YourReferrerLink = props => <Link to='/users/referrer' {...props} />
|
||||
const YourDescendentsLink = props => <Link to='/users/descendents' {...props} />
|
||||
|
||||
const UserLink = props => <Link to='/users/user' {...props} />
|
||||
|
||||
const styles = theme => ({
|
||||
root: {
|
||||
flexGrow: 1
|
||||
},
|
||||
flex: {
|
||||
flexGrow: 1,
|
||||
marginLeft: 30
|
||||
},
|
||||
menuButton: {
|
||||
marginLeft: -12,
|
||||
marginRight: 20
|
||||
},
|
||||
cssRoot: {
|
||||
color: '#FFFFFF',
|
||||
backgroundColor: theme.palette.secondary,
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.dark
|
||||
},
|
||||
whiteSpace: 'nowrap',
|
||||
paddingRight: 2 * theme.spacing.unit,
|
||||
paddingLeft: 2 * theme.spacing.unit
|
||||
},
|
||||
button: {
|
||||
margin: theme.spacing.unit
|
||||
},
|
||||
leftIcon: {
|
||||
marginRight: theme.spacing.unit
|
||||
},
|
||||
rightIcon: {
|
||||
marginLeft: theme.spacing.unit
|
||||
},
|
||||
iconSmall: {
|
||||
fontSize: 20
|
||||
}
|
||||
})
|
||||
|
||||
class LoggedInUser extends Component {
|
||||
|
||||
displayLoggedInUser () {
|
||||
const user = this.props.data.users_UserByAuthId
|
||||
const { classes, match } = this.props
|
||||
|
||||
if (user) {
|
||||
let displayName = 'No Display Name'
|
||||
|
||||
if (
|
||||
user.alias !== null &&
|
||||
user.alias !== ''
|
||||
) { displayName = user.alias }
|
||||
|
||||
if (
|
||||
user.firstName !== null &&
|
||||
user.firstName !== ''
|
||||
) { displayName = user.firstName }
|
||||
|
||||
if (
|
||||
user.firstName !== null &&
|
||||
user.firstName !== '' &&
|
||||
user.lastName !== null &&
|
||||
user.lastName !== ''
|
||||
) { displayName = user.firstName + ' ' + user.lastName }
|
||||
|
||||
let authArray = this.props.authId.split('|')
|
||||
let identityProvider = authArray[0]
|
||||
|
||||
return (
|
||||
<li className='menu-item-has-children'>
|
||||
<Button
|
||||
variant='text'
|
||||
size='small'
|
||||
className={classNames(classes.button, classes.cssRoot)}
|
||||
title='Manage Your Profile'
|
||||
component={UserLink}
|
||||
to={`${match.url}/user`}>
|
||||
<UserIcon className={classNames(classes.leftIcon, classes.iconSmall)} />
|
||||
Your Profile
|
||||
</Button>
|
||||
<ul>
|
||||
<li>
|
||||
<Button
|
||||
variant='text'
|
||||
size='small'
|
||||
className={classNames(classes.button, classes.cssRoot)}
|
||||
title='Profile Sheet'
|
||||
component={ProfileSheetLink}
|
||||
to={`${match.url}/profile-sheet`}>
|
||||
<ProfileSheetIcon className={classNames(classes.leftIcon, classes.iconSmall)} />
|
||||
Profile Sheet
|
||||
</Button>
|
||||
</li>
|
||||
<li>
|
||||
<Button
|
||||
variant='text'
|
||||
size='small'
|
||||
className={classNames(classes.button, classes.cssRoot)}
|
||||
title='Profile Images'
|
||||
component={ProfileImagesLink}
|
||||
to={`${match.url}/profile-images`}>
|
||||
<ProfileImagesIcon className={classNames(classes.leftIcon, classes.iconSmall)} />
|
||||
Profile Images
|
||||
</Button>
|
||||
</li>
|
||||
<li>
|
||||
<Button
|
||||
variant='text'
|
||||
size='small'
|
||||
className={classNames(classes.button, classes.cssRoot)}
|
||||
title='Your Referrer'
|
||||
component={YourReferrerLink}
|
||||
to={`${match.url}/referrer`}>
|
||||
<YourReferrerIcon className={classNames(classes.leftIcon, classes.iconSmall)} />
|
||||
Your Referrer
|
||||
</Button>
|
||||
</li>
|
||||
<li>
|
||||
<Button
|
||||
variant='text'
|
||||
size='small'
|
||||
className={classNames(classes.button, classes.cssRoot)}
|
||||
title='Your Descendents'
|
||||
component={YourDescendentsLink}
|
||||
to={`${match.url}/descendents`}>
|
||||
<DescendentsIcon className={classNames(classes.leftIcon, classes.iconSmall)} />
|
||||
Your Descendents
|
||||
</Button>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<div />
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
|
||||
}
|
||||
|
||||
render () {
|
||||
if (this.loggedInUserStored !== true) {
|
||||
let user = this.props.data.users_UserByAuthId
|
||||
|
||||
if (user !== undefined) {
|
||||
localStorage.setItem('loggedInUser', JSON.stringify(this.props.data.users_UserByAuthId))
|
||||
this.loggedInUserStored = true
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
{this.displayLoggedInUser()}
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default compose(
|
||||
graphql(getUserByAuthIdQuery, { // What follows is the way to pass a parameter to a query.
|
||||
options: (props) => {
|
||||
return {
|
||||
variables: {
|
||||
authId: props.authId
|
||||
}
|
||||
}
|
||||
}
|
||||
}),
|
||||
withStyles(styles)
|
||||
)(LoggedInUser)
|
||||
@@ -0,0 +1,42 @@
|
||||
import React, { Component } from 'react'
|
||||
import { compose } from 'recompose'
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
import Paper from '@material-ui/core/Paper'
|
||||
import Typography from '@material-ui/core/Typography'
|
||||
|
||||
const styles = theme => ({
|
||||
root: {
|
||||
width: '50%',
|
||||
flexGrow: 1,
|
||||
padding: 10,
|
||||
marginLeft: '25%',
|
||||
marginTop: '5%',
|
||||
marginBottom: '10%'
|
||||
},
|
||||
typography: {
|
||||
width: '80%',
|
||||
marginLeft: '10%',
|
||||
marginTop: 40,
|
||||
marginBottom: 40
|
||||
}
|
||||
})
|
||||
|
||||
class ProfileImages extends Component {
|
||||
|
||||
render () {
|
||||
const { classes } = this.props
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Paper className={classes.root}>
|
||||
<Typography className={classes.typography} variant='h5' gutterBottom>
|
||||
Comming Soon
|
||||
</Typography>
|
||||
</Paper>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withStyles(styles)
|
||||
)(ProfileImages)
|
||||
@@ -0,0 +1,525 @@
|
||||
import React, { Component } from 'react'
|
||||
import {graphql, compose} from 'react-apollo'
|
||||
import {getRolesQuery, updateUserMutation, getUsersQuery} from '../queries/queries'
|
||||
|
||||
// Material-ui
|
||||
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
import MenuItem from '@material-ui/core/MenuItem'
|
||||
import TextField from '@material-ui/core/TextField'
|
||||
import FormControl from '@material-ui/core/FormControl'
|
||||
import InputLabel from '@material-ui/core/InputLabel'
|
||||
import Input from '@material-ui/core/Input'
|
||||
import Button from '@material-ui/core/Button'
|
||||
import FormControlLabel from '@material-ui/core/FormControlLabel'
|
||||
import Checkbox from '@material-ui/core/Checkbox'
|
||||
import FormGroup from '@material-ui/core/FormGroup'
|
||||
import Select from '@material-ui/core/Select'
|
||||
import FormHelperText from '@material-ui/core/FormHelperText'
|
||||
import Paper from '@material-ui/core/Paper'
|
||||
import Grid from '@material-ui/core/Grid'
|
||||
import Typography from '@material-ui/core/Typography'
|
||||
|
||||
// Images
|
||||
import GithubLogo from '../img/github-logo.png'
|
||||
import Auth0Logo from '../img/auth0-logo.png'
|
||||
import AALogo from '../img/aa-logo.png'
|
||||
|
||||
const styles = theme => ({
|
||||
root: {
|
||||
width: '100%',
|
||||
flexGrow: 1,
|
||||
padding: 10,
|
||||
marginTop: '5%',
|
||||
marginBottom: '10%'
|
||||
},
|
||||
inputField: {
|
||||
width: '80%',
|
||||
marginLeft: '10%',
|
||||
marginTop: 25
|
||||
},
|
||||
typography: {
|
||||
width: '80%',
|
||||
marginLeft: '10%',
|
||||
marginTop: 40
|
||||
},
|
||||
checkbox: {
|
||||
width: 150,
|
||||
marginLeft: '0%',
|
||||
marginTop: 20
|
||||
},
|
||||
selectEmpty: {
|
||||
marginTop: theme.spacing.unit * 2
|
||||
},
|
||||
button: {
|
||||
margin: theme.spacing.unit,
|
||||
marginTop: theme.spacing.unit * 3
|
||||
},
|
||||
img: {
|
||||
display: 'block',
|
||||
marginTop: 20,
|
||||
maxWidth: 120,
|
||||
maxHeight: 24
|
||||
}
|
||||
})
|
||||
|
||||
class ProfileSheet extends Component {
|
||||
|
||||
constructor (props) {
|
||||
super(props)
|
||||
|
||||
this.defaultValuesSet = false
|
||||
|
||||
this.state = {
|
||||
id: '',
|
||||
firstName: '',
|
||||
middleName: '',
|
||||
lastName: '',
|
||||
bio: '',
|
||||
email: '',
|
||||
emailVerified: 0,
|
||||
isDeveloper: 0,
|
||||
isTrader: 0,
|
||||
isDataAnalyst: 0,
|
||||
roleId: '1',
|
||||
firstNameError: false,
|
||||
middleNameError: false,
|
||||
lastNameError: false,
|
||||
bioError: false,
|
||||
updated: false
|
||||
}
|
||||
}
|
||||
|
||||
displayRoles () {
|
||||
var data = this.props.getRolesQuery // When there is more than one query binded to a single componente 'data' is replaced by thename of the query given below at the binding operation.
|
||||
if (data.loading) {
|
||||
return (
|
||||
<MenuItem><em>Loading roles</em></MenuItem>
|
||||
)
|
||||
} else {
|
||||
return data.users_Roles.map(role => {
|
||||
return (
|
||||
<MenuItem key={role.id} value={role.id}>{ role.name }</MenuItem>
|
||||
)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
submitForm (e) {
|
||||
e.preventDefault()
|
||||
this.props.updateUserMutation({
|
||||
variables: {
|
||||
firstName: this.state.firstName,
|
||||
middleName: this.state.middleName,
|
||||
lastName: this.state.lastName,
|
||||
bio: this.state.bio,
|
||||
isDeveloper: this.state.isDeveloper,
|
||||
isTrader: this.state.isTrader,
|
||||
isDataAnalyst: this.state.isDataAnalyst,
|
||||
roleId: this.state.roleId
|
||||
},
|
||||
refetchQueries: [{ query: getUsersQuery}] // This allow us to re run whatever queries are necesary after the mutation.
|
||||
})
|
||||
|
||||
/* Before we are done, we need to update the state of the local storage. */
|
||||
|
||||
let user = JSON.parse(localStorage.getItem('loggedInUser'))
|
||||
|
||||
user.firstName = this.state.firstName
|
||||
user.middleName = this.state.middleName
|
||||
user.lastName = this.state.lastName
|
||||
user.bio = this.state.bio
|
||||
user.isDeveloper = this.state.isDeveloper
|
||||
user.isTrader = this.state.isTrader
|
||||
user.isDataAnalyst = this.state.isDataAnalyst
|
||||
user.role.id = this.state.roleId
|
||||
|
||||
localStorage.setItem('loggedInUser', JSON.stringify(user))
|
||||
|
||||
this.setState({updated: true})
|
||||
}
|
||||
|
||||
handleCheckBoxes (e) {
|
||||
let fieldValue
|
||||
if (e.target.checked === true) {
|
||||
fieldValue = 1
|
||||
} else {
|
||||
fieldValue = 0
|
||||
|
||||
/* When the user unchecks one of the checkboxes, we need to make sure that that Role is not the one selected at the SELECT,
|
||||
and if it is, then we need to automatically select another one */
|
||||
|
||||
switch (e.target.id) {
|
||||
case 'isDeveloper':
|
||||
if (this.state.roleId === '2') {
|
||||
this.setState({ roleId: '1'})
|
||||
}
|
||||
break
|
||||
|
||||
case 'isTrader':
|
||||
if (this.state.roleId === '3') {
|
||||
this.setState({ roleId: '1'})
|
||||
}
|
||||
break
|
||||
|
||||
case 'isDataAnalyst':
|
||||
if (this.state.roleId === '4') {
|
||||
this.setState({ roleId: '1'})
|
||||
}
|
||||
break
|
||||
default:
|
||||
}
|
||||
}
|
||||
this.setState({ [e.target.id]: fieldValue})
|
||||
}
|
||||
|
||||
handleSelect (e) {
|
||||
/*
|
||||
Whenever the select component changes its value, we need to activate the type of role selected.
|
||||
To do so, we change the state of the corresponding type of role here.
|
||||
*/
|
||||
|
||||
switch (e.target.value) {
|
||||
case '2':
|
||||
this.setState({ isDeveloper: 1})
|
||||
break
|
||||
case '3':
|
||||
this.setState({ isTrader: 1})
|
||||
break
|
||||
case '4':
|
||||
this.setState({ isDataAnalyst: 1})
|
||||
break
|
||||
default:
|
||||
}
|
||||
|
||||
this.setState({ roleId: e.target.value })
|
||||
}
|
||||
|
||||
handleTextField (e) {
|
||||
/*
|
||||
We will do some basic input validations here. If something is wrong we will turn on the error sign on the textfield.
|
||||
*/
|
||||
|
||||
let value = e.target.value
|
||||
|
||||
switch (e.target.id) {
|
||||
case 'firstName':
|
||||
if (value.length > 30) {
|
||||
this.setState({firstNameError: true})
|
||||
} else {
|
||||
this.setState({firstNameError: false, firstName: value})
|
||||
}
|
||||
break
|
||||
case 'middleName':
|
||||
if (value.length > 30) {
|
||||
this.setState({middleNameError: true})
|
||||
} else {
|
||||
this.setState({middleNameError: false, middleName: value})
|
||||
}
|
||||
break
|
||||
case 'lastName':
|
||||
if (value.length > 50) {
|
||||
this.setState({lastNameError: true})
|
||||
} else {
|
||||
this.setState({lastNameError: false, lastName: value})
|
||||
}
|
||||
break
|
||||
case 'bio':
|
||||
if (value.length > 250) {
|
||||
this.setState({bioError: true})
|
||||
} else {
|
||||
this.setState({bioError: false, bio: value})
|
||||
}
|
||||
break
|
||||
default:
|
||||
}
|
||||
}
|
||||
|
||||
rightCheckboxValue (stateValue) {
|
||||
if (stateValue === 1) {
|
||||
return true
|
||||
} else { return false }
|
||||
}
|
||||
|
||||
componentWillMount () {
|
||||
if (this.defaultValuesSet === false) {
|
||||
let authUser = JSON.parse(localStorage.getItem('user'))
|
||||
let authId = authUser.authId
|
||||
let userData = localStorage.getItem('loggedInUser')
|
||||
|
||||
if (userData === 'undefined' || userData === null) { return }
|
||||
|
||||
let user = JSON.parse(userData)
|
||||
this.defaultValuesSet = true
|
||||
|
||||
/* To avoid console warning, we need to take care of the fields that are null. */
|
||||
|
||||
if (user.firstName === null) { user.firstName = '' }
|
||||
if (user.middleName === null) { user.middleName = '' }
|
||||
if (user.lastName === null) { user.lastName = '' }
|
||||
if (user.bio === null) { user.bio = '' }
|
||||
|
||||
/* Now we are ready to set the initial state. */
|
||||
|
||||
this.setState({
|
||||
id: user.id,
|
||||
alias: user.alias,
|
||||
email: user.email,
|
||||
emailVerified: user.emailVerified,
|
||||
firstName: user.firstName,
|
||||
middleName: user.middleName,
|
||||
lastName: user.lastName,
|
||||
bio: user.bio,
|
||||
isDeveloper: user.isDeveloper,
|
||||
isTrader: user.isTrader,
|
||||
isDataAnalyst: user.isDataAnalyst,
|
||||
roleId: user.role.id,
|
||||
authId: authId
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
displayIdentityProvider () {
|
||||
const { classes } = this.props
|
||||
let authId = this.state.authId
|
||||
|
||||
if (authId !== undefined && authId !== null) {
|
||||
let authArray = this.state.authId.split('|')
|
||||
let identityProvider = authArray[0]
|
||||
|
||||
switch (identityProvider) {
|
||||
case 'github':
|
||||
return (
|
||||
<img className={classes.img} src={GithubLogo} alt='Github' />
|
||||
)
|
||||
break
|
||||
case 'auth0':
|
||||
return (
|
||||
<img className={classes.img} src={Auth0Logo} alt='Auth0' />
|
||||
)
|
||||
break
|
||||
default:
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
displayButtonTitle () {
|
||||
if (this.state.updated === true) {
|
||||
return 'Updated'
|
||||
} else {
|
||||
return 'Update'
|
||||
}
|
||||
}
|
||||
|
||||
addForm () {
|
||||
const { classes } = this.props
|
||||
return (
|
||||
<Paper className={classes.root}>
|
||||
|
||||
<form onSubmit={this.submitForm.bind(this)}>
|
||||
|
||||
<Typography className={classes.typography} variant='h5' gutterBottom>
|
||||
Profile Sheet
|
||||
</Typography>
|
||||
|
||||
<Typography className={classes.typography} variant='body1' gutterBottom align='left'>
|
||||
Use this form to control the information you keep at the Advanced Algos system about yourself.
|
||||
</Typography>
|
||||
|
||||
<Grid container justify='center' >
|
||||
<Grid item>
|
||||
{this.displayIdentityProvider()}
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Typography className={classes.typography} variant='body1' gutterBottom align='left'>
|
||||
This is your basic information we have gotten from the identity provider you used to sign up. This information can not be changed.
|
||||
</Typography>
|
||||
|
||||
<TextField
|
||||
id='alias'
|
||||
type='text'
|
||||
value={this.state.alias}
|
||||
label='Alias'
|
||||
className={classes.inputField}
|
||||
disabled />
|
||||
|
||||
<TextField
|
||||
id='email'
|
||||
type='text'
|
||||
value={this.state.email}
|
||||
label='Email'
|
||||
className={classes.inputField}
|
||||
disabled />
|
||||
|
||||
<FormControlLabel
|
||||
disabled
|
||||
className={classes.inputField}
|
||||
control={
|
||||
<Checkbox
|
||||
id='emailVerified'
|
||||
checked={this.rightCheckboxValue(this.state.emailVerified)}
|
||||
color='primary'
|
||||
/>
|
||||
}
|
||||
label='Email Verified'
|
||||
/>
|
||||
|
||||
<Grid container justify='center' >
|
||||
<Grid item>
|
||||
<img className={classes.img} src={AALogo} alt='Advanced Algos' />
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Typography className={classes.typography} variant='body1' gutterBottom align='left'>
|
||||
Complete your profile with the following optional information. Providing your real name might help other users trust you more.
|
||||
</Typography>
|
||||
|
||||
<TextField
|
||||
error={this.state.firstNameError}
|
||||
id='firstName'
|
||||
type='text'
|
||||
value={this.state.firstName}
|
||||
label='First Name'
|
||||
className={classes.inputField}
|
||||
onChange={this.handleTextField.bind(this)}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
error={this.state.middleNameError}
|
||||
id='middleName'
|
||||
type='text'
|
||||
value={this.state.middleName}
|
||||
label='Middle Name'
|
||||
className={classes.inputField}
|
||||
onChange={this.handleTextField.bind(this)}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
error={this.state.lastNameError}
|
||||
id='lastName'
|
||||
type='text'
|
||||
value={this.state.lastName}
|
||||
label='Last Name'
|
||||
className={classes.inputField}
|
||||
onChange={this.handleTextField.bind(this)}
|
||||
/>
|
||||
|
||||
<Typography className={classes.typography} variant='body1' gutterBottom align='left'>
|
||||
If you wish, you can add a short paragraph with your Bio or anything you would like to communicate to whoever finds your user profile.
|
||||
</Typography>
|
||||
|
||||
<TextField
|
||||
error={this.state.bioError}
|
||||
id='bio'
|
||||
type='text'
|
||||
value={this.state.bio}
|
||||
label='Bio'
|
||||
className={classes.inputField}
|
||||
onChange={this.handleTextField.bind(this)}
|
||||
/>
|
||||
|
||||
<Typography className={classes.typography} variant='body1' gutterBottom align='left'>
|
||||
Check the following options to enable specialized tools designed for each role. You can allways come back and change these settings later.
|
||||
</Typography>
|
||||
|
||||
<FormGroup row className={classes.inputField}>
|
||||
<Grid container justify='center' >
|
||||
<Grid item>
|
||||
<FormControlLabel
|
||||
className={classes.checkbox}
|
||||
control={
|
||||
<Checkbox
|
||||
id='isDeveloper'
|
||||
onChange={this.handleCheckBoxes.bind(this)}
|
||||
checked={this.rightCheckboxValue(this.state.isDeveloper)}
|
||||
color='secondary'
|
||||
/>
|
||||
}
|
||||
label='Developer'
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<FormControlLabel
|
||||
className={classes.checkbox}
|
||||
control={
|
||||
<Checkbox
|
||||
id='isTrader'
|
||||
onChange={this.handleCheckBoxes.bind(this)}
|
||||
checked={this.rightCheckboxValue(this.state.isTrader)}
|
||||
color='secondary'
|
||||
/>
|
||||
}
|
||||
label='Trader'
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<FormControlLabel
|
||||
className={classes.checkbox}
|
||||
control={
|
||||
<Checkbox
|
||||
id='isDataAnalyst'
|
||||
onChange={this.handleCheckBoxes.bind(this)}
|
||||
checked={this.rightCheckboxValue(this.state.isDataAnalyst)}
|
||||
color='secondary'
|
||||
/>
|
||||
}
|
||||
label='Data Analyst'
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</FormGroup>
|
||||
|
||||
<p className={classes.typography}>Your current role determines how the system is going to optimize its user interface to best serves your current needs.</p>
|
||||
|
||||
<FormControl className={classes.inputField}>
|
||||
<InputLabel shrink htmlFor='select'>
|
||||
Current Role
|
||||
</InputLabel>
|
||||
<Select
|
||||
id='select'
|
||||
ref='select'
|
||||
value={this.state.roleId}
|
||||
onChange={this.handleSelect.bind(this)}
|
||||
input={<Input name='Role' id='role-label-placeholder' />}
|
||||
displayEmpty
|
||||
name='select'
|
||||
className={classes.selectEmpty}
|
||||
>
|
||||
{ this.displayRoles() }
|
||||
</Select>
|
||||
<FormHelperText>Select from the list your current role</FormHelperText>
|
||||
</FormControl>
|
||||
|
||||
<Grid container justify='center' >
|
||||
<Grid item>
|
||||
<Button
|
||||
variant='contained'
|
||||
color='secondary'
|
||||
className={classes.button}
|
||||
onClick={this.submitForm.bind(this)}
|
||||
disabled={this.state.updated}
|
||||
>{this.displayButtonTitle()}</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</form>
|
||||
</Paper>
|
||||
)
|
||||
}
|
||||
render () {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div className='container'>
|
||||
{this.addForm()}
|
||||
</div>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default compose(
|
||||
graphql(getRolesQuery, {name: 'getRolesQuery'}),
|
||||
graphql(updateUserMutation, {name: 'updateUserMutation'}),
|
||||
withStyles(styles)
|
||||
)(ProfileSheet) // This technique binds more than one query to a single component.
|
||||
@@ -0,0 +1,45 @@
|
||||
import React, { Component } from 'react'
|
||||
import UserSearch from './UserSearch'
|
||||
import {compose} from 'react-apollo'
|
||||
import Paper from '@material-ui/core/Paper'
|
||||
import BannerTopBar from './BannerTopBar'
|
||||
|
||||
// Materia UI
|
||||
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
|
||||
const styles = theme => ({
|
||||
root: {
|
||||
width: '100%',
|
||||
flexGrow: 1,
|
||||
padding: 10,
|
||||
marginTop: '5%',
|
||||
marginBottom: '10%'
|
||||
}
|
||||
})
|
||||
|
||||
class Search extends Component {
|
||||
|
||||
render () {
|
||||
const { classes } = this.props
|
||||
return (
|
||||
<React.Fragment>
|
||||
<BannerTopBar
|
||||
size='medium'
|
||||
title='Users Search'
|
||||
text='Find anyone involved in Advanced Algos here.'
|
||||
backgroundUrl='https://superalgos.org/img/photos/users.jpg'
|
||||
/>
|
||||
<div className='container'>
|
||||
<Paper className={classes.root}>
|
||||
<UserSearch />
|
||||
</Paper>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withStyles(styles)
|
||||
)(Search)
|
||||
@@ -0,0 +1,19 @@
|
||||
import React from 'react'
|
||||
import UserTabs from './UserTabs'
|
||||
import BannerTopBar from './BannerTopBar'
|
||||
|
||||
const User = () => {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<BannerTopBar
|
||||
size='medium'
|
||||
title='Your Profile'
|
||||
text='Manage your profile info, pictures and more.'
|
||||
backgroundUrl='https://superalgos.org/img/photos/users.jpg'
|
||||
/>
|
||||
<UserTabs />
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
|
||||
export default User
|
||||
@@ -0,0 +1,185 @@
|
||||
import React, { Component } from 'react';
|
||||
import {graphql, compose} from 'react-apollo';
|
||||
import {getUsersQuery} from '../queries/queries';
|
||||
|
||||
// Materia UI
|
||||
|
||||
import { withStyles } from '@material-ui/core/styles';
|
||||
import Card from '@material-ui/core/Card';
|
||||
import CardActionArea from '@material-ui/core/CardActionArea';
|
||||
import CardActions from '@material-ui/core/CardActions';
|
||||
import CardContent from '@material-ui/core/CardContent';
|
||||
import CardMedia from '@material-ui/core/CardMedia';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import Grid from '@material-ui/core/Grid';
|
||||
import Paper from '@material-ui/core/Paper';
|
||||
|
||||
// Full screen dialog imports (still Material UI)
|
||||
|
||||
import PropTypes from 'prop-types';
|
||||
import Dialog from '@material-ui/core/Dialog';
|
||||
import AppBar from '@material-ui/core/AppBar';
|
||||
import Toolbar from '@material-ui/core/Toolbar';
|
||||
import IconButton from '@material-ui/core/IconButton';
|
||||
|
||||
import CloseIcon from '@material-ui/icons/Close';
|
||||
import Slide from '@material-ui/core/Slide';
|
||||
|
||||
// components
|
||||
import UserProfile from './UserProfile';
|
||||
|
||||
// Images
|
||||
import UserDefaultPicture from '../img/user-default-pic.jpg'
|
||||
|
||||
const styles = theme => ({
|
||||
root: {
|
||||
paddingTop:30,
|
||||
paddingBottom:30,
|
||||
flexGrow: 1
|
||||
},
|
||||
card: {
|
||||
maxWidth: 345,
|
||||
minWidth: 300,
|
||||
paddingTop:'30'
|
||||
},
|
||||
media: {
|
||||
height: 0,
|
||||
paddingTop: '56.25%', // 16:9,
|
||||
marginTop:'30',
|
||||
minWidth: 300
|
||||
},
|
||||
typography: {
|
||||
maxWidth: 345,
|
||||
minWidth: 300,
|
||||
paddingTop:'30'
|
||||
},
|
||||
appBar: {
|
||||
position: 'relative',
|
||||
},
|
||||
flex: {
|
||||
flex: 1,
|
||||
},
|
||||
grid: {
|
||||
paddingTop: 30,
|
||||
marginTop:'30'
|
||||
},
|
||||
});
|
||||
|
||||
function Transition(props) {
|
||||
return <Slide direction="up" {...props} />;
|
||||
}
|
||||
|
||||
class UserList extends Component {
|
||||
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state = {
|
||||
selected: null,
|
||||
open: false
|
||||
}
|
||||
}
|
||||
|
||||
handleClickOpen = () => {
|
||||
this.setState({ open: true });
|
||||
};
|
||||
|
||||
handleClose = () => {
|
||||
this.setState({ open: false });
|
||||
};
|
||||
|
||||
displayUsers(){
|
||||
|
||||
let data = this.props.getUsersQuery;
|
||||
const { classes } = this.props;
|
||||
|
||||
if(data.loading){
|
||||
return ( <div> Loading Users... </div>);
|
||||
} else {
|
||||
return data.users_Users.map(user => {
|
||||
|
||||
return (
|
||||
|
||||
<Grid key={user.id} item>
|
||||
<Card className={classes.card} onClick={ (e) => {
|
||||
this.setState({ selected: user.id});
|
||||
}
|
||||
}>
|
||||
<CardActionArea>
|
||||
<CardMedia
|
||||
className={classes.media}
|
||||
image={UserDefaultPicture}
|
||||
title="User Profile"
|
||||
|
||||
/>
|
||||
<CardContent>
|
||||
<Typography gutterBottom variant="h5" component="h2">
|
||||
{user.alias}
|
||||
</Typography>
|
||||
<Typography className={classes.typography} gutterBottom>
|
||||
{user.bio}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</CardActionArea>
|
||||
<CardActions>
|
||||
<Grid container justify="center" spacing={8}>
|
||||
<Grid item>
|
||||
<Button onClick={this.handleClickOpen}>User Profile</Button>
|
||||
<Dialog
|
||||
fullScreen
|
||||
open={this.state.open}
|
||||
onClose={this.handleClose}
|
||||
TransitionComponent={Transition}
|
||||
>
|
||||
<AppBar className={classes.appBar}>
|
||||
<Toolbar>
|
||||
<IconButton color="inherit" onClick={this.handleClose} aria-label="Close">
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
<Typography variant="h6" color="inherit" className={classes.flex}>
|
||||
User Profile
|
||||
</Typography>
|
||||
<Button color="inherit" onClick={this.handleClose}>
|
||||
Close
|
||||
</Button>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
<Paper className={classes.root}>
|
||||
<UserProfile userId={this.state.selected}/>
|
||||
</Paper>
|
||||
</Dialog>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Button disabled color="primary">
|
||||
Extended Profile
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</CardActions>
|
||||
</Card>
|
||||
</Grid>
|
||||
)
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { classes } = this.props;
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Grid container justify="center" spacing={40} className={classes.root}>
|
||||
{this.displayUsers()}
|
||||
</Grid>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
UserList.propTypes = {
|
||||
classes: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
export default compose(
|
||||
graphql(getUsersQuery, {name: "getUsersQuery"}),
|
||||
withStyles(styles)
|
||||
) (UserList); // This technique binds more than one query to a single component.
|
||||
@@ -0,0 +1,155 @@
|
||||
import React, { Component } from 'react'
|
||||
import {graphql, compose} from 'react-apollo'
|
||||
import {getUserProfileQuery} from '../queries/queries'
|
||||
|
||||
// Materia UI
|
||||
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
import Grid from '@material-ui/core/Grid'
|
||||
import Card from '@material-ui/core/Card'
|
||||
import CardActionArea from '@material-ui/core/CardActionArea'
|
||||
import CardContent from '@material-ui/core/CardContent'
|
||||
import CardMedia from '@material-ui/core/CardMedia'
|
||||
import Typography from '@material-ui/core/Typography'
|
||||
import Divider from '@material-ui/core/Divider'
|
||||
|
||||
// Images
|
||||
import UserDefaultPicture from '../img/user-default-pic.jpg'
|
||||
|
||||
const styles = theme => ({
|
||||
root: {
|
||||
flexGrow: 1,
|
||||
padding: 60,
|
||||
margin: 2
|
||||
},
|
||||
card: {
|
||||
maxWidth: 500,
|
||||
minWidth: 500,
|
||||
paddingTop: '30'
|
||||
},
|
||||
media: {
|
||||
height: 0,
|
||||
paddingTop: '56.25%', // 16:9,
|
||||
marginTop: '30',
|
||||
minWidth: '80%'
|
||||
},
|
||||
grid: {
|
||||
paddingTop: '30',
|
||||
marginTop: '30'
|
||||
},
|
||||
typography: {
|
||||
width: '100%',
|
||||
marginTop: 20,
|
||||
marginBottom: 20
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
class UserProfile extends Component {
|
||||
|
||||
displayNames () {
|
||||
const user = this.props.data.users_User
|
||||
const { classes } = this.props
|
||||
|
||||
if (user.firstName !== null && user.lastName !== null) {
|
||||
return (
|
||||
<Typography className={classes.typography} gutterBottom variant='h5' component='h2'>
|
||||
{ user.firstName + ' ' + user.lastName}
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
displayRole () {
|
||||
const user = this.props.data.users_User
|
||||
const { classes } = this.props
|
||||
|
||||
if (user.role.name !== null && user.role.name !== 'Not Defined') {
|
||||
return (
|
||||
<div>
|
||||
<Divider />
|
||||
<Typography className={classes.typography} align='left' gutterBottom variant='subtitle1' component='h2'>
|
||||
{ user.role.name }
|
||||
</Typography>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
displayBio () {
|
||||
const user = this.props.data.users_User
|
||||
const { classes } = this.props
|
||||
|
||||
if (user.bio !== null && user.bio !== '') {
|
||||
return (
|
||||
<div>
|
||||
<Divider />
|
||||
<Typography className={classes.typography} component='p'>
|
||||
{ user.bio }
|
||||
</Typography>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
displayUserProfile () {
|
||||
const user = this.props.data.users_User
|
||||
const { classes } = this.props
|
||||
|
||||
if (user) {
|
||||
return (
|
||||
<Grid key={user.id} item>
|
||||
|
||||
<Card className={classes.card} onClick={(e) => {
|
||||
this.setState({ selected: user.id})
|
||||
}
|
||||
}>
|
||||
<CardActionArea>
|
||||
<CardMedia
|
||||
className={classes.media}
|
||||
image={UserDefaultPicture}
|
||||
title='User Profile'
|
||||
|
||||
/>
|
||||
<CardContent>
|
||||
|
||||
{this.displayNames()}
|
||||
|
||||
<Typography className={classes.typography} gutterBottom variant='h6' component='h3'>
|
||||
{user.alias}
|
||||
</Typography>
|
||||
|
||||
{this.displayRole()}
|
||||
{this.displayBio()}
|
||||
|
||||
</CardContent>
|
||||
</CardActionArea>
|
||||
</Card>
|
||||
</Grid>
|
||||
)
|
||||
} else {
|
||||
return (<div>No User selected...</div>)
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<Grid container justify='center' spacing={24}>
|
||||
{this.displayUserProfile()}
|
||||
</Grid>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default compose(
|
||||
graphql(getUserProfileQuery, { // What follows is the way to pass a parameter to a query.
|
||||
options: (props) => {
|
||||
return {
|
||||
variables: {
|
||||
name: 'getUserProfileQuery',
|
||||
id: props.userId
|
||||
}
|
||||
}
|
||||
}}),
|
||||
withStyles(styles)
|
||||
)(UserProfile) // This technique binds more than one query to a single component.
|
||||
@@ -0,0 +1,275 @@
|
||||
import React, { Component } from 'react'
|
||||
import {graphql, compose} from 'react-apollo'
|
||||
import {getUsersBySearchFields} from '../queries/queries'
|
||||
|
||||
// Materia UI
|
||||
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
import Card from '@material-ui/core/Card'
|
||||
import CardActionArea from '@material-ui/core/CardActionArea'
|
||||
import CardActions from '@material-ui/core/CardActions'
|
||||
import CardContent from '@material-ui/core/CardContent'
|
||||
import CardMedia from '@material-ui/core/CardMedia'
|
||||
import Button from '@material-ui/core/Button'
|
||||
import Typography from '@material-ui/core/Typography'
|
||||
import Grid from '@material-ui/core/Grid'
|
||||
|
||||
import TextField from '@material-ui/core/TextField'
|
||||
|
||||
// Images
|
||||
import UserDefaultPicture from '../img/user-default-pic.jpg'
|
||||
|
||||
const styles = theme => ({
|
||||
card: {
|
||||
maxWidth: 150,
|
||||
minWidth: 150,
|
||||
paddingTop: '30',
|
||||
marginBottom: 40
|
||||
},
|
||||
media: {
|
||||
height: 0,
|
||||
paddingTop: '56.25%', // 16:9,
|
||||
marginTop: '30',
|
||||
minWidth: 300
|
||||
},
|
||||
typography: {
|
||||
maxWidth: 345,
|
||||
minWidth: 300,
|
||||
paddingTop: '30'
|
||||
},
|
||||
appBar: {
|
||||
position: 'relative'
|
||||
},
|
||||
flex: {
|
||||
flex: 1
|
||||
},
|
||||
grid: {
|
||||
width: '80%',
|
||||
marginLeft: '10%',
|
||||
paddingTop: '30',
|
||||
marginTop: 30
|
||||
},
|
||||
inputField: {
|
||||
width: '80%',
|
||||
marginLeft: '10%',
|
||||
marginTop: 25
|
||||
},
|
||||
formTypography: {
|
||||
width: '80%',
|
||||
marginLeft: '10%',
|
||||
marginTop: 40
|
||||
},
|
||||
button: {
|
||||
margin: theme.spacing.unit,
|
||||
marginTop: theme.spacing.unit * 3
|
||||
}
|
||||
})
|
||||
|
||||
class UserSearch extends Component {
|
||||
|
||||
constructor (props) {
|
||||
super(props)
|
||||
|
||||
this.state = {
|
||||
alias: '',
|
||||
firstName: '',
|
||||
middleName: '',
|
||||
lastName: ''
|
||||
}
|
||||
}
|
||||
|
||||
submitForm (e) {
|
||||
e.preventDefault()
|
||||
|
||||
this.props.getUsersBySearchFields.variables.alias = this.state.alias
|
||||
this.props.getUsersBySearchFields.variables.firstName = this.state.firstName
|
||||
this.props.getUsersBySearchFields.variables.middleName = this.state.middleName
|
||||
this.props.getUsersBySearchFields.variables.lastName = this.state.lastName
|
||||
|
||||
this.props.getUsersBySearchFields.refetch({})
|
||||
}
|
||||
|
||||
handleTextField (e) {
|
||||
/*
|
||||
We will do some basic input validations here. If something is wrong we will turn on the error sign on the textfield.
|
||||
*/
|
||||
|
||||
let value = e.target.value
|
||||
|
||||
switch (e.target.id) {
|
||||
case 'alias':
|
||||
if (value.length > 30) {
|
||||
this.setState({aliasError: true})
|
||||
} else {
|
||||
this.setState({aliasError: false, alias: value})
|
||||
}
|
||||
break
|
||||
case 'firstName':
|
||||
if (value.length > 30) {
|
||||
this.setState({firstNameError: true})
|
||||
} else {
|
||||
this.setState({firstNameError: false, firstName: value})
|
||||
}
|
||||
break
|
||||
case 'middleName':
|
||||
if (value.length > 30) {
|
||||
this.setState({middleNameError: true})
|
||||
} else {
|
||||
this.setState({middleNameError: false, middleName: value})
|
||||
}
|
||||
break
|
||||
case 'lastName':
|
||||
if (value.length > 50) {
|
||||
this.setState({lastNameError: true})
|
||||
} else {
|
||||
this.setState({lastNameError: false, lastName: value})
|
||||
}
|
||||
break
|
||||
default:
|
||||
}
|
||||
}
|
||||
|
||||
selectText () {
|
||||
if (this.props.selectButton === true) {
|
||||
return (<span>{this.props.selectText}</span>)
|
||||
} else {
|
||||
return (<span />)
|
||||
}
|
||||
}
|
||||
|
||||
selectButton (user) {
|
||||
if (this.props.selectButton === true) {
|
||||
return (
|
||||
<Button id={user.id} ref={user.id} color='primary' onClick={() => {
|
||||
this.props.onSelect(user) // This sends the user to the parent component
|
||||
}}>
|
||||
Select
|
||||
</Button>
|
||||
)
|
||||
} else {
|
||||
return (<div />)
|
||||
}
|
||||
}
|
||||
|
||||
displayUsers () {
|
||||
let data = this.props.getUsersBySearchFields
|
||||
const { classes } = this.props
|
||||
|
||||
if (data.loading) {
|
||||
return (<div> Loading Users... </div>)
|
||||
} else {
|
||||
if (data.users_UsersSearch === undefined) {
|
||||
return (<div> No Users to Display </div>)
|
||||
} else {
|
||||
return data.users_UsersSearch.map(user => {
|
||||
return (
|
||||
|
||||
<Grid key={user.id} item>
|
||||
<Card className={classes.card} onClick={(e) => {
|
||||
this.setState({ selected: user.id})
|
||||
}
|
||||
}>
|
||||
<CardActionArea>
|
||||
<CardMedia
|
||||
className={classes.media}
|
||||
image={UserDefaultPicture}
|
||||
title='User Profile'
|
||||
|
||||
/>
|
||||
<CardContent>
|
||||
<Typography gutterBottom component='h2'>
|
||||
{user.alias}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</CardActionArea>
|
||||
<CardActions>
|
||||
<Grid container justify='center' spacing={8}>
|
||||
<Grid item>
|
||||
{this.selectButton(user)}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</CardActions>
|
||||
</Card>
|
||||
</Grid>
|
||||
|
||||
)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
window.dispatchEvent(new Event('load')) // This is a workaround to solve the problem that the slider does not show up
|
||||
}
|
||||
|
||||
render () {
|
||||
const { classes } = this.props
|
||||
return (
|
||||
|
||||
<div>
|
||||
<form onSubmit={this.submitForm.bind(this)}>
|
||||
|
||||
<Typography className={classes.formTypography} variant='body1' gutterBottom align='left'>
|
||||
Use any of these fileds to search for users. {this.selectText()}
|
||||
</Typography>
|
||||
|
||||
<TextField
|
||||
error={this.state.aliasError}
|
||||
id='alias'
|
||||
type='text'
|
||||
value={this.state.alias}
|
||||
label='Alias'
|
||||
className={classes.inputField}
|
||||
onChange={this.handleTextField.bind(this)}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
error={this.state.firstNameError}
|
||||
id='firstName'
|
||||
type='text'
|
||||
value={this.state.firstName}
|
||||
label='First Name'
|
||||
className={classes.inputField}
|
||||
onChange={this.handleTextField.bind(this)}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
error={this.state.middleNameError}
|
||||
id='middleName'
|
||||
type='text'
|
||||
value={this.state.middleName}
|
||||
label='Middle Name'
|
||||
className={classes.inputField}
|
||||
onChange={this.handleTextField.bind(this)}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
error={this.state.lastNameError}
|
||||
id='lastName'
|
||||
type='text'
|
||||
value={this.state.lastName}
|
||||
label='Last Name'
|
||||
className={classes.inputField}
|
||||
onChange={this.handleTextField.bind(this)}
|
||||
/>
|
||||
|
||||
<Grid container justify='center' >
|
||||
<Grid item>
|
||||
<Button variant='contained' color='secondary' className={classes.button} onClick={this.submitForm.bind(this)}>Search</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</form>
|
||||
|
||||
<Grid container className={classes.grid} justify='center' spacing={24}>
|
||||
{this.displayUsers()}
|
||||
</Grid>
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default compose(
|
||||
graphql(getUsersBySearchFields, {name: 'getUsersBySearchFields'}),
|
||||
withStyles(styles)
|
||||
)(UserSearch) // This technique binds more than one query to a single component.
|
||||
@@ -0,0 +1,86 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { withStyles } from '@material-ui/core/styles';
|
||||
import AppBar from '@material-ui/core/AppBar';
|
||||
import Tabs from '@material-ui/core/Tabs';
|
||||
import Tab from '@material-ui/core/Tab';
|
||||
import ProfileSheetIcon from '@material-ui/icons/Create';
|
||||
import ProfileImagesIcon from '@material-ui/icons/Wallpaper';
|
||||
import YourReferrerIcon from '@material-ui/icons/AccessibilityNew';
|
||||
import DescendentsIcon from '@material-ui/icons/DeviceHub';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
|
||||
// Components
|
||||
|
||||
import ProfileSheet from './ProfileSheet';
|
||||
import ProfileImages from './ProfileImages';
|
||||
import YourReferrer from './YourReferrer';
|
||||
import YourDescendents from './YourDescendents';
|
||||
|
||||
function TabContainer(props) {
|
||||
return (
|
||||
<Typography component="div" style={{ padding: 8 * 3 }}>
|
||||
{props.children}
|
||||
</Typography>
|
||||
);
|
||||
}
|
||||
|
||||
TabContainer.propTypes = {
|
||||
children: PropTypes.node.isRequired,
|
||||
};
|
||||
|
||||
const styles = theme => ({
|
||||
root: {
|
||||
flexGrow: 1,
|
||||
width: '100%',
|
||||
backgroundColor: theme.palette.background.paper,
|
||||
padding: 0,
|
||||
margin: 0,
|
||||
},
|
||||
});
|
||||
|
||||
class UserTabs extends React.Component {
|
||||
state = {
|
||||
value: 0
|
||||
};
|
||||
|
||||
handleChange = (event, value) => {
|
||||
this.setState({ value });
|
||||
};
|
||||
|
||||
render() {
|
||||
const { classes } = this.props;
|
||||
const { value } = this.state;
|
||||
|
||||
return (
|
||||
<div className={classes.root}>
|
||||
<AppBar position="static" color="default">
|
||||
<Tabs
|
||||
value={value}
|
||||
onChange={this.handleChange}
|
||||
scrollable
|
||||
scrollButtons="off"
|
||||
indicatorColor="primary"
|
||||
textColor="primary"
|
||||
fullWidth
|
||||
>
|
||||
<Tab label="Profile Sheet" icon={<ProfileSheetIcon />} />
|
||||
<Tab disabled label="Profile Images" icon={<ProfileImagesIcon />} />
|
||||
<Tab label="Your Referrer" icon={<YourReferrerIcon />} />
|
||||
<Tab label="Your Descendents" icon={<DescendentsIcon />} />
|
||||
</Tabs>
|
||||
</AppBar>
|
||||
{value === 0 && <TabContainer><ProfileSheet/></TabContainer>}
|
||||
{value === 1 && <TabContainer><ProfileImages/></TabContainer>}
|
||||
{value === 2 && <TabContainer><YourReferrer/></TabContainer>}
|
||||
{value === 3 && <TabContainer><YourDescendents/></TabContainer>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
UserTabs.propTypes = {
|
||||
classes: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
export default withStyles(styles)(UserTabs);
|
||||
@@ -0,0 +1,96 @@
|
||||
import React, { Component } from 'react'
|
||||
import {compose} from 'react-apollo'
|
||||
|
||||
// Materia UI
|
||||
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
import Typography from '@material-ui/core/Typography'
|
||||
import Grid from '@material-ui/core/Grid'
|
||||
import Paper from '@material-ui/core/Paper'
|
||||
|
||||
// components
|
||||
import DescendentsTree from './DescendentsTree'
|
||||
|
||||
const styles = theme => ({
|
||||
root: {
|
||||
width: '100%',
|
||||
flexGrow: 1,
|
||||
padding: 10,
|
||||
marginTop: '5%',
|
||||
marginBottom: '10%'
|
||||
},
|
||||
typography: {
|
||||
width: '80%',
|
||||
marginLeft: '10%',
|
||||
marginTop: 40,
|
||||
marginBottom: 40
|
||||
},
|
||||
grid: {
|
||||
paddingTop: '30',
|
||||
marginTop: 30
|
||||
}
|
||||
})
|
||||
|
||||
class YourDescendents extends Component {
|
||||
|
||||
constructor (props) {
|
||||
super(props)
|
||||
|
||||
this.defaultValuesSet = false
|
||||
|
||||
this.state = {
|
||||
id: ''
|
||||
}
|
||||
}
|
||||
|
||||
componentWillMount () {
|
||||
if (this.defaultValuesSet === false) {
|
||||
let userData = localStorage.getItem('loggedInUser')
|
||||
|
||||
if (userData === 'undefined') { return }
|
||||
|
||||
let user = JSON.parse(userData)
|
||||
this.defaultValuesSet = true
|
||||
|
||||
/* Now we are ready to set the initial state. */
|
||||
this.setState({
|
||||
id: user.id
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
addForm () {
|
||||
const { classes } = this.props
|
||||
return (
|
||||
<Paper className={classes.root}>
|
||||
|
||||
<Typography className={classes.typography} variant='h5' gutterBottom>
|
||||
Your Decendents
|
||||
</Typography>
|
||||
|
||||
<Typography className={classes.typography} variant='body1' gutterBottom align='left'>
|
||||
These are your decendents within the project. Your children referred you as the one who brought them to the project, while
|
||||
your grandchildren referred your children and so on. In order to be able to see your descendents, the users who you referred
|
||||
must first point to you as your referrer.
|
||||
</Typography>
|
||||
|
||||
<DescendentsTree userId={this.state.id} />
|
||||
<Grid container className={classes.grid} justify='center' spacing={24} />
|
||||
</Paper>
|
||||
)
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div className='container'>
|
||||
{this.addForm()}
|
||||
</div>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withStyles(styles)
|
||||
)(YourDescendents) // This technique binds more than one query to a single component.
|
||||
@@ -0,0 +1,154 @@
|
||||
import React, { Component } from 'react'
|
||||
import {graphql, compose} from 'react-apollo'
|
||||
import {updateReferrerMutation} from '../queries/queries'
|
||||
|
||||
// components
|
||||
|
||||
import UserSearch from './UserSearch'
|
||||
import UserProfile from './UserProfile'
|
||||
|
||||
// Material-ui
|
||||
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
import Paper from '@material-ui/core/Paper'
|
||||
import Typography from '@material-ui/core/Typography'
|
||||
|
||||
const styles = theme => ({
|
||||
root: {
|
||||
width: '100%',
|
||||
flexGrow: 1,
|
||||
padding: 10,
|
||||
marginTop: '5%',
|
||||
marginBottom: '10%'
|
||||
},
|
||||
typography: {
|
||||
width: '80%',
|
||||
marginLeft: '10%',
|
||||
marginTop: 40,
|
||||
marginBottom: 40
|
||||
},
|
||||
button: {
|
||||
margin: theme.spacing.unit,
|
||||
marginTop: theme.spacing.unit * 3
|
||||
},
|
||||
inputField: {
|
||||
width: '80%',
|
||||
marginLeft: '10%',
|
||||
marginTop: 25
|
||||
}
|
||||
})
|
||||
|
||||
class YourReferrer extends Component {
|
||||
|
||||
constructor (props) {
|
||||
super(props)
|
||||
|
||||
this.defaultValuesSet = false
|
||||
|
||||
this.state = {
|
||||
id: '',
|
||||
referrerId: '',
|
||||
firstNameError: false,
|
||||
middleNameError: false,
|
||||
lastNameError: false,
|
||||
aliasError: false
|
||||
}
|
||||
}
|
||||
|
||||
userSelected (referrerUser) {
|
||||
this.setState({referrerId: referrerUser.id})
|
||||
|
||||
this.props.updateReferrerMutation({
|
||||
variables: {
|
||||
referrerId: referrerUser.id
|
||||
}
|
||||
})
|
||||
|
||||
/* Before we are done, we need to update the state of the local storage. */
|
||||
|
||||
let user = JSON.parse(localStorage.getItem('loggedInUser'))
|
||||
|
||||
user.referrerId = referrerUser.id
|
||||
|
||||
localStorage.setItem('loggedInUser', JSON.stringify(user))
|
||||
}
|
||||
|
||||
renderMode () {
|
||||
const { classes } = this.props
|
||||
|
||||
if (this.state.referrerId !== null) {
|
||||
return (
|
||||
<div>
|
||||
<Typography className={classes.typography} variant='body1' gutterBottom align='left'>
|
||||
This is the user who introduced you to the project.
|
||||
</Typography>
|
||||
|
||||
<UserProfile userId={this.state.referrerId} />
|
||||
|
||||
<Typography className={classes.typography} variant='body1' gutterBottom align='left'>
|
||||
This information can not be changed.
|
||||
</Typography>
|
||||
</div>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<div>
|
||||
<Typography className={classes.typography} variant='body1' gutterBottom align='left'>
|
||||
We know that a group often becomes more intelligent when the number of people in the group increases.
|
||||
To incentivize members of the community to invite more people to join we have developed this referral
|
||||
program in which you can specify who referred you to the project, and see the members who pointed at
|
||||
you as their referrer. Later this information will be available at your user profile and add to your
|
||||
overall reputation within the project.
|
||||
</Typography>
|
||||
|
||||
<UserSearch selectButton onSelect={this.userSelected.bind(this)} selectText="After that press the 'Select' button on the desired user to set it as your referrer. Bear in mind that this action can not be undone." />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
componentWillMount () {
|
||||
if (this.defaultValuesSet === false) {
|
||||
let userData = localStorage.getItem('loggedInUser')
|
||||
|
||||
if (userData === 'undefined') { return }
|
||||
|
||||
let user = JSON.parse(userData)
|
||||
this.defaultValuesSet = true
|
||||
|
||||
/* Now we are ready to set the initial state. */
|
||||
|
||||
this.setState({
|
||||
id: user.id,
|
||||
referrerId: user.referrerId
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
addForm () {
|
||||
const { classes } = this.props
|
||||
return (
|
||||
<Paper className={classes.root}>
|
||||
<Typography className={classes.typography} variant='h5' gutterBottom>
|
||||
Your Referrer
|
||||
</Typography>
|
||||
{this.renderMode()}
|
||||
</Paper>
|
||||
)
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div className='container'>
|
||||
{this.addForm()}
|
||||
</div>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default compose(
|
||||
graphql(updateReferrerMutation, {name: 'updateReferrerMutation'}),
|
||||
withStyles(styles)
|
||||
)(YourReferrer) // This technique binds more than one query to a single component.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 801 B |
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 472 B |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
@@ -0,0 +1,24 @@
|
||||
import React from 'react'
|
||||
import { Route, Switch } from 'react-router-dom'
|
||||
|
||||
import { MuiPickersUtilsProvider } from 'material-ui-pickers'
|
||||
import LuxonUtils from 'material-ui-pickers/utils/luxon-utils'
|
||||
|
||||
import Home from './components/Home'
|
||||
import User from './components/User'
|
||||
import Browse from './components/Browse'
|
||||
import Search from './components/Search'
|
||||
|
||||
const App = () => (
|
||||
<MuiPickersUtilsProvider utils={LuxonUtils}>
|
||||
<Switch>
|
||||
<Route exact path='/users/' component={Home} />
|
||||
<Route path='/users/user' component={User} />
|
||||
<Route path='/users/browse' component={Browse} />
|
||||
<Route path='/users/search' component={Search} />
|
||||
</Switch>
|
||||
</MuiPickersUtilsProvider>
|
||||
)
|
||||
|
||||
export default App
|
||||
|
||||
@@ -0,0 +1,164 @@
|
||||
import gql from 'graphql-tag'
|
||||
|
||||
const getUsersQuery = gql`
|
||||
{
|
||||
users_Users {
|
||||
id
|
||||
alias
|
||||
firstName
|
||||
middleName
|
||||
lastName
|
||||
bio
|
||||
role {
|
||||
id
|
||||
name
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
const getUserProfileQuery = gql`
|
||||
query($id: ID){
|
||||
users_User (id: $id){
|
||||
id
|
||||
alias
|
||||
firstName
|
||||
middleName
|
||||
lastName
|
||||
bio
|
||||
avatarHandle
|
||||
role {
|
||||
id
|
||||
name
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
const getUserByAuthIdQuery = gql`
|
||||
query($authId: String){
|
||||
users_UserByAuthId (authId: $authId){
|
||||
id
|
||||
referrerId
|
||||
alias
|
||||
firstName
|
||||
middleName
|
||||
lastName
|
||||
bio
|
||||
email
|
||||
emailVerified
|
||||
isDeveloper
|
||||
isDataAnalyst
|
||||
isTrader
|
||||
avatarHandle
|
||||
avatarChangeDate
|
||||
role {
|
||||
id
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
const getUsersBySearchFields = gql`
|
||||
query(
|
||||
$alias: String,
|
||||
$firstName: String,
|
||||
$middleName: String,
|
||||
$lastName: String
|
||||
){
|
||||
users_UsersSearch (alias: $alias, firstName: $firstName, middleName: $middleName, lastName: $lastName){
|
||||
id
|
||||
alias
|
||||
firstName
|
||||
middleName
|
||||
lastName
|
||||
}
|
||||
}
|
||||
`
|
||||
const getDescendentsQuery = gql`
|
||||
query(
|
||||
$id: String
|
||||
){
|
||||
users_Descendents (id: $id){
|
||||
id
|
||||
alias
|
||||
firstName
|
||||
middleName
|
||||
lastName
|
||||
referrerId
|
||||
descendents {
|
||||
id
|
||||
alias
|
||||
firstName
|
||||
middleName
|
||||
lastName
|
||||
referrerId
|
||||
descendents {
|
||||
id
|
||||
alias
|
||||
firstName
|
||||
middleName
|
||||
lastName
|
||||
referrerId
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
const getRolesQuery = gql`
|
||||
{
|
||||
users_Roles {
|
||||
id
|
||||
name
|
||||
}
|
||||
}
|
||||
`
|
||||
const updateUserMutation = gql`
|
||||
mutation(
|
||||
$firstName:String,
|
||||
$middleName:String,
|
||||
$lastName:String,
|
||||
$bio:String,
|
||||
$isDeveloper:Int,
|
||||
$isTrader:Int,
|
||||
$isDataAnalyst:Int,
|
||||
$roleId:String!
|
||||
)
|
||||
{
|
||||
users_UpdateUser (
|
||||
firstName:$firstName,
|
||||
middleName: $middleName,
|
||||
lastName: $lastName,
|
||||
bio: $bio,
|
||||
isDeveloper: $isDeveloper,
|
||||
isTrader: $isTrader,
|
||||
isDataAnalyst: $isDataAnalyst,
|
||||
roleId: $roleId
|
||||
)
|
||||
{
|
||||
id
|
||||
alias
|
||||
}
|
||||
}
|
||||
`
|
||||
const updateReferrerMutation = gql`
|
||||
mutation(
|
||||
$referrerId:String!
|
||||
)
|
||||
{
|
||||
users_UpdateUserReferrer (
|
||||
referrerId:$referrerId
|
||||
)
|
||||
{
|
||||
id
|
||||
referrerId
|
||||
}
|
||||
}
|
||||
`
|
||||
export {
|
||||
getUsersQuery,
|
||||
getUserByAuthIdQuery,
|
||||
getRolesQuery,
|
||||
getUserProfileQuery,
|
||||
getUsersBySearchFields,
|
||||
getDescendentsQuery,
|
||||
updateUserMutation,
|
||||
updateReferrerMutation
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
import { createMuiTheme } from '@material-ui/core/styles'
|
||||
|
||||
export const theme = createMuiTheme({
|
||||
palette: {
|
||||
primary: { main: '#303036' }, // DARK.
|
||||
secondary: { main: '#CC5835' } // RUSTED_RED.
|
||||
},
|
||||
typography: {
|
||||
fontFamily: '"Saira","Saira Condenses", sans-serif'
|
||||
},
|
||||
overrides: {
|
||||
Paper: {
|
||||
root: {
|
||||
backgroundColor: '#ffffff'
|
||||
},
|
||||
elevation: 0,
|
||||
square: true
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export const globalStyles = theme => ({
|
||||
'@global': {
|
||||
body: {
|
||||
backgroundColor: theme.palette.common.white
|
||||
}
|
||||
},
|
||||
appBar: {
|
||||
position: 'relative'
|
||||
},
|
||||
toolbarTitle: {
|
||||
flex: 1
|
||||
},
|
||||
layout: {
|
||||
width: 'auto',
|
||||
marginLeft: theme.spacing.unit * 3,
|
||||
marginRight: theme.spacing.unit * 3,
|
||||
[theme.breakpoints.up(900 + theme.spacing.unit * 3 * 2)]: {
|
||||
width: 900,
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto'
|
||||
}
|
||||
},
|
||||
heroContent: {
|
||||
maxWidth: 600,
|
||||
margin: '0 auto',
|
||||
padding: `${theme.spacing.unit * 8}px 0 ${theme.spacing.unit * 6}px`
|
||||
},
|
||||
cardHeader: {
|
||||
backgroundColor: theme.palette.grey[200]
|
||||
},
|
||||
cardPricing: {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'baseline',
|
||||
marginBottom: theme.spacing.unit * 2
|
||||
},
|
||||
cardActions: {
|
||||
[theme.breakpoints.up('sm')]: {
|
||||
paddingBottom: theme.spacing.unit * 2
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export default theme
|
||||
@@ -0,0 +1,9 @@
|
||||
const getItem = async name => window.localStorage.getItem(name)
|
||||
const setItem = async (name, value) => window.localStorage.setItem(name, value)
|
||||
const removeItem = async name => window.localStorage.removeItem(name)
|
||||
|
||||
export {
|
||||
getItem,
|
||||
setItem,
|
||||
removeItem
|
||||
}
|
||||
Reference in new issue
Block a user