+ {this.state.items && this.state.indexArray && (
+ <>
+ {
+ // When item is let go of, change indexArray position of item
+ this.swap(obj.newIndex, obj.oldIndex);
+ }}
+ />
+
+ )}
+
+ );
+ }
+}
+//#endregion
+
+//#region > PropTypes
+MovableBoundary.propTypes = {
+ pool: PropTypes.object,
+ movementAxis: PropTypes.string,
+ items: PropTypes.array.isRequired,
+ uid: PropTypes.string.isRequired,
+ edit: PropTypes.bool.isRequired,
+};
+//#endregion
+
+//#region > Exports
+//> Default Component
+export default MovableBoundary;
+//#endregion
+
+/**
+ * SPDX-License-Identifier: (EUPL-1.2)
+ * Copyright © 2019-2020 Simon Prast
+ */
diff --git a/src/components/molecules/MovableBoundary/movableboundary.scss b/src/components/molecules/MovableBoundary/movableboundary.scss
new file mode 100644
index 0000000..65d28c3
--- /dev/null
+++ b/src/components/molecules/MovableBoundary/movableboundary.scss
@@ -0,0 +1,30 @@
+.SortableItem {
+ list-style: none;
+ cursor: move;
+ outline: none;
+ user-select: text !important;
+
+ // View when sorting is enabled
+ &:not(.unsortable) {
+ background: transparentize($color: white, $amount: 0.5) !important;
+ margin-bottom: 1rem;
+ border-radius: 0.3rem;
+ padding-top: 0.3rem;
+ user-select: none !important;
+ }
+}
+
+.SortableList {
+ display: grid;
+ grid: initial;
+ padding: 0;
+}
+
+.unsortable {
+ cursor: default;
+}
+
+/**
+ * SPDX-License-Identifier: (EUPL-1.2)
+ * Copyright © 2019-2020 Simon Prast
+ */
diff --git a/src/components/molecules/Navbar/index.jsx b/src/components/molecules/Navbar/index.jsx
new file mode 100644
index 0000000..9fd2ef1
--- /dev/null
+++ b/src/components/molecules/Navbar/index.jsx
@@ -0,0 +1,214 @@
+//#region > Imports
+//> React
+// Contains all the functionality necessary to define React components
+import React from "react";
+// DOM bindings for React Router
+import { Link, withRouter, NavLink } from "react-router-dom";
+// Runtime type checking for React props and similar objects
+import PropTypes from "prop-types";
+//> MDB
+// "Material Design for Bootstrap" is a great UI design framework
+import {
+ MDBNavbar,
+ MDBNavbarBrand,
+ MDBNavbarNav,
+ MDBNavItem,
+ MDBNavbarToggler,
+ MDBCollapse,
+ MDBContainer,
+ MDBDropdown,
+ MDBDropdownToggle,
+ MDBDropdownMenu,
+ MDBSmoothScroll,
+ MDBBtn,
+ MDBIcon,
+} from "mdbreact";
+//> Redux
+// Allows to React components read data from a Redux store, and dispatch actions
+// to the store to update data.
+import { connect } from "react-redux";
+
+//> Actions
+// Functions to send data from the application to the store
+import { logoutAction } from "../../../store/actions/authActions";
+//> SearchBar
+import { SearchBar } from "../../atoms";
+//> Images
+import SNEKLogo from "../../../assets/navigation/logo.png";
+//> Style sheet
+import "./navbar.scss";
+//#endregion
+
+//#region > Components
+/**
+ * @class The navbar for all pages. Contains a login button, a profile menu
+ * depending on whether you are logged in or not and a search field,
+ * to find other users.
+ */
+class Navbar extends React.Component {
+ state = {
+ isOpen: false,
+ showSettings: false,
+ };
+
+ toggleCollapse = () => {
+ this.setState({ isOpen: !this.state.isOpen });
+ };
+
+ handleSettingsClose = () => {
+ if (this.state.showSettings) {
+ this.setState({
+ showSettings: false,
+ });
+ }
+ };
+
+ render() {
+ const { location, loggedUser } = this.props;
+ const avatarUrl = loggedUser.platformData?.user?.avatarUrl
+ ? loggedUser.platformData.user.avatarUrl
+ : loggedUser.avatarUrl;
+
+ return (
+ 's match.
+ */
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Navbar));
+//#endregion
+
+/**
+ * SPDX-License-Identifier: (EUPL-1.2)
+ * Copyright © 2019-2020 Simon Prast
+ */
diff --git a/src/components/molecules/Navbar/navbar.scss b/src/components/molecules/Navbar/navbar.scss
new file mode 100644
index 0000000..ff57e63
--- /dev/null
+++ b/src/components/molecules/Navbar/navbar.scss
@@ -0,0 +1,95 @@
+// Import variables
+@import "../../../utilities/variables";
+
+.navbar {
+ box-shadow: none;
+ background: #f0f0f0;
+
+ .btn-white {
+ background: transparentize($color: white, $amount: 0.3) !important;
+ border: 2px white solid;
+ padding: 0.5rem 1rem;
+
+ &:hover {
+ background: white !important;
+ border: 2px $snekGreen solid;
+ }
+ }
+
+ li {
+ align-self: center;
+
+ .dropdown {
+ img {
+ max-height: 30px;
+ width: auto;
+ border-radius: 0.2em;
+ }
+
+ .dropdown-toggle::after {
+ vertical-align: initial;
+ }
+
+ .dropdown-menu {
+ padding: 0;
+
+ .dropdown-item {
+ transition: all 0.2s ease;
+ box-shadow: none !important;
+
+ &:focus {
+ box-shadow: none !important;
+ background-color: lightgrey !important;
+ color: red !important;
+ }
+
+ &:hover {
+ box-shadow: none !important;
+ background-color: #f0f0f0 !important;
+ color: initial !important;
+ }
+ }
+ }
+ }
+
+ a {
+ font-weight: bold;
+ }
+
+ &.active {
+ a {
+ background-color: inherit !important;
+ border-bottom: solid $snekGreen 2px;
+ }
+ }
+ }
+
+ // Remove search field delete button
+ input[type="search"]::-webkit-search-decoration,
+ input[type="search"]::-webkit-search-cancel-button,
+ input[type="search"]::-webkit-search-results-button,
+ input[type="search"]::-webkit-search-results-decoration {
+ -webkit-appearance: none;
+ }
+
+ input[type="search"] {
+ &:focus {
+ color: #495057;
+ background-color: #fff;
+ border-color: $snekGreen;
+ outline: 0;
+ box-shadow: 0 0 0 0.2rem rgba(119, 189, 67, 0.25);
+ }
+ }
+
+ .spacer {
+ margin-left: 1rem;
+ padding-left: 1rem;
+ border-left: solid $snekGreen 2px;
+ }
+}
+
+/**
+ * SPDX-License-Identifier: (EUPL-1.2)
+ * Copyright © 2019-2020 Simon Prast
+ */
diff --git a/src/components/molecules/UserActionCard/index.jsx b/src/components/molecules/UserActionCard/index.jsx
new file mode 100644
index 0000000..999c998
--- /dev/null
+++ b/src/components/molecules/UserActionCard/index.jsx
@@ -0,0 +1,119 @@
+//#region > Imports
+//> React
+// Contains all the functionality necessary to define React components
+import React from "react";
+//> MDB
+// "Material Design for Bootstrap" is a great UI design framework
+import { MDBRow, MDBCol, MDBAlert, MDBBtn, MDBIcon } from "mdbreact";
+
+//> Components
+import { RegisterForm, LoginForm } from "../forms";
+//> Images
+import { ReactComponent as SvgSoftware } from "../../../assets/header/dev.svg";
+import { ReactComponent as SvgMedia } from "../../../assets/header/media.svg";
+//> Style sheet
+import "./useractioncard.scss";
+//#endregion
+
+//#region > Components
+/**
+ * @class A user action card component which contains the login and registration
+ * form component.
+ */
+class UserActionCard extends React.Component {
+ state = {
+ activeItem: this.props.activeIndex,
+ };
+
+ goTo = (item) => {
+ this.setState({
+ activeItem: item,
+ });
+ };
+
+ setActiveItem = (activeItem) => {
+ this.setState({
+ activeItem,
+ });
+ };
+
+ render() {
+ const { activeItem } = this.state;
+
+ return (
+
+ {activeItem === 0 && (
+ <>
+
this.setActiveItem(1)}>
+ Login to SNEK
+
+
+
Choose your snek
+
What is your main profession?
+
+
+ this.setActiveItem(2)}
+ >
+
Software Engineer
+
+
this.setActiveItem(3)}
+ >
+
Media Engineer
+
+
+
+ )}
+ {activeItem === 1 &&
}
+ {activeItem === 2 &&
}
+ {activeItem === 3 && (
+ <>
+
+ this.goTo(0)}
+ >
+
+ Back
+
+
+
+
+
+ Media Engineer profiles are not yet supported
+
+ this.goTo(2)}>
+ Create Software Engineer profile
+
+
+
+ )}
+
+ goTo(0)}>
+
+ Back
+
+
+ Login to SNEK
+ {this.state.loginFail && (
+
+ {this.state.errorMsg}
+
+ )}
+
+
+ );
+ }
+}
+//#endregion
+
+//#region > PropTypes
+LoginForm.propTypes = {
+ goTo: PropTypes.func,
+};
+//#endregion
+
+//#region > Redux Mapping
+const mapStateToProps = (state) => ({});
+
+const mapDispatchToProps = (dispatch) => {
+ return { login: (user) => dispatch(loginAction(user)) };
+};
+//#endregion
+
+//#region > Exports
+//> Default Component
+/**
+ * Provides its connected component with the pieces of the data it needs from
+ * the store, and the functions it can use to dispatch actions to the store.
+ */
+export default connect(mapStateToProps, mapDispatchToProps)(LoginForm);
+//#endregion
+
+/**
+ * SPDX-License-Identifier: (EUPL-1.2)
+ * Copyright © 2019-2020 Simon Prast
+ */
diff --git a/src/components/molecules/forms/RegisterForm/index.jsx b/src/components/molecules/forms/RegisterForm/index.jsx
new file mode 100644
index 0000000..5aa8832
--- /dev/null
+++ b/src/components/molecules/forms/RegisterForm/index.jsx
@@ -0,0 +1,876 @@
+//#region > Imports
+//> React
+// Contains all the functionality necessary to define React components
+import React from "react";
+// Runtime type checking for React props and similar objects
+import PropTypes from "prop-types";
+//> Additional
+// Text animations
+import TextLoop from "react-text-loop";
+//> MDB
+// "Material Design for Bootstrap" is a great UI design framework
+import {
+ MDBRow,
+ MDBCol,
+ MDBBtn,
+ MDBPopover,
+ MDBPopoverBody,
+ MDBPopoverHeader,
+ MDBIcon,
+ MDBModal,
+ MDBModalBody,
+ MDBModalHeader,
+ MDBModalFooter,
+ MDBSelect,
+ MDBProgress,
+ MDBSelectInput,
+ MDBSelectOptions,
+ MDBSelectOption,
+ MDBListGroup,
+ MDBListGroupItem,
+} from "mdbreact";
+//> OAuth
+import GitHubOAuth from "reactjs-oauth";
+//> Redux
+// Allows to React components read data from a Redux store, and dispatch actions
+// to the store to update data.
+import { connect } from "react-redux";
+
+//> Actions
+// Functions to send data from the application to the store
+import { registerAction } from "../../../../store/actions/userActions";
+import { fetchGitLabServersAction } from "../../../../store/actions/generalActions";
+import { loginAction } from "../../../../store/actions/authActions";
+//#endregion
+
+//#region > Components
+/**
+ * @class A registration form component. Contains all fields required for
+ * registration including OAuth and a selectable list of GitLab servers.
+ */
+class RegisterForm extends React.Component {
+ state = {
+ loading: false,
+ firstname: "",
+ lastname: "",
+ email: "",
+ password1: "",
+ password2: "",
+ username: "",
+ gitlab_username: "",
+ gitlab_servers: undefined,
+ gitlab_server: "Choose your organisation",
+ sourceList: [],
+ usernames: [],
+ promoCode: true,
+ code: "",
+ };
+
+ componentDidMount = () => {
+ this.getGitLabServers();
+ };
+
+ toggle = () => {
+ if (!this.state.modalGitLab) {
+ this.setState({
+ modalGitLab: true,
+ });
+ } else {
+ this.setState({
+ modalGitLab: false,
+ });
+ }
+ };
+
+ getGitLabServers = async () => {
+ // Check if GitLab Servers have already been set
+ if (this.state.gitlab_servers === undefined) {
+ // Retrieve GitLab servers
+ this.props.fetchGitLabServers().then(() => {
+ this.setState({
+ gitlab_servers: this.props.gitlabServers,
+ });
+ });
+ }
+ };
+
+ addGitLab = () => {
+ const username = this.state.gitlab_username;
+ const server = this.state.gitlab_server;
+
+ //#TSID7
+ //console.log("REGISTER FORM ADD GITLAB", username, server);
+
+ if (username.trim() && server.trim()) {
+ if (server !== "Choose your organisation") {
+ this.connectGitLab(username, "https://" + server);
+ }
+ }
+ };
+
+ connectGitLab = async (username, platformUrl) => {
+ this.setState(
+ {
+ modalGitLab: false,
+ gitlab_username: "",
+ gitlab_server: "Choose your organisation",
+ },
+ () => this.pushToSourceList("gitlab", username, platformUrl)
+ );
+ };
+
+ oauthGitHubSuccess = (response) => {
+ this.setState(
+ {
+ loadingGitHub: true,
+ },
+ async () => {
+ this.pushToSourceList(
+ "github",
+ response.username,
+ "https://api.github.com/graphql",
+ response.accessToken
+ );
+ }
+ );
+ };
+
+ oauthGitHubFailure = (response) => {
+ //#ERROR
+ console.error(response);
+ };
+
+ pushToSourceList = (platformName, username, platformUrl, token) => {
+ let sourceList = this.state.sourceList;
+
+ this.addToUsernames(username, platformName);
+
+ sourceList.push({
+ id: username.length + platformName.length + username + platformName,
+ user: username,
+ authorization: token ? "token " + token : null,
+ platform: {
+ name: platformName,
+ url: platformUrl,
+ },
+ });
+
+ if (platformName === "github") {
+ this.setState({
+ username,
+ hasGitHub: true,
+ sourceList,
+ loadingGitHub: false,
+ });
+ } else {
+ // Set the new list of user information
+ this.setState({
+ sourceList,
+ });
+ }
+ };
+
+ addToUsernames = (username, source) => {
+ let usernames = this.state.usernames;
+ let found = false;
+
+ for (let i = 0; i < usernames.length; i++) {
+ if (
+ usernames[i].username === username &&
+ usernames[i].source === source
+ ) {
+ found = true;
+ break;
+ }
+ }
+
+ if (!found) {
+ // Make sure that only GitHub usernames are available for selection
+ // This aims to prevent name abuse in the first versions of this application
+ usernames.push({
+ id: username.length + source.length + username + source,
+ username,
+ source,
+ verified: source === "github" ? true : false,
+ });
+ this.setState({
+ usernames,
+ });
+ }
+ };
+
+ removeSource = (id) => {
+ let sourceList = this.state.sourceList.filter(function (obj) {
+ return obj.id !== id;
+ });
+ let usernames = this.state.usernames.filter(function (obj) {
+ return obj.id !== id;
+ });
+
+ this.setState({
+ sourceList,
+ usernames,
+ });
+ };
+
+ handleUserNamePick = (username) => {
+ this.setState({
+ username,
+ });
+ };
+
+ handleSelectChange = (e) => {
+ this.setState({
+ gitlab_server: e[0],
+ });
+ };
+
+ testForError = (id) => {
+ if (this.state.errors) {
+ let rtn = this.state.errors.map((error, i) => {
+ if (!Array.isArray(id)) {
+ if (error.code === id) {
+ return true;
+ } else {
+ return false;
+ }
+ } else {
+ let innerRtn = id.map((item, ikey) => {
+ if (error.code === item) {
+ return true;
+ } else {
+ return false;
+ }
+ });
+ if (innerRtn.includes(true)) {
+ return true;
+ } else {
+ return false;
+ }
+ }
+ });
+
+ if (rtn.includes(true)) {
+ return true;
+ } else {
+ return false;
+ }
+ } else {
+ return false;
+ }
+ };
+
+ handleChange = (e, id) => {
+ this.setState(
+ {
+ [e.target.name]: e.target.value,
+ },
+ () => this.removeError(id)
+ );
+ };
+
+ handleChangeManual = (name, value, id) => {
+ this.setState(
+ {
+ [name]: value,
+ },
+ () => this.removeError(id)
+ );
+ };
+
+ removeError = (id) => {
+ // Preset errors to local variable
+ let errors = this.state.errors;
+
+ if (errors) {
+ if (!Array.isArray(id)) {
+ errors = errors.filter(function (obj) {
+ return obj.code !== id;
+ });
+ } else {
+ id.map((item) => {
+ errors = errors.filter(function (obj) {
+ return obj.code !== item;
+ });
+ });
+ }
+
+ this.setState({
+ errors,
+ });
+ }
+ };
+
+ // Handle sumbit of register form
+ handleSubmit = async () => {
+ //#TSID8
+ //console.log("REGISTER FORM HANDLE SUBMIT");
+
+ // CHANGE TO CONST
+ let {
+ password1,
+ password2,
+ firstname,
+ lastname,
+ email,
+ sourceList,
+ username,
+ promoCode,
+ code,
+ } = this.state;
+
+ // Error
+ let errors = [];
+
+ // Check if passwords match
+ if (password1 !== "" && password2 !== "" && password1 !== password2) {
+ errors.push({
+ code: 1,
+ msg: "Your passwords do not match.",
+ weight: 10,
+ });
+ }
+
+ if (sourceList.length === 0) {
+ errors.push({
+ code: 2,
+ msg: "No platforms are connected.",
+ weight: 10,
+ });
+ }
+
+ if (firstname === "") {
+ errors.push({
+ code: 3,
+ msg: "Please enter your first name.",
+ weight: 8,
+ });
+ }
+
+ if (lastname === "") {
+ errors.push({
+ code: 4,
+ msg: "Please enter your last name.",
+ weight: 8,
+ });
+ }
+
+ if (email === "") {
+ errors.push({
+ code: 5,
+ msg: "Please enter your email.",
+ weight: 9,
+ });
+ }
+
+ if (username === "") {
+ errors.push({
+ code: 6,
+ msg: "Please select a username from the list above.",
+ weight: 10,
+ });
+ }
+
+ if (password1 === "") {
+ errors.push({
+ code: 7,
+ msg: "Please enter a password.",
+ weight: 10,
+ });
+ }
+
+ if (password2 === "") {
+ errors.push({
+ code: 8,
+ msg: "Please repeat your password.",
+ weight: 10,
+ });
+ }
+
+ if (code === "") {
+ errors.push({
+ code: 9,
+ msg: "Please enter your promo code or contact us to receive one.",
+ weight: 5,
+ });
+ }
+
+ if (errors.length === 0) {
+ this.setState(
+ {
+ loading: true,
+ },
+ () => {
+ //#TSID9
+ //console.log("REGISTER FORM REGISTER", this.state);
+
+ let registrationData = {
+ sources: sourceList,
+ username,
+ email,
+ first_name: firstname,
+ last_name: lastname,
+ gift_code: promoCode && code !== "" ? code : null,
+ password: password1,
+ };
+
+ this.props.register(registrationData).then(() => {
+ const { username, password } = registrationData;
+
+ this.props.login({
+ username,
+ password,
+ });
+ });
+ }
+ );
+ } else {
+ this.setState({
+ errors,
+ });
+ }
+ };
+
+ handleCodeChange = (e) => {
+ let code = e.target.value;
+
+ if (code.length <= 14) {
+ if (code.length === 4 || code.length === 9) {
+ code = code + "-";
+ }
+
+ this.setState(
+ {
+ code: code.toUpperCase(),
+ },
+ () => this.removeError(9)
+ );
+ } else {
+ return false;
+ }
+ };
+
+ render() {
+ const { goTo } = this.props;
+
+ return (
+ <>
+ {!this.state.loading ? (
+ <>
+
+ this.setState({ errors: [] }, () => goTo(0))}
+ >
+
+ Back
+
+
+ So you're a Software Engineer...
+
+ We just need a bit more information to get you started.
+
+
+
+
+ this.setState({ promoCode: !this.state.promoCode })
+ }
+ >
+ {!this.state.promoCode
+ ? "I have a promo code"
+ : "I don't have a promo code"}
+
+
+ {this.state.promoCode && (
+
+ )}
+ Connect your work
+
+ You need to connect at least one account to continue.
+
+
+
+
+
+ Why do I need to connect my accounts?
+
+
+
+
+ Connecting accounts
+
+
+ To generate your expressive and meaningful profile, we
+ require data about your work, which we acquire by fetching
+ it from platforms like GitHub, GitLab and BitBucket. It also
+ helps us verify your data.
+
+
+ Learn more
+
+
+
+
+ this.setState({ modalGitLab: true })}
+ disabled={
+ !this.state.gitlab_servers ||
+ (this.state.gitlab_server &&
+ this.state.gitlab_server.length < 1)
+ }
+ >
+
+
+ {!process.env.NODE_ENV ||
+ process.env.NODE_ENV === "development" ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+
+ {this.state.loadingGitHub && }
+ {this.state.usernames.map((source, i) => {
+ return (
+
+
+
+ {source.username}
+ {source.verified ? (
+
+
+
+
+
+ Verified
+
+
+
+
+
+
+ This source has been{" "}
+
+ verified
+ {" "}
+ by logging into it.
+
+
+
+
+
+ ) : (
+
+
+
+
+
+ Not verified
+
+
+
+
+
+
+ We can not verify your identity with GitLab.
+ Your data is still being included.
+
+
+
+
+
+ )}
+
+
+
+ Don't worry, you can easily connect further accounts in the
+ future.
+
+
+
+ ) : (
+
+
+ Hey, {this.state.firstname}!
+
+
Your profile is being generated.
+
+
+
+
+ {({ getRootProps, getInputProps, acceptedFiles }) => (
+
+
+ {this.state.error.length > 0 || acceptedFiles.length > 0 ? (
+
+
+ {acceptedFiles.length > 0 &&
+ acceptedFiles.map((acceptedFile, i) => (
+ -
+
+
+
{acceptedFile.name}
+
+ ))}
+
+ {this.state.loading && (
+
+ Uploading file
+
+ )}
+
+ {this.state.error.length > 0 &&
+ this.state.error.map((error, i) => (
+ -
+
+
+
{error}
+
+ ))}
+
+
+ ) : (
+
+
+
+
Click here or drop a file to upload!
+
+ )}
+
+
+
+ 
+
+
+
+
+ {fetchedUser && fetchedUser.platformData.user.firstName && (
+ <>{fetchedUser.platformData.user.firstName}
+ )}{" "}
+ {fetchedUser && fetchedUser.platformData.user.lastName && (
+ <>{fetchedUser.platformData.user.lastName}
+ )}
+
+ {fetchedUser &&
+ fetchedUser.platformData.user.settings &&
+ fetchedUser.platformData.user.settings.showLocalRanking && (
+
+
+ #3 in your region
+
+
+ )}
+ {fetchedUser && fetchedUser.platformData.user.company && (
+ <>
+ {fetchedUser &&
+ fetchedUser.platformData.user.settings.showCompanyPublic && (
+
+ {fetchedUser.platformData.user.company}
+
+ )}
+
+ )}
+
+ {fetchedUser && fetchedUser.accessories.badges && (
+ <>
+ {fetchedUser.accessories.badges.bids.map((bid, i) => {
+ switch (bid) {
+ case "6403bf4d17b8472735a93b71a37e0bd0":
+ return (
+
+ Alpha
+
+ );
+ }
+ })}
+
+ )}
+
+ {fetchedUser && fetchedUser.platformData.profile.statusMessage && (
+
+ {fetchedUser.platformData.profile.statusEmojiHTML && (
+
+ )}
+
+ {fetchedUser.platformData.profile.statusMessage}
+
+
+ )}
+
+
+
+
+ Follow
+
+
+
+ Upvote
+
+
+
+
Connected accounts
+
+
+
+
+
+
+
Organisations
+ {fetchedUser && (
+
= 5
+ ? "orgs text-center"
+ : "orgs"
+ }
+ >
+ {fetchedUser.platformData.profile.organizations.length > 0 ? (
+ <>
+ {fetchedUser.platformData.profile.organizations.map(
+ (org, i) => {
+ return (
+
+
+
+ {org.avatarUrl ? (
+
+ ) : (
+
+ )}
+ {org.members && (
+
{org.members.length}
+ )}
+
+
+
+ {org.platformName}/
+
+ {org.name}
+
+
+
+
+
+ {org.members
+ ? org.members.length
+ : "Unknown"}{" "}
+ members
+
+
+
+
+ {org.members &&
+ org.members.length > 0 &&
+ org.members
+ .slice(0, 8)
+ .map((member, m) => {
+ return (
+
+
+ 
+
+ {member.username}
+
+ );
+ })}
+
+ {org.members && org.members.length > 9 && (
+
+ )}
+
+
+
+ {org.description}
+
+ Show more
+
+
+
+
+ );
+ }
+ )}
+
+ ) : (
+
+ {fetchedUser.username} hasn't joined an organisation yet.
+
+ )}
+
+ )}
+ {fetchedUser.platformData?.statistic?.languages?.length > 0 && (
+
+
+
Top languages
+
+ {fetchedUser.platformData.statistic.languages
+ .slice(
+ 0,
+ this.state.limitLanguages
+ ? 3
+ : fetchedUser.platformData.statistic.languages.length - 1
+ )
+ .map((language, i) => {
+ return (
+
+
+
+
+ {language.name}
+
+
+ {language.share}%
+
+
+ );
+ })}
+ {this.state.limitLanguages &&
+ fetchedUser.platformData.statistic.languages.length > 3 ? (
+
this.setState({ limitLanguages: false })}
+ >
+ Show more
+
+ ) : (
+
this.setState({ limitLanguages: true })}
+ >
+ Show less
+
+ )}
+
+ )}
+
+
+
+ {tabItems.map((item, i) => {
+ return (
+ -
+ this.setActiveTab(i)}
+ >
+ {item.title}
+ {item.pill}
+
+
+ );
+ })}
+
+
+ {activeTab === 0 && (
+
+ )}
+ {activeTab === 1 && (
+
+ )}
+ {activeTab > 1 && activeTab < 5 && (
+
+ This feature is not available just yet.
+
+ )}
+ {activeTab === 5 &&
}
+
+
+ this.handleEditClick(platformData)}
+ >
+ {this.state.edit ? (
+
+
+ Save items
+
+ ) : (
+ Move items
+ )}
+
+
+ )}
+
+ {platformData && (
+
+ {platformData.statistic.languages.map((language, i) => {
+ if (i < 6) {
+ return (
+
+
+
+ {language.name} {language.share}%
+
+
+ );
+ }
+ })}
+
+ )}
+ ,
+ <>
+ {false && (
+ <>
+
+
+ Pinned
+
+
+ Customize
+
+
+
+ {pinned.map((item, i) => {
+ return ;
+ })}
+
+
+ )}
+ ,
+ <>
+ {platformData &&
+ (platformData.user.settings.show3DDiagram ||
+ platformData.user.settings.show2DDiagram) && (
+
+ {platformData.statistic.years.map((year, i) => {
+ return (
+
+ this.setState({ selectedYear: year.year })
+ }
+ >
+ {year.year}
+
+ );
+ })}
+
+ this.setState({ selectedYear: undefined })
+ }
+ >
+ Current
+
+
+ )}
+ ,
+ <>
+ {platformData && platformData.user.settings.show3DDiagram && (
+
+ )}
+ ,
+ <>
+ {platformData && platformData.user.settings.show2DDiagram && (
+
+ )}
+ ,
+
+
+ Contribution Types
+ {platformData &&
+ !platformData.user.settings.showContribDiagram && (
+
+
+
+ )}
+ ,
+ <>
+
+ Activity
+
+
+ Weekly overview
+
+ ,
+ ]}
+ movementAxis="x"
+ />
+ Repositories
+
+ {repoList &&
+ repoList.map((repo, i) => {
+ return ;
+ })}
+
+
+ );
+ }
+}
+//#endregion
+
+//#region > PropTypes
+ProjectTab.propTypes = {
+ repoList: PropTypes.array.isRequired,
+};
+//#endregion
+
+//#region > Exports
+//> Default Component
+export default ProjectTab;
+//#endregion
+
+/**
+ * SPDX-License-Identifier: (EUPL-1.2)
+ * Copyright © 2019-2020 Simon Prast
+ */
diff --git a/src/components/organisms/tabs/ProjectTab/projecttab.scss b/src/components/organisms/tabs/ProjectTab/projecttab.scss
new file mode 100644
index 0000000..16a6889
--- /dev/null
+++ b/src/components/organisms/tabs/ProjectTab/projecttab.scss
@@ -0,0 +1,59 @@
+.project-list {
+ padding: 0;
+
+ .col-md-6:nth-child(even) {
+ padding-left: 0.15rem;
+ }
+
+ .col-md-6:nth-child(odd) {
+ padding-right: 0.15rem;
+ }
+
+ .lead {
+ font-weight: 400;
+ }
+
+ img {
+ height: 24px;
+ margin-right: 0.5rem;
+ width: auto;
+ border-radius: 50%;
+ background: white;
+ }
+
+ .img-badge {
+ border-radius: 0;
+ max-width: 100%;
+ height: auto;
+ }
+
+ li {
+ cursor: pointer;
+ margin-bottom: 0.3rem;
+ color: #3b3b3b;
+ list-style: none;
+ background: rgba(0, 0, 0, 0.05);
+ transition: all 0.1s ease;
+ padding: 1rem !important;
+ align-items: center;
+
+ i {
+ width: 30px;
+ text-align: center;
+ padding-right: 0.5rem;
+ }
+
+ &:hover {
+ background: rgba(0, 0, 0, 0.1);
+ }
+
+ .badge {
+ box-shadow: none;
+ }
+ }
+}
+
+/**
+ * SPDX-License-Identifier: (EUPL-1.2)
+ * Copyright © 2019-2020 Simon Prast
+ */
diff --git a/src/components/organisms/tabs/TalksTab/index.jsx b/src/components/organisms/tabs/TalksTab/index.jsx
new file mode 100644
index 0000000..597b599
--- /dev/null
+++ b/src/components/organisms/tabs/TalksTab/index.jsx
@@ -0,0 +1,242 @@
+//#region > Imports
+//> React
+// Contains all the functionality necessary to define React components
+import React from "react";
+//> React Router bindings to DOM
+import { withRouter, Link } from "react-router-dom";
+//> MDB
+// "Material Design for Bootstrap" is a great UI design framework
+import {
+ MDBRow,
+ MDBCol,
+ MDBIcon,
+ MDBBtn,
+ MDBCard,
+ MDBCardHeader,
+ MDBCardBody,
+ MDBCardFooter,
+} from "mdbreact";
+//> Redux
+// Allows to React components read data from a Redux store, and dispatch actions
+// to the store to update data.
+import { connect } from "react-redux";
+
+//> Actions
+// Functions to send data from the application to the store
+import { deleteTalkAction } from "../../../../store/actions/userActions";
+//> Style sheet
+import "./talkstab.scss";
+//> Modules
+import { TalkUploadModal } from "../../../molecules/modals";
+//#endregion
+
+//#region > Components
+/** @class A component which lists all talks */
+class Talks extends React.Component {
+ state = {
+ showUpload: false,
+ loading: true,
+ };
+
+ handleUploadClose = () => {
+ if (this.state.showUpload) {
+ this.setState({
+ showUpload: false,
+ });
+ }
+ };
+
+ updateIframe = (talk) => {
+ let iframe;
+
+ if (talk.interval.loaded === false) {
+ if (document.getElementById(talk.uid)) {
+ iframe = document.getElementById(talk.uid);
+ iframe.src = talk.displayUrl;
+ }
+ }
+ };
+
+ render() {
+ const { loggedUser, fetchedUser } = this.props;
+ const talkList = fetchedUser?.platformData?.talks;
+
+ if (talkList) {
+ talkList.map((talk) => {
+ talk.social = {
+ likes: 17,
+ date: new Date().toLocaleDateString("en-US", {
+ year: "numeric",
+ month: "numeric",
+ day: "numeric",
+ }),
+ };
+
+ talk.interval = {
+ timeoutID: setInterval(() => this.updateIframe(talk), 4000),
+ loaded: false,
+ };
+
+ return talk;
+ });
+ }
+
+ return (
+ <>
+
+
+ Talks
+
+ {loggedUser.username === fetchedUser.username && (
+
+ this.setState({ showUpload: true })}
+ >
+ Upload
+
+
+ )}
+
+
+ {talkList &&
+ talkList.map((talk, i) => {
+ return (
+
+
+
+
+
+ {talk.name.length > 25
+ ? talk.name.substring(0, 25) + "..."
+ : talk.name}
+
+
+ {loggedUser.username === fetchedUser.username && (
+ this.props.deleteTalk(talk)}>
+
+
+ )}
+
+
+
+
+
+