From b7bdb5ef0b41c7faddb4c42d664befc8f88227c6 Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Mon, 7 Sep 2020 15:59:22 +0200
Subject: [PATCH 001/175] Add new intel and client

Yeet old out of existence, yeet new into existence.
---
 src/index.js | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/index.js b/src/index.js
index 2be9cd9..68d9f24 100644
--- a/src/index.js
+++ b/src/index.js
@@ -16,7 +16,12 @@ import { loadingBarMiddleware } from "react-redux-loading-bar";
 // Thunk
 import thunk from "redux-thunk";
 //> Intel
-import { Intel } from "snek-intel";
+import INTEL_SNEK from "snek-intel/lib/utils/snek";
+import INTEL_INSTAGRAM from "snek-intel/lib/utils/instagram";
+import INTEL_IMGUR from "snek-intel/lib/utils/imgur";
+
+//> Client
+import { SnekClient } from "snek-client";
 
 //> Font Awesome
 // Font Awesome is an awesome icon library
@@ -40,13 +45,7 @@ import registerServiceWorker from "./registerServiceWorker";
 //#endregion
 
 //#region > Redux Store Initialization
-const INTEL = new Intel();
-
-//#TODO
-// Must be moved to INTEL in future?
-const getIntel = () => {
-  return INTEL;
-};
+const CLIENT_SNEK = new SnekClient("http://localhost:8000/graphql");
 
 const composeEnhancers =
   typeof window === "object" &&
@@ -61,8 +60,10 @@ const enhancer = composeEnhancers(
   applyMiddleware(
     loadingBarMiddleware(),
     thunk.withExtraArgument({
-      // Intel
-      getIntel,
+      INTEL_SNEK,
+      INTEL_IMGUR,
+      INTEL_INSTAGRAM,
+      CLIENT_SNEK,
     })
   )
   // other store enhancers if any

From 8abce19ebfd5cb743ecb1605ca2bf73d9d406128 Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Mon, 7 Sep 2020 16:53:33 +0200
Subject: [PATCH 002/175] Add new register

The register component has been reworked.
---
 .../molecules/UserActionCard/index.jsx        |  55 +-
 .../molecules/forms/LoginForm/index.jsx       |   2 +-
 .../molecules/forms/RegisterForm/index.jsx    | 788 +++---------------
 3 files changed, 116 insertions(+), 729 deletions(-)

diff --git a/src/components/molecules/UserActionCard/index.jsx b/src/components/molecules/UserActionCard/index.jsx
index 999c998..c701e0e 100644
--- a/src/components/molecules/UserActionCard/index.jsx
+++ b/src/components/molecules/UserActionCard/index.jsx
@@ -44,64 +44,25 @@ class UserActionCard extends React.Component {
       <div className="text-center" id="useractionscard">
         {activeItem === 0 && (
           <>
-            <MDBBtn color="green" outline onClick={() => this.setActiveItem(1)}>
+            <MDBBtn color="green" onClick={() => this.setActiveItem(1)}>
+              <MDBIcon icon="sign-in-alt" />
               Login to SNEK
             </MDBBtn>
             <div className="w-100">
-              <div className="splitter my-4">
+              <div className="splitter mt-3 mb-2">
                 <span className="or">
                   <span className="or-text">or</span>
                 </span>
               </div>
             </div>
-            <h2 className="mb-0">Choose your snek</h2>
-            <p className="text-muted mb-3">What is your main profession?</p>
-            <MDBRow>
-              <MDBCol md="6">
-                <div
-                  className="selectType"
-                  onClick={() => this.setActiveItem(2)}
-                >
-                  <p className="lead">Software Engineer</p>
-                  <SvgSoftware />
-                </div>
-              </MDBCol>
-              <MDBCol md="6">
-                <div
-                  className="selectType"
-                  onClick={() => this.setActiveItem(3)}
-                >
-                  <p className="lead">Media Engineer</p>
-                  <SvgMedia />
-                </div>
-              </MDBCol>
-            </MDBRow>
+            <p className="mb-0 lead">Sign up</p>
+            <p className="text-muted mb-3 small">
+              Join the biggest network for engineers today!
+            </p>
+            <RegisterForm />
           </>
         )}
         {activeItem === 1 && <LoginForm goTo={this.goTo} />}
-        {activeItem === 2 && <RegisterForm goTo={this.goTo} />}
-        {activeItem === 3 && (
-          <>
-            <div className="text-left mb-4">
-              <small
-                className="text-muted clickable"
-                onClick={() => this.goTo(0)}
-              >
-                <MDBIcon icon="angle-left" className="mr-1" />
-                Back
-              </small>
-            </div>
-            <MDBAlert color="info">
-              <p className="mb-2">
-                <MDBIcon icon="question" className="mr-2" />
-                Media Engineer profiles are not yet supported
-              </p>
-              <MDBBtn color="white" onClick={() => this.goTo(2)}>
-                Create Software Engineer profile
-              </MDBBtn>
-            </MDBAlert>
-          </>
-        )}
       </div>
     );
   }
diff --git a/src/components/molecules/forms/LoginForm/index.jsx b/src/components/molecules/forms/LoginForm/index.jsx
index 07dcfab..23a8239 100644
--- a/src/components/molecules/forms/LoginForm/index.jsx
+++ b/src/components/molecules/forms/LoginForm/index.jsx
@@ -190,7 +190,7 @@ class LoginForm extends React.Component {
             }
             value={this.state.login_password}
           />
-          <MDBBtn color="green" outline className="mb-0" type="submit">
+          <MDBBtn color="green" className="mb-0" type="submit">
             Login
             <MDBIcon icon="angle-right" className="pl-1" />
           </MDBBtn>
diff --git a/src/components/molecules/forms/RegisterForm/index.jsx b/src/components/molecules/forms/RegisterForm/index.jsx
index 5aa8832..7158a83 100644
--- a/src/components/molecules/forms/RegisterForm/index.jsx
+++ b/src/components/molecules/forms/RegisterForm/index.jsx
@@ -56,173 +56,7 @@ class RegisterForm extends React.Component {
     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) => {
@@ -301,539 +135,131 @@ class RegisterForm extends React.Component {
     }
   };
 
-  // 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 ? (
-          <>
-            <div className="text-left">
-              <small
-                className="text-muted clickable"
-                onClick={() => this.setState({ errors: [] }, () => goTo(0))}
-              >
-                <MDBIcon icon="angle-left" className="mr-1" />
-                Back
-              </small>
-            </div>
-            <p className="lead">So you're a Software Engineer...</p>
-            <p className="text-muted mb-4">
-              We just need a bit more information to get you started.
-            </p>
-            <form>
-              <MDBRow>
-                <MDBCol md="6">
-                  <input
-                    type="text"
-                    className={
-                      this.testForError(3)
-                        ? "form-control error"
-                        : "form-control"
-                    }
-                    placeholder="Firstname"
-                    name="firstname"
-                    onChange={(e) => this.handleChange(e, 3)}
-                    value={this.state.firstname}
-                  />
-                </MDBCol>
-                <MDBCol md="6">
-                  <input
-                    type="text"
-                    className={
-                      this.testForError(4)
-                        ? "form-control error"
-                        : "form-control"
-                    }
-                    placeholder="Lastname"
-                    name="lastname"
-                    onChange={(e) => this.handleChange(e, 4)}
-                    value={this.state.lastname}
-                  />
-                </MDBCol>
-              </MDBRow>
+        <form>
+          <input
+            type="text"
+            className={
+              this.testForError(5)
+                ? "form-control error mb-2"
+                : "form-control mb-2"
+            }
+            placeholder="Username"
+            name="username"
+            onChange={(e) => this.handleChange(e, 5)}
+            value={this.state.username}
+          />
+          <MDBRow>
+            <MDBCol md="6">
               <input
-                type="email"
+                type="text"
                 className={
-                  this.testForError(5)
-                    ? "form-control my-2 error"
-                    : "form-control my-2"
+                  this.testForError(3) ? "form-control error" : "form-control"
                 }
-                placeholder="E-Mail"
-                name="email"
-                onChange={(e) => this.handleChange(e, 5)}
-                value={this.state.email}
+                placeholder="Firstname"
+                name="firstname"
+                onChange={(e) => this.handleChange(e, 3)}
+                value={this.state.firstname}
               />
-              <MDBRow>
-                <MDBCol md="6">
-                  <input
-                    type="password"
-                    className={
-                      this.testForError([7, 1])
-                        ? "form-control error"
-                        : "form-control"
-                    }
-                    placeholder="Password"
-                    name="password1"
-                    onChange={(e) => this.handleChange(e, [7, 1])}
-                    value={this.state.password1}
-                  />
-                </MDBCol>
-                <MDBCol md="6">
-                  <input
-                    type="password"
-                    className={
-                      this.testForError([8, 1])
-                        ? "form-control error"
-                        : "form-control"
-                    }
-                    placeholder="Repeat password"
-                    name="password2"
-                    onChange={(e) => this.handleChange(e, [8, 1])}
-                    value={this.state.password2}
-                  />
-                </MDBCol>
-              </MDBRow>
-            </form>
-            <div className="text-left mt-2">
-              <small
-                className="blue-text clickable text-md"
-                onClick={() =>
-                  this.setState({ promoCode: !this.state.promoCode })
-                }
-              >
-                {!this.state.promoCode
-                  ? "I have a promo code"
-                  : "I don't have a promo code"}
-              </small>
-            </div>
-            {this.state.promoCode && (
+            </MDBCol>
+            <MDBCol md="6">
               <input
-                value={this.state.code}
+                type="text"
                 className={
-                  this.testForError([9, 1])
-                    ? "form-control mb-3 error"
-                    : "form-control mb-3"
+                  this.testForError(4) ? "form-control error" : "form-control"
                 }
-                spellCheck="false"
-                autoComplete="autocomplete_off_874548537585743884357"
-                onChange={this.handleCodeChange}
-                type="text"
-                id="materialFormRegisterConfirmEx40"
-                name="code"
-                placeholder="Promo code"
-                label="Promotional code"
+                placeholder="Lastname"
+                name="lastname"
+                onChange={(e) => this.handleChange(e, 4)}
+                value={this.state.lastname}
               />
-            )}
-            <p className="text-muted mt-4">Connect your work</p>
-            <small className="text-muted">
-              You need to connect at least one account to continue.
-            </small>
-            <div>
-              <MDBPopover placement="top" popover clickable id="popper1">
-                <MDBBtn color="link" className="text-muted py-1">
-                  <MDBIcon far icon="question-circle" className="pr-1" />
-                  Why do I need to connect my accounts?
-                </MDBBtn>
-                <div>
-                  <MDBPopoverHeader>
-                    <MDBIcon far icon="question-circle" className="pr-2" />
-                    Connecting accounts
-                  </MDBPopoverHeader>
-                  <MDBPopoverBody>
-                    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.
-                    <br />
-                    <a
-                      className="blue-text"
-                      href="https://github.com/snek-at"
-                      rel="noopener noreferrer"
-                      target="_blank"
-                    >
-                      Learn more
-                    </a>
-                  </MDBPopoverBody>
-                </div>
-              </MDBPopover>
-            </div>
-            <div className="connect mb-3">
-              <MDBBtn
-                color="orange"
-                onClick={() => this.setState({ modalGitLab: true })}
-                disabled={
-                  !this.state.gitlab_servers ||
-                  (this.state.gitlab_server &&
-                    this.state.gitlab_server.length < 1)
+            </MDBCol>
+          </MDBRow>
+          <input
+            type="email"
+            className={
+              this.testForError(5)
+                ? "form-control my-2 error"
+                : "form-control my-2"
+            }
+            placeholder="E-Mail"
+            name="email"
+            onChange={(e) => this.handleChange(e, 5)}
+            value={this.state.email}
+          />
+          <MDBRow>
+            <MDBCol md="6">
+              <input
+                type="password"
+                className={
+                  this.testForError([7, 1])
+                    ? "form-control error"
+                    : "form-control"
                 }
-              >
-                <MDBIcon fab icon="gitlab" size="lg" />
-              </MDBBtn>
-              {!process.env.NODE_ENV ||
-              process.env.NODE_ENV === "development" ? (
-                <GitHubOAuth
-                  authorizationUrl="https://github.com/login/oauth/authorize"
-                  clientId="1440dd4c1d1c4c0fa124"
-                  clientSecret="0723a2b5bfef27efc8b2d26d837ead239fa0b0e6"
-                  redirectUri="http://localhost:3000/redirect"
-                  onSuccess={this.oauthGitHubSuccess}
-                  onFailure={this.oauthGitHubFailure}
-                />
-              ) : (
-                <GitHubOAuth
-                  authorizationUrl="https://github.com/login/oauth/authorize"
-                  clientId="2148629809594d57c113"
-                  clientSecret="64a37e4846387cfcaea35d83afca3c9c8689628c"
-                  redirectUri="https://snek.at/redirect"
-                  onSuccess={this.oauthGitHubSuccess}
-                  onFailure={this.oauthGitHubFailure}
-                />
-              )}
-              <MDBBtn color="primary" disabled>
-                <MDBIcon fab icon="bitbucket" size="lg" />
-              </MDBBtn>
-            </div>
-            <div>
-              <MDBListGroup>
-                {this.state.loadingGitHub && <MDBProgress material preloader />}
-                {this.state.usernames.map((source, i) => {
-                  return (
-                    <MDBListGroupItem
-                      className={"list-item-" + source.source}
-                      key={i}
-                    >
-                      <div>
-                        <MDBIcon
-                          fab
-                          icon={source.source}
-                          className="company-icon"
-                        />
-                        {source.username}
-                        {source.verified ? (
-                          <MDBPopover
-                            placement="right"
-                            domElement
-                            clickable
-                            popover
-                            tag="span"
-                            id="popper1"
-                          >
-                            <span>
-                              <MDBIcon
-                                icon="award"
-                                className="green-text ml-2 clickable"
-                              />
-                            </span>
-                            <div>
-                              <MDBPopoverHeader>Verified</MDBPopoverHeader>
-                              <MDBPopoverBody>
-                                <MDBRow className="justify-content-center align-items-center m-0">
-                                  <MDBCol
-                                    size="auto"
-                                    className="p-0 green-text"
-                                  >
-                                    <MDBIcon icon="award" size="3x" />
-                                  </MDBCol>
-                                  <MDBCol className="p-0 pl-3">
-                                    This source has been{" "}
-                                    <strong className="green-text">
-                                      verified
-                                    </strong>{" "}
-                                    by logging into it.
-                                  </MDBCol>
-                                </MDBRow>
-                              </MDBPopoverBody>
-                            </div>
-                          </MDBPopover>
-                        ) : (
-                          <MDBPopover
-                            placement="right"
-                            domElement
-                            clickable
-                            popover
-                            tag="span"
-                            id="popper1"
-                          >
-                            <span>
-                              <MDBIcon
-                                icon="award"
-                                className="grey-text ml-2 clickable"
-                              />
-                            </span>
-                            <div>
-                              <MDBPopoverHeader>Not verified</MDBPopoverHeader>
-                              <MDBPopoverBody>
-                                <MDBRow className="justify-content-center align-items-center m-0">
-                                  <MDBCol size="auto" className="p-0 grey-text">
-                                    <MDBIcon icon="award" size="3x" />
-                                  </MDBCol>
-                                  <MDBCol className="p-0 pl-3">
-                                    We can not verify your identity with GitLab.
-                                    Your data is still being included.
-                                  </MDBCol>
-                                </MDBRow>
-                              </MDBPopoverBody>
-                            </div>
-                          </MDBPopover>
-                        )}
-                      </div>
-                      <MDBIcon
-                        icon="times"
-                        className="close-icon"
-                        onClick={() => this.removeSource(source.id)}
-                      />
-                    </MDBListGroupItem>
-                  );
-                })}
-              </MDBListGroup>
-            </div>
-            <MDBBtn
-              color="green"
-              outline
-              className="mb-0"
-              onClick={this.handleSubmit}
-              /*disabled={!this.state.hasGitHub}*/
-            >
-              Join now
-            </MDBBtn>
-            <p>
-              <small className="text-muted">
-                Don't worry, you can easily connect further accounts in the
-                future.
-              </small>
-            </p>
-          </>
-        ) : (
-          <div className="my-5 py-5">
-            <h2 className="font-weight-bolder mb-0">
-              Hey, {this.state.firstname}!
-            </h2>
-            <p className="lead mb-3">Your profile is being generated.</p>
-            <div className="progress md-progress primary-color mb-1">
-              <div className="indeterminate"></div>
-            </div>
-            <TextLoop
-              className="text-muted"
-              children={[
-                "Connecting profiles...",
-                "Fetching data...",
-                "Creating profile...",
-                "Analyzing profile...",
-                "Creating statistics...",
-                "Warming up the coffee...",
-                "Finishing your profile...",
-              ]}
-              springConfig={{ stiffness: 180, damping: 8 }}
-              interval={4000}
-            />
-          </div>
-        )}
-        {this.state.modalGitLab && (
-          <MDBModal
-            modalStyle="orange"
-            className="text-white"
-            size="sm"
-            backdrop={true}
-            isOpen={this.state.modalGitLab}
-            toggle={this.toggle}
-          >
-            <MDBModalHeader className="text-center" titleClass="w-100" tag="p">
-              <MDBIcon fab icon="gitlab" className="pr-2" />
-              Add GitLab profile
-            </MDBModalHeader>
-            <MDBModalBody className="text-center">
+                placeholder="Password"
+                name="password1"
+                onChange={(e) => this.handleChange(e, [7, 1])}
+                value={this.state.password1}
+              />
+            </MDBCol>
+            <MDBCol md="6">
               <input
-                type="text"
-                className="form-control mb-2"
-                placeholder="GitLab username"
-                name="gitlab_username"
-                onChange={(e) =>
-                  this.setState({ [e.target.name]: e.target.value })
+                type="password"
+                className={
+                  this.testForError([8, 1])
+                    ? "form-control error"
+                    : "form-control"
                 }
-                value={this.state.gitlab_username}
+                placeholder="Confirm password"
+                name="password2"
+                onChange={(e) => this.handleChange(e, [8, 1])}
+                value={this.state.password2}
               />
-              <MDBSelect
-                outline
-                getValue={this.handleSelectChange}
-                className="mb-0"
-              >
-                <MDBSelectInput selected={this.state.gitlab_server} />
-                <MDBSelectOptions>
-                  <MDBSelectOption disabled>
-                    Choose your organisation
-                  </MDBSelectOption>
-                  {this.state.gitlab_servers &&
-                    this.state.gitlab_servers.map((source, i) => {
-                      return (
-                        <MDBSelectOption key={i} value={source.domain}>
-                          {source.organisation}
-                        </MDBSelectOption>
-                      );
-                    })}
-                </MDBSelectOptions>
-              </MDBSelect>
-            </MDBModalBody>
-            <MDBModalFooter className="justify-content-center">
-              <MDBBtn color="orange" onClick={this.addGitLab}>
-                <MDBIcon icon="plus-circle" className="mr-2" />
-                Add
-              </MDBBtn>
-              <MDBBtn color="elegant" outline onClick={this.toggle}>
-                Cancel
-              </MDBBtn>
-            </MDBModalFooter>
-          </MDBModal>
+            </MDBCol>
+          </MDBRow>
+        </form>
+        <div className="text-left mt-2">
+          <small
+            className="blue-text clickable text-md"
+            onClick={() => this.setState({ promoCode: !this.state.promoCode })}
+          >
+            {!this.state.promoCode
+              ? "I have a promo code"
+              : "I don't have a promo code"}
+          </small>
+        </div>
+        {this.state.promoCode && (
+          <input
+            value={this.state.code}
+            className={
+              this.testForError([9, 1])
+                ? "form-control mb-3 error"
+                : "form-control mb-3"
+            }
+            spellCheck="false"
+            autoComplete="autocomplete_off_874548537585743884357"
+            onChange={this.handleCodeChange}
+            type="text"
+            id="materialFormRegisterConfirmEx40"
+            name="code"
+            placeholder="Promo code"
+            label="Promotional code"
+          />
         )}
+        <MDBBtn
+          color="green"
+          className="mb-0"
+          onClick={this.handleSubmit}
+          size="lg"
+          /*disabled={!this.state.hasGitHub}*/
+        >
+          <MDBIcon icon="angle-right" />
+          Join now
+        </MDBBtn>
       </>
     );
   }

From c8ac1220c547e0ac37d62d5bcd4173ae62f08a46 Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Mon, 7 Sep 2020 17:19:39 +0200
Subject: [PATCH 003/175] Improve register

The labels have been improved.
---
 .../molecules/forms/RegisterForm/index.jsx    | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/molecules/forms/RegisterForm/index.jsx b/src/components/molecules/forms/RegisterForm/index.jsx
index 7158a83..de06ae2 100644
--- a/src/components/molecules/forms/RegisterForm/index.jsx
+++ b/src/components/molecules/forms/RegisterForm/index.jsx
@@ -140,7 +140,8 @@ class RegisterForm extends React.Component {
 
     return (
       <>
-        <form>
+        <form className="text-left">
+          <span className="text-muted small">Username</span>
           <input
             type="text"
             className={
@@ -148,51 +149,51 @@ class RegisterForm extends React.Component {
                 ? "form-control error mb-2"
                 : "form-control mb-2"
             }
-            placeholder="Username"
             name="username"
             onChange={(e) => this.handleChange(e, 5)}
             value={this.state.username}
           />
-          <MDBRow>
+          <MDBRow className="mb-2">
             <MDBCol md="6">
+              <span className="text-muted small">Firstname</span>
               <input
                 type="text"
                 className={
                   this.testForError(3) ? "form-control error" : "form-control"
                 }
-                placeholder="Firstname"
                 name="firstname"
                 onChange={(e) => this.handleChange(e, 3)}
                 value={this.state.firstname}
               />
             </MDBCol>
             <MDBCol md="6">
+              <span className="text-muted small">Lastname</span>
               <input
                 type="text"
                 className={
                   this.testForError(4) ? "form-control error" : "form-control"
                 }
-                placeholder="Lastname"
                 name="lastname"
                 onChange={(e) => this.handleChange(e, 4)}
                 value={this.state.lastname}
               />
             </MDBCol>
           </MDBRow>
+          <span className="text-muted small">E-Mail</span>
           <input
             type="email"
             className={
               this.testForError(5)
-                ? "form-control my-2 error"
-                : "form-control my-2"
+                ? "form-control mb-2 error"
+                : "form-control mb-2"
             }
-            placeholder="E-Mail"
             name="email"
             onChange={(e) => this.handleChange(e, 5)}
             value={this.state.email}
           />
           <MDBRow>
             <MDBCol md="6">
+              <span className="text-muted small">Password</span>
               <input
                 type="password"
                 className={
@@ -200,13 +201,13 @@ class RegisterForm extends React.Component {
                     ? "form-control error"
                     : "form-control"
                 }
-                placeholder="Password"
                 name="password1"
                 onChange={(e) => this.handleChange(e, [7, 1])}
                 value={this.state.password1}
               />
             </MDBCol>
             <MDBCol md="6">
+              <span className="text-muted small">Confirm password</span>
               <input
                 type="password"
                 className={
@@ -214,7 +215,6 @@ class RegisterForm extends React.Component {
                     ? "form-control error"
                     : "form-control"
                 }
-                placeholder="Confirm password"
                 name="password2"
                 onChange={(e) => this.handleChange(e, [8, 1])}
                 value={this.state.password2}
@@ -246,7 +246,7 @@ class RegisterForm extends React.Component {
             type="text"
             id="materialFormRegisterConfirmEx40"
             name="code"
-            placeholder="Promo code"
+            placeholder="XXXX-XXXX-XXXX"
             label="Promotional code"
           />
         )}

From 57b35dcf0ac8828455ecee3f9686be3eedbe951a Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Mon, 7 Sep 2020 18:23:28 +0200
Subject: [PATCH 004/175] Remove all actions and implement user actions

All actions have been removed.
User actions like login, logout, and getPerson
have been implemented.
---
 src/store/actions/authActions.js      | 102 -----
 src/store/actions/generalActions.js   | 152 -------
 src/store/actions/personActions.js    |   0
 src/store/actions/userActions.js      | 580 +++-----------------------
 src/store/reducers/authReducers.js    |  66 ---
 src/store/reducers/generalReducers.js |  89 ----
 src/store/reducers/index.js           |   8 -
 src/store/reducers/userReducers.js    | 175 ++------
 src/store/types.js                    |  11 +
 9 files changed, 105 insertions(+), 1078 deletions(-)
 delete mode 100644 src/store/actions/authActions.js
 delete mode 100644 src/store/actions/generalActions.js
 create mode 100644 src/store/actions/personActions.js
 delete mode 100644 src/store/reducers/authReducers.js
 delete mode 100644 src/store/reducers/generalReducers.js
 create mode 100644 src/store/types.js

diff --git a/src/store/actions/authActions.js b/src/store/actions/authActions.js
deleted file mode 100644
index 3ebd7cd..0000000
--- a/src/store/actions/authActions.js
+++ /dev/null
@@ -1,102 +0,0 @@
-//#region > Authentication Actions
-/**
- * Handle login.
- *
- * @param user A user to login with
- * @description Handles states for login
- */
-const loginAction = (user) => {
-  return (dispatch, getState, { getIntel }) => {
-    try {
-      const intel = getIntel();
-      const session = intel.snekclient.session;
-
-      return session
-        .begin(user)
-        .then((whoami) => {
-          if (!whoami?.anonymous && whoami?.__typename === "SNEKUser") {
-            dispatch({
-              type: "LOGIN_SUCCESS",
-              payload: {
-                username: whoami.username,
-                avatarUrl:
-                  "https://www.clipartmax.com/png/full/166-1669056_the-20-cooler-octocat-github-octocat.png",
-              },
-            });
-          } else if (whoami.anonymous) {
-            dispatch({
-              type: "LOGIN_ANON_SUCCESS",
-              payload: {},
-            });
-          } else {
-            throw Error("Login failed")
-          }
-        })
-        .catch((ex) =>
-          dispatch({
-            type: "LOGIN_FAILED",
-            payload: {
-              errorCode: 619,
-              message: "Incorrect username or password",
-              error: ex,
-            },
-          })
-        );
-    } catch (ex) {
-      dispatch({
-        type: "LOGIN_ERROR",
-        payload: { errorCode: 600, message: "Login failed", error: ex },
-      });
-    }
-  };
-};
-
-/**
- * Logout user.
- *
- * @description Handles the logging out of active users
- */
-const logoutAction = () => {
-  return async (dispatch, getState, { getIntel }) => {
-    try {
-      const intel = getIntel();
-      const session = intel.snekclient.session;
-
-      await session
-        .end()
-        .then(() => {
-          dispatch({
-            type: "LOGOUT_SUCCESS",
-            payload: {},
-          });
-
-          dispatch({
-            type: "REMOVE_LOGGED_USER",
-          });
-        })
-        .catch((ex) =>
-          dispatch({ type: "LOGOUT_ERROR", payload: { error: ex } })
-        );
-    } catch (ex) {
-      dispatch({
-        type: "LOGOUT_FAILED",
-        payload: {
-          errorCode: 601,
-          message: "Logout failed",
-          error: ex,
-        },
-      });
-    }
-  };
-};
-//#endregion
-
-//#region > Exports
-//> Default Component
-export { loginAction, logoutAction };
-//#endregion
-
-/**
- * SPDX-License-Identifier: (EUPL-1.2)
- * Copyright © 2019-2020 Simon Prast
- */
diff --git a/src/store/actions/generalActions.js b/src/store/actions/generalActions.js
deleted file mode 100644
index 3f03e96..0000000
--- a/src/store/actions/generalActions.js
+++ /dev/null
@@ -1,152 +0,0 @@
-//#region > Registration Actions
-/**
- * Append Source Objects
- *
- * @param sourceList A source object
- * @description Hands source list over to intel
- */
-const appendSourceObjectsAction = (sourceList) => {
-  return async (dispatch, getState, { getIntel }) => {
-    try {
-      const intel = getIntel();
-
-      intel.appendList(sourceList);
-
-      dispatch({
-        type: "APPEND_SOURCE_OBJECTS_SUCCESS",
-        payload: {},
-      });
-    } catch (ex) {
-      dispatch({
-        type: "APPEND_SOURCE_OBJECTS_ERROR",
-        payload: {
-          errorCode: 602,
-          message: "Appending source objects failed",
-          error: ex,
-        },
-      });
-    }
-  };
-};
-
-/**
- * Fetch GitLab Servers
- *
- * @description Retrieves a list of available GitLab servers
- */
-const fetchGitLabServersAction = () => {
-  return async (dispatch, getState, { getIntel }) => {
-    try {
-      const intel = getIntel();
-      const session = intel.snekclient.session;
-
-      return session.tasks.general
-        .gitlabServer()
-        .then(({ data }) => {
-          const gitLabServers = data?.page?.supportedGitlabs;
-
-          dispatch({
-            type: "FETCH_GITLAB_SERVER_SUCCESS",
-            payload: { gitLabServers },
-          });
-        })
-        .catch((ex) =>
-          dispatch({
-            type: "FETCH_GITLAB_SERVER_ERROR",
-            payload: { error: ex },
-          })
-        );
-    } catch (ex) {
-      dispatch({
-        type: "FETCH_GITLAB_SERVER_ERROR",
-        payload: {
-          errorCode: 605,
-          message: "Fetching GitLab server failed",
-          error: ex,
-        },
-      });
-    }
-  };
-};
-//#endregion
-
-//#region > Data Handling Actions
-/**
- * Get intel data
- *
- * @description Retrieves data from current applied source list
- */
-const getDataAction = () => {
-  return async (dispatch, getState, { getIntel }) => {
-    try {
-      const intel = getIntel();
-
-      intel
-        .get()
-        .then((res) => dispatch({ type: "GET_DATA_SUCCESS", payload: res }))
-        .catch((ex) =>
-          dispatch({ type: "GET_DATA_ERROR", payload: { error: ex } })
-        );
-    } catch (ex) {
-      dispatch({
-        type: "GET_DATA_ERROR",
-        payload: {
-          errorCode: 603,
-          message: "Getting intel data failed",
-          error: ex,
-        },
-      });
-    }
-  };
-};
-
-/**
- * Get all users
- *
- * @description Retrieves a list of all users
- */
-const getUserSearchItems = () => {
-  return async (dispatch, getState, { getIntel }) => {
-    try {
-      const intel = getIntel();
-      const session = intel.snekclient.session;
-
-      return await session.tasks.general
-        .allUserPageUrls()
-        .then((res) => {
-          dispatch({
-            type: "GET_APP_PAGE_URLS_SUCCESS",
-            payload: { items: res.data.page.children },
-          });
-        })
-        .catch((ex) =>
-          dispatch({ type: "GET_APP_PAGE_URLS_ERROR", payload: { error: ex } })
-        );
-    } catch (ex) {
-      dispatch({
-        type: "GET_APP_PAGE_URLS_ERROR",
-        payload: {
-          errorCode: 616,
-          message: "Getting all page urls failed",
-          error: ex,
-        },
-      });
-    }
-  };
-};
-//#endregion
-
-//#region > Exports
-//> Default Component
-export {
-  appendSourceObjectsAction,
-  getDataAction,
-  getUserSearchItems,
-  fetchGitLabServersAction,
-};
-//#endregion
-
-/**
- * SPDX-License-Identifier: (EUPL-1.2)
- * Copyright © 2019-2020 Simon Prast
- */
diff --git a/src/store/actions/personActions.js b/src/store/actions/personActions.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/store/actions/userActions.js b/src/store/actions/userActions.js
index 8513232..f1a5e9e 100644
--- a/src/store/actions/userActions.js
+++ b/src/store/actions/userActions.js
@@ -1,483 +1,76 @@
 //#region > Imports
-//> Redux
-// Allows to manually display a LoadingBar
-import { showLoading, hideLoading } from "react-redux-loading-bar";
-//> Additional
-// SHA Hashing algorithm
-import sha256 from "js-sha256";
+//> Action Types
+import * as Action from "../types";
+//> Intel
+import INTEL_SNEK from "snek-intel/lib/utils/snek";
 //#endregion
 
-//#region > Register Actions
+//#region > User Actions
 /**
- * Register user.
+ * Handle login.
  *
- * @param registrationData Data to register a user
- * @description Handles the registration of users
+ * @param user A user to login with
+ * @description Handles states for login
  */
-const registerAction = (registrationData) => {
-  return async (dispatch, getState, { getIntel }) => {
+const loginAction = (user) => {
+  return async (dispatch, getState, { CLIENT_SNEK }) => {
     try {
-      const intel = getIntel();
-      const session = intel.snekclient.session;
-      const clearPassword = registrationData.password;
+      dispatch({ type: Action.USER_LOGIN_REQUEST });
 
-      // Hash password
-      registrationData.password = sha256(registrationData.password);
+      const whoami = await CLIENT_SNEK.session.begin(user);
 
-      // Append Source objects
-      await intel.appendList(registrationData.sources);
-      // Generate talks based on the previous appended list
-      await intel.generateTalks(registrationData.sources);
-
-      // Get fresh platform data
-      const intelData = {
-        ...(await intel.get()),
-        talks: await intel.getTalks(),
-      };
-
-      // Save Object to platformData as JSON
-      registrationData.platform_data = JSON.stringify(intelData);
-      // Create JSON string out of sources for backend use
-      registrationData.sources = JSON.stringify(registrationData.sources);
-
-      return session.tasks.user
-        .registration(registrationData)
-        .then((res) => {
-          if (res.result === "FAIL") {
-            dispatch({
-              type: "SIGNUP_FAILED",
-              payload: {
-                errorCode: 606,
-                message: "Registration failed due to false registration result",
-                error: undefined,
-              },
-            });
-          } else {
-            dispatch({
-              type: "SIGNUP_SUCCESS",
-              payload: {
-                registrationData,
-                username: registrationData.username,
-                password: clearPassword,
-              },
-            });
-          }
-        })
-        .catch((ex) =>
-          dispatch({ type: "SIGNUP_ERROR", payload: { error: ex } })
-        );
-    } catch (ex) {
-      dispatch({
-        type: "SIGNUP_ERROR",
-        payload: {
-          errorCode: 617,
-          message: "Registration failed",
-          error: ex,
-        },
-      });
-    }
-  };
-};
-//#endregion
-
-//#region > Caching Actions
-/**
- * Write cache.
- *
- * @param platformData A data object to store in cache
- * @description Handles the calls for writing to cache
- */
-const writeCacheAction = (platformData) => {
-  return async (dispatch, getState, { getIntel }) => {
-    try {
-      const intel = getIntel();
-      const session = intel.snekclient.session;
-
-      return session.tasks.user
-        .cache(JSON.stringify(platformData))
-        .then(() =>
-          dispatch({
-            type: "WRITE_CACHE_SUCCESS",
-            payload: {},
-          })
-        )
-        .catch((ex) =>
-          dispatch({ type: "WRITE_CACHE_ERROR", payload: { error: ex } })
-        );
-    } catch (ex) {
-      dispatch({
-        type: "WRITE_CACHE_ERROR",
-        payload: {
-          errorCode: 607,
-          message: "Writing to cache failed",
-          error: ex,
-        },
-      });
-    }
-  };
-};
-
-/**
- * Read cache.
- *
- * @param username A username to read the cache from
- * @description Handles the calls for reading the cache
- */
-const readCacheAction = (username) => {
-  return async (dispatch, getState, { getIntel }) => {
-    try {
-      const intel = getIntel();
-      const session = intel.snekclient.session;
-
-      return session.tasks.user
-        .profile(username)
-        .then(async ({ data }) => {
-          if (!data.page) {
-            dispatch({
-              type: "READ_CACHE_FAILED",
-              payload: {
-                errorCode: 608,
-                message: "Cache not loaded",
-                error: undefined,
-              },
-            });
-          } else {
-            // Split profile to chunks
-            const profile = data.page;
-            const sources = profile.sources
-              ? JSON.parse(profile.sources)
-              : null;
-
-            let platformData = profile.person.cache
-              ? JSON.parse(profile.person.cache)
-              : {};
-
-            let user = platformData.user ? platformData.user : {};
-
-            // Check if data is valid
-            if (!sources) {
-              dispatch({
-                type: "READ_CACHE_FAILED",
-                payload: {
-                  errorCode: 609,
-                  message: "Sources are empty",
-                  error: undefined,
-                },
-              });
-            } else {
-              // Set settings for first time fetching
-              if (
-                ![
-                  "firstName",
-                  "lastName",
-                  "email",
-                  "avatarUrl",
-                  "websiteUrl",
-                  "websiteUrl",
-                  "location",
-                  "company",
-                ].every((item) => user.hasOwnProperty(item))
-              ) {
-                user.firstName = platformData.profile.firstName;
-                user.lastName = platformData.profile.lastName;
-                user.email = platformData.profile.email;
-                user.avatarUrl = platformData.profile.avatarUrl;
-                user.websiteUrl = platformData.profile.websiteUrl;
-                user.location = platformData.profile.location;
-                user.company = platformData.profile.company;
-              }
-
-              if (!user.settings) {
-                user.settings = {
-                  show3DDiagram: true,
-                  show2DDiagram: true,
-                  showCompanyPublic: true,
-                  showEmailPublic: true,
-                  showLocalRanking: true,
-                  activeTheme: null,
-                };
-              }
-
-              // Build fetchedUser object
-              let fetchedUser = {
-                username: profile.personName,
-                platformData: {
-                  ...platformData,
-                  user,
-                },
-                sources,
-                verified: data.page.verified ? data.page.verified : true,
-                accessories: {
-                  badges: {
-                    bids: [data.page.bids]
-                  },
-                  themes: {
-                    tids: [data.page.tids]
-                  }
-                },
-              };
-
-              dispatch({
-                type: "READ_CACHE_SUCCESS",
-                payload: { fetchedUser },
-              });
-
-              const state = getState();
-
-              if (fetchedUser.username === state.auth.loggedUser?.username) {
-                dispatch({
-                  type: "SET_LOGGED_USER",
-                  payload: { fetchedUser },
-                });
-              }
-            }
-          }
-        })
-        .catch((ex) => {
-          dispatch({ type: "READ_CACHE_ERROR", payload: { error: ex } })
+      if (!whoami?.anonymous && whoami?.__typename === "SNEKUser") {
+        dispatch({
+          type: Action.USER_LOGIN_SUCCESS,
+          payload: {
+            username: whoami.username,
+            anonymous: false,
+          },
         });
-    } catch (ex) {
-      dispatch({
-        type: "READ_CACHE_ERROR",
-        payload: {
-          errorCode: 610,
-          message: "Reading from cache failed",
-          error: ex,
-        },
-      });
-    }
-  };
-};
-
-/**
- * Update cache.
- *
- * @param fetchedUser A fetched user object
- * @description Handles the calls for updating the cache
- */
-const updateCacheAction = (fetchedUser) => {
-  return async (dispatch, getState, { getIntel }) => {
-    try {
-      dispatch(showLoading());
-
-      const intel = getIntel();
-      const session = intel.snekclient.session;
-
-      // Appned Source objects
-      await intel.appendList(fetchedUser.sources);
-      // Generate talks based on the previous appended list
-      await intel.generateTalks(fetchedUser.sources);
-
-      // Get fresh platform data
-      const intelData = {
-        ...(await intel.get()),
-        talks: await intel.getTalks(),
-      };
-
-      // Fix duplicates
-      for (const i in intelData.talks) {
-        let state = true;
-
-        for (const i2 in fetchedUser.platformData.talks) {
-          if (
-            intelData.talks[i].url === fetchedUser.platformData.talks[i2].url
-          ) {
-            state = false;
-          }
-        }
-
-        if (state) {
-          fetchedUser.platformData.talks.push(intelData.talks[i]);
-        }
-      }
-
-      fetchedUser.platformData = {
-        ...intelData,
-        user: fetchedUser.platformData.user,
-        talks: fetchedUser.platformData.talks,
-      };
-
-      intel.resetReducer();
-
-      dispatch(hideLoading());
-
-      return session.tasks.user
-        .cache(JSON.stringify(fetchedUser.platformData))
-        .then(
-          dispatch({
-            type: "UPDATE_CACHE_SUCCESS",
-            payload: { fetchedUser },
-          })
-        )
-        .catch((ex) =>
-          dispatch({ type: "UPDATE_CACHE_ERROR", payload: { error: ex } })
-        );
-    } catch (ex) {
-      dispatch({
-        type: "UPDATE_CACHE_ERROR",
-        payload: {
-          errorCode: 618,
-          message: "Updating cache failed",
-          error: ex,
-        },
-      });
-    }
-  };
-};
-
-/**
- * Save settings
- *
- * @param nextSettings The settings that should be applied
- * @description Saves the user settings
- */
-const saveSettingsActions = (nextSettings) => {
-  return async (dispatch, getState, { getIntel }) => {
-    try {
-      const intel = getIntel();
-      const state = getState();
-
-      const fetchedUser = state.user.fetchedUser;
-      const session = intel.snekclient.session;
-
-      if (fetchedUser.platformData) {
-        // Check for mandatory fields
-        if (nextSettings.email) {
-          fetchedUser.platformData.user.avatarUrl = nextSettings.avatar_url
-            ? nextSettings.avatar_url
-            : "";
-          fetchedUser.platformData.user.firstName = nextSettings.first_name
-            ? nextSettings.first_name
-            : "";
-          fetchedUser.platformData.user.lastName = nextSettings.last_name
-            ? nextSettings.last_name
-            : "";
-          fetchedUser.platformData.user.email = nextSettings.email
-            ? nextSettings.email
-            : fetchedUser.platformData.user.email;
-          fetchedUser.platformData.user.websiteUrl = nextSettings.website
-            ? nextSettings.website
-            : "";
-          fetchedUser.platformData.user.location = nextSettings.location
-            ? nextSettings.location
-            : "";
-          fetchedUser.platformData.user.company = nextSettings.company
-            ? nextSettings.company
-            : "";
-          fetchedUser.platformData.user.settings = {
-            showTopLanguages: nextSettings.showTopLanguages,
-            showLocalRanking: nextSettings.showLocalRanking,
-            show3DDiagram: nextSettings.show3DDiagram,
-            show2DDiagram: nextSettings.show2DDiagram,
-            showEmailPublic: nextSettings.showEmailPublic,
-            showCompanyPublic: nextSettings.showCompanyPublic,
-            activeTheme: nextSettings.activeTheme,
-          };
-        }
-
-        session.tasks.user.cache(fetchedUser.username, JSON.stringify(fetchedUser.platformData));
 
+        dispatch(getPerson(whoami.username));
+      } else if (whoami.anonymous) {
         dispatch({
-          type: "SAVE_SETTING_SUCCESS",
+          type: Action.USER_LOGIN_SUCCESS,
           payload: {
-            fetchedUser,
+            anonymous: true,
           },
         });
+      } else {
+        throw Error("Login failed");
       }
     } catch (ex) {
       dispatch({
-        type: "SAVE_SETTING_ERROR",
+        type: Action.USER_LOGIN_FAILURE,
         payload: {
-          errorCode: 604,
-          message: "Saving settings failed",
+          errorCode: 619,
+          message: "Login failed",
           error: ex,
         },
       });
     }
   };
 };
-//#endregion
-
-//#region > Talks Actions
-//> Is currently not needed but has been left for later implementations!
-// /**
-//  * Get all talks.
-//  *
-//  * @description Handles the call for getting all talks.
-//  */
-// const getAllTalksAction = () => {
-//   return async (dispatch, getState, { getIntel }) => {
-//     try {
-//       const intel = getIntel();
-
-//       return intel
-//         .getTalks()
-//         .then((talks) =>
-//           dispatch({ type: "GET_TALKS_SUCCESS", payload: { talks } })
-//         )
-//         .catch((ex) =>
-//           dispatch({ type: "GET_TALKS_ERROR", payload: { error: ex } })
-//         );
-//     } catch (ex) {
-//       dispatch({
-//         type: "GET_TALKS_ERROR",
-//         payload: {
-//           errorCode: 611,
-//           message: "Getting intel talks failed",
-//           error: ex,
-//         },
-//       });
-//     }
-//   };
-// };
 
 /**
- * Get a talk.
+ * Logout user.
  *
- * @param uid A unique id to find a talk
- * @param username A username associated with the talk
- * @description Handles the call for getting one specific talk
+ * @description Handles the logging out of active users
  */
-const getTalkAction = (uid, username) => {
-  return async (dispatch, getState, { getIntel }) => {
+const logoutAction = () => {
+  return async (dispatch, getState, { CLIENT_SNEK }) => {
     try {
-      const intel = getIntel();
-      const session = intel.snekclient.session;
+      dispatch({ type: Action.USER_LOGOUT_REQUEST });
 
-      return session.tasks.user
-        .profile(username)
-        .then(async ({ data }) => {
-          if (data.page) {
-            let talks = JSON.parse(data.page.platformData).talks;
+      await CLIENT_SNEK.session.end();
 
-            talks = talks.filter((talk) => {
-              return talk.uid === uid;
-            });
-
-            dispatch({
-              type: "GET_TALK_SUCCESS",
-              payload: { talk: talks[0] },
-            });
-          } else {
-            dispatch({
-              type: "GET_TALK_FAILED",
-              payload: {
-                errorCode: 613,
-                message: "Cannot get specific talk " + uid,
-                error: undefined,
-              },
-            });
-          }
-        })
-        .catch((ex) =>
-          dispatch({ type: "GET_TALK_ERROR", payload: { error: ex } })
-        );
+      dispatch({ type: Action.USER_LOGOUT_SUCCESS });
     } catch (ex) {
       dispatch({
-        type: "GET_TALK_ERROR",
+        type: Action.USER_LOGOUT_FAILURE,
         payload: {
-          errorCode: 614,
-          message: "Getting talks failed",
+          errorCode: 601,
+          message: "Logout failed",
           error: ex,
         },
       });
@@ -486,109 +79,32 @@ const getTalkAction = (uid, username) => {
 };
 
 /**
- * Upload talk.
- *
- * @param file A file to be uploaded
- * @param talkInfo Additional information to add to the talk
- * @description Handles the call for uploading a talk
+ * Get person page for a logged user
  */
-const uploadTalkAction = (file, talkInfo) => {
-  return async (dispatch, getState, { getIntel }) => {
+const getPerson = (personName) => {
+  return async (dispatch, getState, {}) => {
     try {
-      const intel = getIntel();
-      const state = getState();
-
-      const fetchedUser = state.user.fetchedUser;
-      const session = intel.snekclient.session;
-
-      return intel.appendTalk(file).then(() => {
-        return intel.getTalks().then((talks) => {
-          talks[talks.length - 1].repository = talkInfo;
+      dispatch({ type: Action.USER_PERSON_GET_REQUEST });
 
-          fetchedUser.platformData.talks.push(talks[talks.length - 1]);
+      const person = await INTEL_SNEK.person.get({ personName });
 
-          session.tasks.user
-            .cache(JSON.stringify(fetchedUser.platformData))
-            .then(() =>
-              dispatch({
-                type: "UPLOAD_TALK_SUCCESS",
-                payload: {
-                  fetchedUser,
-                },
-              })
-            );
-        });
-      });
+      dispatch({ type: Action.USER_PERSON_GET_SUCCESS, payload: person });
     } catch (ex) {
       dispatch({
-        type: "UPLOAD_TALK_ERROR",
+        type: Action.USER_PERSON_GET_FAILURE,
         payload: {
-          errorCode: 612,
-          message: "Uploading talk failed",
+          errorCode: 601,
+          message: `Getting person (${personName}) failed`,
           error: ex,
         },
       });
     }
   };
 };
-
-/**
- * @todo currentCache over getState
- * Delete talk.
- *
- * @param talk A talk that should be deleted
- * @description Handles the call for deleting a talk.
- */
-const deleteTalkAction = (talk) => {
-  return async (dispatch, getState, { getIntel }) => {
-    try {
-      const intel = getIntel();
-      const state = getState();
-
-      const fetchedUser = state.user.fetchedUser;
-      const session = intel.snekclient.session;
-
-      for (const index in fetchedUser.platformData.talks) {
-        if (talk.uid === fetchedUser.platformData.talks[index].uid) {
-          fetchedUser.platformData.talks.splice(index, 1);
-        }
-      }
-
-      session.tasks.user.cache(JSON.stringify(fetchedUser.platformData));
-
-      dispatch({
-        type: "DELETING_TALK_SUCCESS",
-        payload: {
-          fetchedUser,
-        },
-      });
-    } catch (ex) {
-      dispatch({
-        type: "DELETING_TALK_ERROR",
-        payload: {
-          errorCode: 615,
-          message: "Deleting talk failed",
-          raw: ex,
-        },
-      });
-    }
-  };
-};
 //#endregion
 
 //#region > Exports
-//> Default Component
-export {
-  registerAction,
-  writeCacheAction,
-  readCacheAction,
-  updateCacheAction,
-  saveSettingsActions,
-  //getAllTalksAction,
-  getTalkAction,
-  uploadTalkAction,
-  deleteTalkAction,
-};
+export { loginAction, logoutAction, getPerson };
 //#endregion
 
 /**
diff --git a/src/store/reducers/authReducers.js b/src/store/reducers/authReducers.js
deleted file mode 100644
index 769bf07..0000000
--- a/src/store/reducers/authReducers.js
+++ /dev/null
@@ -1,66 +0,0 @@
-//#region > Imports
-//> Error Serialization
-// Serialize/deserialize an error into a plain object
-import { serializeError } from "serialize-error";
-//#endregion
-
-//#region > Constant Variables
-const INIT_STATE = {
-  loggedUser: { anonymous: true },
-  authError: null,
-  authErrorDetails: null,
-};
-//#endregion
-
-//#region > Reducers
-const authReducer = (state = INIT_STATE, action) => {
-  switch (action.type) {
-    //> LOGIN
-    case "LOGIN_SUCCESS":
-      return {
-        ...state,
-        loggedUser: { ...action.payload, anonymous: false },
-        authErrorDetails: null,
-      };
-
-    case "LOGIN_ANON_SUCCESS":
-      return {
-        ...state,
-        loggedUser: undefined,
-        loggedUser: { anonymous: true },
-        authErrorDetails: null,
-      };
-
-    case "LOGIN_FAILED" || "LOGIN_ERROR":
-      return {
-        ...state,
-        authError: action.payload,
-        authErrorDetails: serializeError(action.payload.error),
-      };
-
-    //> LOGOUT
-    case "LOGOUT_SUCCESS":
-      return INIT_STATE;
-
-    case "LOGOUT_FAILED" || "LOGIN_ERROR":
-      return {
-        ...state,
-        authError: action.payload,
-        authErrorDetails: serializeError(action.payload.error),
-      };
-
-    default:
-      return state;
-  }
-};
-//#endregion
-
-//#region > Exports
-//> Default Component
-export default authReducer;
-//#endregion
-
-/**
- * SPDX-License-Identifier: (EUPL-1.2)
- * Copyright © 2019-2020 Simon Prast
- */
diff --git a/src/store/reducers/generalReducers.js b/src/store/reducers/generalReducers.js
deleted file mode 100644
index 081e33d..0000000
--- a/src/store/reducers/generalReducers.js
+++ /dev/null
@@ -1,89 +0,0 @@
-//#region > Imports
-//> Error Serialization
-// Serialize/deserialize an error into a plain object
-import { serializeError } from "serialize-error";
-//#endregion
-
-//#region > Constant Variables
-const INIT_STATE = {
-  allUserSearchItems: null,
-  allGitlabServers: [],
-  generatedIntelData: null,
-  generalError: null,
-  generalErrorDetails: null,
-};
-//#endregion
-
-//#region > Reducers
-const generalReducer = (state = INIT_STATE, action) => {
-  switch (action.type) {
-    //> appendSourceObjectsAction
-    case "APPEND_SOURCE_OBJECTS_SUCCESS":
-      return {
-        ...state,
-      };
-
-    case "APPEND_SOURCE_OBJECTS_ERROR":
-      return {
-        ...state,
-        authError: action.payload,
-        authErrorDetails: serializeError(action.payload.error),
-      };
-
-    //> fetchGitLabServersAction
-    case "FETCH_GITLAB_SERVER_SUCCESS":
-      return {
-        ...state,
-        allGitlabServers: action.payload.gitLabServers,
-      };
-
-    case "FETCH_GITLAB_SERVER_ERROR":
-      return {
-        ...state,
-        authError: action.payload,
-        authErrorDetails: serializeError(action.payload.error),
-      };
-
-    //> getDataAction
-    case "GET_DATA_SUCCESS":
-      return {
-        ...state,
-        generatedIntelData: action.payload,
-      };
-
-    case "GET_DATA_ERROR":
-      return {
-        ...state,
-        authError: action.payload,
-        authErrorDetails: serializeError(action.payload.error),
-      };
-
-    //> getUserSearchItems
-    case "GET_APP_PAGE_URLS_SUCCESS":
-      return {
-        ...state,
-        allUserSearchItems: action.payload.items,
-      };
-
-    case "GET_APP_PAGE_URLS_ERROR":
-      return {
-        ...state,
-        authError: action.payload,
-        authErrorDetails: serializeError(action.payload.error),
-      };
-
-    default:
-      return state;
-  }
-};
-//#endregion
-
-//#region > Exports
-//> Default Component
-export default generalReducer;
-//#endregion
-
-/**
- * SPDX-License-Identifier: (EUPL-1.2)
- * Copyright © 2019-2020 Simon Prast
- */
diff --git a/src/store/reducers/index.js b/src/store/reducers/index.js
index d2dd520..91c0430 100644
--- a/src/store/reducers/index.js
+++ b/src/store/reducers/index.js
@@ -7,10 +7,6 @@ import { combineReducers } from "redux";
 import { loadingBarReducer } from "react-redux-loading-bar";
 
 //> Reducers
-// Authentication
-import authReducer from "./authReducers";
-// General
-import generalReducer from "./generalReducers";
 // User
 import userReducer from "./userReducers";
 //#endregion
@@ -19,10 +15,6 @@ import userReducer from "./userReducers";
 const rootReducer = combineReducers({
   // Loading bar
   loadingBar: loadingBarReducer,
-  // User authentication
-  auth: authReducer,
-  // General data
-  general: generalReducer,
   // User data
   user: userReducer,
 });
diff --git a/src/store/reducers/userReducers.js b/src/store/reducers/userReducers.js
index e1c164a..ddaf49b 100644
--- a/src/store/reducers/userReducers.js
+++ b/src/store/reducers/userReducers.js
@@ -2,151 +2,74 @@
 //> Error Serialization
 // Serialize/deserialize an error into a plain object
 import { serializeError } from "serialize-error";
+//> Action Types
+import * as Action from "../types";
 //#endregion
 
 //#region > Constant Variables
 const INIT_STATE = {
-  fetchedUser: null,
-  loggedUser: null,
-  registrationHistory: null,
-  selectedTalk: null,
-  newCachedUser: null,
-  cachingDone: false,
-  userError: null,
-  userErrorDetails: null,
+  user: { anonymous: undefined, username: undefined, person: undefined },
+  error: undefined,
+  errorDetails: undefined,
 };
 //#endregion
 
-//#region > User Reducers
+//#region > Reducers
 const userReducer = (state = INIT_STATE, action) => {
   switch (action.type) {
-    //> registerAction
-    case "SIGNUP_SUCCESS":
-      return {
-        ...state,
-        registrationHistory: { ...action.payload },
-      };
-
-    case "SIGNUP_FAILED" || "SIGNUP_ERROR":
-      return {
-        ...state,
-        authError: action.payload,
-        authErrorDetails: serializeError(action.payload.error),
-      };
-
-    //> writeCacheAction
-    case "WRITE_CACHE_SUCCESS":
-      return {
-        ...state,
-      };
-
-    case "WRITE_CACHE_ERROR":
-      return {
-        ...state,
-        authError: action.payload,
-        authErrorDetails: serializeError(action.payload.error),
-      };
-
-    //> readCacheAction
-    case "READ_CACHE_SUCCESS":
-      return {
-        ...state,
-        fetchedUser: { ...action.payload.fetchedUser },
-      };
-
-    case "READ_CACHE_FAILED" || "READ_CACHE_ERROR":
-      return {
-        ...state,
-        authError: action.payload,
-        authErrorDetails: serializeError(action.payload.error),
-      };
-
-    //> updateCacheAction
-    case "UPDATE_CACHE_SUCCESS":
-      return {
-        ...state,
-        newCachedUser: { ...action.payload.fetchedUser },
-        cachingDone: true,
-      };
-
-    case "UPDATE_CACHE_ERROR":
-      return {
-        ...state,
-        authError: action.payload,
-        authErrorDetails: serializeError(action.payload.error),
-      };
-
-    //> saveSettingsActions
-    case "SAVE_SETTING_SUCCESS":
-      return {
-        ...state,
-        fetchedUser: { ...action.payload.fetchedUser },
-      };
-
-    case "SAVE_SETTING_ERROR":
-      return {
-        ...state,
-        authError: action.payload,
-        authErrorDetails: serializeError(action.payload.error),
-      };
-
-    //> getTalkAction
-    case "GET_TALK_SUCCESS":
-      return {
-        ...state,
-        selectedTalk: { ...action.payload.talk },
-      };
-
-    case "GET_TALK_FAILED" || "GET_TALK_ERROR":
-      return {
-        ...state,
-        authError: action.payload,
-        authErrorDetails: serializeError(action.payload.error),
-      };
-
-    //> uploadTalkAction
-    case "UPLOAD_TALK_SUCCESS":
-      return {
-        ...state,
-        fetchedUser: { ...action.payload.fetchedUser },
-      };
-
-    case "UPLOAD_TALK_ERROR":
+    //> Login
+    case Action.USER_LOGIN_REQUEST:
+      return state;
+    case Action.USER_LOGIN_SUCCESS:
       return {
-        ...state,
-        authError: action.payload,
-        authErrorDetails: serializeError(action.payload.error),
+        user: {
+          ...action.payload,
+          person: null,
+        },
       };
-
-    //> deleteTalkAction
-    case "DELETING_TALK_SUCCESS":
+    case Action.USER_LOGIN_FAILURE:
       return {
-        ...state,
-        fetchedUser: { ...action.payload.fetchedUser },
+        user: INIT_STATE.user,
+        error: action.payload,
+        errorDetails: serializeError(action.payload.error),
       };
-
-    case "DELETING_TALK_ERROR":
+    //> Logout
+    case Action.USER_LOGOUT_REQUEST:
+      return state;
+    case Action.USER_LOGIN_SUCCESS:
+      return INIT_STATE;
+    case Action.USER_LOGOUT_FAILURE:
       return {
-        ...state,
-        authError: action.payload,
-        authErrorDetails: serializeError(action.payload.error),
+        user: INIT_STATE.user,
+        error: action.payload,
+        errorDetails: serializeError(action.payload.error),
       };
-
-    /** Temporary implementation */
-    //> loggedUser
-    case "SET_LOGGED_USER":
+    //> Person
+    case Action.USER_PERSON_GET_REQUEST:
+      return state;
+    case Action.USER_PERSON_GET_SUCCESS:
       return {
         ...state,
-        loggedUser: action.payload.fetchedUser,
+        user: {
+          ...state.user,
+          person: {
+            ...action.payload,
+          },
+        },
       };
-
-    case "REMOVE_LOGGED_USER":
+    case Action.USER_PERSON_GET_FAILURE:
       return {
         ...state,
-        loggedUser: null,
+        user: {
+          ...state.user,
+          person: {
+            ...INIT_STATE.user.person,
+          },
+        },
+        error: action.payload,
+        errorDetails: serializeError(action.payload.error),
       };
 
-    //> Default
     default:
       return state;
   }
@@ -154,11 +77,5 @@ const userReducer = (state = INIT_STATE, action) => {
 //#endregion
 
 //#region > Exports
-//> Default Component
 export default userReducer;
 //#endregion
-
-/**
- * SPDX-License-Identifier: (EUPL-1.2)
- * Copyright © 2019-2020 Simon Prast
- */
diff --git a/src/store/types.js b/src/store/types.js
new file mode 100644
index 0000000..5841504
--- /dev/null
+++ b/src/store/types.js
@@ -0,0 +1,11 @@
+export const USER_LOGIN_REQUEST = "USER_LOGIN_REQUEST";
+export const USER_LOGIN_FAILURE = "USER_LOGIN_FAILURE";
+export const USER_LOGIN_SUCCESS = "USER_LOGIN_SUCCESS";
+
+export const USER_LOGOUT_REQUEST = "USER_LOGOUT_REQUEST";
+export const USER_LOGOUT_FAILURE = "USER_LOGOUT_FAILURE";
+export const USER_LOGOUT_SUCCESS = "USER_LOGOUT_SUCCESS";
+
+export const USER_PERSON_GET_REQUEST = "USER_GET_PERSONS_REQUEST";
+export const USER_PERSON_GET_FAILURE = "USER_PERSON_GET_FAILURE";
+export const USER_PERSON_GET_SUCCESS = "USER_PERSON_GET_SUCCESS";

From 152b01c25588b1fdeefe90dbd1e8edbe309da4dd Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Mon, 7 Sep 2020 18:24:51 +0200
Subject: [PATCH 005/175] Adjust components to work with new user actions

LoginForm and HomePage have been adjusted to
work with the new user actions and state definition.
---
 src/components/molecules/forms/LoginForm/index.jsx | 2 +-
 src/components/pages/HomePage/index.jsx            | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/molecules/forms/LoginForm/index.jsx b/src/components/molecules/forms/LoginForm/index.jsx
index 07dcfab..4587077 100644
--- a/src/components/molecules/forms/LoginForm/index.jsx
+++ b/src/components/molecules/forms/LoginForm/index.jsx
@@ -17,7 +17,7 @@ import { connect } from "react-redux";
 
 //> Actions
 // Functions to send data from the application to the store
-import { loginAction } from "../../../../store/actions/authActions";
+import { loginAction } from "../../../../store/actions/userActions";
 //#endregion
 
 //#region > Components
diff --git a/src/components/pages/HomePage/index.jsx b/src/components/pages/HomePage/index.jsx
index 4c68119..4263505 100644
--- a/src/components/pages/HomePage/index.jsx
+++ b/src/components/pages/HomePage/index.jsx
@@ -106,7 +106,7 @@ class HomePage extends React.Component {
     const { loggedUser } = this.props;
     const activeActionCard = this.props.location?.state?.actionCard;
 
-    if (!loggedUser.anonymous) {
+    if (loggedUser.anonymous == false) {
       return <Redirect to={"/u/" + loggedUser.username} />;
     } else {
       return (
@@ -308,7 +308,7 @@ class HomePage extends React.Component {
 
 //#region > Redux Mapping
 const mapStateToProps = (state) => ({
-  loggedUser: state.auth.loggedUser,
+  loggedUser: state.user.user,
 });
 
 const mapDispatchToProps = (dispatch) => {

From 6056351601e2f15e1d9345a561973bd5fafa4803 Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Mon, 7 Sep 2020 20:03:15 +0200
Subject: [PATCH 006/175] Comment out a bit

Code was commented out to avoid errors caused by
deleting the actions.
---
 src/App.js                                       |  4 ++--
 src/Routes.js                                    | 14 +++++++-------
 src/components/molecules/Navbar/index.jsx        |  2 +-
 .../molecules/forms/RegisterForm/index.jsx       | 12 ++++++------
 .../molecules/modals/TalkUploadModal/index.jsx   |  4 ++--
 .../organisms/tabs/OverviewTab/index.jsx         |  4 ++--
 src/components/organisms/tabs/TalksTab/index.jsx |  4 ++--
 src/components/pages/ProfilePage/index.jsx       | 16 ++++++++--------
 src/components/pages/SettingsPage/index.jsx      | 12 ++++++------
 src/components/pages/TalkPage/index.jsx          |  4 ++--
 10 files changed, 38 insertions(+), 38 deletions(-)

diff --git a/src/App.js b/src/App.js
index bb0f031..56879af 100644
--- a/src/App.js
+++ b/src/App.js
@@ -13,7 +13,7 @@ import LoadingBarContainer from "react-redux-loading-bar";
 
 //> Actions
 // Functions to send data from the application to the store
-import { loginAction } from "./store/actions/authActions";
+import { loginAction } from "./store/actions/userActions";
 //> Components
 import { Footer, Navbar } from "./components/molecules";
 // Starts the page on top when reloaded or redirected
@@ -40,7 +40,7 @@ function App() {
       </header>
       <ScrollToTop>
         <div className="flyout">
-          <Navbar />
+          {/* <Navbar /> */}
           <main>
             <Routes />
           </main>
diff --git a/src/Routes.js b/src/Routes.js
index d981784..4762d9e 100644
--- a/src/Routes.js
+++ b/src/Routes.js
@@ -8,11 +8,11 @@ import { Route, Switch } from "react-router-dom";
 //> Components
 import {
   HomePage,
-  ProfilePage,
-  CompanyPage,
-  TalkPage,
-  SettingsPage,
-  TempPage,
+  //   ProfilePage,
+  //   CompanyPage,
+  //   TalkPage,
+  //   SettingsPage,
+  //   TempPage,
 } from "./components/pages";
 //#endregion
 
@@ -23,7 +23,7 @@ class Routes extends React.Component {
     return (
       <Switch>
         <Route exact path="/" component={(props) => <HomePage {...props} />} />
-        <Route
+        {/* <Route
           exact
           path="/u/:username"
           component={(props) => <ProfilePage {...props} />}
@@ -57,7 +57,7 @@ class Routes extends React.Component {
           exact
           path="/settings"
           component={(props) => <SettingsPage {...props} />}
-        />
+        /> */}
         <Route
           render={function () {
             return <h1>Not Found</h1>;
diff --git a/src/components/molecules/Navbar/index.jsx b/src/components/molecules/Navbar/index.jsx
index 9fd2ef1..0492413 100644
--- a/src/components/molecules/Navbar/index.jsx
+++ b/src/components/molecules/Navbar/index.jsx
@@ -186,7 +186,7 @@ Navbar.propTypes = {
 
 //#region > Redux Mapping
 const mapStateToProps = (state) => ({
-  loggedUser: { ...state.auth.loggedUser, ...state.user.loggedUser },
+  loggedUser: { ...state.user.user },
 });
 
 const mapDispatchToProps = (dispatch) => {
diff --git a/src/components/molecules/forms/RegisterForm/index.jsx b/src/components/molecules/forms/RegisterForm/index.jsx
index de06ae2..caebd6e 100644
--- a/src/components/molecules/forms/RegisterForm/index.jsx
+++ b/src/components/molecules/forms/RegisterForm/index.jsx
@@ -38,9 +38,9 @@ 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";
+// import { registerAction } from "../../../../store/actions/userActions";
+// import { fetchGitLabServersAction } from "../../../../store/actions/generalActions";
+// import { loginAction } from "../../../../store/actions/authActions";
 //#endregion
 
 //#region > Components
@@ -280,9 +280,9 @@ const mapStateToProps = (state) => ({
 
 const mapDispatchToProps = (dispatch) => {
   return {
-    register: (registrationData) => dispatch(registerAction(registrationData)),
-    login: (user) => dispatch(loginAction(user)),
-    fetchGitLabServers: () => dispatch(fetchGitLabServersAction()),
+    register: (registrationData) => dispatch((registrationData)),
+    login: (user) => dispatch((user)),
+    fetchGitLabServers: () => dispatch(),
   };
 };
 //#endregion
diff --git a/src/components/molecules/modals/TalkUploadModal/index.jsx b/src/components/molecules/modals/TalkUploadModal/index.jsx
index 59b3638..6b5a238 100644
--- a/src/components/molecules/modals/TalkUploadModal/index.jsx
+++ b/src/components/molecules/modals/TalkUploadModal/index.jsx
@@ -20,7 +20,7 @@ import { connect } from "react-redux";
 
 //> Actions
 // Functions to send data from the application to the store
-import { uploadTalkAction } from "../../../../store/actions/userActions";
+// import { uploadTalkAction } from "../../../../store/actions/userActions";
 //#endregion
 
 //#region > Components
@@ -160,7 +160,7 @@ const mapStateToProps = (state) => ({
 });
 
 const mapDispatchToProps = (dispatch) => {
-  return { uploadTalk: (file) => dispatch(uploadTalkAction(file)) };
+  return { uploadTalk: (file) => dispatch(file) };
 };
 //#endregion
 
diff --git a/src/components/organisms/tabs/OverviewTab/index.jsx b/src/components/organisms/tabs/OverviewTab/index.jsx
index 4fa4188..c4ce56d 100644
--- a/src/components/organisms/tabs/OverviewTab/index.jsx
+++ b/src/components/organisms/tabs/OverviewTab/index.jsx
@@ -14,7 +14,7 @@ import { connect } from "react-redux";
 
 //> Actions
 // Functions to send data from the application to the store
-import { writeCacheAction } from "../../../../store/actions/userActions";
+// import { writeCacheAction } from "../../../../store/actions/userActions";
 //> Style sheet
 import "./overviewtab.scss";
 //> Components
@@ -281,7 +281,7 @@ const mapStateToProps = (state) => ({
 
 const mapDispatchToProps = (dispatch) => {
   return {
-    writeCache: (platformData) => dispatch(writeCacheAction(platformData)),
+    writeCache: (platformData) => dispatch(platformData),
   };
 };
 //#endregion
diff --git a/src/components/organisms/tabs/TalksTab/index.jsx b/src/components/organisms/tabs/TalksTab/index.jsx
index 597b599..7098cfa 100644
--- a/src/components/organisms/tabs/TalksTab/index.jsx
+++ b/src/components/organisms/tabs/TalksTab/index.jsx
@@ -23,7 +23,7 @@ import { connect } from "react-redux";
 
 //> Actions
 // Functions to send data from the application to the store
-import { deleteTalkAction } from "../../../../store/actions/userActions";
+// import { deleteTalkAction } from "../../../../store/actions/userActions";
 //> Style sheet
 import "./talkstab.scss";
 //> Modules
@@ -220,7 +220,7 @@ const mapStateToProps = (state) => ({
 });
 
 const mapDispatchToProps = (dispatch) => {
-  return { deleteTalk: (talk) => dispatch(deleteTalkAction(talk)) };
+  return { deleteTalk: (talk) => dispatch(talk) };
 };
 //#endregion
 
diff --git a/src/components/pages/ProfilePage/index.jsx b/src/components/pages/ProfilePage/index.jsx
index ccacb82..ebfc5da 100644
--- a/src/components/pages/ProfilePage/index.jsx
+++ b/src/components/pages/ProfilePage/index.jsx
@@ -11,11 +11,11 @@ import { connect } from "react-redux";
 
 //> Actions
 // Functions to send data from the application to the store
-import {
-  readCacheAction,
-  updateCacheAction,
-  saveSettingsActions,
-} from "../../../store/actions/userActions";
+// import {
+//   readCacheAction,
+//   updateCacheAction,
+//   saveSettingsActions,
+// } from "../../../store/actions/userActions";
 //> Components
 import { SoftwareEngineer } from "../../organisms/profiles";
 //> Style sheet
@@ -138,9 +138,9 @@ const mapStateToProps = (state) => ({
 
 const mapDispatchToProps = (dispatch) => {
   return {
-    saveSettings: (nextSettings) => dispatch(saveSettingsActions(nextSettings)),
-    readCache: (username) => dispatch(readCacheAction(username)),
-    updateCache: (fetchedUser) => dispatch(updateCacheAction(fetchedUser)),
+    saveSettings: (nextSettings) => dispatch(nextSettings),
+    readCache: (username) => dispatch(username),
+    updateCache: (fetchedUser) => dispatch(fetchedUser),
   };
 };
 //#endregion
diff --git a/src/components/pages/SettingsPage/index.jsx b/src/components/pages/SettingsPage/index.jsx
index 8569662..e830a27 100644
--- a/src/components/pages/SettingsPage/index.jsx
+++ b/src/components/pages/SettingsPage/index.jsx
@@ -35,10 +35,10 @@ import { connect } from "react-redux";
 
 //> Actions
 // Functions to send data from the application to the store
-import {
-  readCacheAction,
-  saveSettingsActions,
-} from "../../../store/actions/userActions";
+// import {
+//   readCacheAction,
+//   saveSettingsActions,
+// } from "../../../store/actions/userActions";
 //> Components
 // Profile Picture Editor
 import { ProfilePictureModal } from "../../../components/molecules/modals";
@@ -574,8 +574,8 @@ const mapStateToProps = (state) => ({
 
 const mapDispatchToProps = (dispatch) => {
   return {
-    saveSettings: (nextSettings) => dispatch(saveSettingsActions(nextSettings)),
-    readCache: (username) => dispatch(readCacheAction(username)),
+    saveSettings: (nextSettings) => dispatch(nextSettings),
+    readCache: (username) => dispatch(username),
   };
 };
 //#endregion
diff --git a/src/components/pages/TalkPage/index.jsx b/src/components/pages/TalkPage/index.jsx
index dc4bb90..62392fb 100644
--- a/src/components/pages/TalkPage/index.jsx
+++ b/src/components/pages/TalkPage/index.jsx
@@ -27,7 +27,7 @@ import { connect } from "react-redux";
 
 //> Actions
 // Functions to send data from the application to the store
-import { getTalkAction } from "../../../store/actions/userActions";
+// import { getTalkAction } from "../../../store/actions/userActions";
 //> Style sheet
 import "./talk.scss";
 //#endregion
@@ -383,7 +383,7 @@ const mapStateToProps = (state) => ({
 });
 
 const mapDispatchToProps = (dispatch) => {
-  return { getTalk: (uid, username) => dispatch(getTalkAction(uid, username)) };
+  return { getTalk: (uid, username) => dispatch((uid, username)) };
 };
 //#endregion
 

From d6f8612e13f54a6739188020495679e904586042 Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Mon, 7 Sep 2020 20:17:19 +0200
Subject: [PATCH 007/175] Add person get action

Now it is possible to fetch persons which get stored in the store
as fetchedPerson.
---
 src/store/actions/personActions.js  | 34 ++++++++++++++++++++++
 src/store/reducers/index.js         |  4 +++
 src/store/reducers/personReducer.js | 44 +++++++++++++++++++++++++++++
 src/store/types.js                  |  4 +++
 4 files changed, 86 insertions(+)
 create mode 100644 src/store/reducers/personReducer.js

diff --git a/src/store/actions/personActions.js b/src/store/actions/personActions.js
index e69de29..51742be 100644
--- a/src/store/actions/personActions.js
+++ b/src/store/actions/personActions.js
@@ -0,0 +1,34 @@
+//#region > Imports
+//> Action Types
+import * as Action from "../types";
+//> Intel
+import INTEL_SNEK from "snek-intel/lib/utils/snek";
+//#endregion
+
+//#region > Person Actions
+/**
+ * Get person page for a logged user
+ */
+const getPerson = (personName) => {
+  return async (dispatch, getState, {}) => {
+    try {
+      dispatch({ type: Action.USER_PERSON_GET_REQUEST });
+
+      const person = await INTEL_SNEK.person.get({ personName });
+
+      dispatch({ type: Action.USER_PERSON_GET_SUCCESS, payload: person });
+    } catch (ex) {
+      dispatch({
+        type: Action.USER_PERSON_GET_FAILURE,
+        payload: {
+          errorCode: 601,
+          message: `Getting person (${personName}) failed`,
+          error: ex,
+        },
+      });
+    }
+  };
+};
+//#endregion
+
+export { getPerson };
diff --git a/src/store/reducers/index.js b/src/store/reducers/index.js
index 91c0430..9a0aa63 100644
--- a/src/store/reducers/index.js
+++ b/src/store/reducers/index.js
@@ -9,6 +9,8 @@ import { loadingBarReducer } from "react-redux-loading-bar";
 //> Reducers
 // User
 import userReducer from "./userReducers";
+// Person
+import personReducer from "./personReducer";
 //#endregion
 
 //#region > Config
@@ -17,6 +19,8 @@ const rootReducer = combineReducers({
   loadingBar: loadingBarReducer,
   // User data
   user: userReducer,
+  // Person data
+  person: personReducer,
 });
 //#endregion
 
diff --git a/src/store/reducers/personReducer.js b/src/store/reducers/personReducer.js
new file mode 100644
index 0000000..5648989
--- /dev/null
+++ b/src/store/reducers/personReducer.js
@@ -0,0 +1,44 @@
+//#region > Imports
+//> Error Serialization
+// Serialize/deserialize an error into a plain object
+import { serializeError } from "serialize-error";
+//> Action Types
+import * as Action from "../types";
+//#endregion
+
+//#region > Constant Variables
+const INIT_STATE = {
+  fetchedPerson: undefined,
+  error: undefined,
+  errorDetails: undefined,
+};
+//#endregion
+
+//#region > Reducers
+const userReducer = (state = INIT_STATE, action) => {
+  switch (action.type) {
+    //> Get
+    case Action.PERSON_GET_REQUEST:
+      return state;
+    case Action.PERSON_GET_SUCCESS:
+      return {
+        fetchedPerson: {
+          ...action.payload,
+        },
+      };
+    case Action.PERSON_GET_FAILURE:
+      return {
+        fetchedPerson: undefined,
+        error: action.payload,
+        errorDetails: serializeError(action.payload.error),
+      };
+
+    default:
+      return state;
+  }
+};
+//#endregion
+
+//#region > Exports
+export default userReducer;
+//#endregion
diff --git a/src/store/types.js b/src/store/types.js
index 5841504..20188b7 100644
--- a/src/store/types.js
+++ b/src/store/types.js
@@ -9,3 +9,7 @@ export const USER_LOGOUT_SUCCESS = "USER_LOGOUT_SUCCESS";
 export const USER_PERSON_GET_REQUEST = "USER_GET_PERSONS_REQUEST";
 export const USER_PERSON_GET_FAILURE = "USER_PERSON_GET_FAILURE";
 export const USER_PERSON_GET_SUCCESS = "USER_PERSON_GET_SUCCESS";
+
+export const PERSON_GET_REQUEST = "PERSON_GET_REQUEST";
+export const PERSON_GET_FAILURE = "PERSON_GET_FAILURE";
+export const PERSON_GET_SUCCESS = "PERSON_GET_SUCCESS";

From 794b9f02dabd15976fd25e20bf7fb3db45861e73 Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Mon, 7 Sep 2020 20:37:51 +0200
Subject: [PATCH 008/175] Rename import path for logout action

The logout action has been imported from another
location.
---
 src/components/molecules/Navbar/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/molecules/Navbar/index.jsx b/src/components/molecules/Navbar/index.jsx
index 0492413..98588b0 100644
--- a/src/components/molecules/Navbar/index.jsx
+++ b/src/components/molecules/Navbar/index.jsx
@@ -30,7 +30,7 @@ import { connect } from "react-redux";
 
 //> Actions
 // Functions to send data from the application to the store
-import { logoutAction } from "../../../store/actions/authActions";
+import { logoutAction } from "../../../store/actions/userActions";
 //> SearchBar
 import { SearchBar } from "../../atoms";
 //> Images

From 31a08a6ab8ed14c2327587c61e9cdb1b34cdaa64 Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Mon, 7 Sep 2020 20:44:11 +0200
Subject: [PATCH 009/175] Update profile page

Cleanup and person action integration
---
 src/components/pages/ProfilePage/index.jsx | 67 +++-------------------
 1 file changed, 7 insertions(+), 60 deletions(-)

diff --git a/src/components/pages/ProfilePage/index.jsx b/src/components/pages/ProfilePage/index.jsx
index ebfc5da..2c7a1a8 100644
--- a/src/components/pages/ProfilePage/index.jsx
+++ b/src/components/pages/ProfilePage/index.jsx
@@ -11,11 +11,7 @@ import { connect } from "react-redux";
 
 //> Actions
 // Functions to send data from the application to the store
-// import {
-//   readCacheAction,
-//   updateCacheAction,
-//   saveSettingsActions,
-// } from "../../../store/actions/userActions";
+import { getPerson } from "../../../store/actions/personActions";
 //> Components
 import { SoftwareEngineer } from "../../organisms/profiles";
 //> Style sheet
@@ -35,63 +31,17 @@ class ProfilePage extends React.Component {
     this.props.saveSettings(state);
   };
 
-  /**
-   * Check for refetch for a specific username.
-   *
-   * @param {string} username The username associated with a profile page
-   * @returns {boolean} True if a refetch is required otherwise False
-   */
-  refetchRequired = (username) => {
-    const fetchedUser = this.props.fetchedUser;
-
-    if (!fetchedUser) {
-      return true;
-    } else if (fetchedUser && !this.usernameMatchesFetchedUsername(username)) {
-      return true;
-    }
-
-    return false;
-  };
-
-  /**
-   * Check if the provided username matches with the current fetched user.
-   *
-   * @param {string} username The username associated with a profile page
-   * @returns {boolean} True if the usernames matches otherwise False
-   */
-  usernameMatchesFetchedUsername = (username) => {
-    return username === this.props.fetchedUser?.username;
-  };
-
   componentDidMount = () => {
     this._isMounted = true;
-
-    const { match, loggedUser, fetchedUser } = this.props;
+    const { match } = this.props;
     const username = match?.params?.username;
 
     if (username) {
-      if (this.refetchRequired(username)) {
-        this.props.readCache(username);
-      }
+      this.props.getPerson(username);
     }
   };
 
-  componentDidUpdate() {
-    const { loggedUser, fetchedUser } = this.props;
-
-    if (!this.props.cachingDone) {
-      if (
-        !loggedUser.anonymous &&
-        loggedUser.username === fetchedUser?.username
-      ) {
-        this.props.updateCache(fetchedUser).then(() => {
-          if (this._isMounted) {
-            this.props.readCache(loggedUser.username);
-          }
-        });
-      }
-    }
-  }
+  componentDidUpdate() {}
 
   componentWillUnmount() {
     this._isMounted = false;
@@ -131,16 +81,13 @@ class ProfilePage extends React.Component {
 
 //#region > Redux Mapping
 const mapStateToProps = (state) => ({
-  loggedUser: state.auth.loggedUser,
-  fetchedUser: state.user.fetchedUser,
-  cachingDone: state.user.cachingDone,
+  loggedUser: state.user.user,
+  fetchedPerson: state.person.fetchedPerson,
 });
 
 const mapDispatchToProps = (dispatch) => {
   return {
-    saveSettings: (nextSettings) => dispatch(nextSettings),
-    readCache: (username) => dispatch(username),
-    updateCache: (fetchedUser) => dispatch(fetchedUser),
+    getPerson: (personName) => dispatch(getPerson(personName)),
   };
 };
 //#endregion

From f49cfa4237e83504c866e7303968f2a62146350c Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Mon, 7 Sep 2020 20:44:49 +0200
Subject: [PATCH 010/175] Fix wrong dispatches in person action

Incorrect dispatches in the person action have
been fixed.
---
 src/store/actions/personActions.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/store/actions/personActions.js b/src/store/actions/personActions.js
index 51742be..5faa49b 100644
--- a/src/store/actions/personActions.js
+++ b/src/store/actions/personActions.js
@@ -12,14 +12,14 @@ import INTEL_SNEK from "snek-intel/lib/utils/snek";
 const getPerson = (personName) => {
   return async (dispatch, getState, {}) => {
     try {
-      dispatch({ type: Action.USER_PERSON_GET_REQUEST });
+      dispatch({ type: Action.PERSON_GET_REQUEST });
 
       const person = await INTEL_SNEK.person.get({ personName });
 
-      dispatch({ type: Action.USER_PERSON_GET_SUCCESS, payload: person });
+      dispatch({ type: Action.PERSON_GET_SUCCESS, payload: person });
     } catch (ex) {
       dispatch({
-        type: Action.USER_PERSON_GET_FAILURE,
+        type: Action.PERSON_GET_FAILURE,
         payload: {
           errorCode: 601,
           message: `Getting person (${personName}) failed`,

From 6b6eb5c3c98bf422520938983d6ab5838dba9548 Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Mon, 7 Sep 2020 20:52:44 +0200
Subject: [PATCH 011/175] Fix modals

Some non existent action has been removed.
---
 src/components/molecules/modals/AddSongModal/index.jsx        | 2 +-
 src/components/molecules/modals/AddVideoModal/index.jsx       | 2 +-
 src/components/molecules/modals/ImageModal/index.jsx          | 4 ++--
 .../molecules/modals/InstagramSelectorModal/index.jsx         | 2 +-
 src/components/molecules/modals/VideoModal/index.jsx          | 4 ++--
 src/components/organisms/sections/media/AIGallery/index.jsx   | 2 +-
 .../organisms/sections/media/AISongGallery/index.jsx          | 2 +-
 .../organisms/sections/media/AIVideoGallery/index.jsx         | 2 +-
 8 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/molecules/modals/AddSongModal/index.jsx b/src/components/molecules/modals/AddSongModal/index.jsx
index 8e4a33d..28adf45 100644
--- a/src/components/molecules/modals/AddSongModal/index.jsx
+++ b/src/components/molecules/modals/AddSongModal/index.jsx
@@ -120,7 +120,7 @@ class AddSongModal extends React.Component {
 
 //#region > Redux Mapping
 const mapStateToProps = (state) => ({
-  loggedUser: state.auth.loggedUser,
+  //loggedUser: state.auth.loggedUser,
 });
 
 const mapDispatchToProps = (dispatch) => {
diff --git a/src/components/molecules/modals/AddVideoModal/index.jsx b/src/components/molecules/modals/AddVideoModal/index.jsx
index 125b24b..9f1cd3e 100644
--- a/src/components/molecules/modals/AddVideoModal/index.jsx
+++ b/src/components/molecules/modals/AddVideoModal/index.jsx
@@ -134,7 +134,7 @@ class AddVideoModal extends React.Component {
 
 //#region > Redux Mapping
 const mapStateToProps = (state) => ({
-  loggedUser: state.auth.loggedUser,
+  //loggedUser: state.auth.loggedUser,
 });
 
 const mapDispatchToProps = (dispatch) => {
diff --git a/src/components/molecules/modals/ImageModal/index.jsx b/src/components/molecules/modals/ImageModal/index.jsx
index 4a84be0..8de2c59 100644
--- a/src/components/molecules/modals/ImageModal/index.jsx
+++ b/src/components/molecules/modals/ImageModal/index.jsx
@@ -83,11 +83,11 @@ class ImageModal extends React.Component {
 
 //#region > Redux Mapping
 const mapStateToProps = (state) => ({
-  loggedUser: state.auth.loggedUser,
+  //loggedUser: state.auth.loggedUser,
 });
 
 const mapDispatchToProps = (dispatch) => {
-  return null;
+  return {};
 };
 //#endregion
 
diff --git a/src/components/molecules/modals/InstagramSelectorModal/index.jsx b/src/components/molecules/modals/InstagramSelectorModal/index.jsx
index b014e8f..3e6c096 100644
--- a/src/components/molecules/modals/InstagramSelectorModal/index.jsx
+++ b/src/components/molecules/modals/InstagramSelectorModal/index.jsx
@@ -115,7 +115,7 @@ class InstagramSelectorModal extends React.Component {
 
 //#region > Redux Mapping
 const mapStateToProps = (state) => ({
-  loggedUser: state.auth.loggedUser,
+  //loggedUser: state.auth.loggedUser,
 });
 
 const mapDispatchToProps = (dispatch) => {
diff --git a/src/components/molecules/modals/VideoModal/index.jsx b/src/components/molecules/modals/VideoModal/index.jsx
index c3a649c..752a62d 100644
--- a/src/components/molecules/modals/VideoModal/index.jsx
+++ b/src/components/molecules/modals/VideoModal/index.jsx
@@ -59,11 +59,11 @@ class VideoModal extends React.Component {
 
 //#region > Redux Mapping
 const mapStateToProps = (state) => ({
-  loggedUser: state.auth.loggedUser,
+  //loggedUser: state.auth.loggedUser,
 });
 
 const mapDispatchToProps = (dispatch) => {
-  return null;
+  return {};
 };
 //#endregion
 
diff --git a/src/components/organisms/sections/media/AIGallery/index.jsx b/src/components/organisms/sections/media/AIGallery/index.jsx
index 50c287d..82aca79 100644
--- a/src/components/organisms/sections/media/AIGallery/index.jsx
+++ b/src/components/organisms/sections/media/AIGallery/index.jsx
@@ -158,7 +158,7 @@ class AIGallery extends React.Component {
 
 //#region > Redux Mapping
 const mapStateToProps = (state) => ({
-  loggedUser: state.auth.loggedUser,
+  //loggedUser: state.auth.loggedUser,
 });
 
 const mapDispatchToProps = (dispatch) => {
diff --git a/src/components/organisms/sections/media/AISongGallery/index.jsx b/src/components/organisms/sections/media/AISongGallery/index.jsx
index be77665..24b5779 100644
--- a/src/components/organisms/sections/media/AISongGallery/index.jsx
+++ b/src/components/organisms/sections/media/AISongGallery/index.jsx
@@ -120,7 +120,7 @@ class AISongGallery extends React.Component {
 
 //#region > Redux Mapping
 const mapStateToProps = (state) => ({
-  loggedUser: state.auth.loggedUser,
+  //loggedUser: state.auth.loggedUser,
 });
 
 const mapDispatchToProps = (dispatch) => {
diff --git a/src/components/organisms/sections/media/AIVideoGallery/index.jsx b/src/components/organisms/sections/media/AIVideoGallery/index.jsx
index dd24ea7..7733519 100644
--- a/src/components/organisms/sections/media/AIVideoGallery/index.jsx
+++ b/src/components/organisms/sections/media/AIVideoGallery/index.jsx
@@ -168,7 +168,7 @@ class AIVideoGallery extends React.Component {
 
 //#region > Redux Mapping
 const mapStateToProps = (state) => ({
-  loggedUser: state.auth.loggedUser,
+  //loggedUser: state.auth.loggedUser,
 });
 
 const mapDispatchToProps = (dispatch) => {

From 953de6a1248792e3fac69720a5f031fe4e3b43b4 Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Mon, 7 Sep 2020 21:12:57 +0200
Subject: [PATCH 012/175] Add ConnectModal

The modal to connect other accounts has been added.
---
 src/Routes.js                                 |  18 +-
 .../molecules/modals/ConnectModal/index.jsx   | 192 ++++++++++++++++++
 src/components/molecules/modals/index.js      |   2 +
 src/components/pages/TempPage/index.jsx       |  29 ++-
 4 files changed, 215 insertions(+), 26 deletions(-)
 create mode 100644 src/components/molecules/modals/ConnectModal/index.jsx

diff --git a/src/Routes.js b/src/Routes.js
index 4762d9e..fbea44b 100644
--- a/src/Routes.js
+++ b/src/Routes.js
@@ -8,11 +8,11 @@ import { Route, Switch } from "react-router-dom";
 //> Components
 import {
   HomePage,
-  //   ProfilePage,
-  //   CompanyPage,
+  ProfilePage,
+  CompanyPage,
   //   TalkPage,
   //   SettingsPage,
-  //   TempPage,
+  TempPage,
 } from "./components/pages";
 //#endregion
 
@@ -23,7 +23,7 @@ class Routes extends React.Component {
     return (
       <Switch>
         <Route exact path="/" component={(props) => <HomePage {...props} />} />
-        {/* <Route
+        <Route
           exact
           path="/u/:username"
           component={(props) => <ProfilePage {...props} />}
@@ -33,16 +33,16 @@ class Routes extends React.Component {
           path="/c/:name"
           component={(props) => <CompanyPage {...props} />}
         />
-        <Route
-          exact
-          path="/t/:username/:uid"
-          component={(props) => <TalkPage {...props} />}
-        />
         <Route
           exact
           path="/temp"
           component={(props) => <TempPage {...props} />}
         />
+        {/* <Route
+          exact
+          path="/t/:username/:uid"
+          component={(props) => <TalkPage {...props} />}
+        />
         <Route
           exact
           path="/redirect"
diff --git a/src/components/molecules/modals/ConnectModal/index.jsx b/src/components/molecules/modals/ConnectModal/index.jsx
new file mode 100644
index 0000000..1cf83cd
--- /dev/null
+++ b/src/components/molecules/modals/ConnectModal/index.jsx
@@ -0,0 +1,192 @@
+//#region > Imports
+//> React
+// Contains all the functionality necessary to define React components
+import React from "react";
+//> Time management
+import moment from "moment";
+//> Redux
+// Allows React components to read data, update data and dispatch actions
+// from/to a Redux store.
+import { connect } from "react-redux";
+//> MDB
+// "Material Design for Bootstrap" is a great UI design framework
+import {
+  MDBBtn,
+  MDBModal,
+  MDBModalBody,
+  MDBIcon,
+  MDBFormInline,
+  MDBRow,
+  MDBCol,
+  MDBModalFooter,
+  MDBModalHeader,
+  MDBSelect,
+  MDBSelectInput,
+  MDBSelectOption,
+  MDBSelectOptions,
+} from "mdbreact";
+//#endregion
+
+//#region > Components
+class ConnectModal extends React.Component {
+  state = { youtubeLink: "", modalGitLab: false };
+
+  toggle = () => {
+    this.setState({ modalGitLab: !this.state.modalGitLab });
+  };
+
+  render() {
+    const { selectedVideoId } = this.props;
+
+    return (
+      <>
+        <MDBModal
+          isOpen={this.state.modalGitLab ? false : true}
+          toggle={this.props.toggle}
+          size="md"
+          centered
+          animation="left"
+        >
+          <MDBModalBody className="p-3 text-center">
+            <div className="d-flex justify-content-between align-items-center">
+              <p className="lead mb-0">Connect your profiles</p>
+              <MDBBtn color="green" onClick={this.props.toggle}>
+                Done
+              </MDBBtn>
+            </div>
+            <div className="pt-4 text-center">
+              <MDBRow className="justify-content-center">
+                <MDBCol lg="7">
+                  <MDBBtn
+                    social="git"
+                    size="lg"
+                    className="d-block mx-auto w-100"
+                  >
+                    <MDBIcon fab icon="github" />
+                    Connect GitHub
+                  </MDBBtn>
+                  <MDBBtn
+                    color="orange"
+                    size="lg"
+                    className="d-block mx-auto w-100"
+                    onClick={this.toggle}
+                  >
+                    <MDBIcon fab icon="gitlab" />
+                    Connect GitLab
+                  </MDBBtn>
+                  <MDBBtn
+                    social="ins"
+                    size="lg"
+                    className="d-block mx-auto w-100"
+                  >
+                    <MDBIcon fab icon="instagram" />
+                    Connect Instagram
+                  </MDBBtn>
+                </MDBCol>
+              </MDBRow>
+            </div>
+            {this.state.youtubeId && (
+              <div className="embed-responsive embed-responsive-16by9 mt-3">
+                <iframe
+                  className="embed-responsive-item"
+                  title="YouTube Video"
+                  src={"//www.youtube.com/embed/" + this.state.youtubeId}
+                  frameBorder="0"
+                  allowFullScreen
+                ></iframe>
+              </div>
+            )}
+          </MDBModalBody>
+        </MDBModal>
+        {this.state.modalGitLab && (
+          <MDBModal
+            className="text-white"
+            size="sm"
+            backdrop={true}
+            isOpen={this.state.modalGitLab}
+            toggle={this.toggle}
+            centered
+            animation="left"
+          >
+            <MDBModalHeader
+              className="text-center"
+              titleClass="w-100 text-dark"
+              tag="p"
+            >
+              <MDBIcon fab icon="gitlab" className="pr-2" />
+              Add GitLab profile
+            </MDBModalHeader>
+            <MDBModalBody className="text-center">
+              <input
+                type="text"
+                className="form-control mb-2"
+                placeholder="GitLab username"
+                name="gitlab_username"
+                onChange={(e) =>
+                  this.setState({ [e.target.name]: e.target.value })
+                }
+                value={this.state.gitlab_username}
+              />
+              <MDBSelect
+                outline
+                getValue={this.handleSelectChange}
+                className="mb-0"
+              >
+                <MDBSelectInput selected={this.state.gitlab_server} />
+                <MDBSelectOptions>
+                  <MDBSelectOption disabled>
+                    Choose your organisation
+                  </MDBSelectOption>
+                  {this.state.gitlab_servers &&
+                    this.state.gitlab_servers.map((source, i) => {
+                      return (
+                        <MDBSelectOption key={i} value={source.domain}>
+                          {source.organisation}
+                        </MDBSelectOption>
+                      );
+                    })}
+                </MDBSelectOptions>
+              </MDBSelect>
+            </MDBModalBody>
+            <MDBModalFooter className="justify-content-center">
+              <MDBBtn color="orange" onClick={this.addGitLab}>
+                <MDBIcon icon="plus-circle" className="mr-2" />
+                Add
+              </MDBBtn>
+              <MDBBtn color="elegant" outline onClick={this.toggle}>
+                Cancel
+              </MDBBtn>
+            </MDBModalFooter>
+          </MDBModal>
+        )}
+      </>
+    );
+  }
+}
+//#endregion
+
+//#region > Redux Mapping
+const mapStateToProps = (state) => ({
+  //loggedUser: state.auth.loggedUser,
+});
+
+const mapDispatchToProps = (dispatch) => {
+  return {};
+};
+//#endregion
+
+//#region > Exports
+/**
+ * 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.
+ *
+ * Got access to the history object’s properties and the closest
+ * <Route>'s match.
+ */
+export default connect(mapStateToProps, mapDispatchToProps)(ConnectModal);
+//#endregion
+
+/**
+ * SPDX-License-Identifier: (EUPL-1.2)
+ * Copyright © 2019-2020 Simon Prast
+ */
diff --git a/src/components/molecules/modals/index.js b/src/components/molecules/modals/index.js
index 5de1d91..5305d5d 100644
--- a/src/components/molecules/modals/index.js
+++ b/src/components/molecules/modals/index.js
@@ -8,6 +8,7 @@ import VideoModal from "./VideoModal";
 import AddVideoModal from "./AddVideoModal";
 import InstagramSelectorModal from "./InstagramSelectorModal";
 import AddSongModal from "./AddSongModal";
+import ConnectModal from "./ConnectModal";
 //#endregion
 
 //#region > Exports
@@ -21,6 +22,7 @@ export {
   AddVideoModal,
   InstagramSelectorModal,
   AddSongModal,
+  ConnectModal,
 };
 //#endregion
 
diff --git a/src/components/pages/TempPage/index.jsx b/src/components/pages/TempPage/index.jsx
index c9872fc..052e28d 100644
--- a/src/components/pages/TempPage/index.jsx
+++ b/src/components/pages/TempPage/index.jsx
@@ -10,7 +10,7 @@ import { withRouter } from "react-router-dom";
 import { connect } from "react-redux";
 //> MDB
 // "Material Design for Bootstrap" is a great UI design framework
-import { MDBContainer } from "mdbreact";
+import { MDBContainer, MDBBtn } from "mdbreact";
 
 //> Components
 import {
@@ -18,19 +18,26 @@ import {
   AIVideoGallery,
   AISongGallery,
 } from "../../organisms/sections/media";
+import { ConnectModal } from "../../molecules/modals";
 //#endregion
 
 //#region > Components
 class TempPage extends React.Component {
-  state = {};
+  state = { connect: true };
 
   componentDidMount = () => {};
 
-  render() {
-    const { loggedUser } = this.props;
+  toggleConnect = () => {
+    this.setState({
+      connect: !this.state.connect,
+    });
+  };
 
+  render() {
     return (
       <MDBContainer id="media">
+        {this.state.connect && <ConnectModal toggle={this.toggleConnect} />}
+
         <AIGallery />
         <AIVideoGallery />
         <AISongGallery />
@@ -40,16 +47,6 @@ class TempPage extends React.Component {
 }
 //#endregion
 
-//#region > Redux Mapping
-const mapStateToProps = (state) => ({
-  loggedUser: state.auth.loggedUser,
-});
-
-const mapDispatchToProps = (dispatch) => {
-  return {};
-};
-//#endregion
-
 //#region > Exports
 /**
  * Provides its connected component with the pieces of the data it needs from
@@ -58,9 +55,7 @@ const mapDispatchToProps = (dispatch) => {
  * Got access to the history object’s properties and the closest
  * <Route>'s match.
  */
-export default withRouter(
-  connect(mapStateToProps, mapDispatchToProps)(TempPage)
-);
+export default TempPage;
 //#endregion
 
 /**

From 24118e2c069103508e676a0b5fafb1a5767d50f6 Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Mon, 7 Sep 2020 21:32:25 +0200
Subject: [PATCH 013/175] Improve ConnectModal

Some functions have been introduced.
---
 .../molecules/modals/ConnectModal/index.jsx   | 41 ++++++++++++++++++-
 1 file changed, 39 insertions(+), 2 deletions(-)

diff --git a/src/components/molecules/modals/ConnectModal/index.jsx b/src/components/molecules/modals/ConnectModal/index.jsx
index 1cf83cd..d8877f7 100644
--- a/src/components/molecules/modals/ConnectModal/index.jsx
+++ b/src/components/molecules/modals/ConnectModal/index.jsx
@@ -25,16 +25,49 @@ import {
   MDBSelectOption,
   MDBSelectOptions,
 } from "mdbreact";
+
+//> Actions
+// Functions to send data from the application to the store
+//import { fetchGitLabServersAction } from "../../../../store/actions/generalActions";
 //#endregion
 
 //#region > Components
 class ConnectModal extends React.Component {
   state = { youtubeLink: "", modalGitLab: false };
 
+  componentDidMount = () => {
+    this.getGitLabServers();
+  };
+
+  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,
+        });
+      });*/
+    }
+  };
+
+  // Activate or deactivate GitLab modal
   toggle = () => {
     this.setState({ modalGitLab: !this.state.modalGitLab });
   };
 
+  addGitLab = () => {
+    // Do stuff
+  };
+
+  addGitHub = () => {
+    // Do stuff
+  };
+
+  addInstagram = () => {
+    // Do stuff
+  };
+
   render() {
     const { selectedVideoId } = this.props;
 
@@ -61,6 +94,7 @@ class ConnectModal extends React.Component {
                     social="git"
                     size="lg"
                     className="d-block mx-auto w-100"
+                    onClick={() => this.addGitHub()}
                   >
                     <MDBIcon fab icon="github" />
                     Connect GitHub
@@ -78,6 +112,7 @@ class ConnectModal extends React.Component {
                     social="ins"
                     size="lg"
                     className="d-block mx-auto w-100"
+                    onClick={() => this.addInstagram()}
                   >
                     <MDBIcon fab icon="instagram" />
                     Connect Instagram
@@ -167,11 +202,13 @@ class ConnectModal extends React.Component {
 
 //#region > Redux Mapping
 const mapStateToProps = (state) => ({
-  //loggedUser: state.auth.loggedUser,
+  //gitlabServers: state.general.allGitlabServers,
 });
 
 const mapDispatchToProps = (dispatch) => {
-  return {};
+  return {
+    //fetchGitLabServers: () => dispatch(fetchGitLabServersAction())
+  };
 };
 //#endregion
 

From 5e21ca15869f84211aee5eacdefc969a39515f45 Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Mon, 7 Sep 2020 21:34:18 +0200
Subject: [PATCH 014/175] Update search functionallity

Now it is possible again to search users.
---
 src/App.js                               |  2 +-
 src/components/atoms/SearchBar/index.jsx | 24 ++++++++++----------
 src/store/actions/personActions.js       | 28 +++++++++++++++++++++++-
 src/store/reducers/personReducer.js      | 18 +++++++++++++++
 src/store/types.js                       |  4 ++++
 5 files changed, 63 insertions(+), 13 deletions(-)

diff --git a/src/App.js b/src/App.js
index 56879af..3bb75b2 100644
--- a/src/App.js
+++ b/src/App.js
@@ -40,7 +40,7 @@ function App() {
       </header>
       <ScrollToTop>
         <div className="flyout">
-          {/* <Navbar /> */}
+          <Navbar />
           <main>
             <Routes />
           </main>
diff --git a/src/components/atoms/SearchBar/index.jsx b/src/components/atoms/SearchBar/index.jsx
index 32204fc..bf2f23d 100644
--- a/src/components/atoms/SearchBar/index.jsx
+++ b/src/components/atoms/SearchBar/index.jsx
@@ -22,7 +22,7 @@ import { connect } from "react-redux";
 
 //> Actions
 // Functions to send data from the application to the store
-import { getUserSearchItems } from "../../../store/actions/generalActions";
+import { getPersonsBrief } from "../../../store/actions/personActions";
 //> Style sheet
 import "./search.scss";
 //#endregion
@@ -52,8 +52,6 @@ class SearchBar extends React.Component {
   handleSelection = (event, value) => {
     if (event === "user") {
       this.props.history.push("/u/" + value);
-    } else if (event === "search_page") {
-      this.props.history.push("/search?q=" + value);
     }
   };
 
@@ -84,24 +82,28 @@ class SearchBar extends React.Component {
         <MDBSelectInput selected="Find a user" />
         <MDBSelectOptions search searchLabel="">
           {!this.state.loading && this.state.searchItems ? (
-            this.state.searchItems.length > 0 && this.state.filter.length > 0 ? (
-
+            this.state.searchItems.length > 0 &&
+            this.state.filter.length > 0 ? (
               fuzzysort
                 .go(this.state.filter, this.state.searchItems, { key: "title" })
                 .map((element, i) => {
                   return (
                     <MDBSelectOption
                       key={i}
-                      icon={"https://octodex.github.com/images/nyantocat.gif"}
+                      icon={
+                        element.obj.avatarImage?.src
+                          ? element.obj.avatarImage?.src
+                          : "https://octodex.github.com/images/nyantocat.gif"
+                      }
                     >
-                      {element.target}
+                      {element.obj.slug.split("-")[1]}
                     </MDBSelectOption>
                   );
                 })
             ) : null
           ) : (
-              <span>Loading</span>
-            )}
+            <span>Loading</span>
+          )}
         </MDBSelectOptions>
       </MDBSelect>
     );
@@ -111,12 +113,12 @@ class SearchBar extends React.Component {
 
 //#region > Redux Mapping
 const mapStateToProps = (state) => ({
-  allUserSearchItems: state.general.allUserSearchItems,
+  allUserSearchItems: state.person.allPersonBrief,
 });
 
 const mapDispatchToProps = (dispatch) => {
   return {
-    allsearchItems: () => dispatch(getUserSearchItems()),
+    allsearchItems: () => dispatch(getPersonsBrief()),
   };
 };
 //#endregion
diff --git a/src/store/actions/personActions.js b/src/store/actions/personActions.js
index 5faa49b..4ed260d 100644
--- a/src/store/actions/personActions.js
+++ b/src/store/actions/personActions.js
@@ -29,6 +29,32 @@ const getPerson = (personName) => {
     }
   };
 };
+
+/**
+ * Get all person in a brief form
+ */
+const getPersonsBrief = () => {
+  return async (dispatch, getState, {}) => {
+    try {
+      dispatch({ type: Action.PERSONS_BRIEF_GET_REQUEST });
+
+      const persons = await INTEL_SNEK.person.allBrief();
+
+      console.log(persons);
+
+      dispatch({ type: Action.PERSONS_BRIEF_GET_SUCCESS, payload: persons });
+    } catch (ex) {
+      dispatch({
+        type: Action.PERSONS_BRIEF_GET_FAILURE,
+        payload: {
+          errorCode: 601,
+          message: "Getting all person in a brief form failed",
+          error: ex,
+        },
+      });
+    }
+  };
+};
 //#endregion
 
-export { getPerson };
+export { getPerson, getPersonsBrief };
diff --git a/src/store/reducers/personReducer.js b/src/store/reducers/personReducer.js
index 5648989..b3e930c 100644
--- a/src/store/reducers/personReducer.js
+++ b/src/store/reducers/personReducer.js
@@ -9,6 +9,7 @@ import * as Action from "../types";
 //#region > Constant Variables
 const INIT_STATE = {
   fetchedPerson: undefined,
+  allPersonBrief: undefined,
   error: undefined,
   errorDetails: undefined,
 };
@@ -22,16 +23,33 @@ const userReducer = (state = INIT_STATE, action) => {
       return state;
     case Action.PERSON_GET_SUCCESS:
       return {
+        ...state,
         fetchedPerson: {
           ...action.payload,
         },
       };
     case Action.PERSON_GET_FAILURE:
       return {
+        ...state,
         fetchedPerson: undefined,
         error: action.payload,
         errorDetails: serializeError(action.payload.error),
       };
+    //> Get all brief
+    case Action.PERSONS_BRIEF_GET_REQUEST:
+      return state;
+    case Action.PERSONS_BRIEF_GET_SUCCESS:
+      return {
+        ...state,
+        allPersonBrief: action.payload,
+      };
+    case Action.PERSONS_BRIEF_GET_FAILURE:
+      return {
+        ...state,
+        allPersonBrief: undefined,
+        error: action.payload,
+        errorDetails: serializeError(action.payload.error),
+      };
 
     default:
       return state;
diff --git a/src/store/types.js b/src/store/types.js
index 20188b7..b84ad4a 100644
--- a/src/store/types.js
+++ b/src/store/types.js
@@ -13,3 +13,7 @@ export const USER_PERSON_GET_SUCCESS = "USER_PERSON_GET_SUCCESS";
 export const PERSON_GET_REQUEST = "PERSON_GET_REQUEST";
 export const PERSON_GET_FAILURE = "PERSON_GET_FAILURE";
 export const PERSON_GET_SUCCESS = "PERSON_GET_SUCCESS";
+
+export const PERSONS_BRIEF_GET_REQUEST = "PERSONS_BRIEF_GET_REQUEST";
+export const PERSONS_BRIEF_GET_FAILURE = "PERSON_BRIEF_GET_FAILURE";
+export const PERSONS_BRIEF_GET_SUCCESS = "PERSON_BRIEF_GET_SUCCESS";

From 76976c1ac95c2f387095f924a32c812b83d0489b Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Mon, 7 Sep 2020 21:50:44 +0200
Subject: [PATCH 015/175] Add general reducers

A action for getting all gitlab servers for registration
has been added.
---
 src/store/actions/generalActions.js   | 38 +++++++++++++++++++++++
 src/store/reducers/generalReducers.js | 44 +++++++++++++++++++++++++++
 src/store/reducers/index.js           |  5 +++
 src/store/types.js                    |  6 ++++
 4 files changed, 93 insertions(+)
 create mode 100644 src/store/actions/generalActions.js
 create mode 100644 src/store/reducers/generalReducers.js

diff --git a/src/store/actions/generalActions.js b/src/store/actions/generalActions.js
new file mode 100644
index 0000000..c8159a8
--- /dev/null
+++ b/src/store/actions/generalActions.js
@@ -0,0 +1,38 @@
+//#region > Imports
+//> Action Types
+import * as Action from "../types";
+//> Intel
+import INTEL_SNEK from "snek-intel/lib/utils/snek";
+//#endregion
+
+//#region > Person Actions
+/**
+ * Get all gitlab servers for registration
+ */
+const getGitlabServers = () => {
+  return async (dispatch, getState, {}) => {
+    try {
+      dispatch({ type: Action.GENERAL_GITLAB_SERVER_GET_REQUEST });
+
+      const servers = await INTEL_SNEK.general.getGitlabServer();
+
+      dispatch({
+        type: Action.GENERAL_GITLAB_SERVER_GET_SUCCESS,
+        payload: servers,
+      });
+    } catch (ex) {
+      dispatch({
+        type: Action.GENERAL_GITLAB_SERVER_GET_FAILURE,
+        payload: {
+          errorCode: 601,
+          message: `Getting person (${personName}) failed`,
+          error: ex,
+        },
+      });
+    }
+  };
+};
+
+//#endregion
+
+export { getPerson, getPersonsBrief };
diff --git a/src/store/reducers/generalReducers.js b/src/store/reducers/generalReducers.js
new file mode 100644
index 0000000..ecc2333
--- /dev/null
+++ b/src/store/reducers/generalReducers.js
@@ -0,0 +1,44 @@
+//#region > Imports
+//> Error Serialization
+// Serialize/deserialize an error into a plain object
+import { serializeError } from "serialize-error";
+//> Action Types
+import * as Action from "../types";
+//#endregion
+
+//#region > Constant Variables
+const INIT_STATE = {
+  gitlabServer: undefined,
+  error: undefined,
+  errorDetails: undefined,
+};
+//#endregion
+
+//#region > Reducers
+const generalReducer = (state = INIT_STATE, action) => {
+  switch (action.type) {
+    //> Get all gitlab server
+    case Action.GENERAL_GITLAB_SERVER_GET_REQUEST:
+      return state;
+    case Action.GENERAL_GITLAB_SERVER_GET_FAILURE:
+      return {
+        ...state,
+        gitlabServer: action.payload,
+      };
+    case Action.GENERAL_GITLAB_SERVER_GET_SUCCESS:
+      return {
+        ...state,
+        gitlabServer: undefined,
+        error: action.payload,
+        errorDetails: serializeError(action.payload.error),
+      };
+
+    default:
+      return state;
+  }
+};
+//#endregion
+
+//#region > Exports
+export default generalReducer;
+//#endregion
diff --git a/src/store/reducers/index.js b/src/store/reducers/index.js
index 9a0aa63..c77f7a2 100644
--- a/src/store/reducers/index.js
+++ b/src/store/reducers/index.js
@@ -11,6 +11,9 @@ import { loadingBarReducer } from "react-redux-loading-bar";
 import userReducer from "./userReducers";
 // Person
 import personReducer from "./personReducer";
+// General
+import generalReducers from "./generalReducers";
+
 //#endregion
 
 //#region > Config
@@ -21,6 +24,8 @@ const rootReducer = combineReducers({
   user: userReducer,
   // Person data
   person: personReducer,
+  // General data
+  general: generalReducers,
 });
 //#endregion
 
diff --git a/src/store/types.js b/src/store/types.js
index b84ad4a..e0d3fcc 100644
--- a/src/store/types.js
+++ b/src/store/types.js
@@ -17,3 +17,9 @@ export const PERSON_GET_SUCCESS = "PERSON_GET_SUCCESS";
 export const PERSONS_BRIEF_GET_REQUEST = "PERSONS_BRIEF_GET_REQUEST";
 export const PERSONS_BRIEF_GET_FAILURE = "PERSON_BRIEF_GET_FAILURE";
 export const PERSONS_BRIEF_GET_SUCCESS = "PERSON_BRIEF_GET_SUCCESS";
+export const GENERAL_GITLAB_SERVER_GET_REQUEST =
+  "GENERAL_GITLAB_SERVER_GET_REQUEST";
+export const GENERAL_GITLAB_SERVER_GET_FAILURE =
+  "GENERAL_GITLAB_SERVER_GET_FAILURE";
+export const GENERAL_GITLAB_SERVER_GET_SUCCESS =
+  "GENERAL_GITLAB_SERVER_GET_SUCCESS";

From cc25e35a9d92df6fa354fd49f4b5f907b867e399 Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Mon, 7 Sep 2020 21:52:08 +0200
Subject: [PATCH 016/175] Improve ConnectModal

Some more functionality has been added.
---
 src/components/molecules/modals/ConnectModal/index.jsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/molecules/modals/ConnectModal/index.jsx b/src/components/molecules/modals/ConnectModal/index.jsx
index d8877f7..2634af8 100644
--- a/src/components/molecules/modals/ConnectModal/index.jsx
+++ b/src/components/molecules/modals/ConnectModal/index.jsx
@@ -57,7 +57,15 @@ class ConnectModal extends React.Component {
   };
 
   addGitLab = () => {
-    // Do stuff
+    // Deactivate GitLab modal
+    this.setState(
+      {
+        modalGitLab: false,
+      },
+      () => {
+        // Do stuff
+      }
+    );
   };
 
   addGitHub = () => {

From 7abb34e95855a20e7196586fd631fad7774bab87 Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Mon, 7 Sep 2020 21:52:34 +0200
Subject: [PATCH 017/175] Improve store

Types have been improved.
Naming has been improved.
---
 src/store/actions/generalActions.js           |  6 ++--
 src/store/actions/personActions.js            | 15 ++++----
 src/store/actions/userActions.js              |  6 ++--
 src/store/reducers/generalReducers.js         |  6 ++--
 .../{personReducer.js => personReducers.js}   | 12 +++----
 src/store/reducers/userReducers.js            |  6 ++--
 src/store/types.js                            | 34 +++++++++++--------
 7 files changed, 46 insertions(+), 39 deletions(-)
 rename src/store/reducers/{personReducer.js => personReducers.js} (81%)

diff --git a/src/store/actions/generalActions.js b/src/store/actions/generalActions.js
index c8159a8..f1ebb4f 100644
--- a/src/store/actions/generalActions.js
+++ b/src/store/actions/generalActions.js
@@ -12,17 +12,17 @@ import INTEL_SNEK from "snek-intel/lib/utils/snek";
 const getGitlabServers = () => {
   return async (dispatch, getState, {}) => {
     try {
-      dispatch({ type: Action.GENERAL_GITLAB_SERVER_GET_REQUEST });
+      dispatch({ type: Action.GENERAL_GITLAB_SERVER_FETCH_REQUEST });
 
       const servers = await INTEL_SNEK.general.getGitlabServer();
 
       dispatch({
-        type: Action.GENERAL_GITLAB_SERVER_GET_SUCCESS,
+        type: Action.GENERAL_GITLAB_SERVER_FETCH_SUCCESS,
         payload: servers,
       });
     } catch (ex) {
       dispatch({
-        type: Action.GENERAL_GITLAB_SERVER_GET_FAILURE,
+        type: Action.GENERAL_GITLAB_SERVER_FETCH_FAILURE,
         payload: {
           errorCode: 601,
           message: `Getting person (${personName}) failed`,
diff --git a/src/store/actions/personActions.js b/src/store/actions/personActions.js
index 4ed260d..08778c9 100644
--- a/src/store/actions/personActions.js
+++ b/src/store/actions/personActions.js
@@ -12,14 +12,14 @@ import INTEL_SNEK from "snek-intel/lib/utils/snek";
 const getPerson = (personName) => {
   return async (dispatch, getState, {}) => {
     try {
-      dispatch({ type: Action.PERSON_GET_REQUEST });
+      dispatch({ type: Action.PERSON_FETCH_REQUEST });
 
       const person = await INTEL_SNEK.person.get({ personName });
 
-      dispatch({ type: Action.PERSON_GET_SUCCESS, payload: person });
+      dispatch({ type: Action.PERSON_FETCH_SUCCESS, payload: person });
     } catch (ex) {
       dispatch({
-        type: Action.PERSON_GET_FAILURE,
+        type: Action.PERSON_FETCH_FAILURE,
         payload: {
           errorCode: 601,
           message: `Getting person (${personName}) failed`,
@@ -36,16 +36,19 @@ const getPerson = (personName) => {
 const getPersonsBrief = () => {
   return async (dispatch, getState, {}) => {
     try {
-      dispatch({ type: Action.PERSONS_BRIEF_GET_REQUEST });
+      dispatch({ type: Action.PERSON_PERSONS_BRIEF_FETCH_REQUEST });
 
       const persons = await INTEL_SNEK.person.allBrief();
 
       console.log(persons);
 
-      dispatch({ type: Action.PERSONS_BRIEF_GET_SUCCESS, payload: persons });
+      dispatch({
+        type: Action.PERSON_PERSONS_BRIEF_FETCH_SUCCESS,
+        payload: persons,
+      });
     } catch (ex) {
       dispatch({
-        type: Action.PERSONS_BRIEF_GET_FAILURE,
+        type: Action.PERSON_PERSONS_BRIEF_FETCH_FAILURE,
         payload: {
           errorCode: 601,
           message: "Getting all person in a brief form failed",
diff --git a/src/store/actions/userActions.js b/src/store/actions/userActions.js
index f1a5e9e..1403df3 100644
--- a/src/store/actions/userActions.js
+++ b/src/store/actions/userActions.js
@@ -84,14 +84,14 @@ const logoutAction = () => {
 const getPerson = (personName) => {
   return async (dispatch, getState, {}) => {
     try {
-      dispatch({ type: Action.USER_PERSON_GET_REQUEST });
+      dispatch({ type: Action.USER_PERSON_FETCH_REQUEST });
 
       const person = await INTEL_SNEK.person.get({ personName });
 
-      dispatch({ type: Action.USER_PERSON_GET_SUCCESS, payload: person });
+      dispatch({ type: Action.USER_PERSON_FETCH_SUCCESS, payload: person });
     } catch (ex) {
       dispatch({
-        type: Action.USER_PERSON_GET_FAILURE,
+        type: Action.USER_PERSON_FETCH_FAILURE,
         payload: {
           errorCode: 601,
           message: `Getting person (${personName}) failed`,
diff --git a/src/store/reducers/generalReducers.js b/src/store/reducers/generalReducers.js
index ecc2333..b501976 100644
--- a/src/store/reducers/generalReducers.js
+++ b/src/store/reducers/generalReducers.js
@@ -18,14 +18,14 @@ const INIT_STATE = {
 const generalReducer = (state = INIT_STATE, action) => {
   switch (action.type) {
     //> Get all gitlab server
-    case Action.GENERAL_GITLAB_SERVER_GET_REQUEST:
+    case Action.GENERAL_GITLAB_SERVER_FETCH_REQUEST:
       return state;
-    case Action.GENERAL_GITLAB_SERVER_GET_FAILURE:
+    case Action.GENERAL_GITLAB_SERVER_FETCH_FAILURE:
       return {
         ...state,
         gitlabServer: action.payload,
       };
-    case Action.GENERAL_GITLAB_SERVER_GET_SUCCESS:
+    case Action.GENERAL_GITLAB_SERVER_FETCH_SUCCESS:
       return {
         ...state,
         gitlabServer: undefined,
diff --git a/src/store/reducers/personReducer.js b/src/store/reducers/personReducers.js
similarity index 81%
rename from src/store/reducers/personReducer.js
rename to src/store/reducers/personReducers.js
index b3e930c..c3d02bc 100644
--- a/src/store/reducers/personReducer.js
+++ b/src/store/reducers/personReducers.js
@@ -19,16 +19,16 @@ const INIT_STATE = {
 const userReducer = (state = INIT_STATE, action) => {
   switch (action.type) {
     //> Get
-    case Action.PERSON_GET_REQUEST:
+    case Action.PERSON_FETCH_REQUEST:
       return state;
-    case Action.PERSON_GET_SUCCESS:
+    case Action.PERSON_FETCH_SUCCESS:
       return {
         ...state,
         fetchedPerson: {
           ...action.payload,
         },
       };
-    case Action.PERSON_GET_FAILURE:
+    case Action.PERSON_FETCH_FAILURE:
       return {
         ...state,
         fetchedPerson: undefined,
@@ -36,14 +36,14 @@ const userReducer = (state = INIT_STATE, action) => {
         errorDetails: serializeError(action.payload.error),
       };
     //> Get all brief
-    case Action.PERSONS_BRIEF_GET_REQUEST:
+    case Action.PERSON_PERSONS_BRIEF_FETCH_REQUEST:
       return state;
-    case Action.PERSONS_BRIEF_GET_SUCCESS:
+    case Action.PERSON_PERSONS_BRIEF_FETCH_SUCCESS:
       return {
         ...state,
         allPersonBrief: action.payload,
       };
-    case Action.PERSONS_BRIEF_GET_FAILURE:
+    case Action.PERSON_PERSONS_BRIEF_FETCH_FAILURE:
       return {
         ...state,
         allPersonBrief: undefined,
diff --git a/src/store/reducers/userReducers.js b/src/store/reducers/userReducers.js
index ddaf49b..0a89afd 100644
--- a/src/store/reducers/userReducers.js
+++ b/src/store/reducers/userReducers.js
@@ -45,9 +45,9 @@ const userReducer = (state = INIT_STATE, action) => {
         errorDetails: serializeError(action.payload.error),
       };
     //> Person
-    case Action.USER_PERSON_GET_REQUEST:
+    case Action.USER_PERSON_FETCH_REQUEST:
       return state;
-    case Action.USER_PERSON_GET_SUCCESS:
+    case Action.USER_PERSON_FETCH_SUCCESS:
       return {
         ...state,
         user: {
@@ -57,7 +57,7 @@ const userReducer = (state = INIT_STATE, action) => {
           },
         },
       };
-    case Action.USER_PERSON_GET_FAILURE:
+    case Action.USER_PERSON_FETCH_FAILURE:
       return {
         ...state,
         user: {
diff --git a/src/store/types.js b/src/store/types.js
index e0d3fcc..a966177 100644
--- a/src/store/types.js
+++ b/src/store/types.js
@@ -6,20 +6,24 @@ export const USER_LOGOUT_REQUEST = "USER_LOGOUT_REQUEST";
 export const USER_LOGOUT_FAILURE = "USER_LOGOUT_FAILURE";
 export const USER_LOGOUT_SUCCESS = "USER_LOGOUT_SUCCESS";
 
-export const USER_PERSON_GET_REQUEST = "USER_GET_PERSONS_REQUEST";
-export const USER_PERSON_GET_FAILURE = "USER_PERSON_GET_FAILURE";
-export const USER_PERSON_GET_SUCCESS = "USER_PERSON_GET_SUCCESS";
+export const USER_PERSON_FETCH_REQUEST = "USER_FETCH_PERSONS_REQUEST";
+export const USER_PERSON_FETCH_FAILURE = "USER_PERSON_FETCH_FAILURE";
+export const USER_PERSON_FETCH_SUCCESS = "USER_PERSON_FETCH_SUCCESS";
 
-export const PERSON_GET_REQUEST = "PERSON_GET_REQUEST";
-export const PERSON_GET_FAILURE = "PERSON_GET_FAILURE";
-export const PERSON_GET_SUCCESS = "PERSON_GET_SUCCESS";
+export const PERSON_FETCH_REQUEST = "PERSON_FETCH_REQUEST";
+export const PERSON_FETCH_FAILURE = "PERSON_FETCH_FAILURE";
+export const PERSON_FETCH_SUCCESS = "PERSON_FETCH_SUCCESS";
 
-export const PERSONS_BRIEF_GET_REQUEST = "PERSONS_BRIEF_GET_REQUEST";
-export const PERSONS_BRIEF_GET_FAILURE = "PERSON_BRIEF_GET_FAILURE";
-export const PERSONS_BRIEF_GET_SUCCESS = "PERSON_BRIEF_GET_SUCCESS";
-export const GENERAL_GITLAB_SERVER_GET_REQUEST =
-  "GENERAL_GITLAB_SERVER_GET_REQUEST";
-export const GENERAL_GITLAB_SERVER_GET_FAILURE =
-  "GENERAL_GITLAB_SERVER_GET_FAILURE";
-export const GENERAL_GITLAB_SERVER_GET_SUCCESS =
-  "GENERAL_GITLAB_SERVER_GET_SUCCESS";
+export const PERSON_PERSONS_BRIEF_FETCH_REQUEST =
+  "PERSON_PERSONS_BRIEF_FETCH_REQUEST";
+export const PERSON_PERSONS_BRIEF_FETCH_FAILURE =
+  "PERSON_PERSONS_BRIEF_FETCH_FAILURE";
+export const PERSON_PERSONS_BRIEF_FETCH_SUCCESS =
+  "PERSON_PERSONS_BRIEF_FETCH_SUCCESS";
+
+export const GENERAL_GITLAB_SERVER_FETCH_REQUEST =
+  "GENERAL_GITLAB_SERVER_FETCH_REQUEST";
+export const GENERAL_GITLAB_SERVER_FETCH_FAILURE =
+  "GENERAL_GITLAB_SERVER_FETCH_FAILURE";
+export const GENERAL_GITLAB_SERVER_FETCH_SUCCESS =
+  "GENERAL_GITLAB_SERVER_FETCH_SUCCESS";

From 35b034a8ad1aaf4aa5ab200b129e55a34eb9b2cc Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Mon, 7 Sep 2020 21:54:34 +0200
Subject: [PATCH 018/175] Improve general actions

The get gitlab servers action is now exported correctly.
Also undefined variables have been removed.
---
 src/store/actions/generalActions.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/store/actions/generalActions.js b/src/store/actions/generalActions.js
index f1ebb4f..c8e4863 100644
--- a/src/store/actions/generalActions.js
+++ b/src/store/actions/generalActions.js
@@ -25,7 +25,7 @@ const getGitlabServers = () => {
         type: Action.GENERAL_GITLAB_SERVER_FETCH_FAILURE,
         payload: {
           errorCode: 601,
-          message: `Getting person (${personName}) failed`,
+          message: `Getting gitlab server failed`,
           error: ex,
         },
       });
@@ -35,4 +35,4 @@ const getGitlabServers = () => {
 
 //#endregion
 
-export { getPerson, getPersonsBrief };
+export { getGitlabServers };

From 015de2d97c28853ab59a7129d5ba050c32d66c24 Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Mon, 7 Sep 2020 21:56:05 +0200
Subject: [PATCH 019/175] Fix naming issue

The reducers are now correctly added to the root
reducer.
---
 src/store/reducers/index.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/store/reducers/index.js b/src/store/reducers/index.js
index c77f7a2..d2c15c7 100644
--- a/src/store/reducers/index.js
+++ b/src/store/reducers/index.js
@@ -8,9 +8,9 @@ import { loadingBarReducer } from "react-redux-loading-bar";
 
 //> Reducers
 // User
-import userReducer from "./userReducers";
+import userReducers from "./userReducers";
 // Person
-import personReducer from "./personReducer";
+import personReducers from "./personReducers";
 // General
 import generalReducers from "./generalReducers";
 
@@ -21,9 +21,9 @@ const rootReducer = combineReducers({
   // Loading bar
   loadingBar: loadingBarReducer,
   // User data
-  user: userReducer,
+  user: userReducers,
   // Person data
-  person: personReducer,
+  person: personReducers,
   // General data
   general: generalReducers,
 });

From 9884a7f6b23cf53dcf4fe61529589343d1947ec0 Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Mon, 7 Sep 2020 22:01:44 +0200
Subject: [PATCH 020/175] Unyeet registration

The registration has been unyeeted.
---
 .../molecules/forms/RegisterForm/index2.jsx   | 876 ++++++++++++++++++
 1 file changed, 876 insertions(+)
 create mode 100644 src/components/molecules/forms/RegisterForm/index2.jsx

diff --git a/src/components/molecules/forms/RegisterForm/index2.jsx b/src/components/molecules/forms/RegisterForm/index2.jsx
new file mode 100644
index 0000000..8842913
--- /dev/null
+++ b/src/components/molecules/forms/RegisterForm/index2.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 ? (
+          <>
+            <div className="text-left">
+              <small
+                className="text-muted clickable"
+                onClick={() => this.setState({ errors: [] }, () => goTo(0))}
+              >
+                <MDBIcon icon="angle-left" className="mr-1" />
+                Back
+              </small>
+            </div>
+            <p className="lead">So you're a Software Engineer...</p>
+            <p className="text-muted mb-4">
+              We just need a bit more information to get you started.
+            </p>
+            <form>
+              <MDBRow>
+                <MDBCol md="6">
+                  <input
+                    type="text"
+                    className={
+                      this.testForError(3)
+                        ? "form-control error"
+                        : "form-control"
+                    }
+                    placeholder="Firstname"
+                    name="firstname"
+                    onChange={(e) => this.handleChange(e, 3)}
+                    value={this.state.firstname}
+                  />
+                </MDBCol>
+                <MDBCol md="6">
+                  <input
+                    type="text"
+                    className={
+                      this.testForError(4)
+                        ? "form-control error"
+                        : "form-control"
+                    }
+                    placeholder="Lastname"
+                    name="lastname"
+                    onChange={(e) => this.handleChange(e, 4)}
+                    value={this.state.lastname}
+                  />
+                </MDBCol>
+              </MDBRow>
+              <input
+                type="email"
+                className={
+                  this.testForError(5)
+                    ? "form-control my-2 error"
+                    : "form-control my-2"
+                }
+                placeholder="E-Mail"
+                name="email"
+                onChange={(e) => this.handleChange(e, 5)}
+                value={this.state.email}
+              />
+              <MDBRow>
+                <MDBCol md="6">
+                  <input
+                    type="password"
+                    className={
+                      this.testForError([7, 1])
+                        ? "form-control error"
+                        : "form-control"
+                    }
+                    placeholder="Password"
+                    name="password1"
+                    onChange={(e) => this.handleChange(e, [7, 1])}
+                    value={this.state.password1}
+                  />
+                </MDBCol>
+                <MDBCol md="6">
+                  <input
+                    type="password"
+                    className={
+                      this.testForError([8, 1])
+                        ? "form-control error"
+                        : "form-control"
+                    }
+                    placeholder="Repeat password"
+                    name="password2"
+                    onChange={(e) => this.handleChange(e, [8, 1])}
+                    value={this.state.password2}
+                  />
+                </MDBCol>
+              </MDBRow>
+            </form>
+            <div className="text-left mt-2">
+              <small
+                className="blue-text clickable text-md"
+                onClick={() =>
+                  this.setState({ promoCode: !this.state.promoCode })
+                }
+              >
+                {!this.state.promoCode
+                  ? "I have a promo code"
+                  : "I don't have a promo code"}
+              </small>
+            </div>
+            {this.state.promoCode && (
+              <input
+                value={this.state.code}
+                className={
+                  this.testForError([9, 1])
+                    ? "form-control mb-3 error"
+                    : "form-control mb-3"
+                }
+                spellCheck="false"
+                autoComplete="autocomplete_off_874548537585743884357"
+                onChange={this.handleCodeChange}
+                type="text"
+                id="materialFormRegisterConfirmEx40"
+                name="code"
+                placeholder="Promo code"
+                label="Promotional code"
+              />
+            )}
+            <p className="text-muted mt-4">Connect your work</p>
+            <small className="text-muted">
+              You need to connect at least one account to continue.
+            </small>
+            <div>
+              <MDBPopover placement="top" popover clickable id="popper1">
+                <MDBBtn color="link" className="text-muted py-1">
+                  <MDBIcon far icon="question-circle" className="pr-1" />
+                  Why do I need to connect my accounts?
+                </MDBBtn>
+                <div>
+                  <MDBPopoverHeader>
+                    <MDBIcon far icon="question-circle" className="pr-2" />
+                    Connecting accounts
+                  </MDBPopoverHeader>
+                  <MDBPopoverBody>
+                    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.
+                    <br />
+                    <a
+                      className="blue-text"
+                      href="https://github.com/snek-at"
+                      rel="noopener noreferrer"
+                      target="_blank"
+                    >
+                      Learn more
+                    </a>
+                  </MDBPopoverBody>
+                </div>
+              </MDBPopover>
+            </div>
+            <div className="connect mb-3">
+              <MDBBtn
+                color="orange"
+                onClick={() => this.setState({ modalGitLab: true })}
+                disabled={
+                  !this.state.gitlab_servers ||
+                  (this.state.gitlab_server &&
+                    this.state.gitlab_server.length < 1)
+                }
+              >
+                <MDBIcon fab icon="gitlab" size="lg" />
+              </MDBBtn>
+              {!process.env.NODE_ENV ||
+              process.env.NODE_ENV === "development" ? (
+                <GitHubOAuth
+                  authorizationUrl="https://github.com/login/oauth/authorize"
+                  clientId="1440dd4c1d1c4c0fa124"
+                  clientSecret="0723a2b5bfef27efc8b2d26d837ead239fa0b0e6"
+                  redirectUri="http://localhost:3000/redirect"
+                  onSuccess={this.oauthGitHubSuccess}
+                  onFailure={this.oauthGitHubFailure}
+                />
+              ) : (
+                <GitHubOAuth
+                  authorizationUrl="https://github.com/login/oauth/authorize"
+                  clientId="2148629809594d57c113"
+                  clientSecret="64a37e4846387cfcaea35d83afca3c9c8689628c"
+                  redirectUri="https://snek.at/redirect"
+                  onSuccess={this.oauthGitHubSuccess}
+                  onFailure={this.oauthGitHubFailure}
+                />
+              )}
+              <MDBBtn color="primary" disabled>
+                <MDBIcon fab icon="bitbucket" size="lg" />
+              </MDBBtn>
+            </div>
+            <div>
+              <MDBListGroup>
+                {this.state.loadingGitHub && <MDBProgress material preloader />}
+                {this.state.usernames.map((source, i) => {
+                  return (
+                    <MDBListGroupItem
+                      className={"list-item-" + source.source}
+                      key={i}
+                    >
+                      <div>
+                        <MDBIcon
+                          fab
+                          icon={source.source}
+                          className="company-icon"
+                        />
+                        {source.username}
+                        {source.verified ? (
+                          <MDBPopover
+                            placement="right"
+                            domElement
+                            clickable
+                            popover
+                            tag="span"
+                            id="popper1"
+                          >
+                            <span>
+                              <MDBIcon
+                                icon="award"
+                                className="green-text ml-2 clickable"
+                              />
+                            </span>
+                            <div>
+                              <MDBPopoverHeader>Verified</MDBPopoverHeader>
+                              <MDBPopoverBody>
+                                <MDBRow className="justify-content-center align-items-center m-0">
+                                  <MDBCol
+                                    size="auto"
+                                    className="p-0 green-text"
+                                  >
+                                    <MDBIcon icon="award" size="3x" />
+                                  </MDBCol>
+                                  <MDBCol className="p-0 pl-3">
+                                    This source has been{" "}
+                                    <strong className="green-text">
+                                      verified
+                                    </strong>{" "}
+                                    by logging into it.
+                                  </MDBCol>
+                                </MDBRow>
+                              </MDBPopoverBody>
+                            </div>
+                          </MDBPopover>
+                        ) : (
+                          <MDBPopover
+                            placement="right"
+                            domElement
+                            clickable
+                            popover
+                            tag="span"
+                            id="popper1"
+                          >
+                            <span>
+                              <MDBIcon
+                                icon="award"
+                                className="grey-text ml-2 clickable"
+                              />
+                            </span>
+                            <div>
+                              <MDBPopoverHeader>Not verified</MDBPopoverHeader>
+                              <MDBPopoverBody>
+                                <MDBRow className="justify-content-center align-items-center m-0">
+                                  <MDBCol size="auto" className="p-0 grey-text">
+                                    <MDBIcon icon="award" size="3x" />
+                                  </MDBCol>
+                                  <MDBCol className="p-0 pl-3">
+                                    We can not verify your identity with GitLab.
+                                    Your data is still being included.
+                                  </MDBCol>
+                                </MDBRow>
+                              </MDBPopoverBody>
+                            </div>
+                          </MDBPopover>
+                        )}
+                      </div>
+                      <MDBIcon
+                        icon="times"
+                        className="close-icon"
+                        onClick={() => this.removeSource(source.id)}
+                      />
+                    </MDBListGroupItem>
+                  );
+                })}
+              </MDBListGroup>
+            </div>
+            <MDBBtn
+              color="green"
+              outline
+              className="mb-0"
+              onClick={this.handleSubmit}
+              /*disabled={!this.state.hasGitHub}*/
+            >
+              Join now
+            </MDBBtn>
+            <p>
+              <small className="text-muted">
+                Don't worry, you can easily connect further accounts in the
+                future.
+              </small>
+            </p>
+          </>
+        ) : (
+          <div className="my-5 py-5">
+            <h2 className="font-weight-bolder mb-0">
+              Hey, {this.state.firstname}!
+            </h2>
+            <p className="lead mb-3">Your profile is being generated.</p>
+            <div className="progress md-progress primary-color mb-1">
+              <div className="indeterminate"></div>
+            </div>
+            <TextLoop
+              className="text-muted"
+              children={[
+                "Connecting profiles...",
+                "Fetching data...",
+                "Creating profile...",
+                "Analyzing profile...",
+                "Creating statistics...",
+                "Warming up the coffee...",
+                "Finishing your profile...",
+              ]}
+              springConfig={{ stiffness: 180, damping: 8 }}
+              interval={4000}
+            />
+          </div>
+        )}
+        {this.state.modalGitLab && (
+          <MDBModal
+            modalStyle="orange"
+            className="text-white"
+            size="sm"
+            backdrop={true}
+            isOpen={this.state.modalGitLab}
+            toggle={this.toggle}
+          >
+            <MDBModalHeader className="text-center" titleClass="w-100" tag="p">
+              <MDBIcon fab icon="gitlab" className="pr-2" />
+              Add GitLab profile
+            </MDBModalHeader>
+            <MDBModalBody className="text-center">
+              <input
+                type="text"
+                className="form-control mb-2"
+                placeholder="GitLab username"
+                name="gitlab_username"
+                onChange={(e) =>
+                  this.setState({ [e.target.name]: e.target.value })
+                }
+                value={this.state.gitlab_username}
+              />
+              <MDBSelect
+                outline
+                getValue={this.handleSelectChange}
+                className="mb-0"
+              >
+                <MDBSelectInput selected={this.state.gitlab_server} />
+                <MDBSelectOptions>
+                  <MDBSelectOption disabled>
+                    Choose your organisation
+                  </MDBSelectOption>
+                  {this.state.gitlab_servers &&
+                    this.state.gitlab_servers.map((source, i) => {
+                      return (
+                        <MDBSelectOption key={i} value={source.domain}>
+                          {source.organisation}
+                        </MDBSelectOption>
+                      );
+                    })}
+                </MDBSelectOptions>
+              </MDBSelect>
+            </MDBModalBody>
+            <MDBModalFooter className="justify-content-center">
+              <MDBBtn color="orange" onClick={this.addGitLab}>
+                <MDBIcon icon="plus-circle" className="mr-2" />
+                Add
+              </MDBBtn>
+              <MDBBtn color="elegant" outline onClick={this.toggle}>
+                Cancel
+              </MDBBtn>
+            </MDBModalFooter>
+          </MDBModal>
+        )}
+      </>
+    );
+  }
+}
+//#endregion
+
+//#region > PropTypes
+RegisterForm.propTypes = {
+  goto: PropTypes.func,
+};
+//#endregion
+
+//#region > Redux Mapping
+const mapStateToProps = (state) => ({
+  registrationHistory: state.user.registrationHistory,
+  //gitlabServers: state.general.allGitlabServers,
+});
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    register: (registrationData) => dispatch(registerAction(registrationData)),
+    login: (user) => dispatch(loginAction(user)),
+    fetchGitLabServers: () => dispatch(fetchGitLabServersAction()),
+  };
+};
+//#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)(RegisterForm);
+//#endregion
+
+/**
+ * SPDX-License-Identifier: (EUPL-1.2)
+ * Copyright © 2019-2020 Simon Prast
+ */

From f90b97ce463e79758c92b8d987f6287024eb9009 Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Mon, 7 Sep 2020 22:21:34 +0200
Subject: [PATCH 021/175] Add registration action

The registration action has been added.
It calls the login action after.
---
 src/store/actions/userActions.js   | 52 ++++++++++++++++++++++++++++++
 src/store/reducers/userReducers.js | 10 ++++++
 src/store/types.js                 |  4 +++
 3 files changed, 66 insertions(+)

diff --git a/src/store/actions/userActions.js b/src/store/actions/userActions.js
index 1403df3..45079a6 100644
--- a/src/store/actions/userActions.js
+++ b/src/store/actions/userActions.js
@@ -101,6 +101,58 @@ const getPerson = (personName) => {
     }
   };
 };
+
+/**
+ * Register new person/user
+ */
+const register = (
+  username,
+  firstName,
+  lastName,
+  email,
+  password,
+  redemptionCode
+) => {
+  return async (dispatch, getState, {}) => {
+    try {
+      dispatch({ type: Action.USER_PERSON_SIGNUP_REQUEST });
+
+      const registration = await INTEL_SNEK.person.register({
+        formValues: {
+          username,
+          first_name: firstName,
+          last_name: lastName,
+          email,
+          password,
+          redemption_code: redemptionCode,
+        },
+      });
+
+      if (registration.result === "ok") {
+        dispatch({ type: Action.USER_PERSON_SIGNUP_SUCCESS });
+
+        dispatch(loginAction({ username, password }));
+      } else {
+        dispatch({
+          type: Action.USER_PERSON_SIGNUP_FAILURE,
+          payload: {
+            errorCode: 601,
+            message: `Registration failed`,
+          },
+        });
+      }
+    } catch (ex) {
+      dispatch({
+        type: Action.USER_PERSON_SIGNUP_FAILURE,
+        payload: {
+          errorCode: 601,
+          message: `Registration error`,
+          error: ex,
+        },
+      });
+    }
+  };
+};
 //#endregion
 
 //#region > Exports
diff --git a/src/store/reducers/userReducers.js b/src/store/reducers/userReducers.js
index 0a89afd..cf9169d 100644
--- a/src/store/reducers/userReducers.js
+++ b/src/store/reducers/userReducers.js
@@ -69,6 +69,16 @@ const userReducer = (state = INIT_STATE, action) => {
         error: action.payload,
         errorDetails: serializeError(action.payload.error),
       };
+    case Action.USER_PERSON_SIGNUP_REQUEST:
+      return state;
+    case Action.USER_PERSON_SIGNUP_SUCCESS:
+      return { ...state };
+    case Action.USER_PERSON_SIGNUP_FAILURE:
+      return {
+        ...state,
+        error: action.payload,
+        errorDetails: serializeError(action.payload.error),
+      };
 
     default:
       return state;
diff --git a/src/store/types.js b/src/store/types.js
index a966177..e56c585 100644
--- a/src/store/types.js
+++ b/src/store/types.js
@@ -10,6 +10,10 @@ export const USER_PERSON_FETCH_REQUEST = "USER_FETCH_PERSONS_REQUEST";
 export const USER_PERSON_FETCH_FAILURE = "USER_PERSON_FETCH_FAILURE";
 export const USER_PERSON_FETCH_SUCCESS = "USER_PERSON_FETCH_SUCCESS";
 
+export const USER_PERSON_SIGNUP_REQUEST = "USER_PERSON_SIGNUP_REQUEST";
+export const USER_PERSON_SIGNUP_FAILURE = "USER_PERSON_SIGNUP_FAILURE";
+export const USER_PERSON_SIGNUP_SUCCESS = "USER_PERSON_SIGNUP_SUCCESS";
+
 export const PERSON_FETCH_REQUEST = "PERSON_FETCH_REQUEST";
 export const PERSON_FETCH_FAILURE = "PERSON_FETCH_FAILURE";
 export const PERSON_FETCH_SUCCESS = "PERSON_FETCH_SUCCESS";

From 9231eccd6d4d2836a9b0c9d7b75a00ad2ab8c417 Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Mon, 7 Sep 2020 22:48:17 +0200
Subject: [PATCH 022/175] Move person actions to general action

Get persons brief and get person have been moved
to the general actions.
The person actions should only contain actions for the
currently logged person.
---
 src/components/atoms/SearchBar/index.jsx   |  4 +-
 src/components/pages/ProfilePage/index.jsx |  4 +-
 src/store/actions/generalActions.js        | 54 ++++++++++++++++++-
 src/store/actions/personActions.js         | 63 ----------------------
 src/store/reducers/generalReducers.js      | 34 ++++++++++++
 src/store/reducers/personReducers.js       | 62 ---------------------
 src/store/types.js                         | 18 +++----
 7 files changed, 100 insertions(+), 139 deletions(-)

diff --git a/src/components/atoms/SearchBar/index.jsx b/src/components/atoms/SearchBar/index.jsx
index bf2f23d..eab315c 100644
--- a/src/components/atoms/SearchBar/index.jsx
+++ b/src/components/atoms/SearchBar/index.jsx
@@ -22,7 +22,7 @@ import { connect } from "react-redux";
 
 //> Actions
 // Functions to send data from the application to the store
-import { getPersonsBrief } from "../../../store/actions/personActions";
+import { getPersonsBrief } from "../../../store/actions/generalActions";
 //> Style sheet
 import "./search.scss";
 //#endregion
@@ -113,7 +113,7 @@ class SearchBar extends React.Component {
 
 //#region > Redux Mapping
 const mapStateToProps = (state) => ({
-  allUserSearchItems: state.person.allPersonBrief,
+  allUserSearchItems: state.general.allPersonBrief,
 });
 
 const mapDispatchToProps = (dispatch) => {
diff --git a/src/components/pages/ProfilePage/index.jsx b/src/components/pages/ProfilePage/index.jsx
index 2c7a1a8..efa7b7b 100644
--- a/src/components/pages/ProfilePage/index.jsx
+++ b/src/components/pages/ProfilePage/index.jsx
@@ -11,7 +11,7 @@ import { connect } from "react-redux";
 
 //> Actions
 // Functions to send data from the application to the store
-import { getPerson } from "../../../store/actions/personActions";
+import { getPerson } from "../../../store/actions/generalActions";
 //> Components
 import { SoftwareEngineer } from "../../organisms/profiles";
 //> Style sheet
@@ -82,7 +82,7 @@ class ProfilePage extends React.Component {
 //#region > Redux Mapping
 const mapStateToProps = (state) => ({
   loggedUser: state.user.user,
-  fetchedPerson: state.person.fetchedPerson,
+  fetchedPerson: state.general.fetchedPerson,
 });
 
 const mapDispatchToProps = (dispatch) => {
diff --git a/src/store/actions/generalActions.js b/src/store/actions/generalActions.js
index c8e4863..542eb75 100644
--- a/src/store/actions/generalActions.js
+++ b/src/store/actions/generalActions.js
@@ -33,6 +33,58 @@ const getGitlabServers = () => {
   };
 };
 
+/**
+ * Get all person in a brief form
+ */
+const getPersonsBrief = () => {
+  return async (dispatch, getState, {}) => {
+    try {
+      dispatch({ type: Action.GENERAL_PERSONS_BRIEF_FETCH_REQUEST });
+
+      const persons = await INTEL_SNEK.person.allBrief();
+
+      console.log(persons);
+
+      dispatch({
+        type: Action.GENERAL_PERSONS_BRIEF_FETCH_SUCCESS,
+        payload: persons,
+      });
+    } catch (ex) {
+      dispatch({
+        type: Action.GENERAL_PERSONS_BRIEF_FETCH_FAILURE,
+        payload: {
+          errorCode: 601,
+          message: "Getting all person in a brief form failed",
+          error: ex,
+        },
+      });
+    }
+  };
+};
+
+/**
+ * Get person page for a logged user
+ */
+const getPerson = (personName) => {
+  return async (dispatch, getState, {}) => {
+    try {
+      dispatch({ type: Action.GENERAL_PERSON_FETCH_REQUEST });
+
+      const person = await INTEL_SNEK.person.get({ personName });
+
+      dispatch({ type: Action.GENERAL_PERSON_FETCH_SUCCESS, payload: person });
+    } catch (ex) {
+      dispatch({
+        type: Action.GENERAL_PERSON_FETCH_FAILURE,
+        payload: {
+          errorCode: 601,
+          message: `Getting person (${personName}) failed`,
+          error: ex,
+        },
+      });
+    }
+  };
+};
 //#endregion
 
-export { getGitlabServers };
+export { getGitlabServers, getPersonsBrief, getPerson };
diff --git a/src/store/actions/personActions.js b/src/store/actions/personActions.js
index 08778c9..e69de29 100644
--- a/src/store/actions/personActions.js
+++ b/src/store/actions/personActions.js
@@ -1,63 +0,0 @@
-//#region > Imports
-//> Action Types
-import * as Action from "../types";
-//> Intel
-import INTEL_SNEK from "snek-intel/lib/utils/snek";
-//#endregion
-
-//#region > Person Actions
-/**
- * Get person page for a logged user
- */
-const getPerson = (personName) => {
-  return async (dispatch, getState, {}) => {
-    try {
-      dispatch({ type: Action.PERSON_FETCH_REQUEST });
-
-      const person = await INTEL_SNEK.person.get({ personName });
-
-      dispatch({ type: Action.PERSON_FETCH_SUCCESS, payload: person });
-    } catch (ex) {
-      dispatch({
-        type: Action.PERSON_FETCH_FAILURE,
-        payload: {
-          errorCode: 601,
-          message: `Getting person (${personName}) failed`,
-          error: ex,
-        },
-      });
-    }
-  };
-};
-
-/**
- * Get all person in a brief form
- */
-const getPersonsBrief = () => {
-  return async (dispatch, getState, {}) => {
-    try {
-      dispatch({ type: Action.PERSON_PERSONS_BRIEF_FETCH_REQUEST });
-
-      const persons = await INTEL_SNEK.person.allBrief();
-
-      console.log(persons);
-
-      dispatch({
-        type: Action.PERSON_PERSONS_BRIEF_FETCH_SUCCESS,
-        payload: persons,
-      });
-    } catch (ex) {
-      dispatch({
-        type: Action.PERSON_PERSONS_BRIEF_FETCH_FAILURE,
-        payload: {
-          errorCode: 601,
-          message: "Getting all person in a brief form failed",
-          error: ex,
-        },
-      });
-    }
-  };
-};
-//#endregion
-
-export { getPerson, getPersonsBrief };
diff --git a/src/store/reducers/generalReducers.js b/src/store/reducers/generalReducers.js
index b501976..34cdb21 100644
--- a/src/store/reducers/generalReducers.js
+++ b/src/store/reducers/generalReducers.js
@@ -8,6 +8,8 @@ import * as Action from "../types";
 
 //#region > Constant Variables
 const INIT_STATE = {
+  fetchedPerson: undefined,
+  allPersonBrief: undefined,
   gitlabServer: undefined,
   error: undefined,
   errorDetails: undefined,
@@ -32,6 +34,38 @@ const generalReducer = (state = INIT_STATE, action) => {
         error: action.payload,
         errorDetails: serializeError(action.payload.error),
       };
+    //> Get person
+    case Action.GENERAL_PERSON_FETCH_REQUEST:
+      return state;
+    case Action.GENERAL_PERSON_FETCH_SUCCESS:
+      return {
+        ...state,
+        fetchedPerson: {
+          ...action.payload,
+        },
+      };
+    case Action.GENERAL_PERSON_FETCH_FAILURE:
+      return {
+        ...state,
+        fetchedPerson: undefined,
+        error: action.payload,
+        errorDetails: serializeError(action.payload.error),
+      };
+    //> Get all persons brief
+    case Action.GENERAL_PERSONS_BRIEF_FETCH_REQUEST:
+      return state;
+    case Action.GENERAL_PERSONS_BRIEF_FETCH_SUCCESS:
+      return {
+        ...state,
+        allPersonBrief: action.payload,
+      };
+    case Action.GENERAL_PERSONS_BRIEF_FETCH_FAILURE:
+      return {
+        ...state,
+        allPersonBrief: undefined,
+        error: action.payload,
+        errorDetails: serializeError(action.payload.error),
+      };
 
     default:
       return state;
diff --git a/src/store/reducers/personReducers.js b/src/store/reducers/personReducers.js
index c3d02bc..e69de29 100644
--- a/src/store/reducers/personReducers.js
+++ b/src/store/reducers/personReducers.js
@@ -1,62 +0,0 @@
-//#region > Imports
-//> Error Serialization
-// Serialize/deserialize an error into a plain object
-import { serializeError } from "serialize-error";
-//> Action Types
-import * as Action from "../types";
-//#endregion
-
-//#region > Constant Variables
-const INIT_STATE = {
-  fetchedPerson: undefined,
-  allPersonBrief: undefined,
-  error: undefined,
-  errorDetails: undefined,
-};
-//#endregion
-
-//#region > Reducers
-const userReducer = (state = INIT_STATE, action) => {
-  switch (action.type) {
-    //> Get
-    case Action.PERSON_FETCH_REQUEST:
-      return state;
-    case Action.PERSON_FETCH_SUCCESS:
-      return {
-        ...state,
-        fetchedPerson: {
-          ...action.payload,
-        },
-      };
-    case Action.PERSON_FETCH_FAILURE:
-      return {
-        ...state,
-        fetchedPerson: undefined,
-        error: action.payload,
-        errorDetails: serializeError(action.payload.error),
-      };
-    //> Get all brief
-    case Action.PERSON_PERSONS_BRIEF_FETCH_REQUEST:
-      return state;
-    case Action.PERSON_PERSONS_BRIEF_FETCH_SUCCESS:
-      return {
-        ...state,
-        allPersonBrief: action.payload,
-      };
-    case Action.PERSON_PERSONS_BRIEF_FETCH_FAILURE:
-      return {
-        ...state,
-        allPersonBrief: undefined,
-        error: action.payload,
-        errorDetails: serializeError(action.payload.error),
-      };
-
-    default:
-      return state;
-  }
-};
-//#endregion
-
-//#region > Exports
-export default userReducer;
-//#endregion
diff --git a/src/store/types.js b/src/store/types.js
index e56c585..e7e6587 100644
--- a/src/store/types.js
+++ b/src/store/types.js
@@ -14,16 +14,16 @@ export const USER_PERSON_SIGNUP_REQUEST = "USER_PERSON_SIGNUP_REQUEST";
 export const USER_PERSON_SIGNUP_FAILURE = "USER_PERSON_SIGNUP_FAILURE";
 export const USER_PERSON_SIGNUP_SUCCESS = "USER_PERSON_SIGNUP_SUCCESS";
 
-export const PERSON_FETCH_REQUEST = "PERSON_FETCH_REQUEST";
-export const PERSON_FETCH_FAILURE = "PERSON_FETCH_FAILURE";
-export const PERSON_FETCH_SUCCESS = "PERSON_FETCH_SUCCESS";
+export const GENERAL_PERSON_FETCH_REQUEST = "GENERAL_PERSON_FETCH_REQUEST";
+export const GENERAL_PERSON_FETCH_FAILURE = "GENERAL_PERSON_FETCH_FAILURE";
+export const GENERAL_PERSON_FETCH_SUCCESS = "GENERAL_PERSON_FETCH_SUCCESS";
 
-export const PERSON_PERSONS_BRIEF_FETCH_REQUEST =
-  "PERSON_PERSONS_BRIEF_FETCH_REQUEST";
-export const PERSON_PERSONS_BRIEF_FETCH_FAILURE =
-  "PERSON_PERSONS_BRIEF_FETCH_FAILURE";
-export const PERSON_PERSONS_BRIEF_FETCH_SUCCESS =
-  "PERSON_PERSONS_BRIEF_FETCH_SUCCESS";
+export const GENERAL_PERSONS_BRIEF_FETCH_REQUEST =
+  "GENERAL_PERSONS_BRIEF_FETCH_REQUEST";
+export const GENERAL_PERSONS_BRIEF_FETCH_FAILURE =
+  "GENERAL_PERSONS_BRIEF_FETCH_FAILURE";
+export const GENERAL_PERSONS_BRIEF_FETCH_SUCCESS =
+  "GENERAL_PERSONS_BRIEF_FETCH_SUCCESS";
 
 export const GENERAL_GITLAB_SERVER_FETCH_REQUEST =
   "GENERAL_GITLAB_SERVER_FETCH_REQUEST";

From aec4641ba975391cb257ab495922d19b9fed88fb Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Tue, 8 Sep 2020 17:04:26 +0200
Subject: [PATCH 023/175] Add some more actions and reducers

Following actions and their reducers have been added:
- All Achievements
- Person Settings
- Person Meta Link
- Person Profiles
- Person Add Profile
- Person Delete Profile
- Person Update Profile
- Person Instagram Posts
- Person Process Profiles
- Person Follow
- Person Unfollow
- Person Like
- Person Unlike
---
 src/store/actions/generalActions.js   |  29 +-
 src/store/actions/personActions.js    | 455 ++++++++++++++++++++++++++
 src/store/reducers/generalReducers.js |  16 +
 src/store/reducers/personReducers.js  |  78 +++++
 src/store/types.js                    |  68 ++++
 5 files changed, 645 insertions(+), 1 deletion(-)

diff --git a/src/store/actions/generalActions.js b/src/store/actions/generalActions.js
index 542eb75..3a2c61a 100644
--- a/src/store/actions/generalActions.js
+++ b/src/store/actions/generalActions.js
@@ -85,6 +85,33 @@ const getPerson = (personName) => {
     }
   };
 };
+
+/**
+ * Get all achievements with collectors
+ */
+const getAchievements = () => {
+  return async (dispatch, getState, {}) => {
+    try {
+      dispatch({ type: Action.GENERAL_ACHIEVEMENTS_FETCH_REQUEST });
+
+      const achievements = await INTEL_SNEK.achievements.all();
+
+      dispatch({
+        type: Action.GENERAL_ACHIEVEMENTS_FETCH_SUCCESS,
+        payload: achievements,
+      });
+    } catch (ex) {
+      dispatch({
+        type: Action.GENERAL_ACHIEVEMENTS_FETCH_FAILURE,
+        payload: {
+          errorCode: 601,
+          message: `Getting achievements failed`,
+          error: ex,
+        },
+      });
+    }
+  };
+};
 //#endregion
 
-export { getGitlabServers, getPersonsBrief, getPerson };
+export { getGitlabServers, getPersonsBrief, getPerson, getAchievements };
diff --git a/src/store/actions/personActions.js b/src/store/actions/personActions.js
index e69de29..842f1f1 100644
--- a/src/store/actions/personActions.js
+++ b/src/store/actions/personActions.js
@@ -0,0 +1,455 @@
+//#region > Imports
+//> Action Types
+import * as Action from "../types";
+//> Intel
+import INTEL_SNEK from "snek-intel/lib/utils/snek";
+//#endregion
+
+//#region > Utils
+const extractNameFromPersonSlug = (personSlug) => personSlug.split("-")[1];
+//#endregion
+
+//#region > Actions
+/**
+ * Get person page for a logged user
+ */
+const updateSettings = (
+  nextSettings = {
+    avatarImage,
+    bio,
+    display2dCalendar,
+    display3dCalendar,
+    displayEmail,
+    displayProgrammingLanguages,
+    displayRanking,
+    displayWorkplace,
+    email,
+    firstName,
+    lastName,
+    location,
+    movablePool,
+    status,
+    websiteUrl,
+    workplace,
+  }
+) => {
+  return async (dispatch, getState, {}) => {
+    try {
+      dispatch({ type: Action.PERSON_SETTINGS_UPDATE_REQUEST });
+
+      const state = getState();
+      const personName = extractNameFromPersonSlug(state.user.person.slug);
+
+      const person = await INTEL_SNEK.person.updateSettings({
+        personName,
+        settings: {
+          ...nextSettings,
+        },
+      });
+
+      dispatch({
+        type: Action.PERSON_SETTINGS_UPDATE_SUCCESS,
+        payload: person,
+      });
+    } catch (ex) {
+      dispatch({
+        type: Action.PERSON_SETTINGS_UPDATE_FAILURE,
+        payload: {
+          errorCode: 601,
+          message: `Updating settings failed`,
+          error: ex,
+        },
+      });
+    }
+  };
+};
+
+const addMetaLink = (
+  linkOptions = {
+    url,
+    linkType,
+    location,
+    imgurDeleteHash,
+    description,
+  }
+) => {
+  return async (dispatch, getState, {}) => {
+    try {
+      dispatch({ type: Action.PERSON_META_LINK_ADD_REQUEST });
+
+      const state = getState();
+      const personName = extractNameFromPersonSlug(state.user.person.slug);
+
+      const link = await INTEL_SNEK.person.addMetaLink({
+        personName,
+        linkOptions: {
+          ...linkOptions,
+        },
+      });
+
+      dispatch({ type: Action.PERSON_META_LINK_ADD_SUCCESS, payload: link });
+    } catch (ex) {
+      dispatch({
+        type: Action.PERSON_META_LINK_ADD_FAILURE,
+        payload: {
+          errorCode: 601,
+          message: `Adding link failed`,
+          error: ex,
+        },
+      });
+    }
+  };
+};
+
+const deleteMetaLink = (id) => {
+  return async (dispatch, getState, {}) => {
+    try {
+      dispatch({ type: Action.PERSON_META_LINK_DELETE_REQUEST });
+
+      const link = await INTEL_SNEK.person.deleteMetaLink({
+        metaLinkId: id,
+      });
+
+      dispatch({ type: Action.PERSON_META_LINK_DELETE_SUCCESS, payload: link });
+    } catch (ex) {
+      dispatch({
+        type: Action.PERSON_META_LINK_DELETE_FAILURE,
+        payload: {
+          errorCode: 601,
+          message: `Deleting link failed`,
+          error: ex,
+        },
+      });
+    }
+  };
+};
+
+const getProfiles = () => {
+  return async (dispatch, getState, {}) => {
+    try {
+      dispatch({ type: Action.PERSON_PROFILES_FETCH_REQUEST });
+
+      const state = getState();
+      const personName = extractNameFromPersonSlug(state.user.person.slug);
+
+      const profiles = await INTEL_SNEK.person.profiles({
+        personName,
+      });
+
+      dispatch({
+        type: Action.PERSON_PROFILES_FETCH_SUCCESS,
+        payload: profiles,
+      });
+    } catch (ex) {
+      dispatch({
+        type: Action.PERSON_PROFILES_FETCH_FAILURE,
+        payload: {
+          errorCode: 601,
+          message: `Fetching profiles failed`,
+          error: ex,
+        },
+      });
+    }
+  };
+};
+
+const addProfile = (source = { url, type, authorization, username }) => {
+  return async (dispatch, getState, {}) => {
+    try {
+      dispatch({ type: Action.PERSON_PROFILE_ADD_REQUEST });
+
+      const state = getState();
+      const personName = extractNameFromPersonSlug(state.user.person.slug);
+
+      const profile = await INTEL_SNEK.person.addProfile({
+        personName,
+        source: {
+          ...source,
+        },
+      });
+
+      dispatch({ type: Action.PERSON_PROFILE_ADD_SUCCESS, payload: profile });
+    } catch (ex) {
+      dispatch({
+        type: Action.PERSON_PROFILE_ADD_FAILURE,
+        payload: {
+          errorCode: 601,
+          message: `Adding profile failed`,
+          error: ex,
+        },
+      });
+    }
+  };
+};
+
+const deleteProfile = (id) => {
+  return async (dispatch, getState, {}) => {
+    try {
+      dispatch({ type: Action.PERSON_META_LINK_DELETE_REQUEST });
+
+      const profiles = await INTEL_SNEK.person.deleteProfile({
+        profileId: id,
+      });
+
+      dispatch({
+        type: Action.PERSON_META_LINK_DELETE_SUCCESS,
+        payload: profiles,
+      });
+    } catch (ex) {
+      dispatch({
+        type: Action.PERSON_META_LINK_DELETE_FAILURE,
+        payload: {
+          errorCode: 601,
+          message: `Deleting link failed`,
+          error: ex,
+        },
+      });
+    }
+  };
+};
+
+const updateProfile = (
+  id,
+  nextProfile = {
+    avatarImage,
+    bio,
+    display2dCalendar,
+    display3dCalendar,
+    displayEmail,
+    displayProgrammingLanguages,
+    displayRanking,
+    displayWorkplace,
+    email,
+    firstName,
+    lastName,
+    location,
+    movablePool,
+    status,
+    websiteUrl,
+    workplace,
+  }
+) => {
+  return async (dispatch, getState, {}) => {
+    try {
+      dispatch({ type: Action.PERSON_PROFILE_UPDATE_REQUEST });
+
+      const profile = await INTEL_SNEK.person.updateProfile({
+        profileId: id,
+        toUpdate: {
+          ...nextProfile,
+        },
+      });
+
+      dispatch({
+        type: Action.PERSON_PROFILE_UPDATE_SUCCESS,
+        payload: profile,
+      });
+    } catch (ex) {
+      dispatch({
+        type: Action.PERSON_PROFILE_UPDATE_FAILURE,
+        payload: {
+          errorCode: 601,
+          message: `Updating profile failed`,
+          error: ex,
+        },
+      });
+    }
+  };
+};
+
+const getInstagramPosts = (id) => {
+  return async (dispatch, getState, {}) => {
+    try {
+      dispatch({ type: Action.PERSON_INSTAGRAM_POSTS_FETCH_REQUEST });
+
+      const state = getState();
+      const personName = extractNameFromPersonSlug(state.user.person.slug);
+
+      const posts = await INTEL_SNEK.person.getInstagramPosts({
+        personName,
+      });
+
+      dispatch({
+        type: Action.PERSON_INSTAGRAM_POSTS_FETCH_SUCCESS,
+        payload: posts,
+      });
+    } catch (ex) {
+      dispatch({
+        type: Action.PERSON_INSTAGRAM_POSTS_FETCH_FAILURE,
+        payload: {
+          errorCode: 601,
+          message: `Fetching instagram posts failed`,
+          error: ex,
+        },
+      });
+    }
+  };
+};
+
+const processProfiles = () => {
+  return async (dispatch, getState, {}) => {
+    try {
+      dispatch({ type: Action.PERSON_PROFILES_PROCESS_REQUEST });
+
+      const state = getState();
+      const personName = extractNameFromPersonSlug(state.user.person.slug);
+
+      const posts = await INTEL_SNEK.person.processProfiles({
+        personName,
+      });
+
+      dispatch({
+        type: Action.PERSON_PROFILES_PROCESS_SUCCESS,
+        payload: posts,
+      });
+    } catch (ex) {
+      dispatch({
+        type: Action.PERSON_PROFILES_PROCESS_FAILURE,
+        payload: {
+          errorCode: 601,
+          message: `Processing profiles failed`,
+          error: ex,
+        },
+      });
+    }
+  };
+};
+
+const follow = (receiverPersonName) => {
+  return async (dispatch, getState, {}) => {
+    try {
+      dispatch({ type: Action.PERSON_FOLLOW_REQUEST });
+
+      const state = getState();
+      const personName = extractNameFromPersonSlug(state.user.person.slug);
+
+      const res = await INTEL_SNEK.social.follow({
+        invoker: personName,
+        receiver: receiverPersonName,
+      });
+
+      dispatch({
+        type: Action.PERSON_FOLLOW_SUCCESS,
+        payload: res,
+      });
+    } catch (ex) {
+      dispatch({
+        type: Action.PERSON_FOLLOW_FAILURE,
+        payload: {
+          errorCode: 601,
+          message: `Following ${receiverPersonName} failed`,
+          error: ex,
+        },
+      });
+    }
+  };
+};
+
+const unfollow = (receiverPersonName) => {
+  return async (dispatch, getState, {}) => {
+    try {
+      dispatch({ type: Action.PERSON_UNFOLLOW_REQUEST });
+
+      const state = getState();
+      const personName = extractNameFromPersonSlug(state.user.person.slug);
+
+      const res = await INTEL_SNEK.social.unfollow({
+        invoker: personName,
+        receiver: receiverPersonName,
+      });
+
+      dispatch({
+        type: Action.PERSON_UNFOLLOW_SUCCESS,
+        payload: res,
+      });
+    } catch (ex) {
+      dispatch({
+        type: Action.PERSON_UNFOLLOW_FAILURE,
+        payload: {
+          errorCode: 601,
+          message: `Unfollowing ${receiverPersonName} failed`,
+          error: ex,
+        },
+      });
+    }
+  };
+};
+
+const like = (receiverPersonName) => {
+  return async (dispatch, getState, {}) => {
+    try {
+      dispatch({ type: Action.PERSON_LIKE_REQUEST });
+
+      const state = getState();
+      const personName = extractNameFromPersonSlug(state.user.person.slug);
+
+      const res = await INTEL_SNEK.social.follow({
+        invoker: personName,
+        receiver: receiverPersonName,
+      });
+
+      dispatch({
+        type: Action.PERSON_LIKE_SUCCESS,
+        payload: res,
+      });
+    } catch (ex) {
+      dispatch({
+        type: Action.PERSON_LIKE_FAILURE,
+        payload: {
+          errorCode: 601,
+          message: `Liking ${receiverPersonName} failed`,
+          error: ex,
+        },
+      });
+    }
+  };
+};
+
+const unlike = (receiverPersonName) => {
+  return async (dispatch, getState, {}) => {
+    try {
+      dispatch({ type: Action.PERSON_UNLIKE_REQUEST });
+
+      const state = getState();
+      const personName = extractNameFromPersonSlug(state.user.person.slug);
+
+      const res = await INTEL_SNEK.social.unfollow({
+        invoker: personName,
+        receiver: receiverPersonName,
+      });
+
+      dispatch({
+        type: Action.PERSON_UNLIKE_SUCCESS,
+        payload: res,
+      });
+    } catch (ex) {
+      dispatch({
+        type: Action.PERSON_UNLIKE_FAILURE,
+        payload: {
+          errorCode: 601,
+          message: `Unliking ${receiverPersonName} failed`,
+          error: ex,
+        },
+      });
+    }
+  };
+};
+
+//#endregion
+//#region > Exports
+export {
+  updateSettings,
+  addMetaLink,
+  deleteMetaLink,
+  getProfiles,
+  addProfile,
+  deleteProfile,
+  updateProfile,
+  getInstagramPosts,
+  processProfiles,
+  follow,
+  unfollow,
+  like,
+  unlike,
+};
+//#endregion
diff --git a/src/store/reducers/generalReducers.js b/src/store/reducers/generalReducers.js
index 34cdb21..fa0e221 100644
--- a/src/store/reducers/generalReducers.js
+++ b/src/store/reducers/generalReducers.js
@@ -11,6 +11,7 @@ const INIT_STATE = {
   fetchedPerson: undefined,
   allPersonBrief: undefined,
   gitlabServer: undefined,
+  achievements: undefined,
   error: undefined,
   errorDetails: undefined,
 };
@@ -66,6 +67,21 @@ const generalReducer = (state = INIT_STATE, action) => {
         error: action.payload,
         errorDetails: serializeError(action.payload.error),
       };
+    //> Achievements
+    case Action.GENERAL_ACHIEVEMENTS_FETCH_REQUEST:
+      return state;
+    case Action.GENERAL_ACHIEVEMENTS_FETCH_SUCCESS:
+      return {
+        ...state,
+        achievements: action.payload,
+      };
+    case Action.GENERAL_ACHIEVEMENTS_FETCH_FAILURE:
+      return {
+        ...state,
+        achievements: undefined,
+        error: action.payload,
+        errorDetails: serializeError(action.payload.error),
+      };
 
     default:
       return state;
diff --git a/src/store/reducers/personReducers.js b/src/store/reducers/personReducers.js
index e69de29..92607e6 100644
--- a/src/store/reducers/personReducers.js
+++ b/src/store/reducers/personReducers.js
@@ -0,0 +1,78 @@
+//#region > Imports
+//> Error Serialization
+// Serialize/deserialize an error into a plain object
+import { serializeError } from "serialize-error";
+//> Action Types
+import * as Action from "../types";
+//#endregion
+
+//#region > Constant Variables
+const INIT_STATE = {
+  error: undefined,
+  errorDetails: undefined,
+};
+//#endregion
+
+//#region > Reducers
+const personReducer = (state = INIT_STATE, action) => {
+  switch (action.type) {
+    //> All person types
+    // Currently no splitted cases are used because there is no need for
+    case Action.PERSON_SETTINGS_UPDATE_REQUEST |
+      Action.PERSON_META_LINK_ADD_REQUEST |
+      Action.PERSON_META_LINK_DELETE_REQUEST |
+      Action.PERSON_PROFILES_FETCH_REQUEST |
+      Action.PERSON_PROFILE_ADD_REQUEST |
+      Action.PERSON_PROFILE_DELETE_REQUEST |
+      Action.PERSON_PROFILE_UPDATE_REQUEST |
+      Action.PERSON_INSTAGRAM_POSTS_FETCH_REQUEST |
+      Action.PERSON_PROFILES_PROCESS_REQUEST |
+      Action.PERSON_FOLLOW_REQUEST |
+      Action.PERSON_UNFOLLOW_REQUEST |
+      Action.PERSON_LIKE_REQUEST |
+      Action.PERSON_UNLIKE_REQUEST:
+      return state;
+    case Action.PERSON_SETTINGS_UPDATE_SUCCESS |
+      Action.PERSON_META_LINK_ADD_SUCCESS |
+      Action.PERSON_META_LINK_DELETE_SUCCESS |
+      Action.PERSON_PROFILES_FETCH_SUCCESS |
+      Action.PERSON_PROFILE_ADD_SUCCESS |
+      Action.PERSON_PROFILE_DELETE_SUCCESS |
+      Action.PERSON_PROFILE_UPDATE_SUCCESS |
+      Action.PERSON_INSTAGRAM_POSTS_FETCH_SUCCESS |
+      Action.PERSON_PROFILES_PROCESS_SUCCESS |
+      Action.PERSON_FOLLOW_SUCCESS |
+      Action.PERSON_UNFOLLOW_SUCCESS |
+      Action.PERSON_LIKE_SUCCESS |
+      Action.PERSON_UNLIKE_SUCCESS:
+      return {
+        ...state,
+      };
+    case Action.PERSON_SETTINGS_UPDATE_FAILURE |
+      Action.PERSON_META_LINK_ADD_FAILURE |
+      Action.PERSON_META_LINK_DELETE_FAILURE |
+      Action.PERSON_PROFILES_FETCH_FAILURE |
+      Action.PERSON_PROFILE_ADD_FAILURE |
+      Action.PERSON_PROFILE_DELETE_FAILURE |
+      Action.PERSON_PROFILE_UPDATE_FAILURE |
+      Action.PERSON_INSTAGRAM_POSTS_FETCH_FAILURE |
+      Action.PERSON_PROFILES_PROCESS_FAILURE |
+      Action.PERSON_FOLLOW_FAILURE |
+      Action.PERSON_UNFOLLOW_FAILURE |
+      Action.PERSON_LIKE_FAILURE |
+      Action.PERSON_UNLIKE_FAILURE:
+      return {
+        ...state,
+        error: action.payload,
+        errorDetails: serializeError(action.payload.error),
+      };
+
+    default:
+      return state;
+  }
+};
+//#endregion
+
+//#region > Exports
+export default personReducer;
+//#endregion
diff --git a/src/store/types.js b/src/store/types.js
index e7e6587..7ecd9b0 100644
--- a/src/store/types.js
+++ b/src/store/types.js
@@ -31,3 +31,71 @@ export const GENERAL_GITLAB_SERVER_FETCH_FAILURE =
   "GENERAL_GITLAB_SERVER_FETCH_FAILURE";
 export const GENERAL_GITLAB_SERVER_FETCH_SUCCESS =
   "GENERAL_GITLAB_SERVER_FETCH_SUCCESS";
+
+export const GENERAL_ACHIEVEMENTS_FETCH_REQUEST =
+  "GENERAL_ACHIEVEMENTS_FETCH_REQUEST";
+export const GENERAL_ACHIEVEMENTS_FETCH_FAILURE =
+  "GENERAL_ACHIEVEMENTS_FETCH_FAILURE";
+export const GENERAL_ACHIEVEMENTS_FETCH_SUCCESS =
+  "GENERAL_ACHIEVEMENTS_FETCH_SUCCESS";
+
+export const PERSON_SETTINGS_UPDATE_REQUEST = "PERSON_SETTINGS_UPDATE_REQUEST";
+export const PERSON_SETTINGS_UPDATE_FAILURE = "PERSON_SETTINGS_UPDATE_FAILURE";
+export const PERSON_SETTINGS_UPDATE_SUCCESS = "PERSON_SETTINGS_UPDATE_SUCCESS";
+
+export const PERSON_META_LINK_ADD_REQUEST = "PERSON_META_LINK_ADD_REQUEST";
+export const PERSON_META_LINK_ADD_FAILURE = "PERSON_META_LINK_ADD_FAILURE";
+export const PERSON_META_LINK_ADD_SUCCESS = "PERSON_META_LINK_ADD_SUCCESS";
+
+export const PERSON_META_LINK_DELETE_REQUEST =
+  "PERSON_META_LINK_DELETE_REQUEST";
+export const PERSON_META_LINK_DELETE_FAILURE =
+  "PERSON_META_LINK_DELETE_FAILURE";
+export const PERSON_META_LINK_DELETE_SUCCESS =
+  "PERSON_META_LINK_DELETE_SUCCESS";
+
+export const PERSON_PROFILES_FETCH_REQUEST = "PERSON_PROFILES_FETCH_REQUEST";
+export const PERSON_PROFILES_FETCH_FAILURE = "PERSON_PROFILES_FETCH_FAILURE";
+export const PERSON_PROFILES_FETCH_SUCCESS = "PERSON_PROFILES_FETCH_SUCCESS";
+
+export const PERSON_PROFILE_ADD_REQUEST = "PERSON_PROFILE_ADD_REQUEST";
+export const PERSON_PROFILE_ADD_FAILURE = "PERSON_PROFILE_ADD_FAILURE";
+export const PERSON_PROFILE_ADD_SUCCESS = "PERSON_PROFILE_ADD_SUCCESS";
+
+export const PERSON_PROFILE_DELETE_REQUEST = "PERSON_PROFILE_DELETE_REQUEST";
+export const PERSON_PROFILE_DELETE_FAILURE = "PERSON_PROFILE_DELETE_FAILURE";
+export const PERSON_PROFILE_DELETE_SUCCESS = "PERSON_PROFILE_DELETE_SUCCESS";
+
+export const PERSON_PROFILE_UPDATE_REQUEST = "PERSON_PROFILE_UPDATE_REQUEST";
+export const PERSON_PROFILE_UPDATE_FAILURE = "PERSON_PROFILE_UPDATE_FAILURE";
+export const PERSON_PROFILE_UPDATE_SUCCESS = "PERSON_PROFILE_UPDATE_SUCCESS";
+
+export const PERSON_INSTAGRAM_POSTS_FETCH_REQUEST =
+  "PERSON_INSTAGRAM_POSTS_FETCH_REQUEST";
+export const PERSON_INSTAGRAM_POSTS_FETCH_FAILURE =
+  "PERSON_INSTAGRAM_POSTS_FETCH_FAILURE";
+export const PERSON_INSTAGRAM_POSTS_FETCH_SUCCESS =
+  "PERSON_INSTAGRAM_POSTS_FETCH_SUCCESS";
+
+export const PERSON_PROFILES_PROCESS_REQUEST =
+  "PERSON_PROFILES_PROCESS_REQUEST";
+export const PERSON_PROFILES_PROCESS_FAILURE =
+  "PERSON_PROFILES_PROCESS_FAILURE";
+export const PERSON_PROFILES_PROCESS_SUCCESS =
+  "PERSON_PROFILES_PROCESS_SUCCESS";
+
+export const PERSON_FOLLOW_REQUEST = "PERSON_FOLLOW_REQUEST";
+export const PERSON_FOLLOW_FAILURE = "PERSON_FOLLOW_FAILURE";
+export const PERSON_FOLLOW_SUCCESS = "PERSON_FOLLOW_SUCCESS";
+
+export const PERSON_UNFOLLOW_REQUEST = "PERSON_UNFOLLOW_REQUEST";
+export const PERSON_UNFOLLOW_FAILURE = "PERSON_UNFOLLOW_FAILURE";
+export const PERSON_UNFOLLOW_SUCCESS = "PERSON_UNFOLLOW_SUCCESS";
+
+export const PERSON_LIKE_REQUEST = "PERSON_LIKE_REQUEST";
+export const PERSON_LIKE_FAILURE = "PERSON_LIKE_FAILURE";
+export const PERSON_LIKE_SUCCESS = "PERSON_LIKE_SUCCESS";
+
+export const PERSON_UNLIKE_REQUEST = "PERSON_UNLIKE_REQUEST";
+export const PERSON_UNLIKE_FAILURE = "PERSON_UNLIKE_FAILURE";
+export const PERSON_UNLIKE_SUCCESS = "PERSON_UNLIKE_SUCCESS";

From 1d208208d9f293d057da33f9cad066628d179b8c Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Tue, 8 Sep 2020 18:41:04 +0200
Subject: [PATCH 024/175] Add enterprise actions and reducers

Following actions and their reducers have been added:
- Enterprise General
- Enterprise Projects
- Enterprise Users
---
 src/store/actions/enterpriseActions.js   | 97 ++++++++++++++++++++++++
 src/store/actions/generalActions.js      |  2 +-
 src/store/reducers/enterpriseReducers.js | 96 +++++++++++++++++++++++
 src/store/types.js                       | 18 +++++
 4 files changed, 212 insertions(+), 1 deletion(-)
 create mode 100644 src/store/actions/enterpriseActions.js
 create mode 100644 src/store/reducers/enterpriseReducers.js

diff --git a/src/store/actions/enterpriseActions.js b/src/store/actions/enterpriseActions.js
new file mode 100644
index 0000000..4ebeb78
--- /dev/null
+++ b/src/store/actions/enterpriseActions.js
@@ -0,0 +1,97 @@
+//#region > Imports
+//> Action Types
+import * as Action from "../types";
+//> Intel
+import { Provider as INTEL_SNEK_E } from "snek-intel/lib/utils/enterprise";
+//#endregion
+
+//#region > Actions
+/**
+ * Get enterprise
+ */
+const getGeneral = (enterpriseName) => {
+  return async (dispatch, getState, {}) => {
+    try {
+      dispatch({ type: Action.ENTERPRISE_GENERAL_FETCH_REQUEST });
+
+      const enterprise = await INTEL_SNEK_E.general.getEnterprisePageGeneralContent(
+        { slug: `e-${enterpriseName}` }
+      );
+
+      dispatch({
+        type: Action.ENTERPRISE_GENERAL_FETCH_SUCCESS,
+        payload: enterprise,
+      });
+    } catch (ex) {
+      dispatch({
+        type: Action.ENTERPRISE_GENERAL_FETCH_FAILURE,
+        payload: {
+          errorCode: 601,
+          message: `Getting general enterprise failed`,
+          error: ex,
+        },
+      });
+    }
+  };
+};
+
+/**
+ * Get enterprise projects
+ */
+const getProjects = (enterpriseName) => {
+  return async (dispatch, getState, {}) => {
+    try {
+      dispatch({ type: Action.ENTERPRISE_PROJECTS_FETCH_REQUEST });
+
+      const projects = await INTEL_SNEK_E.general.getEnterprisePageProjectsContent(
+        { slug: `e-${enterpriseName}` }
+      );
+
+      dispatch({
+        type: Action.ENTERPRISE_PROJECTS_FETCH_SUCCESS,
+        payload: projects,
+      });
+    } catch (ex) {
+      dispatch({
+        type: Action.ENTERPRISE_PROJECTS_FETCH_FAILURE,
+        payload: {
+          errorCode: 601,
+          message: `Getting projects of enterprise failed`,
+          error: ex,
+        },
+      });
+    }
+  };
+};
+
+/**
+ * Get enterprise users
+ */
+const getUsers = (enterpriseName) => {
+  return async (dispatch, getState, {}) => {
+    try {
+      dispatch({ type: Action.ENTERPRISE_USERS_FETCH_REQUEST });
+
+      const projects = await INTEL_SNEK_E.general.getEnterprisePageProjectsContent(
+        { slug: `e-${enterpriseName}` }
+      );
+
+      dispatch({
+        type: Action.ENTERPRISE_USERS_FETCH_SUCCESS,
+        payload: projects,
+      });
+    } catch (ex) {
+      dispatch({
+        type: Action.ENTERPRISE_USERS_FETCH_FAILURE,
+        payload: {
+          errorCode: 601,
+          message: `Getting users of enterprise failed`,
+          error: ex,
+        },
+      });
+    }
+  };
+};
+//#endregion
+
+export { getGeneral, getProjects, getUsers };
diff --git a/src/store/actions/generalActions.js b/src/store/actions/generalActions.js
index 3a2c61a..8884d6a 100644
--- a/src/store/actions/generalActions.js
+++ b/src/store/actions/generalActions.js
@@ -5,7 +5,7 @@ import * as Action from "../types";
 import INTEL_SNEK from "snek-intel/lib/utils/snek";
 //#endregion
 
-//#region > Person Actions
+//#region > Actions
 /**
  * Get all gitlab servers for registration
  */
diff --git a/src/store/reducers/enterpriseReducers.js b/src/store/reducers/enterpriseReducers.js
new file mode 100644
index 0000000..f1ec85f
--- /dev/null
+++ b/src/store/reducers/enterpriseReducers.js
@@ -0,0 +1,96 @@
+//#region > Imports
+//> Error Serialization
+// Serialize/deserialize an error into a plain object
+import { serializeError } from "serialize-error";
+//> Action Types
+import * as Action from "../types";
+//#endregion
+
+//#region > Constant Variables
+const INIT_STATE = {
+  enterprise: {
+    general: undefined,
+    projects: undefined,
+    users: undefined,
+  },
+  error: undefined,
+  errorDetails: undefined,
+};
+//#endregion
+
+//#region > Reducers
+const generalReducer = (state = INIT_STATE, action) => {
+  switch (action.type) {
+    //> General Enterprise
+    case Action.ENTERPRISE_GENERAL_FETCH_REQUEST:
+      return state;
+    case Action.ENTERPRISE_GENERAL_FETCH_SUCCESS:
+      return {
+        ...state,
+        enterprise: {
+          ...state.enterprise,
+          general: action.payload,
+        },
+      };
+    case Action.ENTERPRISE_GENERAL_FETCH_FAILURE:
+      return {
+        ...state,
+        enterprise: {
+          ...state.enterprise,
+          general: undefined,
+        },
+        error: action.payload,
+        errorDetails: serializeError(action.payload.error),
+      };
+    //> Enterprise Projects
+    case Action.ENTERPRISE_PROJECTS_FETCH_REQUEST:
+      return state;
+    case Action.ENTERPRISE_PROJECTS_FETCH_SUCCESS:
+      return {
+        ...state,
+        enterprise: {
+          ...state.enterprise,
+          projects: action.payload,
+        },
+      };
+    case Action.ENTERPRISE_PROJECTS_FETCH_FAILURE:
+      return {
+        ...state,
+        enterprise: {
+          ...state.enterprise,
+          projects: undefined,
+        },
+        error: action.payload,
+        errorDetails: serializeError(action.payload.error),
+      };
+    //> Enterprise Users
+    case Action.ENTERPRISE_USERS_FETCH_REQUEST:
+      return state;
+    case Action.ENTERPRISE_USERS_FETCH_SUCCESS:
+      return {
+        ...state,
+        enterprise: {
+          ...state.enterprise,
+          users: action.payload,
+        },
+      };
+    case Action.ENTERPRISE_USERS_FETCH_FAILURE:
+      return {
+        ...state,
+        enterprise: {
+          ...state.enterprise,
+          users: undefined,
+        },
+        error: action.payload,
+        errorDetails: serializeError(action.payload.error),
+      };
+
+    default:
+      return state;
+  }
+};
+//#endregion
+
+//#region > Exports
+export default generalReducer;
+//#endregion
diff --git a/src/store/types.js b/src/store/types.js
index 7ecd9b0..ac3e7c7 100644
--- a/src/store/types.js
+++ b/src/store/types.js
@@ -1,3 +1,21 @@
+export const ENTERPRISE_GENERAL_FETCH_REQUEST =
+  "ENTERPRISE_GENERAL_FETCH_REQUEST";
+export const ENTERPRISE_GENERAL_FETCH_FAILURE =
+  "ENTERPRISE_GENERAL_FETCH_FAILURE";
+export const ENTERPRISE_GENERAL_FETCH_SUCCESS =
+  "ENTERPRISE_GENERAL_FETCH_SUCCESS";
+
+export const ENTERPRISE_PROJECTS_FETCH_REQUEST =
+  "ENTERPRISE_PROJECTS_FETCH_REQUEST";
+export const ENTERPRISE_PROJECTS_FETCH_FAILURE =
+  "ENTERPRISE_PROJECTS_FETCH_FAILURE";
+export const ENTERPRISE_PROJECTS_FETCH_SUCCESS =
+  "ENTERPRISE_PROJECTS_FETCH_SUCCESS";
+
+export const ENTERPRISE_USERS_FETCH_REQUEST = "ENTERPRISE_USERS_FETCH_REQUEST";
+export const ENTERPRISE_USERS_FETCH_FAILURE = "ENTERPRISE_USERS_FETCH_FAILURE";
+export const ENTERPRISE_USERS_FETCH_SUCCESS = "ENTERPRISE_USERS_FETCH_SUCCESS";
+
 export const USER_LOGIN_REQUEST = "USER_LOGIN_REQUEST";
 export const USER_LOGIN_FAILURE = "USER_LOGIN_FAILURE";
 export const USER_LOGIN_SUCCESS = "USER_LOGIN_SUCCESS";

From f176062de5f9d59ffc6c7a05e4f2238d313179cf Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Tue, 8 Sep 2020 18:53:37 +0200
Subject: [PATCH 025/175] Add achievement redeem action and reducer

Following actions and their reducers have been added:
- Redeem Achievement
---
 src/store/actions/personActions.js   | 45 ++++++++++++++++++++++++++++
 src/store/reducers/personReducers.js |  9 ++++--
 src/store/types.js                   |  7 +++++
 3 files changed, 58 insertions(+), 3 deletions(-)

diff --git a/src/store/actions/personActions.js b/src/store/actions/personActions.js
index 842f1f1..3cc8607 100644
--- a/src/store/actions/personActions.js
+++ b/src/store/actions/personActions.js
@@ -435,6 +435,50 @@ const unlike = (receiverPersonName) => {
   };
 };
 
+/**
+ * Redeem a achievement with sequence
+ */
+const redeemAchievement = (sequence) => {
+  return async (dispatch, getState, {}) => {
+    try {
+      dispatch({ type: Action.PERSON_ACHIEVEMENT_REDEEM_REQUEST });
+
+      const state = getState();
+      const personName = extractNameFromPersonSlug(state.user.person.slug);
+
+      const res = await INTEL_SNEK.achievements.redeem({
+        personName,
+        sequence,
+      });
+
+      if (res.ok) {
+        dispatch({
+          type: Action.PERSON_ACHIEVEMENT_REDEEM_SUCCESS,
+          payload: achievements,
+        });
+      } else {
+        dispatch({
+          type: Action.PERSON_ACHIEVEMENT_REDEEM_FAILURE,
+          payload: {
+            errorCode: 601,
+            message: `Redeeming achievement failed. Good try but try again`,
+            error: ex,
+          },
+        });
+      }
+    } catch (ex) {
+      dispatch({
+        type: Action.PERSON_ACHIEVEMENT_REDEEM_FAILURE,
+        payload: {
+          errorCode: 601,
+          message: `Redeeming achievement failed`,
+          error: ex,
+        },
+      });
+    }
+  };
+};
+
 //#endregion
 //#region > Exports
 export {
@@ -451,5 +495,6 @@ export {
   unfollow,
   like,
   unlike,
+  redeemAchievement,
 };
 //#endregion
diff --git a/src/store/reducers/personReducers.js b/src/store/reducers/personReducers.js
index 92607e6..371b17b 100644
--- a/src/store/reducers/personReducers.js
+++ b/src/store/reducers/personReducers.js
@@ -30,7 +30,8 @@ const personReducer = (state = INIT_STATE, action) => {
       Action.PERSON_FOLLOW_REQUEST |
       Action.PERSON_UNFOLLOW_REQUEST |
       Action.PERSON_LIKE_REQUEST |
-      Action.PERSON_UNLIKE_REQUEST:
+      Action.PERSON_UNLIKE_REQUEST |
+      Action.PERSON_ACHIEVEMENT_REDEEM_REQUEST:
       return state;
     case Action.PERSON_SETTINGS_UPDATE_SUCCESS |
       Action.PERSON_META_LINK_ADD_SUCCESS |
@@ -44,7 +45,8 @@ const personReducer = (state = INIT_STATE, action) => {
       Action.PERSON_FOLLOW_SUCCESS |
       Action.PERSON_UNFOLLOW_SUCCESS |
       Action.PERSON_LIKE_SUCCESS |
-      Action.PERSON_UNLIKE_SUCCESS:
+      Action.PERSON_UNLIKE_SUCCESS |
+      Action.PERSON_ACHIEVEMENT_REDEEM_SUCCESS:
       return {
         ...state,
       };
@@ -60,7 +62,8 @@ const personReducer = (state = INIT_STATE, action) => {
       Action.PERSON_FOLLOW_FAILURE |
       Action.PERSON_UNFOLLOW_FAILURE |
       Action.PERSON_LIKE_FAILURE |
-      Action.PERSON_UNLIKE_FAILURE:
+      Action.PERSON_UNLIKE_FAILURE |
+      Action.PERSON_ACHIEVEMENT_REDEEM_FAILURE:
       return {
         ...state,
         error: action.payload,
diff --git a/src/store/types.js b/src/store/types.js
index ac3e7c7..bd2ae37 100644
--- a/src/store/types.js
+++ b/src/store/types.js
@@ -117,3 +117,10 @@ export const PERSON_LIKE_SUCCESS = "PERSON_LIKE_SUCCESS";
 export const PERSON_UNLIKE_REQUEST = "PERSON_UNLIKE_REQUEST";
 export const PERSON_UNLIKE_FAILURE = "PERSON_UNLIKE_FAILURE";
 export const PERSON_UNLIKE_SUCCESS = "PERSON_UNLIKE_SUCCESS";
+
+export const PERSON_ACHIEVEMENT_REDEEM_REQUEST =
+  "PERSON_ACHIEVEMENT_REDEEM_REQUEST";
+export const PERSON_ACHIEVEMENT_REDEEM_FAILURE =
+  "PERSON_ACHIEVEMENT_REDEEM_FAILURE";
+export const PERSON_CHIEVEMENT_REDEEM_SUCCESS =
+  "PERSON_CHIEVEMENT_REDEEM_SUCCESS";

From b32b200c9d905d210181916602bfa7d371f5fae9 Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Tue, 8 Sep 2020 19:02:40 +0200
Subject: [PATCH 026/175] Fix typo in store types

A type has been fixed. Yey.
---
 src/store/types.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/store/types.js b/src/store/types.js
index bd2ae37..7514429 100644
--- a/src/store/types.js
+++ b/src/store/types.js
@@ -122,5 +122,5 @@ export const PERSON_ACHIEVEMENT_REDEEM_REQUEST =
   "PERSON_ACHIEVEMENT_REDEEM_REQUEST";
 export const PERSON_ACHIEVEMENT_REDEEM_FAILURE =
   "PERSON_ACHIEVEMENT_REDEEM_FAILURE";
-export const PERSON_CHIEVEMENT_REDEEM_SUCCESS =
-  "PERSON_CHIEVEMENT_REDEEM_SUCCESS";
+export const PERSON_ACHIEVEMENT_REDEEM_SUCCESS =
+  "PERSON_ACHIEVEMENT_REDEEM_SUCCESS";

From b930d1871abea3b003473354a22c8ba319104f8e Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Tue, 8 Sep 2020 22:52:40 +0200
Subject: [PATCH 027/175] Add missing register export

The export of register in the user action
has been added.
---
 src/store/actions/userActions.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/store/actions/userActions.js b/src/store/actions/userActions.js
index 45079a6..cd3bea2 100644
--- a/src/store/actions/userActions.js
+++ b/src/store/actions/userActions.js
@@ -156,7 +156,7 @@ const register = (
 //#endregion
 
 //#region > Exports
-export { loginAction, logoutAction, getPerson };
+export { loginAction, logoutAction, getPerson, register };
 //#endregion
 
 /**

From 31c0bf1da355d65dab3e3bac7f71686742027568 Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Tue, 8 Sep 2020 23:15:04 +0200
Subject: [PATCH 028/175] Add valid username check

Now it is possible to check if a specific
username is already taken.
---
 src/store/actions/userActions.js   | 28 +++++++++++++++++++++++++++-
 src/store/reducers/userReducers.js | 11 +++++++++++
 src/store/types.js                 |  4 ++++
 3 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/src/store/actions/userActions.js b/src/store/actions/userActions.js
index cd3bea2..d0c87e3 100644
--- a/src/store/actions/userActions.js
+++ b/src/store/actions/userActions.js
@@ -153,10 +153,36 @@ const register = (
     }
   };
 };
+
+/**
+ * Check if there is already a registered user with the provided username
+ */
+const isValidUsername = async (username) => {
+  return async (dispatch, getState, {}) => {
+    try {
+      dispatch({ type: Action.USER_EXISTS_CHECK_REQUEST });
+
+      const exists = await INTEL_SNEK.general.checkUserExists(username);
+
+      dispatch({ type: Action.USER_EXISTS_CHECK_SUCCESS });
+
+      return exists;
+    } catch (ex) {
+      dispatch({
+        type: Action.USER_EXISTS_CHECK_FAILURE,
+        payload: {
+          errorCode: 601,
+          message: `Cannot check if there is already a user with '${username}' as name`,
+          error: ex,
+        },
+      });
+    }
+  };
+};
 //#endregion
 
 //#region > Exports
-export { loginAction, logoutAction, getPerson, register };
+export { loginAction, logoutAction, getPerson, register, isValidUsername };
 //#endregion
 
 /**
diff --git a/src/store/reducers/userReducers.js b/src/store/reducers/userReducers.js
index cf9169d..a31e3f1 100644
--- a/src/store/reducers/userReducers.js
+++ b/src/store/reducers/userReducers.js
@@ -79,6 +79,17 @@ const userReducer = (state = INIT_STATE, action) => {
         error: action.payload,
         errorDetails: serializeError(action.payload.error),
       };
+    //> User Exists Check
+    case Action.USER_EXISTS_CHECK_REQUEST:
+      return state;
+    case Action.USER_EXISTS_CHECK_SUCCESS:
+      return { ...state };
+    case Action.USER_EXISTS_CHECK_FAILURE:
+      return {
+        ...state,
+        error: action.payload,
+        errorDetails: serializeError(action.payload.error),
+      };
 
     default:
       return state;
diff --git a/src/store/types.js b/src/store/types.js
index 7514429..313ccab 100644
--- a/src/store/types.js
+++ b/src/store/types.js
@@ -32,6 +32,10 @@ export const USER_PERSON_SIGNUP_REQUEST = "USER_PERSON_SIGNUP_REQUEST";
 export const USER_PERSON_SIGNUP_FAILURE = "USER_PERSON_SIGNUP_FAILURE";
 export const USER_PERSON_SIGNUP_SUCCESS = "USER_PERSON_SIGNUP_SUCCESS";
 
+export const USER_EXISTS_CHECK_REQUEST = "USER_EXISTS_CHECK_REQUEST";
+export const USER_EXISTS_CHECK_FAILURE = "USER_EXISTS_CHECK_FAILURE";
+export const USER_EXISTS_CHECK_SUCCESS = "USER_EXISTS_CHECK_SUCCESS";
+
 export const GENERAL_PERSON_FETCH_REQUEST = "GENERAL_PERSON_FETCH_REQUEST";
 export const GENERAL_PERSON_FETCH_FAILURE = "GENERAL_PERSON_FETCH_FAILURE";
 export const GENERAL_PERSON_FETCH_SUCCESS = "GENERAL_PERSON_FETCH_SUCCESS";

From 1b42c34c51e5c4aef96a2f9cee77ac4ffb788ec4 Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Tue, 8 Sep 2020 23:56:47 +0200
Subject: [PATCH 029/175] Add talk actions and reducers

Following actions and their reducers have been added:
- Get Talk
- Get Talks
- Add Talk
- Delete Talk
- Update Talk
- Add Talk Comment
- Delete Talk Comment
- Update Talk Comment
---
 src/store/actions/talkActions.js   | 291 +++++++++++++++++++++++++++++
 src/store/reducers/index.js        |   4 +
 src/store/reducers/talkReducers.js |  60 ++++++
 src/store/types.js                 |  32 ++++
 4 files changed, 387 insertions(+)
 create mode 100644 src/store/actions/talkActions.js
 create mode 100644 src/store/reducers/talkReducers.js

diff --git a/src/store/actions/talkActions.js b/src/store/actions/talkActions.js
new file mode 100644
index 0000000..b39e888
--- /dev/null
+++ b/src/store/actions/talkActions.js
@@ -0,0 +1,291 @@
+//#region > Imports
+//> Action Types
+import * as Action from "../types";
+//> Intel
+import INTEL_SNEK from "snek-intel/lib/utils/snek";
+//#endregion
+
+//#region > Actions
+/**
+ * Get a specific talk
+ */
+const getTalk = (id) => {
+  return async (dispatch, getState, {}) => {
+    try {
+      dispatch({ type: Action.TALKS_FETCH_REQUEST });
+
+      const talk = await INTEL_SNEK.talk.getTalk({ id });
+
+      dispatch({
+        type: Action.TALKS_FETCH_SUCCESS,
+        payload: talk,
+      });
+    } catch (ex) {
+      dispatch({
+        type: Action.TALK_FETCH_FAILURE,
+        payload: {
+          errorCode: 601,
+          message: `Getting talk id: (${id}) failed`,
+          error: ex,
+        },
+      });
+    }
+  };
+};
+
+/**
+ * Get all talks
+ */
+const getTalks = () => {
+  return async (dispatch, getState, {}) => {
+    try {
+      dispatch({ type: Action.TALKS_FETCH_REQUEST });
+
+      const talks = await INTEL_SNEK.talk.getTalks();
+
+      dispatch({
+        type: Action.TALKS_FETCH_SUCCESS,
+        payload: talks,
+      });
+    } catch (ex) {
+      dispatch({
+        type: Action.TALKS_FETCH_FAILURE,
+        payload: {
+          errorCode: 601,
+          message: `Getting talks failed`,
+          error: ex,
+        },
+      });
+    }
+  };
+};
+
+/**
+ * Add a talk
+ */
+const addTalk = (
+  talkOptions = {
+    title,
+    description,
+    displayUrl,
+    downloadUrl,
+    path,
+    url,
+  }
+) => {
+  return async (dispatch, getState, {}) => {
+    try {
+      dispatch({ type: Action.TALK_ADD_REQUEST });
+
+      let personName;
+
+      try {
+        personName = extractNameFromPersonSlug(state.user.person.slug);
+      } catch {
+        throw new Error("Something went wrong");
+      }
+
+      const talk = await INTEL_SNEK.talk.addTalk({ personName, talkOptions });
+
+      dispatch({
+        type: Action.TALK_ADD_SUCCESS,
+        payload: talk,
+      });
+
+      return talk;
+    } catch (ex) {
+      dispatch({
+        type: Action.TALK_ADD_FAILURE,
+        payload: {
+          errorCode: 601,
+          message: `Adding talk failed`,
+          error: ex,
+        },
+      });
+    }
+  };
+};
+
+/**
+ * Delete a talk
+ */
+const deleteTalk = (id) => {
+  return async (dispatch, getState, {}) => {
+    try {
+      dispatch({ type: Action.TALK_DELETE_REQUEST });
+
+      const remainingTalks = await INTEL_SNEK.talk.deleteTalk({ talkId: id });
+
+      dispatch({
+        type: Action.TALK_DELETE_SUCCESS,
+      });
+
+      return remainingTalks;
+    } catch (ex) {
+      dispatch({
+        type: Action.TALK_DELETE_FAILURE,
+        payload: {
+          errorCode: 601,
+          message: `Deleting talk failed`,
+          error: ex,
+        },
+      });
+    }
+  };
+};
+
+/**
+ * Delete a talk
+ */
+const updateTalk = (
+  id,
+  nextTalk = {
+    title,
+    description,
+    displayUrl,
+    downloadUrl,
+    path,
+    url,
+  }
+) => {
+  return async (dispatch, getState, {}) => {
+    try {
+      dispatch({ type: Action.TALK_UPDATE_REQUEST });
+
+      const updatedTalk = await INTEL_SNEK.talk.updateTalk({
+        talkId: id,
+        toUpdate: { ...nextTalk },
+      });
+
+      dispatch({
+        type: Action.TALK_UPDATE_SUCCESS,
+      });
+
+      return updatedTalk;
+    } catch (ex) {
+      dispatch({
+        type: Action.TALK_DELETE_FAILURE,
+        payload: {
+          errorCode: 601,
+          message: `Updating talk failed`,
+          error: ex,
+        },
+      });
+    }
+  };
+};
+
+/**
+ * Add a comment to a talk
+ */
+const addTalkComment = (
+  commentOptions = {
+    talkId,
+    text,
+    replyToId,
+  }
+) => {
+  return async (dispatch, getState, {}) => {
+    try {
+      dispatch({ type: Action.TALK_COMMENT_ADD_REQUEST });
+
+      let personName;
+
+      try {
+        personName = extractNameFromPersonSlug(state.user.person.slug);
+      } catch {
+        throw new Error("Something went wrong");
+      }
+
+      const talk = await INTEL_SNEK.talk.addTalkComment({
+        personName,
+        commentOptions,
+      });
+
+      dispatch({
+        type: Action.TALK_COMMENT_ADD_SUCCESS,
+        payload: talk,
+      });
+
+      return talk;
+    } catch (ex) {
+      dispatch({
+        type: Action.TALK_COMMENT_ADD_FAILURE,
+        payload: {
+          errorCode: 601,
+          message: `Adding talk comment failed`,
+          error: ex,
+        },
+      });
+    }
+  };
+};
+
+/**
+ * Delete a talk comment
+ */
+const deleteTalkComment = (id) => {
+  return async (dispatch, getState, {}) => {
+    try {
+      dispatch({ type: Action.TALK_COMMENT_DELETE_REQUEST });
+
+      const remainingComments = await INTEL_SNEK.talk.deleteTalkComment({
+        commentId: id,
+      });
+
+      dispatch({
+        type: Action.TALK_COMMENT_DELETE_SUCCESS,
+      });
+
+      return remainingComments;
+    } catch (ex) {
+      dispatch({
+        type: Action.TALK_COMMENT_DELETE_FAILURE,
+        payload: {
+          errorCode: 601,
+          message: `Deleting talk comment failed`,
+          error: ex,
+        },
+      });
+    }
+  };
+};
+
+/**
+ * Delete a talk
+ */
+const updateTalk = (
+  id,
+  nextComment = {
+    text,
+  }
+) => {
+  return async (dispatch, getState, {}) => {
+    try {
+      dispatch({ type: Action.TALK_COMMENT_UPDATE_REQUEST });
+
+      const updatedComment = await INTEL_SNEK.talk.updateTalkComment({
+        talkId: id,
+        toUpdate: nextComment,
+      });
+
+      dispatch({
+        type: Action.TALK_COMMENT_UPDATE_SUCCESS,
+      });
+
+      return updatedComment;
+    } catch (ex) {
+      dispatch({
+        type: Action.TALK_COMMENT_UPDATE_FAILURE,
+        payload: {
+          errorCode: 601,
+          message: `Updating talk comment failed`,
+          error: ex,
+        },
+      });
+    }
+  };
+};
+//#endregion
+
+export { getTalk, getTalks, addTalk, deleteTalk, updateTalk };
diff --git a/src/store/reducers/index.js b/src/store/reducers/index.js
index d2c15c7..f933b2f 100644
--- a/src/store/reducers/index.js
+++ b/src/store/reducers/index.js
@@ -13,6 +13,8 @@ import userReducers from "./userReducers";
 import personReducers from "./personReducers";
 // General
 import generalReducers from "./generalReducers";
+// Talk
+import talkReducer from "./talkReducers";
 
 //#endregion
 
@@ -26,6 +28,8 @@ const rootReducer = combineReducers({
   person: personReducers,
   // General data
   general: generalReducers,
+  // Talk data
+  talk: talkReducer,
 });
 //#endregion
 
diff --git a/src/store/reducers/talkReducers.js b/src/store/reducers/talkReducers.js
new file mode 100644
index 0000000..9e0893c
--- /dev/null
+++ b/src/store/reducers/talkReducers.js
@@ -0,0 +1,60 @@
+//#region > Imports
+//> Error Serialization
+// Serialize/deserialize an error into a plain object
+import { serializeError } from "serialize-error";
+//> Action Types
+import * as Action from "../types";
+//#endregion
+
+//#region > Constant Variables
+const INIT_STATE = {
+  talks: undefined,
+  fetchedTalk: undefined,
+  error: undefined,
+  errorDetails: undefined,
+};
+//#endregion
+
+//#region > Reducers
+const talkReducer = (state = INIT_STATE, action) => {
+  switch (action.type) {
+    //> Talk
+    case Action.TALK_FETCH_REQUEST:
+      return state;
+    case Action.TALK_FETCH_SUCCESS:
+      return {
+        ...state,
+        fetchedTalk: action.payload,
+      };
+    case Action.TALK_FETCH_FAILURE:
+      return {
+        ...state,
+        fetchedTalk: undefined,
+        error: action.payload,
+        errorDetails: serializeError(action.payload.error),
+      };
+    //> Talks
+    case Action.TALKS_FETCH_REQUEST:
+      return state;
+    case Action.TALKS_FETCH_SUCCESS:
+      return {
+        ...state,
+        talks: action.payload,
+      };
+    case Action.TALKS_FETCH_FAILURE:
+      return {
+        ...state,
+        talks: undefined,
+        error: action.payload,
+        errorDetails: serializeError(action.payload.error),
+      };
+
+    default:
+      return state;
+  }
+};
+//#endregion
+
+//#region > Exports
+export default talkReducer;
+//#endregion
diff --git a/src/store/types.js b/src/store/types.js
index 313ccab..463a8e2 100644
--- a/src/store/types.js
+++ b/src/store/types.js
@@ -128,3 +128,35 @@ export const PERSON_ACHIEVEMENT_REDEEM_FAILURE =
   "PERSON_ACHIEVEMENT_REDEEM_FAILURE";
 export const PERSON_ACHIEVEMENT_REDEEM_SUCCESS =
   "PERSON_ACHIEVEMENT_REDEEM_SUCCESS";
+
+export const TALK_FETCH_REQUEST = "TALK_FETCH_REQUEST";
+export const TALK_FETCH_FAILURE = "TALK_FETCH_FAILURE";
+export const TALK_FETCH_SUCCESS = "TALK_FETCH_SUCCESS";
+
+export const TALKS_FETCH_REQUEST = "TALKS_FETCH_REQUEST";
+export const TALKS_FETCH_FAILURE = "TALKS_FETCH_FAILURE";
+export const TALKS_FETCH_SUCCESS = "TALKS_FETCH_SUCCESS";
+
+export const TALK_ADD_REQUEST = "TALK_ADD_REQUEST";
+export const TALK_ADD_FAILURE = "TALK_ADD_FAILURE";
+export const TALK_ADD_SUCCESS = "TALK_ADD_SUCCESS";
+
+export const TALK_DELETE_REQUEST = "TALK_DELETE_REQUEST";
+export const TALK_DELETE_FAILURE = "TALK_DELETE_FAILURE";
+export const TALK_DELETE_SUCCESS = "TALK_DELETE_SUCCESS";
+
+export const TALK_UPDATE_REQUEST = "TALK_UPDATE_REQUEST";
+export const TALK_UPDATE_FAILURE = "TALK_UPDATE_FAILURE";
+export const TALK_UPDATE_SUCCESS = "TALK_UPDATE_SUCCESS";
+
+export const TALK_COMMENT_ADD_REQUEST = "TALK_COMMENT_ADD_REQUEST";
+export const TALK_COMMENT_ADD_FAILURE = "TALK_COMMENT_ADD_FAILURE";
+export const TALK_COMMENT_ADD_SUCCESS = "TALK_COMMENT_ADD_SUCCESS";
+
+export const TALK_COMMENT_DELETE_REQUEST = "TALK_COMMENT_DELETE_REQUEST";
+export const TALK_COMMENT_DELETE_FAILURE = "TALK_COMMENT_DELETE_FAILURE";
+export const TALK_COMMENT_DELETE_SUCCESS = "TALK_COMMENT_DELETE_SUCCESS";
+
+export const TALK_COMMENT_UPDATE_REQUEST = "TALK_COMMENT_UPDATE_REQUEST";
+export const TALK_COMMENT_UPDATE_FAILURE = "TALK_COMMENT_UPDATE_FAILURE";
+export const TALK_COMMENT_UPDATE_SUCCESS = "TALK_COMMENT_UPDATE_SUCCESS";

From c986125d4f1053751c236ea5d99c02329335ce58 Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Wed, 9 Sep 2020 13:43:14 +0200
Subject: [PATCH 030/175] Adjust component name, location and adjust for new
 data structure

Now it is possible to view the person page with the new data
structure.
---
 src/Routes.js                                 |   4 +-
 .../organisms/ProfileInfo/index.jsx           | 380 ------------------
 src/components/organisms/index.js             |   7 +-
 .../profiles/SoftwareEngineer/index.jsx       |  43 --
 src/components/organisms/profiles/index.js    |  16 -
 .../sections/person/InfoCard/index.jsx        | 349 ++++++++++++++++
 .../person/InfoCard/infocard.scss}            |   0
 .../person/Tabs}/index.jsx                    |  41 +-
 .../person/Tabs/tabs.scss}                    |   0
 .../organisms/tabs/TalksTab/index.jsx         |  42 +-
 .../{ProfilePage => PersonPage}/index.jsx     |  33 +-
 .../profile.scss => PersonPage/person.scss}   |   0
 src/components/pages/index.js                 |   4 +-
 13 files changed, 426 insertions(+), 493 deletions(-)
 delete mode 100644 src/components/organisms/ProfileInfo/index.jsx
 delete mode 100644 src/components/organisms/profiles/SoftwareEngineer/index.jsx
 delete mode 100644 src/components/organisms/profiles/index.js
 create mode 100644 src/components/organisms/sections/person/InfoCard/index.jsx
 rename src/components/organisms/{ProfileInfo/profileinfo.scss => sections/person/InfoCard/infocard.scss} (100%)
 rename src/components/organisms/{SoftwareTabs => sections/person/Tabs}/index.jsx (76%)
 rename src/components/organisms/{SoftwareTabs/softwaretabs.scss => sections/person/Tabs/tabs.scss} (100%)
 rename src/components/pages/{ProfilePage => PersonPage}/index.jsx (75%)
 rename src/components/pages/{ProfilePage/profile.scss => PersonPage/person.scss} (100%)

diff --git a/src/Routes.js b/src/Routes.js
index fbea44b..69d96a6 100644
--- a/src/Routes.js
+++ b/src/Routes.js
@@ -8,7 +8,7 @@ import { Route, Switch } from "react-router-dom";
 //> Components
 import {
   HomePage,
-  ProfilePage,
+  PersonPage,
   CompanyPage,
   //   TalkPage,
   //   SettingsPage,
@@ -26,7 +26,7 @@ class Routes extends React.Component {
         <Route
           exact
           path="/u/:username"
-          component={(props) => <ProfilePage {...props} />}
+          component={(props) => <PersonPage {...props} />}
         />
         <Route
           exact
diff --git a/src/components/organisms/ProfileInfo/index.jsx b/src/components/organisms/ProfileInfo/index.jsx
deleted file mode 100644
index d386a8d..0000000
--- a/src/components/organisms/ProfileInfo/index.jsx
+++ /dev/null
@@ -1,380 +0,0 @@
-//#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 {
-  MDBBtn,
-  MDBBadge,
-  MDBView,
-  MDBMask,
-  MDBPopover,
-  MDBPopoverBody,
-  MDBPopoverHeader,
-  MDBIcon,
-  MDBTooltip,
-} 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";
-
-//> Components
-import { LanguageChart } from "../../atoms";
-//> Style Sheet
-import "./profileinfo.scss";
-//#endregion
-
-//#region > Components
-/** @class This component displays personal information and status of a user */
-class ProfileInfo extends React.Component {
-  state = { limitLanguages: true };
-
-  componentDidMount = () => {
-    const { fetchedUser } = this.props;
-
-    if (fetchedUser && !this.state.sources) {
-      this.displaySources(fetchedUser.platformData.profile.sources);
-    }
-  };
-
-  displaySources = (sources) => {
-    let res = sources.map((source, i) => {
-      switch (source.source) {
-        case "github":
-          return "github";
-        case "gitlab":
-          return "gitlab";
-        case "bitbucket":
-          return "bitbucket";
-        default:
-          return false;
-      }
-    });
-
-    this.setState({
-      sources: res,
-    });
-  };
-
-  render() {
-    const { fetchedUser } = this.props;
-
-    return (
-      <div className="social">
-        <MDBView>
-          <img
-            className="img-fluid main-avatar"
-            src={fetchedUser && fetchedUser.platformData.user.avatarUrl}
-          />
-          <MDBMask />
-        </MDBView>
-        <div className="bg-elegant py-3 px-3">
-          <h4 className="mb-0">
-            {fetchedUser && fetchedUser.platformData.user.firstName && (
-              <>{fetchedUser.platformData.user.firstName}</>
-            )}{" "}
-            {fetchedUser && fetchedUser.platformData.user.lastName && (
-              <>{fetchedUser.platformData.user.lastName}</>
-            )}
-          </h4>
-          {fetchedUser &&
-            fetchedUser.platformData.user.settings &&
-            fetchedUser.platformData.user.settings.showLocalRanking && (
-              <p className="mb-1 text-muted">
-                <small>
-                  <a href="#!">#3</a> in your region
-                </small>
-              </p>
-            )}
-          {fetchedUser && fetchedUser.platformData.user.company && (
-            <>
-              {fetchedUser &&
-                fetchedUser.platformData.user.settings.showCompanyPublic && (
-                  <small className="text-muted py-3">
-                    {fetchedUser.platformData.user.company}
-                  </small>
-                )}
-            </>
-          )}
-          <div className="badges">
-            {fetchedUser && fetchedUser.accessories.badges && (
-              <>
-                {fetchedUser.accessories.badges.bids.map((bid, i) => {
-                  switch (bid) {
-                    case "6403bf4d17b8472735a93b71a37e0bd0":
-                      return (
-                        <MDBBadge color="secondary-color" key={i}>
-                          Alpha
-                        </MDBBadge>
-                      );
-                  }
-                })}
-              </>
-            )}
-          </div>
-          {fetchedUser && fetchedUser.platformData.profile.statusMessage && (
-            <div className="d-flex pt-3">
-              {fetchedUser.platformData.profile.statusEmojiHTML && (
-                <div
-                  dangerouslySetInnerHTML={{
-                    __html: fetchedUser.platformData.profile.statusEmojiHTML,
-                  }}
-                />
-              )}
-              <small className="px-1">
-                {fetchedUser.platformData.profile.statusMessage}
-              </small>
-            </div>
-          )}
-        </div>
-        <div className="py-3 follow text-center">
-          <MDBBtn color="green" outline size="md">
-            <MDBIcon icon="plus-circle" className="mr-2" />
-            Follow
-          </MDBBtn>
-          <MDBBtn color="primary" outline size="md">
-            <MDBIcon icon="angle-up" className="mr-2" />
-            Upvote
-          </MDBBtn>
-        </div>
-        <div className="bg-light py-3 px-2">
-          <p>Connected accounts</p>
-          <div className="connected mt-2 text-muted">
-            <MDBIcon
-              fab
-              icon="github"
-              size="lg"
-              className={
-                this.state.sources && this.state.sources.includes("github")
-                  ? "active"
-                  : ""
-              }
-            />
-            <MDBIcon
-              fab
-              icon="gitlab"
-              size="lg"
-              className={
-                this.state.sources && this.state.sources.includes("gitlab")
-                  ? "active"
-                  : ""
-              }
-            />
-            <MDBIcon
-              fab
-              icon="bitbucket"
-              size="lg"
-              className={
-                this.state.sources && this.state.sources.includes("bitbucket")
-                  ? "active"
-                  : ""
-              }
-            />
-          </div>
-          <hr />
-          <p>Organisations</p>
-          {fetchedUser && (
-            <div
-              className={
-                fetchedUser.platformData.profile.organizations.length >= 5
-                  ? "orgs text-center"
-                  : "orgs"
-              }
-            >
-              {fetchedUser.platformData.profile.organizations.length > 0 ? (
-                <>
-                  {fetchedUser.platformData.profile.organizations.map(
-                    (org, i) => {
-                      return (
-                        <MDBPopover placement="top" popover clickable key={i}>
-                          <MDBBtn color="link">
-                            <div className="org">
-                              {org.avatarUrl ? (
-                                <img src={org.avatarUrl} alt={org.name} />
-                              ) : (
-                                <MDBIcon
-                                  icon="sitemap"
-                                  className="text-muted"
-                                  size="lg"
-                                />
-                              )}
-                              {org.members && (
-                                <div className="tag">{org.members.length}</div>
-                              )}
-                            </div>
-                          </MDBBtn>
-                          <div>
-                            <MDBPopoverHeader>
-                              <div>
-                                {org.platformName}/
-                                <strong className="text-dark">
-                                  {org.name}
-                                </strong>
-                              </div>
-                              <div className="d-flex justify-content-between">
-                                <div>
-                                  <small>
-                                    {org.members
-                                      ? org.members.length
-                                      : "Unknown"}{" "}
-                                    members
-                                  </small>
-                                </div>
-                                <div className="member-list">
-                                  <div>
-                                    {org.members &&
-                                      org.members.length > 0 &&
-                                      org.members
-                                        .slice(0, 8)
-                                        .map((member, m) => {
-                                          return (
-                                            <MDBTooltip
-                                              domElement
-                                              tag="span"
-                                              placement="top"
-                                              key={m}
-                                            >
-                                              <a
-                                                href={member.url}
-                                                target="_blank"
-                                                rel="noopener noreferrer"
-                                              >
-                                                <img
-                                                  src={member.avatarUrl}
-                                                  alt={member.username}
-                                                />
-                                              </a>
-                                              <span>{member.username}</span>
-                                            </MDBTooltip>
-                                          );
-                                        })}
-                                  </div>
-                                  {org.members && org.members.length > 9 && (
-                                    <div className="text-muted text-right">
-                                      {org.platformName === "github" && (
-                                        <a
-                                          href={`https://www.github.com/orgs/${org.name}/people`}
-                                          target="_blank"
-                                          rel="noopener noreferrer"
-                                        >
-                                          <small>Show all</small>
-                                        </a>
-                                      )}
-                                    </div>
-                                  )}
-                                </div>
-                              </div>
-                            </MDBPopoverHeader>
-                            <MDBPopoverBody>
-                              <p className="my-2">{org.description}</p>
-                              <a
-                                href={org.url}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                              >
-                                Show more
-                                <MDBIcon
-                                  icon="external-link-alt"
-                                  className="ml-1"
-                                />
-                              </a>
-                            </MDBPopoverBody>
-                          </div>
-                        </MDBPopover>
-                      );
-                    }
-                  )}
-                </>
-              ) : (
-                <small>
-                  {fetchedUser.username} hasn't joined an organisation yet.
-                </small>
-              )}
-            </div>
-          )}
-          {fetchedUser.platformData?.statistic?.languages?.length > 0 && (
-            <div className="px-1">
-              <hr />
-              <p>Top languages</p>
-              <LanguageChart
-                languages={fetchedUser.platformData.statistic.languages}
-                height={10}
-              />
-              {fetchedUser.platformData.statistic.languages
-                .slice(
-                  0,
-                  this.state.limitLanguages
-                    ? 3
-                    : fetchedUser.platformData.statistic.languages.length - 1
-                )
-                .map((language, i) => {
-                  return (
-                    <small className="text-left text-muted d-block" key={i}>
-                      <div className="d-flex justify-content-between">
-                        <div>
-                          <MDBIcon
-                            icon="square"
-                            className="pr-1"
-                            style={{
-                              color: language.color,
-                            }}
-                          />
-                          <span>{language.name}</span>
-                        </div>
-                        <span className="text-muted small">
-                          {language.share}%
-                        </span>
-                      </div>
-                    </small>
-                  );
-                })}
-              {this.state.limitLanguages &&
-              fetchedUser.platformData.statistic.languages.length > 3 ? (
-                <p
-                  className="small clickable blue-text d-inline"
-                  onClick={() => this.setState({ limitLanguages: false })}
-                >
-                  Show more
-                </p>
-              ) : (
-                <p
-                  className="small clickable blue-text d-inline"
-                  onClick={() => this.setState({ limitLanguages: true })}
-                >
-                  Show less
-                </p>
-              )}
-            </div>
-          )}
-        </div>
-      </div>
-    );
-  }
-}
-//#endregion
-
-//#region > Redux Mapping
-const mapStateToProps = (state) => ({
-  fetchedUser: state.user.fetchedUser,
-});
-
-const mapDispatchToProps = (dispatch) => {
-  return {};
-};
-//#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)(ProfileInfo);
-//#endregion
-
-/**
- * SPDX-License-Identifier: (EUPL-1.2)
- * Copyright © 2019-2020 Simon Prast
- */
diff --git a/src/components/organisms/index.js b/src/components/organisms/index.js
index 8f09366..64a46c5 100644
--- a/src/components/organisms/index.js
+++ b/src/components/organisms/index.js
@@ -1,13 +1,14 @@
 //#region > Imports
 //> Organisms
 // Import all components to export them for easy access from parent components
-import SoftwareTabs from "./SoftwareTabs";
-import ProfileInfo from "./ProfileInfo";
+import SoftwareTabs from "./sections/person/Tabs";
+import PersonInfoCard from "./sections/person/InfoCard";
+import PersonTabs from "./sections/person/Tabs";
 //#endregion
 
 //#region > Exports
 //> Organisms
-export { SoftwareTabs, ProfileInfo };
+export { SoftwareTabs, PersonInfoCard, PersonTabs };
 //#endregion
 
 /**
diff --git a/src/components/organisms/profiles/SoftwareEngineer/index.jsx b/src/components/organisms/profiles/SoftwareEngineer/index.jsx
deleted file mode 100644
index dfbdbfe..0000000
--- a/src/components/organisms/profiles/SoftwareEngineer/index.jsx
+++ /dev/null
@@ -1,43 +0,0 @@
-//#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 { MDBContainer, MDBRow, MDBCol } from "mdbreact";
-
-//> Components
-import { SoftwareTabs, ProfileInfo } from "../../index";
-//#endregion
-
-//#region > Components
-/** @class The profile component of a Software Engineer user */
-class SoftwareEngineer extends React.Component {
-  state = {};
-
-  render() {
-    return (
-      <MDBContainer className="py-5">
-        <MDBRow>
-          <MDBCol lg="3">
-            <ProfileInfo />
-          </MDBCol>
-          <MDBCol lg="9">
-            <SoftwareTabs />
-          </MDBCol>
-        </MDBRow>
-      </MDBContainer>
-    );
-  }
-}
-//#endregion
-
-//#region > Exports
-//> Default Component
-export default SoftwareEngineer;
-//#endregion
-
-/**
- * SPDX-License-Identifier: (EUPL-1.2)
- * Copyright © 2019-2020 Simon Prast
- */
diff --git a/src/components/organisms/profiles/index.js b/src/components/organisms/profiles/index.js
deleted file mode 100644
index e0173b4..0000000
--- a/src/components/organisms/profiles/index.js
+++ /dev/null
@@ -1,16 +0,0 @@
-//#region > Imports
-//> Components
-// Import all components to export them for easy access from parent components
-import SoftwareEngineer from "./SoftwareEngineer";
-//#endregion
-
-//#region > Exports
-//> Components
-// Export the components for easy access from parent components
-export { SoftwareEngineer };
-//#endregion
-
-/**
- * SPDX-License-Identifier: (EUPL-1.2)
- * Copyright © 2019-2020 Simon Prast
- */
diff --git a/src/components/organisms/sections/person/InfoCard/index.jsx b/src/components/organisms/sections/person/InfoCard/index.jsx
new file mode 100644
index 0000000..8fd1731
--- /dev/null
+++ b/src/components/organisms/sections/person/InfoCard/index.jsx
@@ -0,0 +1,349 @@
+//#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 {
+  MDBBtn,
+  MDBBadge,
+  MDBView,
+  MDBMask,
+  MDBPopover,
+  MDBPopoverBody,
+  MDBPopoverHeader,
+  MDBIcon,
+  MDBTooltip,
+} 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";
+
+//> Components
+import { LanguageChart } from "../../../../atoms";
+//> Style Sheet
+import "./infocard.scss";
+//#endregion
+
+//#region > Components
+/** @class This component displays personal information and status of a user */
+class InfoCard extends React.Component {
+  state = { limitLanguages: true };
+
+  componentDidMount = () => {};
+
+  render() {
+    const { fetchedPerson } = this.props;
+
+    console.log(fetchedPerson);
+    return (
+      <div className="social">
+        <MDBView>
+          <img
+            className="img-fluid main-avatar"
+            src={
+              fetchedPerson?.avatarImage?.src
+                ? fetchedPerson.avatarImage.src
+                : ""
+            }
+          />
+          <MDBMask />
+        </MDBView>
+        <div className="bg-elegant py-3 px-3">
+          <h4 className="mb-0">
+            {fetchedPerson?.firstName && <>{fetchedPerson.firstName}</>}{" "}
+            {fetchedPerson?.lastName && <>{fetchedPerson.lastName}</>}
+          </h4>
+          {fetchedPerson?.showLocalRanking && (
+            <p className="mb-1 text-muted">
+              <small>
+                <a href="#!">#3</a> in your region
+              </small>
+            </p>
+          )}
+          {fetchedPerson?.company && (
+            <>
+              {fetchedPerson?.showCompanyPublic && (
+                <small className="text-muted py-3">
+                  {fetchedPerson.company}
+                </small>
+              )}
+            </>
+          )}
+          <div className="badges">
+            {fetchedPerson?.bids && (
+              <>
+                {fetchedPerson.bids.map((bid, i) => {
+                  switch (bid) {
+                    case "6403bf4d17b8472735a93b71a37e0bd0":
+                      return (
+                        <MDBBadge color="secondary-color" key={i}>
+                          Alpha
+                        </MDBBadge>
+                      );
+                  }
+                })}
+              </>
+            )}
+          </div>
+          {fetchedPerson?.status && (
+            <div className="d-flex pt-3">
+              {fetchedPerson.status && (
+                <div
+                  dangerouslySetInnerHTML={{
+                    __html: fetchedPerson.status,
+                  }}
+                />
+              )}
+              <small className="px-1">{fetchedPerson.status}</small>
+            </div>
+          )}
+        </div>
+        <div className="py-3 follow text-center">
+          <MDBBtn color="green" outline size="md">
+            <MDBIcon icon="plus-circle" className="mr-2" />
+            Follow
+          </MDBBtn>
+          <MDBBtn color="primary" outline size="md">
+            <MDBIcon icon="angle-up" className="mr-2" />
+            Upvote
+          </MDBBtn>
+        </div>
+        <div className="bg-light py-3 px-2">
+          <p>Connected accounts</p>
+          <div className="connected mt-2 text-muted">
+            <MDBIcon
+              fab
+              icon="github"
+              size="lg"
+              className={
+                fetchedPerson?.profiles.some(
+                  (e) => e.sourceType == "GITHUB" && e.isActive
+                )
+                  ? "active"
+                  : ""
+              }
+            />
+            <MDBIcon
+              fab
+              icon="gitlab"
+              size="lg"
+              className={
+                fetchedPerson?.profiles.some(
+                  (e) => e.sourceType == "GITLAB" && e.isActive
+                )
+                  ? "active"
+                  : ""
+              }
+            />
+            <MDBIcon
+              fab
+              icon="instagram"
+              size="lg"
+              className={
+                fetchedPerson?.profiles.some(
+                  (e) => e.sourceType == "INSTAGRAM" && e.isActive
+                )
+                  ? "active"
+                  : ""
+              }
+            />
+          </div>
+          <hr />
+          <p>Organisations</p>
+          {fetchedPerson && (
+            <div
+              className={
+                fetchedPerson.person.organisations.length >= 5
+                  ? "orgs text-center"
+                  : "orgs"
+              }
+            >
+              {fetchedPerson.person.organisations.length > 0 ? (
+                <>
+                  {fetchedPerson.person.organisations.map((org, i) => {
+                    return (
+                      <MDBPopover placement="top" popover clickable key={i}>
+                        <MDBBtn color="link">
+                          <div className="org">
+                            {org.avatarUrl ? (
+                              <img src={org.avatarUrl} alt={org.name} />
+                            ) : (
+                              <MDBIcon
+                                icon="sitemap"
+                                className="text-muted"
+                                size="lg"
+                              />
+                            )}
+                            {org.members && (
+                              <div className="tag">{org.members.length}</div>
+                            )}
+                          </div>
+                        </MDBBtn>
+                        <div>
+                          <MDBPopoverHeader>
+                            <div>
+                              {org.platformName}/
+                              <strong className="text-dark">{org.name}</strong>
+                            </div>
+                            <div className="d-flex justify-content-between">
+                              <div>
+                                <small>
+                                  {org.members ? org.members.length : "Unknown"}{" "}
+                                  members
+                                </small>
+                              </div>
+                              <div className="member-list">
+                                <div>
+                                  {org.members &&
+                                    org.members.length > 0 &&
+                                    org.members.slice(0, 8).map((member, m) => {
+                                      return (
+                                        <MDBTooltip
+                                          domElement
+                                          tag="span"
+                                          placement="top"
+                                          key={m}
+                                        >
+                                          <a
+                                            href={member.url}
+                                            target="_blank"
+                                            rel="noopener noreferrer"
+                                          >
+                                            <img
+                                              src={member.avatarUrl}
+                                              alt={member.username}
+                                            />
+                                          </a>
+                                          <span>{member.username}</span>
+                                        </MDBTooltip>
+                                      );
+                                    })}
+                                </div>
+                                {org.members && org.members.length > 9 && (
+                                  <div className="text-muted text-right">
+                                    {org.platformName === "github" && (
+                                      <a
+                                        href={`https://www.github.com/orgs/${org.name}/people`}
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                      >
+                                        <small>Show all</small>
+                                      </a>
+                                    )}
+                                  </div>
+                                )}
+                              </div>
+                            </div>
+                          </MDBPopoverHeader>
+                          <MDBPopoverBody>
+                            <p className="my-2">{org.description}</p>
+                            <a
+                              href={org.url}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                            >
+                              Show more
+                              <MDBIcon
+                                icon="external-link-alt"
+                                className="ml-1"
+                              />
+                            </a>
+                          </MDBPopoverBody>
+                        </div>
+                      </MDBPopover>
+                    );
+                  })}
+                </>
+              ) : (
+                <small>
+                  {fetchedPerson.username} hasn't joined an organisation yet.
+                </small>
+              )}
+            </div>
+          )}
+          {fetchedPerson.person.statistic?.languages?.length > 0 && (
+            <div className="px-1">
+              <hr />
+              <p>Top languages</p>
+              <LanguageChart
+                languages={fetchedPerson.person.statistic.languages}
+                height={10}
+              />
+              {fetchedPerson.person.statistic.languages
+                .slice(
+                  0,
+                  this.state.limitLanguages
+                    ? 3
+                    : fetchedPerson.person.statistic.languages.length - 1
+                )
+                .map((language, i) => {
+                  return (
+                    <small className="text-left text-muted d-block" key={i}>
+                      <div className="d-flex justify-content-between">
+                        <div>
+                          <MDBIcon
+                            icon="square"
+                            className="pr-1"
+                            style={{
+                              color: language.color,
+                            }}
+                          />
+                          <span>{language.name}</span>
+                        </div>
+                        <span className="text-muted small">
+                          {language.share}%
+                        </span>
+                      </div>
+                    </small>
+                  );
+                })}
+              {this.state.limitLanguages &&
+              fetchedPerson.person.statistic.languages.length > 3 ? (
+                <p
+                  className="small clickable blue-text d-inline"
+                  onClick={() => this.setState({ limitLanguages: false })}
+                >
+                  Show more
+                </p>
+              ) : (
+                <p
+                  className="small clickable blue-text d-inline"
+                  onClick={() => this.setState({ limitLanguages: true })}
+                >
+                  Show less
+                </p>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+}
+//#endregion
+
+//#region > Redux Mapping
+const mapStateToProps = (state) => ({
+  fetchedPerson: state.general.fetchedPerson,
+});
+
+const mapDispatchToProps = (dispatch) => {
+  return {};
+};
+//#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)(InfoCard);
+//#endregion
+
+/**
+ * SPDX-License-Identifier: (EUPL-1.2)
+ * Copyright © 2019-2020 Simon Prast
+ */
diff --git a/src/components/organisms/ProfileInfo/profileinfo.scss b/src/components/organisms/sections/person/InfoCard/infocard.scss
similarity index 100%
rename from src/components/organisms/ProfileInfo/profileinfo.scss
rename to src/components/organisms/sections/person/InfoCard/infocard.scss
diff --git a/src/components/organisms/SoftwareTabs/index.jsx b/src/components/organisms/sections/person/Tabs/index.jsx
similarity index 76%
rename from src/components/organisms/SoftwareTabs/index.jsx
rename to src/components/organisms/sections/person/Tabs/index.jsx
index 3772496..fbb8130 100644
--- a/src/components/organisms/SoftwareTabs/index.jsx
+++ b/src/components/organisms/sections/person/Tabs/index.jsx
@@ -11,9 +11,9 @@ import { MDBBadge } from "mdbreact";
 import { connect } from "react-redux";
 
 //> Components
-import { ProjectTab, OverviewTab, TalksTab } from "../tabs";
+import { ProjectTab, OverviewTab, TalksTab } from "../../../tabs";
 //> Style sheet
-import "./softwaretabs.scss";
+import "./tabs.scss";
 //#endregion
 
 //#region > Components
@@ -30,13 +30,13 @@ class SoftwareTabs extends React.Component {
   };
 
   isSameOrigin = () => {
-    const { fetchedUser, loggedUser } = this.props;
+    const { fetchedPerson, loggedUser } = this.props;
 
-    return fetchedUser.username === loggedUser.username;
+    return fetchedPerson.username === loggedUser.username;
   };
 
   render() {
-    const { fetchedUser } = this.props;
+    const { fetchedPerson } = this.props;
     const { activeTab } = this.state;
     const tabItems = [
       {
@@ -48,8 +48,8 @@ class SoftwareTabs extends React.Component {
       {
         title: "Projects",
         visible: true,
-        pill: this.props.fetchedUser?.platformData?.profile?.repositories
-          ? this.props.fetchedUser?.platformData?.profile?.repositories?.length
+        pill: fetchedPerson?.person?.repositories
+          ? fetchedPerson?.person?.repositories.length
           : "0",
         notification: false,
       },
@@ -74,9 +74,7 @@ class SoftwareTabs extends React.Component {
         title: "Talks",
         visible: true,
         notification: false,
-        pill: this.props.fetchedUser?.platformData.talks
-          ? this.props.fetchedUser?.platformData.talks.length
-          : "0",
+        pill: fetchedPerson?.talks ? fetchedPerson?.talks.length : "0",
         notification: false,
       },
     ];
@@ -100,15 +98,18 @@ class SoftwareTabs extends React.Component {
         </ul>
         <div className="p-3 content">
           {activeTab === 0 && (
-            <OverviewTab
-              platformData={fetchedUser && fetchedUser.platformData}
-              sameOrigin={this.isSameOrigin()}
-            />
+            // <OverviewTab
+            //   platformData={fetchedUser && fetchedUser.platformData}
+            //   sameOrigin={this.isSameOrigin()}
+            // />
+            <h1></h1>
           )}
           {activeTab === 1 && (
             <ProjectTab
               repoList={
-                fetchedUser && fetchedUser.platformData.profile.repositories
+                fetchedPerson?.person.repositories
+                  ? fetchedPerson.person.repositories
+                  : []
               }
             />
           )}
@@ -117,7 +118,11 @@ class SoftwareTabs extends React.Component {
               This feature is not available just yet.
             </p>
           )}
-          {activeTab === 5 && <TalksTab {...this.props} />}
+          {activeTab === 5 && (
+            <TalksTab
+              talkList={fetchedPerson?.talks ? fetchedPerson.talks : []}
+            />
+          )}
         </div>
       </div>
     );
@@ -127,8 +132,8 @@ class SoftwareTabs extends React.Component {
 
 //#region > Redux Mapping
 const mapStateToProps = (state) => ({
-  loggedUser: state.auth.loggedUser,
-  fetchedUser: state.user.fetchedUser,
+  loggedUser: state.user.user,
+  fetchedPerson: state.general.fetchedPerson,
 });
 
 const mapDispatchToProps = (dispatch) => {
diff --git a/src/components/organisms/SoftwareTabs/softwaretabs.scss b/src/components/organisms/sections/person/Tabs/tabs.scss
similarity index 100%
rename from src/components/organisms/SoftwareTabs/softwaretabs.scss
rename to src/components/organisms/sections/person/Tabs/tabs.scss
diff --git a/src/components/organisms/tabs/TalksTab/index.jsx b/src/components/organisms/tabs/TalksTab/index.jsx
index 7098cfa..5b0db5b 100644
--- a/src/components/organisms/tabs/TalksTab/index.jsx
+++ b/src/components/organisms/tabs/TalksTab/index.jsx
@@ -2,6 +2,8 @@
 //> 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";
 //> React Router bindings to DOM
 import { withRouter, Link } from "react-router-dom";
 //> MDB
@@ -32,7 +34,7 @@ import { TalkUploadModal } from "../../../molecules/modals";
 
 //#region > Components
 /** @class A component which lists all talks */
-class Talks extends React.Component {
+class TalkTab extends React.Component {
   state = {
     showUpload: false,
     loading: true,
@@ -50,16 +52,15 @@ class Talks extends React.Component {
     let iframe;
 
     if (talk.interval.loaded === false) {
-      if (document.getElementById(talk.uid)) {
-        iframe = document.getElementById(talk.uid);
+      if (document.getElementById(talk.id)) {
+        iframe = document.getElementById(talk.id);
         iframe.src = talk.displayUrl;
       }
     }
   };
 
   render() {
-    const { loggedUser, fetchedUser } = this.props;
-    const talkList = fetchedUser?.platformData?.talks;
+    const { loggedUser, fetchedPerson, talkList } = this.props;
 
     if (talkList) {
       talkList.map((talk) => {
@@ -87,7 +88,7 @@ class Talks extends React.Component {
           <MDBCol md="10">
             <h3 className="font-weight-bold">Talks</h3>
           </MDBCol>
-          {loggedUser.username === fetchedUser.username && (
+          {loggedUser.username === fetchedPerson.username && (
             <MDBCol md="2">
               <MDBBtn
                 color="green"
@@ -109,12 +110,12 @@ class Talks extends React.Component {
                     <MDBCardHeader className="lead mb-1">
                       <MDBRow>
                         <MDBCol md="11">
-                          {talk.name.length > 25
-                            ? talk.name.substring(0, 25) + "..."
-                            : talk.name}
+                          {talk.title.length > 25
+                            ? talk.title.substring(0, 25) + "..."
+                            : talk.title}
                         </MDBCol>
                         <MDBCol md="1">
-                          {loggedUser.username === fetchedUser.username && (
+                          {loggedUser.username === fetchedPerson.username && (
                             <small onClick={() => this.props.deleteTalk(talk)}>
                               <MDBIcon
                                 icon="trash-alt"
@@ -127,10 +128,7 @@ class Talks extends React.Component {
                     </MDBCardHeader>
                     <Link
                       to={
-                        "/t/" +
-                        this.props.match.params.username +
-                        "/" +
-                        talk.uid
+                        "/t/" + this.props.match.params.username + "/" + talk.id
                       }
                       params={{}}
                       rel="noopener noreferrer"
@@ -139,7 +137,7 @@ class Talks extends React.Component {
                         <div className="thumbnail-container">
                           <div className="thumbnail">
                             <iframe
-                              id={talk.uid}
+                              id={talk.id}
                               src={talk.displayUrl}
                               onLoad={() => {
                                 clearInterval(talk.interval.timeoutId);
@@ -215,8 +213,8 @@ class Talks extends React.Component {
 
 //#region > Redux Mapping
 const mapStateToProps = (state) => ({
-  loggedUser: state.auth.loggedUser,
-  fetchedUser: state.user.fetchedUser,
+  loggedUser: state.user.user,
+  fetchedPerson: state.general.fetchedPerson,
 });
 
 const mapDispatchToProps = (dispatch) => {
@@ -224,6 +222,12 @@ const mapDispatchToProps = (dispatch) => {
 };
 //#endregion
 
+//#region > PropTypes
+TalkTab.propTypes = {
+  talkList: PropTypes.array.isRequired,
+};
+//#endregion
+
 //#region > Exports
 //> Default Component
 /**
@@ -233,7 +237,9 @@ const mapDispatchToProps = (dispatch) => {
  * Got access to the history object’s properties and the closest
  * <Route>'s match.
  */
-export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Talks));
+export default withRouter(
+  connect(mapStateToProps, mapDispatchToProps)(TalkTab)
+);
 //#endregion
 
 /**
diff --git a/src/components/pages/ProfilePage/index.jsx b/src/components/pages/PersonPage/index.jsx
similarity index 75%
rename from src/components/pages/ProfilePage/index.jsx
rename to src/components/pages/PersonPage/index.jsx
index efa7b7b..907a2cc 100644
--- a/src/components/pages/ProfilePage/index.jsx
+++ b/src/components/pages/PersonPage/index.jsx
@@ -4,6 +4,9 @@
 import React from "react";
 // DOM bindings for React Router
 import { withRouter } from "react-router-dom";
+//> MDB
+// "Material Design for Bootstrap" is a great UI design framework
+import { MDBContainer, MDBRow, MDBCol } from "mdbreact";
 //> Redux
 // Allows to React components read data from a Redux store, and dispatch actions
 // to the store to update data.
@@ -13,18 +16,16 @@ import { connect } from "react-redux";
 // Functions to send data from the application to the store
 import { getPerson } from "../../../store/actions/generalActions";
 //> Components
-import { SoftwareEngineer } from "../../organisms/profiles";
+import { PersonInfoCard, PersonTabs } from "../../organisms";
 //> Style sheet
-import "./profile.scss";
+import "./person.scss";
 //#endregion
 
 //#region > Components
 /**
- * @class This component adds the Profile page and distinguishes
- *        between software and media technology accounts and
- *        loads the components accordingly.
+ * @todo Add description
  */
-class ProfilePage extends React.Component {
+class PersonPage extends React.Component {
   state = {};
 
   saveSettings = (state) => {
@@ -33,6 +34,7 @@ class ProfilePage extends React.Component {
 
   componentDidMount = () => {
     this._isMounted = true;
+
     const { match } = this.props;
     const username = match?.params?.username;
 
@@ -53,9 +55,9 @@ class ProfilePage extends React.Component {
   };
 
   render() {
-    const { fetchedUser } = this.props;
+    const { fetchedPerson } = this.props;
 
-    if (!fetchedUser) {
+    if (!fetchedPerson) {
       return (
         <div className="text-center my-5 py-5">
           <div className="spinner-grow text-success" role="status">
@@ -63,13 +65,22 @@ class ProfilePage extends React.Component {
           </div>
         </div>
       );
-    } else if (fetchedUser) {
+    } else if (fetchedPerson) {
       //#TSID11
       //console.dir("PROFILE PAGE RENDER SUCCESS", this.props.fetchedUser);
 
       return (
         <div id="profile">
-          <SoftwareEngineer />
+          <MDBContainer className="py-5">
+            <MDBRow>
+              <MDBCol lg="3">
+                <PersonInfoCard />
+              </MDBCol>
+              <MDBCol lg="9">
+                <PersonTabs />
+              </MDBCol>
+            </MDBRow>
+          </MDBContainer>
         </div>
       );
     } else {
@@ -101,7 +112,7 @@ const mapDispatchToProps = (dispatch) => {
  * <Route>'s match.
  */
 export default withRouter(
-  connect(mapStateToProps, mapDispatchToProps)(ProfilePage)
+  connect(mapStateToProps, mapDispatchToProps)(PersonPage)
 );
 //#endregion
 
diff --git a/src/components/pages/ProfilePage/profile.scss b/src/components/pages/PersonPage/person.scss
similarity index 100%
rename from src/components/pages/ProfilePage/profile.scss
rename to src/components/pages/PersonPage/person.scss
diff --git a/src/components/pages/index.js b/src/components/pages/index.js
index 08299d7..c876b6c 100644
--- a/src/components/pages/index.js
+++ b/src/components/pages/index.js
@@ -3,7 +3,7 @@
 // Import all components to export them for easy access from parent components
 import CompanyPage from "./CompanyPage";
 import HomePage from "./HomePage";
-import ProfilePage from "./ProfilePage";
+import PersonPage from "./PersonPage";
 import TalkPage from "./TalkPage";
 import SettingsPage from "./SettingsPage";
 // The temp page displays sections that can not be displayed in profile
@@ -12,7 +12,7 @@ import TempPage from "./TempPage";
 
 //#region > Exports
 //> Pages
-export { CompanyPage, HomePage, ProfilePage, TalkPage, SettingsPage, TempPage };
+export { CompanyPage, HomePage, PersonPage, TalkPage, SettingsPage, TempPage };
 //#endregion
 
 /**

From 534afcae5b648bb8223910b3b00a1eaeb01449c7 Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Wed, 9 Sep 2020 15:09:50 +0200
Subject: [PATCH 031/175] Improve talks and some more improvements

- The add and delete talk action have been moved form
talks to person.
- GetPerson has been moved from general to person.
- Some improvements in displaying the correct data
has been done.
---
 .../modals/TalkUploadModal/index.jsx          |  44 ++--
 .../sections/person/InfoCard/index.jsx        |   4 +-
 .../organisms/sections/person/Tabs/index.jsx  |   4 +-
 .../organisms/tabs/TalksTab/index.jsx         |  28 ++-
 src/components/pages/PersonPage/index.jsx     |   4 +-
 src/components/pages/TalkPage/index.jsx       |   4 +-
 src/store/actions/generalActions.js           |  26 +--
 src/store/actions/personActions.js            | 214 +++++++++++++-----
 src/store/actions/talkActions.js              | 118 +++-------
 src/store/reducers/generalReducers.js         |  18 --
 src/store/reducers/personReducers.js          |  58 ++++-
 src/store/types.js                            |  22 +-
 12 files changed, 316 insertions(+), 228 deletions(-)

diff --git a/src/components/molecules/modals/TalkUploadModal/index.jsx b/src/components/molecules/modals/TalkUploadModal/index.jsx
index 6b5a238..dff44bd 100644
--- a/src/components/molecules/modals/TalkUploadModal/index.jsx
+++ b/src/components/molecules/modals/TalkUploadModal/index.jsx
@@ -17,6 +17,9 @@ import {
 // Allows to React components read data from a Redux store, and dispatch actions
 // to the store to update data.
 import { connect } from "react-redux";
+import { addTalk } from "../../../../store/actions/personActions";
+//> Intel
+import { anonfiles } from "snek-intel/lib/utils/upload";
 
 //> Actions
 // Functions to send data from the application to the store
@@ -40,25 +43,33 @@ class TalkUploadModal extends React.Component {
         loading: true,
       });
 
-      this.props
-        .uploadTalk(files[0], {
-          avatarUrl: fetchedUser.platformData.user.avatarUrl,
-          owner: {
-            username: loggedUser.username,
-          },
-        })
-        .then(() => {
-          this.setState({
-            loading: false,
-          });
-
-          this.props.closeModal();
+      this.uploadToAnonfiles(files[0]).then(() => {
+        this.setState({
+          loading: false,
         });
+
+        this.props.closeModal();
+      });
     } else {
       this.setState({ error: ["Only PDF files can be uploaded!"] });
     }
   };
 
+  uploadToAnonfiles = async (file) => {
+    const res = await anonfiles.uploadFile(file);
+
+    console.log(res);
+
+    this.props.uploadTalk(
+      res.name,
+      "",
+      res.displayUrl,
+      res.downloadUrl,
+      res.path,
+      res.html_url
+    );
+  };
+
   render() {
     return (
       <MDBModal
@@ -160,7 +171,12 @@ const mapStateToProps = (state) => ({
 });
 
 const mapDispatchToProps = (dispatch) => {
-  return { uploadTalk: (file) => dispatch(file) };
+  return {
+    uploadTalk: (title, description, displayUrl, downloadUrl, path, url) =>
+      dispatch(
+        addTalk({ title, description, displayUrl, downloadUrl, path, url })
+      ),
+  };
 };
 //#endregion
 
diff --git a/src/components/organisms/sections/person/InfoCard/index.jsx b/src/components/organisms/sections/person/InfoCard/index.jsx
index 8fd1731..5483ca2 100644
--- a/src/components/organisms/sections/person/InfoCard/index.jsx
+++ b/src/components/organisms/sections/person/InfoCard/index.jsx
@@ -258,7 +258,7 @@ class InfoCard extends React.Component {
                 </>
               ) : (
                 <small>
-                  {fetchedPerson.username} hasn't joined an organisation yet.
+                  {fetchedPerson.title} hasn't joined an organisation yet.
                 </small>
               )}
             </div>
@@ -326,7 +326,7 @@ class InfoCard extends React.Component {
 
 //#region > Redux Mapping
 const mapStateToProps = (state) => ({
-  fetchedPerson: state.general.fetchedPerson,
+  fetchedPerson: state.person.fetchedPerson,
 });
 
 const mapDispatchToProps = (dispatch) => {
diff --git a/src/components/organisms/sections/person/Tabs/index.jsx b/src/components/organisms/sections/person/Tabs/index.jsx
index fbb8130..7d06064 100644
--- a/src/components/organisms/sections/person/Tabs/index.jsx
+++ b/src/components/organisms/sections/person/Tabs/index.jsx
@@ -32,7 +32,7 @@ class SoftwareTabs extends React.Component {
   isSameOrigin = () => {
     const { fetchedPerson, loggedUser } = this.props;
 
-    return fetchedPerson.username === loggedUser.username;
+    return fetchedPerson.slug === loggedUser.person.slug;
   };
 
   render() {
@@ -133,7 +133,7 @@ class SoftwareTabs extends React.Component {
 //#region > Redux Mapping
 const mapStateToProps = (state) => ({
   loggedUser: state.user.user,
-  fetchedPerson: state.general.fetchedPerson,
+  fetchedPerson: state.person.fetchedPerson,
 });
 
 const mapDispatchToProps = (dispatch) => {
diff --git a/src/components/organisms/tabs/TalksTab/index.jsx b/src/components/organisms/tabs/TalksTab/index.jsx
index 5b0db5b..48ee366 100644
--- a/src/components/organisms/tabs/TalksTab/index.jsx
+++ b/src/components/organisms/tabs/TalksTab/index.jsx
@@ -22,12 +22,18 @@ import {
 // Allows to React components read data from a Redux store, and dispatch actions
 // to the store to update data.
 import { connect } from "react-redux";
+//> Additional
+// Used to display the time in a readable format
+import moment from "moment";
 
 //> Actions
 // Functions to send data from the application to the store
 // import { deleteTalkAction } from "../../../../store/actions/userActions";
 //> Style sheet
 import "./talkstab.scss";
+//> Actions
+// Functions to send data from the application to the store
+import { deleteTalk } from "../../../../store/actions/personActions";
 //> Modules
 import { TalkUploadModal } from "../../../molecules/modals";
 //#endregion
@@ -88,7 +94,7 @@ class TalkTab extends React.Component {
           <MDBCol md="10">
             <h3 className="font-weight-bold">Talks</h3>
           </MDBCol>
-          {loggedUser.username === fetchedPerson.username && (
+          {loggedUser.person.slug === fetchedPerson.slug && (
             <MDBCol md="2">
               <MDBBtn
                 color="green"
@@ -110,13 +116,15 @@ class TalkTab extends React.Component {
                     <MDBCardHeader className="lead mb-1">
                       <MDBRow>
                         <MDBCol md="11">
-                          {talk.title.length > 25
-                            ? talk.title.substring(0, 25) + "..."
+                          {talk.title?.length > 25
+                            ? talk.title?.substring(0, 25) + "..."
                             : talk.title}
                         </MDBCol>
                         <MDBCol md="1">
-                          {loggedUser.username === fetchedPerson.username && (
-                            <small onClick={() => this.props.deleteTalk(talk)}>
+                          {loggedUser.person.slug === fetchedPerson.slug && (
+                            <small
+                              onClick={() => this.props.deleteTalk(talk.id)}
+                            >
                               <MDBIcon
                                 icon="trash-alt"
                                 className="black-text font-weight-bold"
@@ -163,7 +171,8 @@ class TalkTab extends React.Component {
                           likes
                           <br />
                           <small className="text-muted">
-                            published on {talk.social.date}
+                            published on{" "}
+                            {moment(talk.createdAt).format("DD.MM.YYYY")}
                           </small>
                         </span>
                       )}
@@ -188,9 +197,6 @@ class TalkTab extends React.Component {
                             src={talk.repository?.avatarUrl}
                             alt={talk.repository?.name}
                           />
-                          <small>
-                            Owned by {talk.repository?.owner.username}
-                          </small>
                         </div>
                       </a>
                     </MDBCardFooter>
@@ -214,11 +220,11 @@ class TalkTab extends React.Component {
 //#region > Redux Mapping
 const mapStateToProps = (state) => ({
   loggedUser: state.user.user,
-  fetchedPerson: state.general.fetchedPerson,
+  fetchedPerson: state.person.fetchedPerson,
 });
 
 const mapDispatchToProps = (dispatch) => {
-  return { deleteTalk: (talk) => dispatch(talk) };
+  return { deleteTalk: (id) => dispatch(deleteTalk(id)) };
 };
 //#endregion
 
diff --git a/src/components/pages/PersonPage/index.jsx b/src/components/pages/PersonPage/index.jsx
index 907a2cc..51b9a9b 100644
--- a/src/components/pages/PersonPage/index.jsx
+++ b/src/components/pages/PersonPage/index.jsx
@@ -14,7 +14,7 @@ import { connect } from "react-redux";
 
 //> Actions
 // Functions to send data from the application to the store
-import { getPerson } from "../../../store/actions/generalActions";
+import { getPerson } from "../../../store/actions/personActions";
 //> Components
 import { PersonInfoCard, PersonTabs } from "../../organisms";
 //> Style sheet
@@ -93,7 +93,7 @@ class PersonPage extends React.Component {
 //#region > Redux Mapping
 const mapStateToProps = (state) => ({
   loggedUser: state.user.user,
-  fetchedPerson: state.general.fetchedPerson,
+  fetchedPerson: state.person.fetchedPerson,
 });
 
 const mapDispatchToProps = (dispatch) => {
diff --git a/src/components/pages/TalkPage/index.jsx b/src/components/pages/TalkPage/index.jsx
index 62392fb..c8c45bb 100644
--- a/src/components/pages/TalkPage/index.jsx
+++ b/src/components/pages/TalkPage/index.jsx
@@ -71,7 +71,7 @@ class TalkPage extends React.Component {
     if (talk.interval.loaded === false) {
       if (document.getElementById(talk.uid)) {
         iframe = document.getElementById(talk.uid);
-        iframe.src = talk.displayUrl;
+        iframe.src = talk.html_url;
       }
     }
   };
@@ -104,7 +104,7 @@ class TalkPage extends React.Component {
                   <MDBCard>
                     <MDBCardBody>
                       <iframe
-                        src={talk.displayUrl}
+                        src={talk.html_url}
                         id={talk.uid}
                         width="100%"
                         height="620px"
diff --git a/src/store/actions/generalActions.js b/src/store/actions/generalActions.js
index 8884d6a..f40125e 100644
--- a/src/store/actions/generalActions.js
+++ b/src/store/actions/generalActions.js
@@ -62,30 +62,6 @@ const getPersonsBrief = () => {
   };
 };
 
-/**
- * Get person page for a logged user
- */
-const getPerson = (personName) => {
-  return async (dispatch, getState, {}) => {
-    try {
-      dispatch({ type: Action.GENERAL_PERSON_FETCH_REQUEST });
-
-      const person = await INTEL_SNEK.person.get({ personName });
-
-      dispatch({ type: Action.GENERAL_PERSON_FETCH_SUCCESS, payload: person });
-    } catch (ex) {
-      dispatch({
-        type: Action.GENERAL_PERSON_FETCH_FAILURE,
-        payload: {
-          errorCode: 601,
-          message: `Getting person (${personName}) failed`,
-          error: ex,
-        },
-      });
-    }
-  };
-};
-
 /**
  * Get all achievements with collectors
  */
@@ -114,4 +90,4 @@ const getAchievements = () => {
 };
 //#endregion
 
-export { getGitlabServers, getPersonsBrief, getPerson, getAchievements };
+export { getGitlabServers, getPersonsBrief, getAchievements };
diff --git a/src/store/actions/personActions.js b/src/store/actions/personActions.js
index 3cc8607..104759e 100644
--- a/src/store/actions/personActions.js
+++ b/src/store/actions/personActions.js
@@ -10,27 +10,51 @@ const extractNameFromPersonSlug = (personSlug) => personSlug.split("-")[1];
 //#endregion
 
 //#region > Actions
+/**
+ * Get person page for a logged user
+ */
+const getPerson = (personName) => {
+  return async (dispatch, getState, {}) => {
+    try {
+      dispatch({ type: Action.PERSON_FETCH_REQUEST });
+
+      const person = await INTEL_SNEK.person.get({ personName });
+
+      dispatch({ type: Action.PERSON_FETCH_SUCCESS, payload: person });
+    } catch (ex) {
+      dispatch({
+        type: Action.PERSON_FETCH_FAILURE,
+        payload: {
+          errorCode: 601,
+          message: `Getting person (${personName}) failed`,
+          error: ex,
+        },
+      });
+    }
+  };
+};
+
 /**
  * Get person page for a logged user
  */
 const updateSettings = (
   nextSettings = {
-    avatarImage,
-    bio,
-    display2dCalendar,
-    display3dCalendar,
-    displayEmail,
-    displayProgrammingLanguages,
-    displayRanking,
-    displayWorkplace,
-    email,
-    firstName,
-    lastName,
-    location,
-    movablePool,
-    status,
-    websiteUrl,
-    workplace,
+    avatarImage: undefined,
+    bio: undefined,
+    display2dCalendar: undefined,
+    display3dCalendar: undefined,
+    displayEmail: undefined,
+    displayProgrammingLanguages: undefined,
+    displayRanking: undefined,
+    displayWorkplace: undefined,
+    email: undefined,
+    firstName: undefined,
+    lastName: undefined,
+    location: undefined,
+    movablePool: undefined,
+    status: undefined,
+    websiteUrl: undefined,
+    workplace: undefined,
   }
 ) => {
   return async (dispatch, getState, {}) => {
@@ -38,7 +62,7 @@ const updateSettings = (
       dispatch({ type: Action.PERSON_SETTINGS_UPDATE_REQUEST });
 
       const state = getState();
-      const personName = extractNameFromPersonSlug(state.user.person.slug);
+      const personName = extractNameFromPersonSlug(state.user.user.person.slug);
 
       const person = await INTEL_SNEK.person.updateSettings({
         personName,
@@ -66,11 +90,11 @@ const updateSettings = (
 
 const addMetaLink = (
   linkOptions = {
-    url,
-    linkType,
-    location,
-    imgurDeleteHash,
-    description,
+    url: undefined,
+    linkType: undefined,
+    location: undefined,
+    imgurDeleteHash: undefined,
+    description: undefined,
   }
 ) => {
   return async (dispatch, getState, {}) => {
@@ -78,7 +102,7 @@ const addMetaLink = (
       dispatch({ type: Action.PERSON_META_LINK_ADD_REQUEST });
 
       const state = getState();
-      const personName = extractNameFromPersonSlug(state.user.person.slug);
+      const personName = extractNameFromPersonSlug(state.user.user.person.slug);
 
       const link = await INTEL_SNEK.person.addMetaLink({
         personName,
@@ -130,7 +154,7 @@ const getProfiles = () => {
       dispatch({ type: Action.PERSON_PROFILES_FETCH_REQUEST });
 
       const state = getState();
-      const personName = extractNameFromPersonSlug(state.user.person.slug);
+      const personName = extractNameFromPersonSlug(state.user.user.person.slug);
 
       const profiles = await INTEL_SNEK.person.profiles({
         personName,
@@ -153,13 +177,20 @@ const getProfiles = () => {
   };
 };
 
-const addProfile = (source = { url, type, authorization, username }) => {
+const addProfile = (
+  source = {
+    url: undefined,
+    type: undefined,
+    authorization: undefined,
+    username: undefined,
+  }
+) => {
   return async (dispatch, getState, {}) => {
     try {
       dispatch({ type: Action.PERSON_PROFILE_ADD_REQUEST });
 
       const state = getState();
-      const personName = extractNameFromPersonSlug(state.user.person.slug);
+      const personName = extractNameFromPersonSlug(state.user.user.person.slug);
 
       const profile = await INTEL_SNEK.person.addProfile({
         personName,
@@ -211,22 +242,22 @@ const deleteProfile = (id) => {
 const updateProfile = (
   id,
   nextProfile = {
-    avatarImage,
-    bio,
-    display2dCalendar,
-    display3dCalendar,
-    displayEmail,
-    displayProgrammingLanguages,
-    displayRanking,
-    displayWorkplace,
-    email,
-    firstName,
-    lastName,
-    location,
-    movablePool,
-    status,
-    websiteUrl,
-    workplace,
+    avatarImage: undefined,
+    bio: undefined,
+    display2dCalendar: undefined,
+    display3dCalendar: undefined,
+    displayEmail: undefined,
+    displayProgrammingLanguages: undefined,
+    displayRanking: undefined,
+    displayWorkplace: undefined,
+    email: undefined,
+    firstName: undefined,
+    lastName: undefined,
+    location: undefined,
+    movablePool: undefined,
+    status: undefined,
+    websiteUrl: undefined,
+    workplace: undefined,
   }
 ) => {
   return async (dispatch, getState, {}) => {
@@ -263,7 +294,7 @@ const getInstagramPosts = (id) => {
       dispatch({ type: Action.PERSON_INSTAGRAM_POSTS_FETCH_REQUEST });
 
       const state = getState();
-      const personName = extractNameFromPersonSlug(state.user.person.slug);
+      const personName = extractNameFromPersonSlug(state.user.user.person.slug);
 
       const posts = await INTEL_SNEK.person.getInstagramPosts({
         personName,
@@ -292,7 +323,7 @@ const processProfiles = () => {
       dispatch({ type: Action.PERSON_PROFILES_PROCESS_REQUEST });
 
       const state = getState();
-      const personName = extractNameFromPersonSlug(state.user.person.slug);
+      const personName = extractNameFromPersonSlug(state.user.user.person.slug);
 
       const posts = await INTEL_SNEK.person.processProfiles({
         personName,
@@ -321,7 +352,7 @@ const follow = (receiverPersonName) => {
       dispatch({ type: Action.PERSON_FOLLOW_REQUEST });
 
       const state = getState();
-      const personName = extractNameFromPersonSlug(state.user.person.slug);
+      const personName = extractNameFromPersonSlug(state.user.user.person.slug);
 
       const res = await INTEL_SNEK.social.follow({
         invoker: personName,
@@ -351,7 +382,7 @@ const unfollow = (receiverPersonName) => {
       dispatch({ type: Action.PERSON_UNFOLLOW_REQUEST });
 
       const state = getState();
-      const personName = extractNameFromPersonSlug(state.user.person.slug);
+      const personName = extractNameFromPersonSlug(state.user.user.person.slug);
 
       const res = await INTEL_SNEK.social.unfollow({
         invoker: personName,
@@ -381,7 +412,7 @@ const like = (receiverPersonName) => {
       dispatch({ type: Action.PERSON_LIKE_REQUEST });
 
       const state = getState();
-      const personName = extractNameFromPersonSlug(state.user.person.slug);
+      const personName = extractNameFromPersonSlug(state.user.user.person.slug);
 
       const res = await INTEL_SNEK.social.follow({
         invoker: personName,
@@ -411,7 +442,7 @@ const unlike = (receiverPersonName) => {
       dispatch({ type: Action.PERSON_UNLIKE_REQUEST });
 
       const state = getState();
-      const personName = extractNameFromPersonSlug(state.user.person.slug);
+      const personName = extractNameFromPersonSlug(state.user.user.person.slug);
 
       const res = await INTEL_SNEK.social.unfollow({
         invoker: personName,
@@ -444,7 +475,7 @@ const redeemAchievement = (sequence) => {
       dispatch({ type: Action.PERSON_ACHIEVEMENT_REDEEM_REQUEST });
 
       const state = getState();
-      const personName = extractNameFromPersonSlug(state.user.person.slug);
+      const personName = extractNameFromPersonSlug(state.user.user.person.slug);
 
       const res = await INTEL_SNEK.achievements.redeem({
         personName,
@@ -454,7 +485,7 @@ const redeemAchievement = (sequence) => {
       if (res.ok) {
         dispatch({
           type: Action.PERSON_ACHIEVEMENT_REDEEM_SUCCESS,
-          payload: achievements,
+          payload: res,
         });
       } else {
         dispatch({
@@ -462,7 +493,6 @@ const redeemAchievement = (sequence) => {
           payload: {
             errorCode: 601,
             message: `Redeeming achievement failed. Good try but try again`,
-            error: ex,
           },
         });
       }
@@ -479,9 +509,89 @@ const redeemAchievement = (sequence) => {
   };
 };
 
+/**
+ * Add a talk
+ */
+const addTalk = (
+  talkOptions = {
+    title: undefined,
+    description: undefined,
+    displayUrl: undefined,
+    downloadUrl: undefined,
+    path: undefined,
+    url: undefined,
+  }
+) => {
+  return async (dispatch, getState, {}) => {
+    try {
+      dispatch({ type: Action.PERSON_TALK_ADD_REQUEST });
+
+      const state = getState();
+
+      let personName;
+
+      console.log(state);
+
+      try {
+        personName = extractNameFromPersonSlug(state.user.user.person.slug);
+      } catch {
+        throw new Error("Something went wrong");
+      }
+
+      const talk = await INTEL_SNEK.talk.addTalk({ personName, talkOptions });
+
+      dispatch({
+        type: Action.PERSON_TALK_ADD_SUCCESS,
+        payload: talk,
+      });
+
+      return talk;
+    } catch (ex) {
+      dispatch({
+        type: Action.PERSON_TALK_ADD_FAILURE,
+        payload: {
+          errorCode: 601,
+          message: `Adding talk failed`,
+          error: ex,
+        },
+      });
+    }
+  };
+};
+
+/**
+ * Delete a talk
+ */
+const deleteTalk = (id) => {
+  return async (dispatch, getState, {}) => {
+    try {
+      dispatch({ type: Action.PERSON_TALK_DELETE_REQUEST });
+
+      console.log("DELETING", id);
+
+      const remainingTalks = await INTEL_SNEK.talk.deleteTalk({ talkId: id });
+
+      dispatch({
+        type: Action.PERSON_TALK_DELETE_SUCCESS,
+        payload: remainingTalks,
+      });
+    } catch (ex) {
+      dispatch({
+        type: Action.PERSON_TALK_DELETE_FAILURE,
+        payload: {
+          errorCode: 601,
+          message: `Deleting talk failed`,
+          error: ex,
+        },
+      });
+    }
+  };
+};
+
 //#endregion
 //#region > Exports
 export {
+  getPerson,
   updateSettings,
   addMetaLink,
   deleteMetaLink,
@@ -496,5 +606,7 @@ export {
   like,
   unlike,
   redeemAchievement,
+  addTalk,
+  deleteTalk,
 };
 //#endregion
diff --git a/src/store/actions/talkActions.js b/src/store/actions/talkActions.js
index b39e888..d9de9a5 100644
--- a/src/store/actions/talkActions.js
+++ b/src/store/actions/talkActions.js
@@ -5,6 +5,10 @@ import * as Action from "../types";
 import INTEL_SNEK from "snek-intel/lib/utils/snek";
 //#endregion
 
+//#region > Utils
+const extractNameFromPersonSlug = (personSlug) => personSlug.split("-")[1];
+//#endregion
+
 //#region > Actions
 /**
  * Get a specific talk
@@ -60,92 +64,18 @@ const getTalks = () => {
   };
 };
 
-/**
- * Add a talk
- */
-const addTalk = (
-  talkOptions = {
-    title,
-    description,
-    displayUrl,
-    downloadUrl,
-    path,
-    url,
-  }
-) => {
-  return async (dispatch, getState, {}) => {
-    try {
-      dispatch({ type: Action.TALK_ADD_REQUEST });
-
-      let personName;
-
-      try {
-        personName = extractNameFromPersonSlug(state.user.person.slug);
-      } catch {
-        throw new Error("Something went wrong");
-      }
-
-      const talk = await INTEL_SNEK.talk.addTalk({ personName, talkOptions });
-
-      dispatch({
-        type: Action.TALK_ADD_SUCCESS,
-        payload: talk,
-      });
-
-      return talk;
-    } catch (ex) {
-      dispatch({
-        type: Action.TALK_ADD_FAILURE,
-        payload: {
-          errorCode: 601,
-          message: `Adding talk failed`,
-          error: ex,
-        },
-      });
-    }
-  };
-};
-
-/**
- * Delete a talk
- */
-const deleteTalk = (id) => {
-  return async (dispatch, getState, {}) => {
-    try {
-      dispatch({ type: Action.TALK_DELETE_REQUEST });
-
-      const remainingTalks = await INTEL_SNEK.talk.deleteTalk({ talkId: id });
-
-      dispatch({
-        type: Action.TALK_DELETE_SUCCESS,
-      });
-
-      return remainingTalks;
-    } catch (ex) {
-      dispatch({
-        type: Action.TALK_DELETE_FAILURE,
-        payload: {
-          errorCode: 601,
-          message: `Deleting talk failed`,
-          error: ex,
-        },
-      });
-    }
-  };
-};
-
 /**
  * Delete a talk
  */
 const updateTalk = (
   id,
   nextTalk = {
-    title,
-    description,
-    displayUrl,
-    downloadUrl,
-    path,
-    url,
+    title: undefined,
+    description: undefined,
+    displayUrl: undefined,
+    downloadUrl: undefined,
+    path: undefined,
+    url: undefined,
   }
 ) => {
   return async (dispatch, getState, {}) => {
@@ -159,12 +89,13 @@ const updateTalk = (
 
       dispatch({
         type: Action.TALK_UPDATE_SUCCESS,
+        payload: updatedTalk,
       });
 
       return updatedTalk;
     } catch (ex) {
       dispatch({
-        type: Action.TALK_DELETE_FAILURE,
+        type: Action.TALK_UPDATE_FAILURE,
         payload: {
           errorCode: 601,
           message: `Updating talk failed`,
@@ -180,19 +111,21 @@ const updateTalk = (
  */
 const addTalkComment = (
   commentOptions = {
-    talkId,
-    text,
-    replyToId,
+    talkId: undefined,
+    text: undefined,
+    replyToId: undefined,
   }
 ) => {
   return async (dispatch, getState, {}) => {
     try {
       dispatch({ type: Action.TALK_COMMENT_ADD_REQUEST });
 
+      const state = getState();
+
       let personName;
 
       try {
-        personName = extractNameFromPersonSlug(state.user.person.slug);
+        personName = extractNameFromPersonSlug(state.user.user.person.slug);
       } catch {
         throw new Error("Something went wrong");
       }
@@ -235,6 +168,7 @@ const deleteTalkComment = (id) => {
 
       dispatch({
         type: Action.TALK_COMMENT_DELETE_SUCCESS,
+        payload: remainingComments,
       });
 
       return remainingComments;
@@ -254,10 +188,10 @@ const deleteTalkComment = (id) => {
 /**
  * Delete a talk
  */
-const updateTalk = (
+const updateTalkComment = (
   id,
   nextComment = {
-    text,
+    text: undefined,
   }
 ) => {
   return async (dispatch, getState, {}) => {
@@ -271,6 +205,7 @@ const updateTalk = (
 
       dispatch({
         type: Action.TALK_COMMENT_UPDATE_SUCCESS,
+        payload: updatedComment,
       });
 
       return updatedComment;
@@ -288,4 +223,11 @@ const updateTalk = (
 };
 //#endregion
 
-export { getTalk, getTalks, addTalk, deleteTalk, updateTalk };
+export {
+  getTalk,
+  getTalks,
+  updateTalk,
+  addTalkComment,
+  deleteTalkComment,
+  updateTalkComment,
+};
diff --git a/src/store/reducers/generalReducers.js b/src/store/reducers/generalReducers.js
index fa0e221..22c0211 100644
--- a/src/store/reducers/generalReducers.js
+++ b/src/store/reducers/generalReducers.js
@@ -8,7 +8,6 @@ import * as Action from "../types";
 
 //#region > Constant Variables
 const INIT_STATE = {
-  fetchedPerson: undefined,
   allPersonBrief: undefined,
   gitlabServer: undefined,
   achievements: undefined,
@@ -35,23 +34,6 @@ const generalReducer = (state = INIT_STATE, action) => {
         error: action.payload,
         errorDetails: serializeError(action.payload.error),
       };
-    //> Get person
-    case Action.GENERAL_PERSON_FETCH_REQUEST:
-      return state;
-    case Action.GENERAL_PERSON_FETCH_SUCCESS:
-      return {
-        ...state,
-        fetchedPerson: {
-          ...action.payload,
-        },
-      };
-    case Action.GENERAL_PERSON_FETCH_FAILURE:
-      return {
-        ...state,
-        fetchedPerson: undefined,
-        error: action.payload,
-        errorDetails: serializeError(action.payload.error),
-      };
     //> Get all persons brief
     case Action.GENERAL_PERSONS_BRIEF_FETCH_REQUEST:
       return state;
diff --git a/src/store/reducers/personReducers.js b/src/store/reducers/personReducers.js
index 371b17b..8b79908 100644
--- a/src/store/reducers/personReducers.js
+++ b/src/store/reducers/personReducers.js
@@ -8,6 +8,7 @@ import * as Action from "../types";
 
 //#region > Constant Variables
 const INIT_STATE = {
+  fetchedPerson: undefined,
   error: undefined,
   errorDetails: undefined,
 };
@@ -31,7 +32,9 @@ const personReducer = (state = INIT_STATE, action) => {
       Action.PERSON_UNFOLLOW_REQUEST |
       Action.PERSON_LIKE_REQUEST |
       Action.PERSON_UNLIKE_REQUEST |
-      Action.PERSON_ACHIEVEMENT_REDEEM_REQUEST:
+      Action.PERSON_ACHIEVEMENT_REDEEM_REQUEST |
+      Action.PERSON_TALK_ADD_REQUEST |
+      Action.PERSON_TALK_DELETE_REQUEST:
       return state;
     case Action.PERSON_SETTINGS_UPDATE_SUCCESS |
       Action.PERSON_META_LINK_ADD_SUCCESS |
@@ -69,7 +72,58 @@ const personReducer = (state = INIT_STATE, action) => {
         error: action.payload,
         errorDetails: serializeError(action.payload.error),
       };
-
+    //> Get person
+    case Action.PERSON_FETCH_REQUEST:
+      return state;
+    case Action.PERSON_FETCH_SUCCESS:
+      return {
+        ...state,
+        fetchedPerson: {
+          ...action.payload,
+        },
+      };
+    case Action.PERSON_FETCH_FAILURE:
+      return {
+        ...state,
+        fetchedPerson: undefined,
+        error: action.payload,
+        errorDetails: serializeError(action.payload.error),
+      };
+    //> Add talk to person
+    case Action.PERSON_TALK_ADD_REQUEST:
+      return state;
+    case Action.PERSON_TALK_ADD_SUCCESS:
+      return {
+        ...state,
+        fetchedPerson: {
+          ...state.fetchedPerson,
+          talks: [...state.fetchedPerson.talks, action.payload],
+        },
+      };
+    case Action.PERSON_TALK_ADD_FAILURE:
+      return {
+        ...state,
+        error: action.payload,
+        errorDetails: serializeError(action.payload.error),
+      };
+    //> Add talk to person
+    case Action.PERSON_TALK_DELETE_REQUEST:
+      return state;
+    case Action.PERSON_TALK_DELETE_SUCCESS:
+      console.log(action.payload);
+      return {
+        ...state,
+        fetchedPerson: {
+          ...state.fetchedPerson,
+          talks: [...action.payload],
+        },
+      };
+    case Action.PERSON_TALK_DELETE_FAILURE:
+      return {
+        ...state,
+        error: action.payload,
+        errorDetails: serializeError(action.payload.error),
+      };
     default:
       return state;
   }
diff --git a/src/store/types.js b/src/store/types.js
index 463a8e2..c930a7a 100644
--- a/src/store/types.js
+++ b/src/store/types.js
@@ -36,9 +36,9 @@ export const USER_EXISTS_CHECK_REQUEST = "USER_EXISTS_CHECK_REQUEST";
 export const USER_EXISTS_CHECK_FAILURE = "USER_EXISTS_CHECK_FAILURE";
 export const USER_EXISTS_CHECK_SUCCESS = "USER_EXISTS_CHECK_SUCCESS";
 
-export const GENERAL_PERSON_FETCH_REQUEST = "GENERAL_PERSON_FETCH_REQUEST";
-export const GENERAL_PERSON_FETCH_FAILURE = "GENERAL_PERSON_FETCH_FAILURE";
-export const GENERAL_PERSON_FETCH_SUCCESS = "GENERAL_PERSON_FETCH_SUCCESS";
+export const PERSON_FETCH_REQUEST = "PERSON_FETCH_REQUEST";
+export const PERSON_FETCH_FAILURE = "PERSON_FETCH_FAILURE";
+export const PERSON_FETCH_SUCCESS = "PERSON_FETCH_SUCCESS";
 
 export const GENERAL_PERSONS_BRIEF_FETCH_REQUEST =
   "GENERAL_PERSONS_BRIEF_FETCH_REQUEST";
@@ -129,6 +129,14 @@ export const PERSON_ACHIEVEMENT_REDEEM_FAILURE =
 export const PERSON_ACHIEVEMENT_REDEEM_SUCCESS =
   "PERSON_ACHIEVEMENT_REDEEM_SUCCESS";
 
+export const PERSON_TALK_ADD_REQUEST = "PERSON_TALK_ADD_REQUEST";
+export const PERSON_TALK_ADD_FAILURE = "PERSON_TALK_ADD_FAILURE";
+export const PERSON_TALK_ADD_SUCCESS = "PERSON_TALK_ADD_SUCCESS";
+
+export const PERSON_TALK_DELETE_REQUEST = "PERSON_TALK_DELETE_REQUEST";
+export const PERSON_TALK_DELETE_FAILURE = "PERSON_TALK_DELETE_FAILURE";
+export const PERSON_TALK_DELETE_SUCCESS = "PERSON_TALK_DELETE_SUCCESS";
+
 export const TALK_FETCH_REQUEST = "TALK_FETCH_REQUEST";
 export const TALK_FETCH_FAILURE = "TALK_FETCH_FAILURE";
 export const TALK_FETCH_SUCCESS = "TALK_FETCH_SUCCESS";
@@ -137,14 +145,6 @@ export const TALKS_FETCH_REQUEST = "TALKS_FETCH_REQUEST";
 export const TALKS_FETCH_FAILURE = "TALKS_FETCH_FAILURE";
 export const TALKS_FETCH_SUCCESS = "TALKS_FETCH_SUCCESS";
 
-export const TALK_ADD_REQUEST = "TALK_ADD_REQUEST";
-export const TALK_ADD_FAILURE = "TALK_ADD_FAILURE";
-export const TALK_ADD_SUCCESS = "TALK_ADD_SUCCESS";
-
-export const TALK_DELETE_REQUEST = "TALK_DELETE_REQUEST";
-export const TALK_DELETE_FAILURE = "TALK_DELETE_FAILURE";
-export const TALK_DELETE_SUCCESS = "TALK_DELETE_SUCCESS";
-
 export const TALK_UPDATE_REQUEST = "TALK_UPDATE_REQUEST";
 export const TALK_UPDATE_FAILURE = "TALK_UPDATE_FAILURE";
 export const TALK_UPDATE_SUCCESS = "TALK_UPDATE_SUCCESS";

From 8732bfc54298b56d18b85d3fac4a97a063bf2c01 Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Wed, 9 Sep 2020 20:24:49 +0200
Subject: [PATCH 032/175] Improve setting page

The setting handle has been improved.
Also the settings now work with intelv2.
---
 src/Routes.js                                 |   5 +-
 .../modals/TalkUploadModal/index.jsx          |   4 +-
 src/components/pages/SettingsPage/index.jsx   | 392 ++++++++----------
 3 files changed, 187 insertions(+), 214 deletions(-)

diff --git a/src/Routes.js b/src/Routes.js
index 69d96a6..dd5d90d 100644
--- a/src/Routes.js
+++ b/src/Routes.js
@@ -11,7 +11,7 @@ import {
   PersonPage,
   CompanyPage,
   //   TalkPage,
-  //   SettingsPage,
+  SettingsPage,
   TempPage,
 } from "./components/pages";
 //#endregion
@@ -53,11 +53,12 @@ class Routes extends React.Component {
             };
           }}
         />
+        */}
         <Route
           exact
           path="/settings"
           component={(props) => <SettingsPage {...props} />}
-        /> */}
+        />
         <Route
           render={function () {
             return <h1>Not Found</h1>;
diff --git a/src/components/molecules/modals/TalkUploadModal/index.jsx b/src/components/molecules/modals/TalkUploadModal/index.jsx
index dff44bd..96ea482 100644
--- a/src/components/molecules/modals/TalkUploadModal/index.jsx
+++ b/src/components/molecules/modals/TalkUploadModal/index.jsx
@@ -58,12 +58,10 @@ class TalkUploadModal extends React.Component {
   uploadToAnonfiles = async (file) => {
     const res = await anonfiles.uploadFile(file);
 
-    console.log(res);
-
     this.props.uploadTalk(
       res.name,
       "",
-      res.displayUrl,
+      "https://docs.google.com/viewer?embedded=true&url=" + res.displayUrl,
       res.downloadUrl,
       res.path,
       res.html_url
diff --git a/src/components/pages/SettingsPage/index.jsx b/src/components/pages/SettingsPage/index.jsx
index e830a27..296a7ce 100644
--- a/src/components/pages/SettingsPage/index.jsx
+++ b/src/components/pages/SettingsPage/index.jsx
@@ -44,6 +44,7 @@ import { connect } from "react-redux";
 import { ProfilePictureModal } from "../../../components/molecules/modals";
 //> Style sheet
 import "./settings.scss";
+import { updateSettings } from "../../../store/actions/personActions";
 //#endregion
 
 //#region > Components
@@ -54,10 +55,10 @@ import "./settings.scss";
 class SettingsPage extends React.Component {
   state = {
     loading: true,
-    changeDetected: false,
+    person: null,
     showProfilePicture: false,
     showNotification: false,
-    file: undefined,
+    avatarFile: undefined,
     activeItem: 0,
     tabItems: [
       { name: "Profile", icon: "" },
@@ -70,20 +71,9 @@ class SettingsPage extends React.Component {
     ],
   };
 
-  // triggers every time the settings menu tab is pressed
-  componentDidMount = () => {
+  handleLoading = () => {
     const { loggedUser } = this.props;
 
-    if (!loggedUser.anonymous) {
-      this.props.readCache(loggedUser.username);
-    }
-  };
-
-  // important for direct url access
-  componentDidUpdate = () => {
-    const { loggedUser, fetchedUser } = this.props;
-
-    // redirect to root if the loggedUser is anonymous
     if (loggedUser.anonymous) {
       this.props.history.push({
         pathname: "/",
@@ -93,123 +83,98 @@ class SettingsPage extends React.Component {
       });
     }
 
-    if (!fetchedUser && !loggedUser.anonymous) {
-      this.props.readCache(loggedUser.username);
-    }
-
-    if (fetchedUser && this.state.loading) {
-      const platformData = this.props.fetchedUser?.platformData;
-      const data = platformData.user;
-      const enterData = {
-        avatar_url: data.avatarUrl ? data.avatarUrl : "",
-        first_name: data.firstName ? data.firstName : "",
-        last_name: data.lastName ? data.lastName : "",
-        email: data.email ? data.email : "",
-        showEmailPublic: data.settings.showEmailPublic,
-        company: data.company ? data.company : "",
-        showCompanyPublic: data.settings.showCompanyPublic,
-        website: data.websiteUrl ? data.websiteUrl : "",
-        location: data.location ? data.location : "",
-        showLocalRanking: data.settings.showLocalRanking,
-        showTopLanguages: data.settings.showTopLanguages,
-        show3DDiagram: data.settings.show3DDiagram,
-        show2DDiagram: data.settings.show2DDiagram,
-        activeTheme: data.settings.activeTheme
-          ? data.settings.activeTheme
-          : null,
-      };
-
-      const dataString = this.stringToHash(JSON.stringify(enterData));
+    if (loggedUser.person && !this.state.person) {
+      const {
+        avatarImage,
+        bio,
+        display2dCalendar,
+        display3dCalendar,
+        displayEmail,
+        displayProgrammingLanguages,
+        displayRanking,
+        displayWorkplace,
+        email,
+        firstName,
+        lastName,
+        location,
+        status,
+        websiteUrl,
+        workplace,
+      } = loggedUser.person;
 
       this.setState({
-        ...enterData,
-        checksum: dataString,
-        loading: false,
+        person: {
+          avatarImage,
+          bio,
+          display2dCalendar,
+          display3dCalendar,
+          displayEmail,
+          displayProgrammingLanguages,
+          displayRanking,
+          displayWorkplace,
+          email,
+          firstName,
+          lastName,
+          location,
+          status,
+          websiteUrl,
+          workplace,
+        },
       });
     }
   };
 
-  stringToHash = (string) => {
-    let hash = 0;
-
-    if (string.length == 0) return hash;
+  // triggers every time the settings menu tab is pressed
+  componentDidMount = () => {
+    this.handleLoading();
+  };
 
-    for (let i = 0; i < string.length; i++) {
-      let char = string.charCodeAt(i);
+  // important for direct url access
+  componentDidUpdate = () => {
+    this.handleLoading();
+  };
 
-      hash = (hash << 5) - hash + char;
-      hash = hash & hash;
+  onDrop = async (files) => {
+    if (files.length > 0) {
+      this.setState({
+        avatarFile: files[0],
+        showProfilePicture: true,
+      });
     }
-
-    return hash;
   };
 
-  handleSelectChange = (val) => {
-    this.setState(
-      {
-        activeTheme: val[0],
-      },
-      () => this.getChange()
-    );
-  };
+  handleChange = (name, value) => {
+    value =
+      name?.target?.type === "checkbox"
+        ? name.target.checked
+        : name.target.value;
 
-  handleCheckChange = (e) => {
-    this.setState(
-      {
-        [e.target.name]: e.target.checked,
-      },
-      () => this.getChange()
-    );
-  };
+    name = name?.target?.name ? name.target.name : name;
 
-  handleTextChange = (e) => {
-    this.setState(
-      {
-        [e.target.name]: e.target.value,
+    this.setState({
+      person: {
+        ...this.state.person,
+        [name]:
+          typeof this.state.person[name] === "object"
+            ? { ...this.state.person[name], ...value }
+            : value,
       },
-      () => this.getChange()
-    );
+    });
   };
 
-  getChange = () => {
-    let currentData = {
-      avatar_url: this.state.avatar_url,
-      first_name: this.state.first_name,
-      last_name: this.state.last_name,
-      email: this.state.email,
-      showEmailPublic: this.state.showEmailPublic,
-      company: this.state.company,
-      showCompanyPublic: this.state.showCompanyPublic,
-      website: this.state.website,
-      location: this.state.location,
-      showLocalRanking: this.state.showLocalRanking,
-      showTopLanguages: this.state.showTopLanguages,
-      show3DDiagram: this.state.show3DDiagram,
-      show2DDiagram: this.state.show2DDiagram,
-      activeTheme: this.state.activeTheme ? this.state.activeTheme : null,
-    };
-
-    // Get hash of current data
-    let currentHash = this.stringToHash(JSON.stringify(currentData));
-
-    if (this.state.changeDetected) {
-      if (this.state.checksum === currentHash) {
-        this.setState({
-          changeDetected: false,
-        });
-      }
+  checkIfChanged = () => {
+    if (
+      JSON.stringify(this.props.loggedUser.person) !==
+      JSON.stringify(this.state.person)
+    ) {
+      return true;
     } else {
-      if (this.state.checksum !== currentHash) {
-        this.setState({
-          changeDetected: true,
-        });
-      }
+      return false;
     }
   };
 
-  save = () => {
-    this.props.saveSettings(this.state);
-    this.setState({ showNotification: true });
+  setAvatarUrl = (imageSrc) => {
+    this.handleChange("avatarImage", { src: imageSrc });
   };
 
   handleProfilePictureModal = () => {
@@ -220,24 +185,11 @@ class SettingsPage extends React.Component {
     }
   };
 
-  onDrop = async (files) => {
-    if (files.length > 0) {
-      this.setState({
-        file: files[0],
-        showProfilePicture: true,
-      });
-    }
-  };
-
-  setAvatarUrl = (avatar_url) => {
-    this.setState({ avatar_url }, () => this.getChange());
-  };
-
   render() {
-    const { fetchedUser, loggedUser } = this.props;
-    const { activeItem } = this.state;
+    const { loggedUser } = this.props;
+    const { person, activeItem } = this.state;
 
-    if (fetchedUser && this.state.avatar_url) {
+    if (person) {
       return (
         <>
           {this.state.showNotification && (
@@ -260,7 +212,7 @@ class SettingsPage extends React.Component {
                     <MDBRow className="profile">
                       <MDBCol md="3">
                         <img
-                          src={this.state.avatar_url}
+                          src={person.avatarImage?.src}
                           className="img-fluid"
                         />
                       </MDBCol>
@@ -307,7 +259,7 @@ class SettingsPage extends React.Component {
                           <MDBView>
                             <input {...getInputProps()} />
                             <img
-                              src={this.state.avatar_url}
+                              src={person.avatarImage?.src}
                               className="img-fluid"
                             />
                             <MDBMask className="flex-center">
@@ -327,20 +279,20 @@ class SettingsPage extends React.Component {
                         <MDBCol md="6">
                           <input
                             type="text"
-                            name="first_name"
+                            name="firstName"
                             className="form-control"
-                            onChange={this.handleTextChange}
-                            value={this.state.first_name}
+                            onChange={this.handleChange}
+                            value={person.firstName}
                             placeholder="Firstname"
                           />
                         </MDBCol>
                         <MDBCol md="6">
                           <input
                             type="text"
-                            name="last_name"
+                            name="lastName"
                             className="form-control"
-                            onChange={this.handleTextChange}
-                            value={this.state.last_name}
+                            onChange={this.handleChange}
+                            value={person.lastName}
                             placeholder="Lastname"
                           />
                         </MDBCol>
@@ -352,8 +304,8 @@ class SettingsPage extends React.Component {
                             type="email"
                             name="email"
                             className="form-control"
-                            onChange={this.handleTextChange}
-                            value={this.state.email}
+                            onChange={this.handleChange}
+                            value={person.email}
                             placeholder="Email"
                             required
                           />
@@ -364,9 +316,9 @@ class SettingsPage extends React.Component {
                         filled
                         type="checkbox"
                         id="checkbox0"
-                        name="showEmailPublic"
-                        onChange={this.handleCheckChange}
-                        checked={this.state.showEmailPublic}
+                        name="displayEmail"
+                        onChange={this.handleChange}
+                        checked={person.displayEmail}
                         containerClass="mr-5"
                       />
                       <p className="font-weight-bold">Your workplace</p>
@@ -374,40 +326,66 @@ class SettingsPage extends React.Component {
                         <MDBCol md="12">
                           <input
                             type="text"
-                            name="company"
+                            name="workplace"
                             className="form-control"
-                            onChange={this.handleTextChange}
-                            value={this.state.company}
+                            onChange={this.handleChange}
+                            value={person.workplace}
                             placeholder="Company"
                           />
                         </MDBCol>
                       </MDBRow>
-                      <small className="d-block">
-                        You can @mention your company anywhere on SNEK
-                      </small>
                       <MDBInput
-                        label={<p>Display company on profile</p>}
+                        label={<p>Display workplace on profile</p>}
                         filled
                         type="checkbox"
                         id="checkbox1"
-                        name="showCompanyPublic"
-                        onChange={this.handleCheckChange}
-                        checked={this.state.showCompanyPublic}
+                        name="displayWorkplace"
+                        onChange={this.handleChange}
+                        checked={person.displayWorkplace}
                         containerClass="mr-5"
                       />
-                      <p className="font-weight-bold">Website</p>
+                      <p className="font-weight-bold">Status</p>
+                      <MDBRow>
+                        <MDBCol md="12">
+                          <input
+                            type="text"
+                            name="status"
+                            className="form-control"
+                            onChange={this.handleChange}
+                            value={person.status}
+                            placeholder="I'm on vacation!"
+                          />
+                        </MDBCol>
+                      </MDBRow>
+                      <p className="font-weight-bold">Bio</p>
+                      <MDBRow>
+                        <MDBCol md="12">
+                          <textarea
+                            type="text"
+                            name="bio"
+                            className="form-control"
+                            onChange={this.handleChange}
+                            value={person.bio}
+                            placeholder="Describe yourself"
+                          />
+                        </MDBCol>
+                      </MDBRow>
+                      {/* <small className="d-block">
+                        You can @mention your company anywhere on SNEK
+                      </small> */}
+                      {/* <p className="font-weight-bold">Website</p>
                       <MDBRow>
                         <MDBCol md="12">
                           <input
                             type="text"
                             name="website"
                             className="form-control"
-                            onChange={this.handleTextChange}
-                            value={this.state.website}
+                            onChange={this.handleChange}
+                            value={person.displayWebsite}
                             placeholder="Website URL"
                           />
                         </MDBCol>
-                      </MDBRow>
+                      </MDBRow> */}
                       <p className="font-weight-bold">Location</p>
                       <MDBRow>
                         <MDBCol md="12">
@@ -415,8 +393,8 @@ class SettingsPage extends React.Component {
                             type="text"
                             name="location"
                             className="form-control"
-                            onChange={this.handleTextChange}
-                            value={this.state.location}
+                            onChange={this.handleChange}
+                            value={person.location}
                             placeholder="City, Country"
                           />
                         </MDBCol>
@@ -433,10 +411,10 @@ class SettingsPage extends React.Component {
                           label={<p>Show local ranking</p>}
                           filled
                           type="checkbox"
-                          id="checkbox3"
-                          name="showLocalRanking"
-                          onChange={this.handleCheckChange}
-                          checked={this.state.showLocalRanking}
+                          id="checkbox2"
+                          name="displayRanking"
+                          onChange={this.handleChange}
+                          checked={person.displayRanking}
                           containerClass="mr-5"
                         />
                       </MDBCol>
@@ -445,10 +423,10 @@ class SettingsPage extends React.Component {
                           label={<p>Show top programming languages</p>}
                           filled
                           type="checkbox"
-                          id="checkbox4"
-                          name="showTopLanguages"
-                          onChange={this.handleCheckChange}
-                          checked={this.state.showTopLanguages}
+                          id="checkbox3"
+                          name="displayProgrammingLanguages"
+                          onChange={this.handleChange}
+                          checked={person.displayProgrammingLanguages}
                           containerClass="mr-5"
                         />
                       </MDBCol>
@@ -460,10 +438,10 @@ class SettingsPage extends React.Component {
                           label={<p>Show 3D work activity diagram</p>}
                           filled
                           type="checkbox"
-                          id="checkbox5"
-                          name="show3DDiagram"
-                          onChange={this.handleCheckChange}
-                          checked={this.state.show3DDiagram}
+                          id="checkbox4"
+                          name="display3dCalendar"
+                          onChange={this.handleChange}
+                          checked={person.display3dCalendar}
                           containerClass="mr-5"
                         />
                       </MDBCol>
@@ -472,10 +450,10 @@ class SettingsPage extends React.Component {
                           label={<p>Show 2D work activity diagram</p>}
                           filled
                           type="checkbox"
-                          id="checkbox6"
-                          name="show2DDiagram"
-                          onChange={this.handleCheckChange}
-                          checked={this.state.show2DDiagram}
+                          id="checkbox5"
+                          name="display2dCalendar"
+                          onChange={this.handleChange}
+                          checked={person.display2dCalendar}
                           containerClass="mr-5"
                         />
                       </MDBCol>
@@ -499,25 +477,22 @@ class SettingsPage extends React.Component {
                               <MDBSelectOption value="">
                                 Default
                               </MDBSelectOption>
-                              {fetchedUser?.accessories?.themes &&
-                                fetchedUser.accessories.themes.tids.map(
-                                  (tid, i) => {
-                                    let name = "Unnamed";
-                                    switch (tid) {
-                                      case "9d88bda4657dcf17581ee91dfe6ab2a3":
-                                        name = "Alpha";
-                                        break;
-                                      default:
-                                        name = "Unnamed";
-                                    }
-                                    name += " Theme";
-                                    return (
-                                      <MDBSelectOption key={i} value={tid}>
-                                        {tid}
-                                      </MDBSelectOption>
-                                    );
-                                  }
-                                )}
+                              {loggedUser.person.tids.map((tid, i) => {
+                                let name = "Unnamed";
+                                switch (tid) {
+                                  case "9d88bda4657dcf17581ee91dfe6ab2a3":
+                                    name = "Alpha";
+                                    break;
+                                  default:
+                                    name = "Unnamed";
+                                }
+                                name += " Theme";
+                                return (
+                                  <MDBSelectOption key={i} value={tid}>
+                                    {tid}
+                                  </MDBSelectOption>
+                                );
+                              })}
                             </MDBSelectOptions>
                           </MDBSelect>
                         </MDBCol>
@@ -530,9 +505,15 @@ class SettingsPage extends React.Component {
                 </MDBTabContent>
               </MDBCol>
             </MDBRow>
-            {this.state.changeDetected && this.state.email !== "" && (
+            {this.checkIfChanged() && this.state.person.email !== "" && (
               <MDBRow className="float-right">
-                <MDBBtn color="green" onClick={this.save}>
+                <MDBBtn
+                  color="green"
+                  onClick={() => {
+                    this.setState({ showNotification: true });
+                    this.props.saveSettings(this.state.person);
+                  }}
+                >
                   Save Changes
                 </MDBBtn>
               </MDBRow>
@@ -542,25 +523,20 @@ class SettingsPage extends React.Component {
             <ProfilePictureModal
               {...this.props}
               setAvatarUrl={this.setAvatarUrl}
-              file={this.state.file}
+              file={this.state.avatarFile}
               handleProfilePictureModal={this.handleProfilePictureModal}
             />
           )}
         </>
       );
     } else {
-      if (!loggedUser) {
-        //>TODO The active component has to be set to the login component
-        window.open("/", "_self");
-      } else {
-        return (
-          <div className="text-center my-5 py-5">
-            <div className="spinner-grow text-success" role="status">
-              <span className="sr-only">Loading...</span>
-            </div>
+      return (
+        <div className="text-center my-5 py-5">
+          <div className="spinner-grow text-success" role="status">
+            <span className="sr-only">Loading...</span>
           </div>
-        );
-      }
+        </div>
+      );
     }
   }
 }
@@ -568,14 +544,12 @@ class SettingsPage extends React.Component {
 
 //#region > Redux Mapping
 const mapStateToProps = (state) => ({
-  loggedUser: state.auth.loggedUser,
-  fetchedUser: state.user.fetchedUser,
+  loggedUser: state.user.user,
 });
 
 const mapDispatchToProps = (dispatch) => {
   return {
-    saveSettings: (nextSettings) => dispatch(nextSettings),
-    readCache: (username) => dispatch(username),
+    saveSettings: (nextSettings) => dispatch(updateSettings(nextSettings)),
   };
 };
 //#endregion

From 08ca002c3dcf13cba45c755c26adccb82865aba6 Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Wed, 9 Sep 2020 20:47:44 +0200
Subject: [PATCH 033/175] Fix navbar avatar image

Now there is the correct avatar image in the navbar.
---
 src/components/molecules/Navbar/index.jsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/molecules/Navbar/index.jsx b/src/components/molecules/Navbar/index.jsx
index 98588b0..82d75f7 100644
--- a/src/components/molecules/Navbar/index.jsx
+++ b/src/components/molecules/Navbar/index.jsx
@@ -65,9 +65,7 @@ class Navbar extends React.Component {
 
   render() {
     const { location, loggedUser } = this.props;
-    const avatarUrl = loggedUser.platformData?.user?.avatarUrl
-      ? loggedUser.platformData.user.avatarUrl
-      : loggedUser.avatarUrl;
+    const avatarUrl = loggedUser.person?.avatarImage?.src;
 
     return (
       <MDBNavbar color="light" light expand="md">

From c7bfad3e96518dbf98d8d268730d6e54c4556abc Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Wed, 9 Sep 2020 20:53:48 +0200
Subject: [PATCH 034/175] Add optional changing for logged user

Now there are more check for the logged user.
---
 src/components/molecules/Navbar/index.jsx               | 2 +-
 src/components/organisms/sections/person/Tabs/index.jsx | 2 +-
 src/components/organisms/tabs/TalksTab/index.jsx        | 4 ++--
 src/components/pages/SettingsPage/index.jsx             | 8 ++++----
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/molecules/Navbar/index.jsx b/src/components/molecules/Navbar/index.jsx
index 82d75f7..4b6639e 100644
--- a/src/components/molecules/Navbar/index.jsx
+++ b/src/components/molecules/Navbar/index.jsx
@@ -65,7 +65,7 @@ class Navbar extends React.Component {
 
   render() {
     const { location, loggedUser } = this.props;
-    const avatarUrl = loggedUser.person?.avatarImage?.src;
+    const avatarUrl = loggedUser?.person?.avatarImage?.src;
 
     return (
       <MDBNavbar color="light" light expand="md">
diff --git a/src/components/organisms/sections/person/Tabs/index.jsx b/src/components/organisms/sections/person/Tabs/index.jsx
index 7d06064..7fe252e 100644
--- a/src/components/organisms/sections/person/Tabs/index.jsx
+++ b/src/components/organisms/sections/person/Tabs/index.jsx
@@ -32,7 +32,7 @@ class SoftwareTabs extends React.Component {
   isSameOrigin = () => {
     const { fetchedPerson, loggedUser } = this.props;
 
-    return fetchedPerson.slug === loggedUser.person.slug;
+    return fetchedPerson.slug === loggedUser?.person?.slug;
   };
 
   render() {
diff --git a/src/components/organisms/tabs/TalksTab/index.jsx b/src/components/organisms/tabs/TalksTab/index.jsx
index 48ee366..3bf7b31 100644
--- a/src/components/organisms/tabs/TalksTab/index.jsx
+++ b/src/components/organisms/tabs/TalksTab/index.jsx
@@ -94,7 +94,7 @@ class TalkTab extends React.Component {
           <MDBCol md="10">
             <h3 className="font-weight-bold">Talks</h3>
           </MDBCol>
-          {loggedUser.person.slug === fetchedPerson.slug && (
+          {loggedUser?.person?.slug === fetchedPerson.slug && (
             <MDBCol md="2">
               <MDBBtn
                 color="green"
@@ -121,7 +121,7 @@ class TalkTab extends React.Component {
                             : talk.title}
                         </MDBCol>
                         <MDBCol md="1">
-                          {loggedUser.person.slug === fetchedPerson.slug && (
+                          {loggedUser?.person?.slug === fetchedPerson.slug && (
                             <small
                               onClick={() => this.props.deleteTalk(talk.id)}
                             >
diff --git a/src/components/pages/SettingsPage/index.jsx b/src/components/pages/SettingsPage/index.jsx
index 296a7ce..adedbc8 100644
--- a/src/components/pages/SettingsPage/index.jsx
+++ b/src/components/pages/SettingsPage/index.jsx
@@ -83,7 +83,7 @@ class SettingsPage extends React.Component {
       });
     }
 
-    if (loggedUser.person && !this.state.person) {
+    if (loggedUser?.person && !this.state.person) {
       const {
         avatarImage,
         bio,
@@ -100,7 +100,7 @@ class SettingsPage extends React.Component {
         status,
         websiteUrl,
         workplace,
-      } = loggedUser.person;
+      } = loggedUser?.person;
 
       this.setState({
         person: {
@@ -164,7 +164,7 @@ class SettingsPage extends React.Component {
 
   checkIfChanged = () => {
     if (
-      JSON.stringify(this.props.loggedUser.person) !==
+      JSON.stringify(this.props.loggedUser?.person) !==
       JSON.stringify(this.state.person)
     ) {
       return true;
@@ -477,7 +477,7 @@ class SettingsPage extends React.Component {
                               <MDBSelectOption value="">
                                 Default
                               </MDBSelectOption>
-                              {loggedUser.person.tids.map((tid, i) => {
+                              {loggedUser?.person?.tids.map((tid, i) => {
                                 let name = "Unnamed";
                                 switch (tid) {
                                   case "9d88bda4657dcf17581ee91dfe6ab2a3":

From 9e74c285c60f94731e5284da7807181834ebe63e Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Wed, 9 Sep 2020 21:04:17 +0200
Subject: [PATCH 035/175] Fix logout navbar issue

Now the navbar behaves properly when logging out.
---
 src/store/reducers/userReducers.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/store/reducers/userReducers.js b/src/store/reducers/userReducers.js
index a31e3f1..c7ddad1 100644
--- a/src/store/reducers/userReducers.js
+++ b/src/store/reducers/userReducers.js
@@ -36,8 +36,10 @@ const userReducer = (state = INIT_STATE, action) => {
     //> Logout
     case Action.USER_LOGOUT_REQUEST:
       return state;
-    case Action.USER_LOGIN_SUCCESS:
-      return INIT_STATE;
+    case Action.USER_LOGOUT_SUCCESS:
+      return {
+        user: { anonymous: true, username: undefined, person: undefined },
+      };
     case Action.USER_LOGOUT_FAILURE:
       return {
         user: INIT_STATE.user,

From 5809a79294e46f9bec63c71cb4cc6379607bf9fc Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Thu, 10 Sep 2020 00:49:01 +0200
Subject: [PATCH 036/175] Improve talks tab

Due to the immutable of talkList the list had to be
copied.
Ref: https://github.com/apollographql/apollo-client/pull/5153
---
 src/components/organisms/tabs/TalksTab/index.jsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/organisms/tabs/TalksTab/index.jsx b/src/components/organisms/tabs/TalksTab/index.jsx
index 3bf7b31..e497507 100644
--- a/src/components/organisms/tabs/TalksTab/index.jsx
+++ b/src/components/organisms/tabs/TalksTab/index.jsx
@@ -68,8 +68,10 @@ class TalkTab extends React.Component {
   render() {
     const { loggedUser, fetchedPerson, talkList } = this.props;
 
-    if (talkList) {
-      talkList.map((talk) => {
+    const talks = JSON.parse(JSON.stringify(talkList));
+
+    if (talks) {
+      talks.map((talk) => {
         talk.social = {
           likes: 17,
           date: new Date().toLocaleDateString("en-US", {

From bd15e79ea24e5cc2b2620b49437d03b3efe9be83 Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Thu, 10 Sep 2020 02:22:04 +0200
Subject: [PATCH 037/175] Optimise settings handle change

The handle change method has been improved.
It can handle now also not only events.
---
 src/components/pages/SettingsPage/index.jsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/pages/SettingsPage/index.jsx b/src/components/pages/SettingsPage/index.jsx
index adedbc8..5a5eab7 100644
--- a/src/components/pages/SettingsPage/index.jsx
+++ b/src/components/pages/SettingsPage/index.jsx
@@ -144,12 +144,13 @@ class SettingsPage extends React.Component {
   };
 
   handleChange = (name, value) => {
-    value =
-      name?.target?.type === "checkbox"
-        ? name.target.checked
-        : name.target.value;
-
-    name = name?.target?.name ? name.target.name : name;
+    if (name.target) {
+      value =
+        name?.target?.type === "checkbox"
+          ? name?.target?.checked
+          : name?.target?.value;
+      name = name?.target?.name ? name?.target?.name : name;
+    }
 
     this.setState({
       person: {

From cbaea7947f5f8a7998c4a02d2de18ca6b1643877 Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Thu, 10 Sep 2020 02:23:45 +0200
Subject: [PATCH 038/175] Add support for uploading a avatar image

Now it is possible to upload a avatar image in the settings.
---
 src/components/pages/SettingsPage/index.jsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/pages/SettingsPage/index.jsx b/src/components/pages/SettingsPage/index.jsx
index 5a5eab7..0f03c3d 100644
--- a/src/components/pages/SettingsPage/index.jsx
+++ b/src/components/pages/SettingsPage/index.jsx
@@ -512,7 +512,10 @@ class SettingsPage extends React.Component {
                   color="green"
                   onClick={() => {
                     this.setState({ showNotification: true });
-                    this.props.saveSettings(this.state.person);
+                    this.props.saveSettings({
+                      ...this.state.person,
+                      avatarImage: this.state.avatarFile,
+                    });
                   }}
                 >
                   Save Changes

From b46c5fc0cb175f323b58e62a2681868bd3b3181d Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Thu, 10 Sep 2020 02:26:03 +0200
Subject: [PATCH 039/175] Fix talk tab iframe rendering error

Now it is possible to list the talk tab entries.
---
 src/components/organisms/tabs/TalksTab/index.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/organisms/tabs/TalksTab/index.jsx b/src/components/organisms/tabs/TalksTab/index.jsx
index e497507..96af94c 100644
--- a/src/components/organisms/tabs/TalksTab/index.jsx
+++ b/src/components/organisms/tabs/TalksTab/index.jsx
@@ -110,8 +110,8 @@ class TalkTab extends React.Component {
           )}
         </MDBRow>
         <MDBRow className="talks-list">
-          {talkList &&
-            talkList.map((talk, i) => {
+          {talks &&
+            talks.map((talk, i) => {
               return (
                 <MDBCol md="6" key={i} className="mt-3">
                   <MDBCard>
@@ -151,7 +151,7 @@ class TalkTab extends React.Component {
                               src={talk.displayUrl}
                               onLoad={() => {
                                 clearInterval(talk.interval.timeoutId);
-                                talkList[i].interval.loaded = true;
+                                talks[i].interval.loaded = true;
                               }}
                               frameBorder="0"
                             />

From d2defdea89d435a162be8e3cf6aa4bb8d1c4b0ba Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Thu, 10 Sep 2020 04:03:26 +0200
Subject: [PATCH 040/175] Improve setting change check

Now it is possible to reactivate the save button.
---
 src/components/pages/SettingsPage/index.jsx | 37 +++++++++++----------
 1 file changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/components/pages/SettingsPage/index.jsx b/src/components/pages/SettingsPage/index.jsx
index 0f03c3d..b14c6ff 100644
--- a/src/components/pages/SettingsPage/index.jsx
+++ b/src/components/pages/SettingsPage/index.jsx
@@ -44,6 +44,8 @@ import { connect } from "react-redux";
 import { ProfilePictureModal } from "../../../components/molecules/modals";
 //> Style sheet
 import "./settings.scss";
+//> Actions
+// Functions to send data from the application to the store
 import { updateSettings } from "../../../store/actions/personActions";
 //#endregion
 
@@ -58,6 +60,7 @@ class SettingsPage extends React.Component {
     person: null,
     showProfilePicture: false,
     showNotification: false,
+    showSaveButton: false,
     avatarFile: undefined,
     activeItem: 0,
     tabItems: [
@@ -83,7 +86,7 @@ class SettingsPage extends React.Component {
       });
     }
 
-    if (loggedUser?.person && !this.state.person) {
+    if (loggedUser?.person && this.state.loading) {
       const {
         avatarImage,
         bio,
@@ -103,6 +106,7 @@ class SettingsPage extends React.Component {
       } = loggedUser?.person;
 
       this.setState({
+        loading: false,
         person: {
           avatarImage,
           bio,
@@ -153,6 +157,7 @@ class SettingsPage extends React.Component {
     }
 
     this.setState({
+      showSaveButton: true,
       person: {
         ...this.state.person,
         [name]:
@@ -163,17 +168,6 @@ class SettingsPage extends React.Component {
     });
   };
 
-  checkIfChanged = () => {
-    if (
-      JSON.stringify(this.props.loggedUser?.person) !==
-      JSON.stringify(this.state.person)
-    ) {
-      return true;
-    } else {
-      return false;
-    }
-  };
-
   setAvatarUrl = (imageSrc) => {
     this.handleChange("avatarImage", { src: imageSrc });
   };
@@ -506,16 +500,23 @@ class SettingsPage extends React.Component {
                 </MDBTabContent>
               </MDBCol>
             </MDBRow>
-            {this.checkIfChanged() && this.state.person.email !== "" && (
+            {this.state.showSaveButton && this.state.person.email !== "" && (
               <MDBRow className="float-right">
                 <MDBBtn
                   color="green"
                   onClick={() => {
-                    this.setState({ showNotification: true });
-                    this.props.saveSettings({
-                      ...this.state.person,
-                      avatarImage: this.state.avatarFile,
-                    });
+                    this.props
+                      .saveSettings({
+                        ...this.state.person,
+                        avatarImage: this.state.avatarFile,
+                      })
+                      .then(() => {
+                        this.setState({
+                          loading: true,
+                          showNotification: true,
+                          showSaveButton: false,
+                        });
+                      });
                   }}
                 >
                   Save Changes

From 3081b0c4ba42eda87fb88705152b7c85bd42d74f Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Thu, 10 Sep 2020 04:05:31 +0200
Subject: [PATCH 041/175] Set loggedusers person after updating settings

Now the logged user is updated too when the settings
are updated.
---
 src/store/actions/personActions.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/store/actions/personActions.js b/src/store/actions/personActions.js
index 104759e..af61bf4 100644
--- a/src/store/actions/personActions.js
+++ b/src/store/actions/personActions.js
@@ -3,6 +3,10 @@
 import * as Action from "../types";
 //> Intel
 import INTEL_SNEK from "snek-intel/lib/utils/snek";
+
+//> Actions
+// Functions to send data from the application to the store
+import { getPerson as getUserPerson } from "./userActions";
 //#endregion
 
 //#region > Utils
@@ -75,6 +79,8 @@ const updateSettings = (
         type: Action.PERSON_SETTINGS_UPDATE_SUCCESS,
         payload: person,
       });
+
+      await dispatch(getUserPerson(personName));
     } catch (ex) {
       dispatch({
         type: Action.PERSON_SETTINGS_UPDATE_FAILURE,

From 59f7da56f78f04eccf624c244f2a77191049eb9f Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Thu, 10 Sep 2020 14:02:20 +0200
Subject: [PATCH 042/175] Improve company page data

The action and reducers related to company page
has been improved.
---
 src/components/pages/CompanyPage/index.jsx | 434 +++++++++++----------
 src/store/actions/pageActions.js           |  35 --
 src/store/reducers/enterpriseReducers.js   |  30 +-
 src/store/reducers/index.js                |   4 +
 src/store/reducers/pageReducers.js         |  32 --
 5 files changed, 242 insertions(+), 293 deletions(-)
 delete mode 100644 src/store/actions/pageActions.js
 delete mode 100644 src/store/reducers/pageReducers.js

diff --git a/src/components/pages/CompanyPage/index.jsx b/src/components/pages/CompanyPage/index.jsx
index 4ff201e..501949b 100644
--- a/src/components/pages/CompanyPage/index.jsx
+++ b/src/components/pages/CompanyPage/index.jsx
@@ -36,7 +36,11 @@ import {
 
 //> Actions
 // Functions to send data from the application to the store
-import { getPageByHandle } from "../../../store/actions/pageActions";
+import {
+  getGeneral,
+  getProjects,
+  getUsers,
+} from "../../../store/actions/enterpriseActions";
 //> Components
 import {
   PageOverview,
@@ -46,6 +50,7 @@ import {
 } from "../../organisms/tabs/enterprise";
 //> CSS
 import "./company.scss";
+
 //> Images
 // Too be added
 //#endregion
@@ -75,22 +80,24 @@ const TAB_ITEMS = [
 /** @class This component displays pipelines */
 class Page extends React.Component {
   state = {
+    general: undefined,
+    users: undefined,
+    projects: undefined,
     activeItem: 0,
   };
 
   componentDidMount = () => {
     // Retrieve Page
-    this.props.getPageByHandle(this.props.handle);
+    // this.props.getGeneral("schettn");
   };
 
   componentDidUpdate = () => {
     // Check if there are no current pipelines set
-    if (this.props.page && !this.state.page) {
-      this.setState({
-        page: this.props.page.data,
-      });
-    }
-
+    // if (this.props.page && !this.state.page) {
+    //   this.setState({
+    //     page: this.props.page.data,
+    //   });
+    // }
     /*if (JSON.stringify(this.props.page) !== JSON.stringify(this.state.page)) {
       this.setState({
         page: this.props.page.data,
@@ -137,224 +144,229 @@ class Page extends React.Component {
   };
 
   render() {
-    const { page } = this.state;
+    // const { page } = this.state;
 
-    console.log("PAGE", page);
+    // console.log("PAGE", page);
 
     // Enterprise data
-    const enterprise = page && page.enterprise;
+    // const enterprise = page && page.enterprise;
+
+    return <h1>Hi</h1>;
 
-    return (
-      <MDBContainer id="company">
-        {page ? (
-          <MDBRow>
-            <MDBCol lg="12">
-              <MDBCard>
-                <MDBCardBody>
-                  <MDBRow className="d-flex align-items-center">
-                    <MDBCol lg="2">
-                      <img
-                        src="https://www.htl-villach.at/typo3conf/ext/htl_villach/Resources/Public/Images/htl_logo_box.svg"
-                        alt="Company logo"
-                        className="img-fluid"
-                      />
-                    </MDBCol>
-                    <MDBCol lg="10">
-                      <div className="d-flex justify-content-space-between">
-                        <div>
-                          <p className="lead font-weight-bold mb-1">
-                            {enterprise.company.name}
-                          </p>
-                          <p className="text-muted mb-3">
-                            {enterprise.company.description}
-                          </p>
-                        </div>
-                        <div className="d-flex">
-                          <MDBBtn
-                            color="green"
-                            size="md"
-                            onClick={() => this.setState({ reAuth: true })}
-                          >
-                            Publish
-                          </MDBBtn>
-                        </div>
-                      </div>
-                      <div>
-                        {enterprise.company.isRecruiting && (
-                          <MDBBadge color="indigo">
-                            <MDBIcon icon="users" />
-                            Recruiting
-                          </MDBBadge>
-                        )}
-                        {enterprise.company.employees >= 1 &&
-                          enterprise.company.employees < 5 && (
-                            <MDBBadge color="primary">1-5 Employees</MDBBadge>
-                          )}
-                        {enterprise.company.employees >= 5 &&
-                          enterprise.company.employees < 20 && (
-                            <MDBBadge color="primary">5-20 Employees</MDBBadge>
-                          )}
-                        {enterprise.company.employees >= 20 &&
-                          enterprise.company.employees < 100 && (
-                            <MDBBadge color="primary">
-                              20-100 Employees
-                            </MDBBadge>
-                          )}
-                        {enterprise.company.employees >= 100 && (
-                          <MDBBadge color="primary">100+ Employees</MDBBadge>
-                        )}
-                        {enterprise.company.isOpenSource && (
-                          <a
-                            href={enterprise.company.openSourceUrl}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                          >
-                            <MDBBadge color="elegant-color">
-                              <MDBIcon fab icon="github" />
-                              Open source
-                            </MDBBadge>
-                          </a>
-                        )}
-                      </div>
-                    </MDBCol>
-                  </MDBRow>
-                </MDBCardBody>
-              </MDBCard>
-            </MDBCol>
-            <MDBCol lg="12">
-              <MDBNav tabs className="d-flex justify-content-between">
-                <div className="d-flex">
-                  {TAB_ITEMS.map((tab, t) => {
-                    return (
-                      <MDBNavItem key={t}>
-                        <MDBNavLink
-                          link
-                          to="#"
-                          active={this.state.activeItem === t}
-                          onClick={(e) => this.toggle(e, t)}
-                          role="tab"
-                        >
-                          <MDBIcon icon={tab.icon} />
-                          {tab.name}
-                        </MDBNavLink>
-                      </MDBNavItem>
-                    );
-                  })}
-                </div>
-                <div>
-                  {(this.state.activeItem === 0 ||
-                    this.state.activeItem === 1 ||
-                    this.state.activeItem === 2) && (
-                    <input
-                      type="text"
-                      className="form-control"
-                      placeholder="Search"
-                      onChange={(e) =>
-                        this.setState({ globalFilter: e.target.value })
-                      }
-                    />
-                  )}
-                </div>
-              </MDBNav>
-              <MDBTabContent
-                className="card"
-                activeItem={this.state.activeItem}
-              >
-                {this.state.activeItem === 0 && (
-                  <MDBTabPane tabId={0} role="tabpanel">
-                    <PageOverview
-                      filter={this.state.globalFilter}
-                      feed={enterprise.company?.enterpriseContributionFeed}
-                      mergedFeed={
-                        enterprise.company?.mergedEnterpriseContributionFeed
-                      }
-                    />
-                  </MDBTabPane>
-                )}
-                {this.state.activeItem === 1 && (
-                  <MDBTabPane tabId={1} role="tabpanel">
-                    <PageProjects
-                      filter={this.state.globalFilter}
-                      navigateTo={this.props.navigateTo}
-                      projects={page.projects}
-                    />
-                  </MDBTabPane>
-                )}
-                {this.state.activeItem === 2 && (
-                  <MDBTabPane tabId={2} role="tabpanel">
-                    <PageUsers
-                      filter={this.state.globalFilter}
-                      navigateTo={this.props.navigateTo}
-                      users={page.users}
-                    />
-                  </MDBTabPane>
-                )}
-                {this.state.activeItem === 3 && (
-                  <MDBTabPane tabId={3} role="tabpanel">
-                    <PageImprint />
-                  </MDBTabPane>
-                )}
-              </MDBTabContent>
-            </MDBCol>
-          </MDBRow>
-        ) : (
-          <div className="flex-center">
-            <MDBSpinner />
-          </div>
-        )}
-        {this.state.reAuth && (
-          <MDBModal isOpen={true} toggle={this.toggleModal} size="sm">
-            <MDBModalBody>
-              <p>To continue, type an administrator password.</p>
-              {this.state.reAuthError && (
-                <MDBAlert color="danger">
-                  The password you have entered is wrong.
-                </MDBAlert>
-              )}
-              <input
-                type="password"
-                className="form-control"
-                value={this.state.password}
-                onChange={(e) => this.setState({ password: e.target.value })}
-              />
-              <MDBBtn
-                color="elegant"
-                size="md"
-                onClick={async () => {
-                  const result = await this.props.authenticate(
-                    this.state.password
-                  );
+    // return (
+    //   <MDBContainer id="company">
+    //     {page ? (
+    //       <MDBRow>
+    //         <MDBCol lg="12">
+    //           <MDBCard>
+    //             <MDBCardBody>
+    //               <MDBRow className="d-flex align-items-center">
+    //                 <MDBCol lg="2">
+    //                   <img
+    //                     src="https://www.htl-villach.at/typo3conf/ext/htl_villach/Resources/Public/Images/htl_logo_box.svg"
+    //                     alt="Company logo"
+    //                     className="img-fluid"
+    //                   />
+    //                 </MDBCol>
+    //                 <MDBCol lg="10">
+    //                   <div className="d-flex justify-content-space-between">
+    //                     <div>
+    //                       <p className="lead font-weight-bold mb-1">
+    //                         {enterprise.company.name}
+    //                       </p>
+    //                       <p className="text-muted mb-3">
+    //                         {enterprise.company.description}
+    //                       </p>
+    //                     </div>
+    //                     <div className="d-flex">
+    //                       <MDBBtn
+    //                         color="green"
+    //                         size="md"
+    //                         onClick={() => this.setState({ reAuth: true })}
+    //                       >
+    //                         Publish
+    //                       </MDBBtn>
+    //                     </div>
+    //                   </div>
+    //                   <div>
+    //                     {enterprise.company.isRecruiting && (
+    //                       <MDBBadge color="indigo">
+    //                         <MDBIcon icon="users" />
+    //                         Recruiting
+    //                       </MDBBadge>
+    //                     )}
+    //                     {enterprise.company.employees >= 1 &&
+    //                       enterprise.company.employees < 5 && (
+    //                         <MDBBadge color="primary">1-5 Employees</MDBBadge>
+    //                       )}
+    //                     {enterprise.company.employees >= 5 &&
+    //                       enterprise.company.employees < 20 && (
+    //                         <MDBBadge color="primary">5-20 Employees</MDBBadge>
+    //                       )}
+    //                     {enterprise.company.employees >= 20 &&
+    //                       enterprise.company.employees < 100 && (
+    //                         <MDBBadge color="primary">
+    //                           20-100 Employees
+    //                         </MDBBadge>
+    //                       )}
+    //                     {enterprise.company.employees >= 100 && (
+    //                       <MDBBadge color="primary">100+ Employees</MDBBadge>
+    //                     )}
+    //                     {enterprise.company.isOpenSource && (
+    //                       <a
+    //                         href={enterprise.company.openSourceUrl}
+    //                         target="_blank"
+    //                         rel="noopener noreferrer"
+    //                       >
+    //                         <MDBBadge color="elegant-color">
+    //                           <MDBIcon fab icon="github" />
+    //                           Open source
+    //                         </MDBBadge>
+    //                       </a>
+    //                     )}
+    //                   </div>
+    //                 </MDBCol>
+    //               </MDBRow>
+    //             </MDBCardBody>
+    //           </MDBCard>
+    //         </MDBCol>
+    //         <MDBCol lg="12">
+    //           <MDBNav tabs className="d-flex justify-content-between">
+    //             <div className="d-flex">
+    //               {TAB_ITEMS.map((tab, t) => {
+    //                 return (
+    //                   <MDBNavItem key={t}>
+    //                     <MDBNavLink
+    //                       link
+    //                       to="#"
+    //                       active={this.state.activeItem === t}
+    //                       onClick={(e) => this.toggle(e, t)}
+    //                       role="tab"
+    //                     >
+    //                       <MDBIcon icon={tab.icon} />
+    //                       {tab.name}
+    //                     </MDBNavLink>
+    //                   </MDBNavItem>
+    //                 );
+    //               })}
+    //             </div>
+    //             <div>
+    //               {(this.state.activeItem === 0 ||
+    //                 this.state.activeItem === 1 ||
+    //                 this.state.activeItem === 2) && (
+    //                 <input
+    //                   type="text"
+    //                   className="form-control"
+    //                   placeholder="Search"
+    //                   onChange={(e) =>
+    //                     this.setState({ globalFilter: e.target.value })
+    //                   }
+    //                 />
+    //               )}
+    //             </div>
+    //           </MDBNav>
+    //           <MDBTabContent
+    //             className="card"
+    //             activeItem={this.state.activeItem}
+    //           >
+    //             {this.state.activeItem === 0 && (
+    //               <MDBTabPane tabId={0} role="tabpanel">
+    //                 <PageOverview
+    //                   filter={this.state.globalFilter}
+    //                   feed={enterprise.company?.enterpriseContributionFeed}
+    //                   mergedFeed={
+    //                     enterprise.company?.mergedEnterpriseContributionFeed
+    //                   }
+    //                 />
+    //               </MDBTabPane>
+    //             )}
+    //             {this.state.activeItem === 1 && (
+    //               <MDBTabPane tabId={1} role="tabpanel">
+    //                 <PageProjects
+    //                   filter={this.state.globalFilter}
+    //                   navigateTo={this.props.navigateTo}
+    //                   projects={page.projects}
+    //                 />
+    //               </MDBTabPane>
+    //             )}
+    //             {this.state.activeItem === 2 && (
+    //               <MDBTabPane tabId={2} role="tabpanel">
+    //                 <PageUsers
+    //                   filter={this.state.globalFilter}
+    //                   navigateTo={this.props.navigateTo}
+    //                   users={page.users}
+    //                 />
+    //               </MDBTabPane>
+    //             )}
+    //             {this.state.activeItem === 3 && (
+    //               <MDBTabPane tabId={3} role="tabpanel">
+    //                 <PageImprint />
+    //               </MDBTabPane>
+    //             )}
+    //           </MDBTabContent>
+    //         </MDBCol>
+    //       </MDBRow>
+    //     ) : (
+    //       <div className="flex-center">
+    //         <MDBSpinner />
+    //       </div>
+    //     )}
+    //     {this.state.reAuth && (
+    //       <MDBModal isOpen={true} toggle={this.toggleModal} size="sm">
+    //         <MDBModalBody>
+    //           <p>To continue, type an administrator password.</p>
+    //           {this.state.reAuthError && (
+    //             <MDBAlert color="danger">
+    //               The password you have entered is wrong.
+    //             </MDBAlert>
+    //           )}
+    //           <input
+    //             type="password"
+    //             className="form-control"
+    //             value={this.state.password}
+    //             onChange={(e) => this.setState({ password: e.target.value })}
+    //           />
+    //           <MDBBtn
+    //             color="elegant"
+    //             size="md"
+    //             onClick={async () => {
+    //               const result = await this.props.authenticate(
+    //                 this.state.password
+    //               );
 
-                  if (result) {
-                    this.setState({ reAuth: false }, () =>
-                      this.props.publishenterprise(
-                        enterprise.company.connectorHandle
-                      )
-                    );
-                  } else {
-                    this.setState({ reAuthError: true });
-                  }
-                }}
-              >
-                Authenticate
-              </MDBBtn>
-            </MDBModalBody>
-          </MDBModal>
-        )}
-      </MDBContainer>
-    );
+    //               if (result) {
+    //                 this.setState({ reAuth: false }, () =>
+    //                   this.props.publishenterprise(
+    //                     enterprise.company.connectorHandle
+    //                   )
+    //                 );
+    //               } else {
+    //                 this.setState({ reAuthError: true });
+    //               }
+    //             }}
+    //           >
+    //             Authenticate
+    //           </MDBBtn>
+    //         </MDBModalBody>
+    //       </MDBModal>
+    //     )}
+    //   </MDBContainer>
+    // );
   }
 }
 //#endregion
 
 //#region > Redux Mapping
 const mapStateToProps = (state) => ({
-  page: state.pages.page,
+  // user: state.user.user,
+  // page: state.enterprise.page,
 });
 
 const mapDispatchToProps = (dispatch) => {
   return {
-    getPageByHandle: (handle) => dispatch(getPageByHandle(handle)),
+    // getGeneral: (handle) => dispatch(getGeneral(handle)),
+    // getProjects: (handle) => dispatch(getProjects(handle)),
+    // getUsers: (handle) => dispatch(getUsers(handle)),
   };
 };
 //#endregion
diff --git a/src/store/actions/pageActions.js b/src/store/actions/pageActions.js
deleted file mode 100644
index c344173..0000000
--- a/src/store/actions/pageActions.js
+++ /dev/null
@@ -1,35 +0,0 @@
-//#region > Enterprise Page Actions
-/**
- * Deliver page data by handle
- *
- * @param handle Page handle string
- * @description Delivers page data
- */
-const getPageByHandle = (handle) => {
-  return (dispatch, getState, { getIntel }) => {
-    const enterprise = require("../../components/pages/CompanyPage/dummy/enterprise");
-    const users = require("../../components/pages/CompanyPage/dummy/users");
-    const projects = require("../../components/pages/CompanyPage/dummy/projects");
-
-    dispatch({
-      type: "GETPAGE_SUCCESS",
-      payload: {
-        data: {
-          enterprise: enterprise ? enterprise.default.payload.data : null,
-          users: users ? users.default.payload.data : null,
-          projects: projects ? projects.default.payload.data : null,
-        },
-      },
-    });
-  };
-};
-
-//#region > Exports
-//> Default Component
-export { getPageByHandle };
-//#endregion
-
-/**
- * SPDX-License-Identifier: (EUPL-1.2)
- * Copyright © 2019-2020 Simon Prast
- */
diff --git a/src/store/reducers/enterpriseReducers.js b/src/store/reducers/enterpriseReducers.js
index f1ec85f..611d83a 100644
--- a/src/store/reducers/enterpriseReducers.js
+++ b/src/store/reducers/enterpriseReducers.js
@@ -8,7 +8,7 @@ import * as Action from "../types";
 
 //#region > Constant Variables
 const INIT_STATE = {
-  enterprise: {
+  page: {
     general: undefined,
     projects: undefined,
     users: undefined,
@@ -19,7 +19,7 @@ const INIT_STATE = {
 //#endregion
 
 //#region > Reducers
-const generalReducer = (state = INIT_STATE, action) => {
+const enterpriseReducer = (state = INIT_STATE, action) => {
   switch (action.type) {
     //> General Enterprise
     case Action.ENTERPRISE_GENERAL_FETCH_REQUEST:
@@ -27,16 +27,16 @@ const generalReducer = (state = INIT_STATE, action) => {
     case Action.ENTERPRISE_GENERAL_FETCH_SUCCESS:
       return {
         ...state,
-        enterprise: {
-          ...state.enterprise,
+        page: {
+          ...state.page,
           general: action.payload,
         },
       };
     case Action.ENTERPRISE_GENERAL_FETCH_FAILURE:
       return {
         ...state,
-        enterprise: {
-          ...state.enterprise,
+        page: {
+          ...state.page,
           general: undefined,
         },
         error: action.payload,
@@ -48,16 +48,16 @@ const generalReducer = (state = INIT_STATE, action) => {
     case Action.ENTERPRISE_PROJECTS_FETCH_SUCCESS:
       return {
         ...state,
-        enterprise: {
-          ...state.enterprise,
+        page: {
+          ...state.page,
           projects: action.payload,
         },
       };
     case Action.ENTERPRISE_PROJECTS_FETCH_FAILURE:
       return {
         ...state,
-        enterprise: {
-          ...state.enterprise,
+        page: {
+          ...state.page,
           projects: undefined,
         },
         error: action.payload,
@@ -69,16 +69,16 @@ const generalReducer = (state = INIT_STATE, action) => {
     case Action.ENTERPRISE_USERS_FETCH_SUCCESS:
       return {
         ...state,
-        enterprise: {
-          ...state.enterprise,
+        page: {
+          ...state.page,
           users: action.payload,
         },
       };
     case Action.ENTERPRISE_USERS_FETCH_FAILURE:
       return {
         ...state,
-        enterprise: {
-          ...state.enterprise,
+        page: {
+          ...state.page,
           users: undefined,
         },
         error: action.payload,
@@ -92,5 +92,5 @@ const generalReducer = (state = INIT_STATE, action) => {
 //#endregion
 
 //#region > Exports
-export default generalReducer;
+export default enterpriseReducer;
 //#endregion
diff --git a/src/store/reducers/index.js b/src/store/reducers/index.js
index f933b2f..b1788a8 100644
--- a/src/store/reducers/index.js
+++ b/src/store/reducers/index.js
@@ -15,6 +15,8 @@ import personReducers from "./personReducers";
 import generalReducers from "./generalReducers";
 // Talk
 import talkReducer from "./talkReducers";
+// Enterprise
+import enterpriseReducer from "./enterpriseReducers";
 
 //#endregion
 
@@ -30,6 +32,8 @@ const rootReducer = combineReducers({
   general: generalReducers,
   // Talk data
   talk: talkReducer,
+  // Enterprise data
+  enterprise: enterpriseReducer,
 });
 //#endregion
 
diff --git a/src/store/reducers/pageReducers.js b/src/store/reducers/pageReducers.js
deleted file mode 100644
index d314889..0000000
--- a/src/store/reducers/pageReducers.js
+++ /dev/null
@@ -1,32 +0,0 @@
-//#region > Constant Variables
-const INIT_STATE = {
-  page: null,
-  error: null,
-};
-//#endregion
-
-//#region > Reducers
-const pageReducer = (state = INIT_STATE, action) => {
-  switch (action.type) {
-    //> LOGIN
-    case "GETPAGE_SUCCESS":
-      return {
-        ...state,
-        page: action.payload,
-        authErrorDetails: null,
-      };
-    default:
-      return state;
-  }
-};
-//#endregion
-
-//#region > Exports
-//> Default Component
-export default pageReducer;
-//#endregion
-
-/**
- * SPDX-License-Identifier: (EUPL-1.2)
- * Copyright © 2019-2020 Simon Prast
- */

From 9498abdb527f9d1b4e2f0d1592d671a40594906a Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Thu, 10 Sep 2020 16:17:39 +0200
Subject: [PATCH 043/175] Optimise registration and login

Now it is possible to register a new user.
Hashing has been moved to the login and register action.
---
 .../molecules/forms/LoginForm/index.jsx       |   5 +-
 .../molecules/forms/RegisterForm/index.jsx    | 176 ++++++++++++++++--
 src/store/actions/userActions.js              |  25 ++-
 3 files changed, 174 insertions(+), 32 deletions(-)

diff --git a/src/components/molecules/forms/LoginForm/index.jsx b/src/components/molecules/forms/LoginForm/index.jsx
index 5d32e36..878d4d0 100644
--- a/src/components/molecules/forms/LoginForm/index.jsx
+++ b/src/components/molecules/forms/LoginForm/index.jsx
@@ -7,9 +7,6 @@ import PropTypes from "prop-types";
 //> MDB
 // "Material Design for Bootstrap" is a great UI design framework
 import { MDBAlert, MDBBtn, MDBIcon } from "mdbreact";
-//> Additional
-// SHA hashing algorithm
-import { sha256 } from "js-sha256";
 //> Redux
 // Allows to React components read data from a Redux store, and dispatch actions
 // to the store to update data.
@@ -130,7 +127,7 @@ class LoginForm extends React.Component {
       // Proceed to login
       const result = await this.props.login({
         username: this.state.login_username,
-        password: sha256(this.state.login_password), // Hash password
+        password: this.state.login_password, // Hash password
       });
 
       //#TSID6
diff --git a/src/components/molecules/forms/RegisterForm/index.jsx b/src/components/molecules/forms/RegisterForm/index.jsx
index caebd6e..8f5468d 100644
--- a/src/components/molecules/forms/RegisterForm/index.jsx
+++ b/src/components/molecules/forms/RegisterForm/index.jsx
@@ -29,18 +29,17 @@ import {
   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";
+import {
+  register,
+  isValidUsername,
+  loginAction,
+} from "../../../../store/actions/userActions";
 //#endregion
 
 //#region > Components
@@ -51,12 +50,15 @@ import { connect } from "react-redux";
 class RegisterForm extends React.Component {
   state = {
     loading: false,
+    errors: [],
+    username: "",
     firstname: "",
     lastname: "",
     email: "",
     password1: "",
     password2: "",
-    promoCode: true,
+    redemptionCodeValue: "",
+    redemptionCode: true,
   };
 
   testForError = (id) => {
@@ -112,6 +114,25 @@ class RegisterForm extends React.Component {
     );
   };
 
+  handleCodeChange = (e) => {
+    let code = e.target.value;
+
+    if (code.length <= 14) {
+      if (code.length === 4 || code.length === 9) {
+        code = code + "-";
+      }
+
+      this.setState(
+        {
+          redemptionCodeValue: code.toUpperCase(),
+        },
+        () => this.removeError(9)
+      );
+    } else {
+      return false;
+    }
+  };
+
   removeError = (id) => {
     // Preset errors to local variable
     let errors = this.state.errors;
@@ -135,6 +156,110 @@ class RegisterForm extends React.Component {
     }
   };
 
+  handleSubmit = async () => {
+    const {
+      username,
+      firstname,
+      lastname,
+      email,
+      password1,
+      password2,
+      redemptionCodeValue,
+      redemptionCode,
+    } = this.state;
+    let errors = [];
+
+    // Check if passwords match
+    if (password1 !== "" && password2 !== "" && password1 !== password2) {
+      errors.push({
+        code: 1,
+        msg: "Your passwords do not match.",
+        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,
+      });
+    }
+
+    const isUsernameTaken = !(await this.props.isValidUsername(username));
+
+    if (username === "" || (username && isUsernameTaken)) {
+      errors.push({
+        code: 6,
+        msg: "Please enter a valid username.",
+        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 (redemptionCodeValue === "" && redemptionCode) {
+      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,
+        },
+        async () => {
+          console.log("start register");
+          await this.props.register(
+            username,
+            firstname,
+            lastname,
+            email,
+            password1,
+            redemptionCodeValue ? redemptionCodeValue : "none"
+          );
+
+          await this.props.login(username, password1);
+        }
+      );
+    } else {
+      this.setState({ errors });
+    }
+  };
+
   render() {
     const { goTo } = this.props;
 
@@ -145,12 +270,12 @@ class RegisterForm extends React.Component {
           <input
             type="text"
             className={
-              this.testForError(5)
+              this.testForError(6)
                 ? "form-control error mb-2"
                 : "form-control mb-2"
             }
             name="username"
-            onChange={(e) => this.handleChange(e, 5)}
+            onChange={(e) => this.handleChange(e, 6)}
             value={this.state.username}
           />
           <MDBRow className="mb-2">
@@ -225,18 +350,20 @@ class RegisterForm extends React.Component {
         <div className="text-left mt-2">
           <small
             className="blue-text clickable text-md"
-            onClick={() => this.setState({ promoCode: !this.state.promoCode })}
+            onClick={() =>
+              this.setState({ redemptionCode: !this.state.redemptionCode })
+            }
           >
-            {!this.state.promoCode
+            {!this.state.redemptionCode
               ? "I have a promo code"
               : "I don't have a promo code"}
           </small>
         </div>
-        {this.state.promoCode && (
+        {this.state.redemptionCode && (
           <input
-            value={this.state.code}
+            value={this.state.redemptionCodeValue}
             className={
-              this.testForError([9, 1])
+              this.testForError(9)
                 ? "form-control mb-3 error"
                 : "form-control mb-3"
             }
@@ -274,17 +401,28 @@ RegisterForm.propTypes = {
 
 //#region > Redux Mapping
 const mapStateToProps = (state) => ({
-  registrationHistory: state.user.registrationHistory,
-  gitlabServers: state.general.allGitlabServers,
+  test: "",
 });
 
 const mapDispatchToProps = (dispatch) => {
   return {
-    register: (registrationData) => dispatch((registrationData)),
-    login: (user) => dispatch((user)),
-    fetchGitLabServers: () => dispatch(),
+    register: (
+      username,
+      firstName,
+      lastName,
+      email,
+      password,
+      redemptionCode
+    ) =>
+      dispatch(
+        register(username, firstName, lastName, email, password, redemptionCode)
+      ),
+    login: (username, password) =>
+      dispatch(loginAction({ username, password })),
+    isValidUsername: (username) => dispatch(isValidUsername(username)),
   };
 };
+
 //#endregion
 
 //#region > Exports
diff --git a/src/store/actions/userActions.js b/src/store/actions/userActions.js
index d0c87e3..d60dc42 100644
--- a/src/store/actions/userActions.js
+++ b/src/store/actions/userActions.js
@@ -1,4 +1,8 @@
 //#region > Imports
+//> Additional
+// SHA hashing algorithm
+import { sha256 } from "js-sha256";
+
 //> Action Types
 import * as Action from "../types";
 //> Intel
@@ -17,10 +21,14 @@ const loginAction = (user) => {
     try {
       dispatch({ type: Action.USER_LOGIN_REQUEST });
 
+      if (user?.password) {
+        user.password = sha256(user.password);
+      }
+
       const whoami = await CLIENT_SNEK.session.begin(user);
 
       if (!whoami?.anonymous && whoami?.__typename === "SNEKUser") {
-        dispatch({
+        await dispatch({
           type: Action.USER_LOGIN_SUCCESS,
           payload: {
             username: whoami.username,
@@ -28,7 +36,7 @@ const loginAction = (user) => {
           },
         });
 
-        dispatch(getPerson(whoami.username));
+        await dispatch(getPerson(whoami.username));
       } else if (whoami.anonymous) {
         dispatch({
           type: Action.USER_LOGIN_SUCCESS,
@@ -123,15 +131,14 @@ const register = (
           first_name: firstName,
           last_name: lastName,
           email,
-          password,
+          password: sha256(password),
           redemption_code: redemptionCode,
         },
       });
+      console.log(registration);
 
-      if (registration.result === "ok") {
+      if (registration.result === "OK") {
         dispatch({ type: Action.USER_PERSON_SIGNUP_SUCCESS });
-
-        dispatch(loginAction({ username, password }));
       } else {
         dispatch({
           type: Action.USER_PERSON_SIGNUP_FAILURE,
@@ -157,16 +164,16 @@ const register = (
 /**
  * Check if there is already a registered user with the provided username
  */
-const isValidUsername = async (username) => {
+const isValidUsername = (username) => {
   return async (dispatch, getState, {}) => {
     try {
       dispatch({ type: Action.USER_EXISTS_CHECK_REQUEST });
 
-      const exists = await INTEL_SNEK.general.checkUserExists(username);
+      const exists = await INTEL_SNEK.general.checkUserExists({ username });
 
       dispatch({ type: Action.USER_EXISTS_CHECK_SUCCESS });
 
-      return exists;
+      return !exists;
     } catch (ex) {
       dispatch({
         type: Action.USER_EXISTS_CHECK_FAILURE,

From ebaca64b0d19cbca2123903324ecfea6a48ad199 Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Thu, 10 Sep 2020 16:22:05 +0200
Subject: [PATCH 044/175] Improve loading of person page

Now the person page shows a correct loading component
instead of the previous profile.
---
 src/components/pages/PersonPage/index.jsx | 24 ++++++++++-------------
 1 file changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/components/pages/PersonPage/index.jsx b/src/components/pages/PersonPage/index.jsx
index 51b9a9b..0d3473e 100644
--- a/src/components/pages/PersonPage/index.jsx
+++ b/src/components/pages/PersonPage/index.jsx
@@ -55,20 +55,10 @@ class PersonPage extends React.Component {
   };
 
   render() {
-    const { fetchedPerson } = this.props;
-
-    if (!fetchedPerson) {
-      return (
-        <div className="text-center my-5 py-5">
-          <div className="spinner-grow text-success" role="status">
-            <span className="sr-only">Loading...</span>
-          </div>
-        </div>
-      );
-    } else if (fetchedPerson) {
-      //#TSID11
-      //console.dir("PROFILE PAGE RENDER SUCCESS", this.props.fetchedUser);
+    const { fetchedPerson, match } = this.props;
+    const username = match?.params?.username;
 
+    if (fetchedPerson?.slug.split("-")[1] === username) {
       return (
         <div id="profile">
           <MDBContainer className="py-5">
@@ -84,7 +74,13 @@ class PersonPage extends React.Component {
         </div>
       );
     } else {
-      return <p>Usecase not mapped</p>;
+      return (
+        <div className="text-center my-5 py-5">
+          <div className="spinner-grow text-success" role="status">
+            <span className="sr-only">Loading...</span>
+          </div>
+        </div>
+      );
     }
   }
 }

From 71108da557b34ea9009f7d74a41ce343409ae407 Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Thu, 10 Sep 2020 16:24:13 +0200
Subject: [PATCH 045/175] Change achievements to achievement

The notation has been fixed.
---
 src/store/actions/generalActions.js | 2 +-
 src/store/actions/personActions.js  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/store/actions/generalActions.js b/src/store/actions/generalActions.js
index f40125e..52bf782 100644
--- a/src/store/actions/generalActions.js
+++ b/src/store/actions/generalActions.js
@@ -70,7 +70,7 @@ const getAchievements = () => {
     try {
       dispatch({ type: Action.GENERAL_ACHIEVEMENTS_FETCH_REQUEST });
 
-      const achievements = await INTEL_SNEK.achievements.all();
+      const achievements = await INTEL_SNEK.achievement.all();
 
       dispatch({
         type: Action.GENERAL_ACHIEVEMENTS_FETCH_SUCCESS,
diff --git a/src/store/actions/personActions.js b/src/store/actions/personActions.js
index af61bf4..718a4ab 100644
--- a/src/store/actions/personActions.js
+++ b/src/store/actions/personActions.js
@@ -483,7 +483,7 @@ const redeemAchievement = (sequence) => {
       const state = getState();
       const personName = extractNameFromPersonSlug(state.user.user.person.slug);
 
-      const res = await INTEL_SNEK.achievements.redeem({
+      const res = await INTEL_SNEK.achievement.redeem({
         personName,
         sequence,
       });

From 90a998b088f7dff2c8026ef2d0109128aec61303 Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Thu, 10 Sep 2020 17:48:28 +0200
Subject: [PATCH 046/175] Add profiles to settings

Now it is possible to list all profiles on the settings
page.
---
 src/components/pages/SettingsPage/index.jsx | 127 ++++++++++++++++++--
 src/store/actions/personActions.js          |   9 +-
 src/store/actions/userActions.js            |   5 +
 3 files changed, 128 insertions(+), 13 deletions(-)

diff --git a/src/components/pages/SettingsPage/index.jsx b/src/components/pages/SettingsPage/index.jsx
index b14c6ff..e6ad71d 100644
--- a/src/components/pages/SettingsPage/index.jsx
+++ b/src/components/pages/SettingsPage/index.jsx
@@ -27,6 +27,8 @@ import {
   MDBMask,
   MDBSelectInput,
   MDBBtn,
+  MDBListGroup,
+  MDBListGroupItem,
 } from "mdbreact";
 //> Redux
 // Allows to React components read data from a Redux store, and dispatch actions
@@ -65,12 +67,9 @@ class SettingsPage extends React.Component {
     activeItem: 0,
     tabItems: [
       { name: "Profile", icon: "" },
+      { name: "Connections", icon: "" },
       { name: "Customization", icon: "" },
       { name: "Account", icon: "" },
-      { name: "Connections", icon: "" },
-      { name: "Blocked users", icon: "" },
-      { name: "Billing", icon: "" },
-      { name: "Security", icon: "" },
     ],
   };
 
@@ -103,6 +102,7 @@ class SettingsPage extends React.Component {
         status,
         websiteUrl,
         workplace,
+        profiles,
       } = loggedUser?.person;
 
       this.setState({
@@ -123,6 +123,7 @@ class SettingsPage extends React.Component {
           status,
           websiteUrl,
           workplace,
+          profiles,
         },
       });
     }
@@ -180,6 +181,19 @@ class SettingsPage extends React.Component {
     }
   };
 
+  renderProfileTypeSwitch(param) {
+    switch (param) {
+      case "GITHUB":
+        return "github";
+      case "GITLAB":
+        return "gitlab";
+      case "INSTAGRAM":
+        return "instagram";
+      default:
+        return "";
+    }
+  }
+
   render() {
     const { loggedUser } = this.props;
     const { person, activeItem } = this.state;
@@ -247,7 +261,7 @@ class SettingsPage extends React.Component {
               <MDBCol md="8">
                 <MDBTabContent activeItem={activeItem}>
                   <MDBTabPane tabId={0}>
-                    <h2>Profile</h2>
+                    <h5>Profile</h5>
                     <Dropzone onDrop={this.onDrop} accept="image/*">
                       {({ getRootProps, getInputProps }) => (
                         <div {...getRootProps()} className="avatar">
@@ -455,6 +469,88 @@ class SettingsPage extends React.Component {
                     </MDBRow>
                   </MDBTabPane>
                   <MDBTabPane tabId={1}>
+                    <h5>Connections</h5>
+                    <MDBListGroup>
+                      {console.log(person)}
+                      {person.profiles?.map((profile, p) => {
+                        return (
+                          <MDBListGroupItem
+                            className="d-flex justify-content-between align-items-center clickable"
+                            // onClick={
+                            //   // this.setState({
+                            //   //   modal: true,
+                            //   //   selectedGitLab: gitlab,
+                            //   //   authorizedUser: gitlab.username,
+                            //   // })
+                            // }
+                            key={p}
+                          >
+                            <div>
+                              <td>
+                                <a
+                                  href={profile.sourceUrl}
+                                  target="_blank"
+                                  className="mr-3"
+                                >
+                                  <MDBIcon
+                                    fab
+                                    icon={this.renderProfileTypeSwitch(
+                                      profile.sourceType
+                                    )}
+                                    li
+                                    size="4x"
+                                  />
+                                </a>
+                              </td>
+                              <code>
+                                {profile.username ? profile.username : null}
+                              </code>
+                            </div>
+                            <div className="d-flex align-items-center justify-content-center">
+                              <div className="small d-inline-block text-center px-2">
+                                <span className="text-muted">Type</span>
+                                <span className="d-block">
+                                  {profile.sourceType}
+                                </span>
+                              </div>
+                              <div className="small d-inline-block text-center ml-2">
+                                <span className="text-muted">Expired</span>
+                                <span className="d-block">
+                                  <MDBIcon
+                                    icon="circle"
+                                    size="lg"
+                                    className={
+                                      profile.active
+                                        ? "text-success"
+                                        : "text-danger"
+                                    }
+                                  />
+                                </span>
+                              </div>
+                              <div className="small d-inline-block text-center ml-2">
+                                <span className="text-muted">Active</span>
+                                <span className="d-block">
+                                  <MDBIcon
+                                    icon="circle"
+                                    size="lg"
+                                    className={
+                                      profile.active
+                                        ? "text-success"
+                                        : "text-danger"
+                                    }
+                                  />
+                                </span>
+                              </div>
+                            </div>
+                          </MDBListGroupItem>
+                        );
+                      })}
+                    </MDBListGroup>
+                    <div class="text-right">
+                      <MDBBtn color="green">Add</MDBBtn>
+                    </div>
+                  </MDBTabPane>
+                  <MDBTabPane tabId={2}>
                     <h5>Customization</h5>
                     <div className="personal-data">
                       <p className="font-weight-bold">Choose your theme</p>
@@ -472,7 +568,7 @@ class SettingsPage extends React.Component {
                               <MDBSelectOption value="">
                                 Default
                               </MDBSelectOption>
-                              {loggedUser?.person?.tids.map((tid, i) => {
+                              {loggedUser?.person?.tids?.map((tid, i) => {
                                 let name = "Unnamed";
                                 switch (tid) {
                                   case "9d88bda4657dcf17581ee91dfe6ab2a3":
@@ -494,8 +590,23 @@ class SettingsPage extends React.Component {
                       </MDBRow>
                     </div>
                   </MDBTabPane>
-                  <MDBTabPane tabId={2}>
-                    <h5>Panel 3</h5>
+                  <MDBTabPane tabId={3}>
+                    <h5>Account</h5>
+                    <div className="personal-data">
+                      <p className="font-weight-bold">Username</p>
+                      <MDBRow>
+                        <MDBCol md="6">
+                          <input
+                            type="text"
+                            name="firstName"
+                            className="form-control"
+                            // onChange={this.handleChange}
+                            value={loggedUser.username}
+                            // placeholder="Firstname"
+                          />
+                        </MDBCol>
+                      </MDBRow>
+                    </div>
                   </MDBTabPane>
                 </MDBTabContent>
               </MDBCol>
diff --git a/src/store/actions/personActions.js b/src/store/actions/personActions.js
index 718a4ab..45f621e 100644
--- a/src/store/actions/personActions.js
+++ b/src/store/actions/personActions.js
@@ -154,14 +154,11 @@ const deleteMetaLink = (id) => {
   };
 };
 
-const getProfiles = () => {
+const getProfiles = (personName) => {
   return async (dispatch, getState, {}) => {
     try {
       dispatch({ type: Action.PERSON_PROFILES_FETCH_REQUEST });
-
-      const state = getState();
-      const personName = extractNameFromPersonSlug(state.user.user.person.slug);
-
+      
       const profiles = await INTEL_SNEK.person.profiles({
         personName,
       });
@@ -170,6 +167,8 @@ const getProfiles = () => {
         type: Action.PERSON_PROFILES_FETCH_SUCCESS,
         payload: profiles,
       });
+
+      return profiles;
     } catch (ex) {
       dispatch({
         type: Action.PERSON_PROFILES_FETCH_FAILURE,
diff --git a/src/store/actions/userActions.js b/src/store/actions/userActions.js
index d60dc42..14c1f64 100644
--- a/src/store/actions/userActions.js
+++ b/src/store/actions/userActions.js
@@ -7,6 +7,9 @@ import { sha256 } from "js-sha256";
 import * as Action from "../types";
 //> Intel
 import INTEL_SNEK from "snek-intel/lib/utils/snek";
+//> Actions
+// Functions to send data from the application to the store
+import { getProfiles } from "./personActions";
 //#endregion
 
 //#region > User Actions
@@ -96,6 +99,8 @@ const getPerson = (personName) => {
 
       const person = await INTEL_SNEK.person.get({ personName });
 
+      person.profiles = await dispatch(getProfiles(personName));
+
       dispatch({ type: Action.USER_PERSON_FETCH_SUCCESS, payload: person });
     } catch (ex) {
       dispatch({

From 114248bd99d1026a39b1e4bcbdd8cba56628872e Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Thu, 10 Sep 2020 18:14:09 +0200
Subject: [PATCH 047/175] Update project and projects tab

Now projects can be listed in the projects tab without crashing.
---
 src/components/atoms/Project/index.jsx                  | 8 ++++----
 src/components/organisms/sections/person/Tabs/index.jsx | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/atoms/Project/index.jsx b/src/components/atoms/Project/index.jsx
index 84f8722..3e85f0c 100644
--- a/src/components/atoms/Project/index.jsx
+++ b/src/components/atoms/Project/index.jsx
@@ -35,18 +35,18 @@ class Project extends React.Component {
               />
               <small>
                 @
-                {repo.owner.username ? (
-                  repo.owner.username
+                {repo.owner.name ? (
+                  repo.owner.name
                 ) : (
                   <span className="text-muted">unknown</span>
                 )}
               </small>
             </div>
             <div className="pt-3">
-              {repo.languages.length > 0 && (
+              {repo.languages?.length > 0 && (
                 <LanguageChart languages={repo.languages} />
               )}
-              {repo.languages.length > 0 && (
+              {repo.languages?.length > 0 && (
                 <small className="text-left text-muted">
                   <MDBIcon
                     icon="square"
diff --git a/src/components/organisms/sections/person/Tabs/index.jsx b/src/components/organisms/sections/person/Tabs/index.jsx
index 7fe252e..1948e47 100644
--- a/src/components/organisms/sections/person/Tabs/index.jsx
+++ b/src/components/organisms/sections/person/Tabs/index.jsx
@@ -48,8 +48,8 @@ class SoftwareTabs extends React.Component {
       {
         title: "Projects",
         visible: true,
-        pill: fetchedPerson?.person?.repositories
-          ? fetchedPerson?.person?.repositories.length
+        pill: fetchedPerson?.person?.projects
+          ? fetchedPerson?.person?.projects.length
           : "0",
         notification: false,
       },
@@ -107,8 +107,8 @@ class SoftwareTabs extends React.Component {
           {activeTab === 1 && (
             <ProjectTab
               repoList={
-                fetchedPerson?.person.repositories
-                  ? fetchedPerson.person.repositories
+                fetchedPerson?.person.projects
+                  ? fetchedPerson.person.projects
                   : []
               }
             />

From 8efdf27b5dce482646d7904357bef0f1a417ad9d Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Thu, 10 Sep 2020 20:31:58 +0200
Subject: [PATCH 048/175] Add profile processing in person page

When a logged user visits his person page,
profile processing is started.
---
 src/components/pages/PersonPage/index.jsx | 31 ++++++++++++++++++++---
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/components/pages/PersonPage/index.jsx b/src/components/pages/PersonPage/index.jsx
index 0d3473e..2d77501 100644
--- a/src/components/pages/PersonPage/index.jsx
+++ b/src/components/pages/PersonPage/index.jsx
@@ -14,7 +14,11 @@ import { connect } from "react-redux";
 
 //> Actions
 // Functions to send data from the application to the store
-import { getPerson } from "../../../store/actions/personActions";
+import {
+  getPerson,
+  processProfiles,
+} from "../../../store/actions/personActions";
+import { getPerson as getUserPerson } from "../../../store/actions/userActions";
 //> Components
 import { PersonInfoCard, PersonTabs } from "../../organisms";
 //> Style sheet
@@ -26,7 +30,9 @@ import "./person.scss";
  * @todo Add description
  */
 class PersonPage extends React.Component {
-  state = {};
+  state = {
+    cachingDone: false,
+  };
 
   saveSettings = (state) => {
     this.props.saveSettings(state);
@@ -43,7 +49,24 @@ class PersonPage extends React.Component {
     }
   };
 
-  componentDidUpdate() {}
+  componentDidUpdate = async () => {
+    const { fetchedPerson, loggedUser } = this.props;
+
+    if (
+      !this.state.cachingDone &&
+      fetchedPerson &&
+      loggedUser?.person &&
+      fetchedPerson.slug === loggedUser.person.slug
+    ) {
+      await this.props.processProfiles();
+
+      if (this._isMounted) {
+        this.setState({ cachingDone: true }, () =>
+          this.props.getPerson(loggedUser.person.slug.split("-")[1])
+        );
+      }
+    }
+  };
 
   componentWillUnmount() {
     this._isMounted = false;
@@ -94,6 +117,8 @@ const mapStateToProps = (state) => ({
 
 const mapDispatchToProps = (dispatch) => {
   return {
+    processProfiles: () => dispatch(processProfiles()),
+    getUserPerson: (personName) => dispatch(getUserPerson(personName)),
     getPerson: (personName) => dispatch(getPerson(personName)),
   };
 };

From 43016e0b00383da1eeb1958d7108375e1fc325c3 Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Thu, 10 Sep 2020 20:34:58 +0200
Subject: [PATCH 049/175] Remove legacy code and console logs

Unused code and console logs have been removed.
---
 .../molecules/forms/RegisterForm/index.jsx    |   1 -
 .../molecules/forms/RegisterForm/index2.jsx   | 876 ------------------
 .../sections/person/InfoCard/index.jsx        |   1 -
 src/components/pages/SettingsPage/index.jsx   |   1 -
 src/store/actions/personActions.js            |   6 +-
 5 files changed, 1 insertion(+), 884 deletions(-)
 delete mode 100644 src/components/molecules/forms/RegisterForm/index2.jsx

diff --git a/src/components/molecules/forms/RegisterForm/index.jsx b/src/components/molecules/forms/RegisterForm/index.jsx
index 8f5468d..1fe5ec7 100644
--- a/src/components/molecules/forms/RegisterForm/index.jsx
+++ b/src/components/molecules/forms/RegisterForm/index.jsx
@@ -242,7 +242,6 @@ class RegisterForm extends React.Component {
           loading: true,
         },
         async () => {
-          console.log("start register");
           await this.props.register(
             username,
             firstname,
diff --git a/src/components/molecules/forms/RegisterForm/index2.jsx b/src/components/molecules/forms/RegisterForm/index2.jsx
deleted file mode 100644
index 8842913..0000000
--- a/src/components/molecules/forms/RegisterForm/index2.jsx
+++ /dev/null
@@ -1,876 +0,0 @@
-//#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 ? (
-          <>
-            <div className="text-left">
-              <small
-                className="text-muted clickable"
-                onClick={() => this.setState({ errors: [] }, () => goTo(0))}
-              >
-                <MDBIcon icon="angle-left" className="mr-1" />
-                Back
-              </small>
-            </div>
-            <p className="lead">So you're a Software Engineer...</p>
-            <p className="text-muted mb-4">
-              We just need a bit more information to get you started.
-            </p>
-            <form>
-              <MDBRow>
-                <MDBCol md="6">
-                  <input
-                    type="text"
-                    className={
-                      this.testForError(3)
-                        ? "form-control error"
-                        : "form-control"
-                    }
-                    placeholder="Firstname"
-                    name="firstname"
-                    onChange={(e) => this.handleChange(e, 3)}
-                    value={this.state.firstname}
-                  />
-                </MDBCol>
-                <MDBCol md="6">
-                  <input
-                    type="text"
-                    className={
-                      this.testForError(4)
-                        ? "form-control error"
-                        : "form-control"
-                    }
-                    placeholder="Lastname"
-                    name="lastname"
-                    onChange={(e) => this.handleChange(e, 4)}
-                    value={this.state.lastname}
-                  />
-                </MDBCol>
-              </MDBRow>
-              <input
-                type="email"
-                className={
-                  this.testForError(5)
-                    ? "form-control my-2 error"
-                    : "form-control my-2"
-                }
-                placeholder="E-Mail"
-                name="email"
-                onChange={(e) => this.handleChange(e, 5)}
-                value={this.state.email}
-              />
-              <MDBRow>
-                <MDBCol md="6">
-                  <input
-                    type="password"
-                    className={
-                      this.testForError([7, 1])
-                        ? "form-control error"
-                        : "form-control"
-                    }
-                    placeholder="Password"
-                    name="password1"
-                    onChange={(e) => this.handleChange(e, [7, 1])}
-                    value={this.state.password1}
-                  />
-                </MDBCol>
-                <MDBCol md="6">
-                  <input
-                    type="password"
-                    className={
-                      this.testForError([8, 1])
-                        ? "form-control error"
-                        : "form-control"
-                    }
-                    placeholder="Repeat password"
-                    name="password2"
-                    onChange={(e) => this.handleChange(e, [8, 1])}
-                    value={this.state.password2}
-                  />
-                </MDBCol>
-              </MDBRow>
-            </form>
-            <div className="text-left mt-2">
-              <small
-                className="blue-text clickable text-md"
-                onClick={() =>
-                  this.setState({ promoCode: !this.state.promoCode })
-                }
-              >
-                {!this.state.promoCode
-                  ? "I have a promo code"
-                  : "I don't have a promo code"}
-              </small>
-            </div>
-            {this.state.promoCode && (
-              <input
-                value={this.state.code}
-                className={
-                  this.testForError([9, 1])
-                    ? "form-control mb-3 error"
-                    : "form-control mb-3"
-                }
-                spellCheck="false"
-                autoComplete="autocomplete_off_874548537585743884357"
-                onChange={this.handleCodeChange}
-                type="text"
-                id="materialFormRegisterConfirmEx40"
-                name="code"
-                placeholder="Promo code"
-                label="Promotional code"
-              />
-            )}
-            <p className="text-muted mt-4">Connect your work</p>
-            <small className="text-muted">
-              You need to connect at least one account to continue.
-            </small>
-            <div>
-              <MDBPopover placement="top" popover clickable id="popper1">
-                <MDBBtn color="link" className="text-muted py-1">
-                  <MDBIcon far icon="question-circle" className="pr-1" />
-                  Why do I need to connect my accounts?
-                </MDBBtn>
-                <div>
-                  <MDBPopoverHeader>
-                    <MDBIcon far icon="question-circle" className="pr-2" />
-                    Connecting accounts
-                  </MDBPopoverHeader>
-                  <MDBPopoverBody>
-                    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.
-                    <br />
-                    <a
-                      className="blue-text"
-                      href="https://github.com/snek-at"
-                      rel="noopener noreferrer"
-                      target="_blank"
-                    >
-                      Learn more
-                    </a>
-                  </MDBPopoverBody>
-                </div>
-              </MDBPopover>
-            </div>
-            <div className="connect mb-3">
-              <MDBBtn
-                color="orange"
-                onClick={() => this.setState({ modalGitLab: true })}
-                disabled={
-                  !this.state.gitlab_servers ||
-                  (this.state.gitlab_server &&
-                    this.state.gitlab_server.length < 1)
-                }
-              >
-                <MDBIcon fab icon="gitlab" size="lg" />
-              </MDBBtn>
-              {!process.env.NODE_ENV ||
-              process.env.NODE_ENV === "development" ? (
-                <GitHubOAuth
-                  authorizationUrl="https://github.com/login/oauth/authorize"
-                  clientId="1440dd4c1d1c4c0fa124"
-                  clientSecret="0723a2b5bfef27efc8b2d26d837ead239fa0b0e6"
-                  redirectUri="http://localhost:3000/redirect"
-                  onSuccess={this.oauthGitHubSuccess}
-                  onFailure={this.oauthGitHubFailure}
-                />
-              ) : (
-                <GitHubOAuth
-                  authorizationUrl="https://github.com/login/oauth/authorize"
-                  clientId="2148629809594d57c113"
-                  clientSecret="64a37e4846387cfcaea35d83afca3c9c8689628c"
-                  redirectUri="https://snek.at/redirect"
-                  onSuccess={this.oauthGitHubSuccess}
-                  onFailure={this.oauthGitHubFailure}
-                />
-              )}
-              <MDBBtn color="primary" disabled>
-                <MDBIcon fab icon="bitbucket" size="lg" />
-              </MDBBtn>
-            </div>
-            <div>
-              <MDBListGroup>
-                {this.state.loadingGitHub && <MDBProgress material preloader />}
-                {this.state.usernames.map((source, i) => {
-                  return (
-                    <MDBListGroupItem
-                      className={"list-item-" + source.source}
-                      key={i}
-                    >
-                      <div>
-                        <MDBIcon
-                          fab
-                          icon={source.source}
-                          className="company-icon"
-                        />
-                        {source.username}
-                        {source.verified ? (
-                          <MDBPopover
-                            placement="right"
-                            domElement
-                            clickable
-                            popover
-                            tag="span"
-                            id="popper1"
-                          >
-                            <span>
-                              <MDBIcon
-                                icon="award"
-                                className="green-text ml-2 clickable"
-                              />
-                            </span>
-                            <div>
-                              <MDBPopoverHeader>Verified</MDBPopoverHeader>
-                              <MDBPopoverBody>
-                                <MDBRow className="justify-content-center align-items-center m-0">
-                                  <MDBCol
-                                    size="auto"
-                                    className="p-0 green-text"
-                                  >
-                                    <MDBIcon icon="award" size="3x" />
-                                  </MDBCol>
-                                  <MDBCol className="p-0 pl-3">
-                                    This source has been{" "}
-                                    <strong className="green-text">
-                                      verified
-                                    </strong>{" "}
-                                    by logging into it.
-                                  </MDBCol>
-                                </MDBRow>
-                              </MDBPopoverBody>
-                            </div>
-                          </MDBPopover>
-                        ) : (
-                          <MDBPopover
-                            placement="right"
-                            domElement
-                            clickable
-                            popover
-                            tag="span"
-                            id="popper1"
-                          >
-                            <span>
-                              <MDBIcon
-                                icon="award"
-                                className="grey-text ml-2 clickable"
-                              />
-                            </span>
-                            <div>
-                              <MDBPopoverHeader>Not verified</MDBPopoverHeader>
-                              <MDBPopoverBody>
-                                <MDBRow className="justify-content-center align-items-center m-0">
-                                  <MDBCol size="auto" className="p-0 grey-text">
-                                    <MDBIcon icon="award" size="3x" />
-                                  </MDBCol>
-                                  <MDBCol className="p-0 pl-3">
-                                    We can not verify your identity with GitLab.
-                                    Your data is still being included.
-                                  </MDBCol>
-                                </MDBRow>
-                              </MDBPopoverBody>
-                            </div>
-                          </MDBPopover>
-                        )}
-                      </div>
-                      <MDBIcon
-                        icon="times"
-                        className="close-icon"
-                        onClick={() => this.removeSource(source.id)}
-                      />
-                    </MDBListGroupItem>
-                  );
-                })}
-              </MDBListGroup>
-            </div>
-            <MDBBtn
-              color="green"
-              outline
-              className="mb-0"
-              onClick={this.handleSubmit}
-              /*disabled={!this.state.hasGitHub}*/
-            >
-              Join now
-            </MDBBtn>
-            <p>
-              <small className="text-muted">
-                Don't worry, you can easily connect further accounts in the
-                future.
-              </small>
-            </p>
-          </>
-        ) : (
-          <div className="my-5 py-5">
-            <h2 className="font-weight-bolder mb-0">
-              Hey, {this.state.firstname}!
-            </h2>
-            <p className="lead mb-3">Your profile is being generated.</p>
-            <div className="progress md-progress primary-color mb-1">
-              <div className="indeterminate"></div>
-            </div>
-            <TextLoop
-              className="text-muted"
-              children={[
-                "Connecting profiles...",
-                "Fetching data...",
-                "Creating profile...",
-                "Analyzing profile...",
-                "Creating statistics...",
-                "Warming up the coffee...",
-                "Finishing your profile...",
-              ]}
-              springConfig={{ stiffness: 180, damping: 8 }}
-              interval={4000}
-            />
-          </div>
-        )}
-        {this.state.modalGitLab && (
-          <MDBModal
-            modalStyle="orange"
-            className="text-white"
-            size="sm"
-            backdrop={true}
-            isOpen={this.state.modalGitLab}
-            toggle={this.toggle}
-          >
-            <MDBModalHeader className="text-center" titleClass="w-100" tag="p">
-              <MDBIcon fab icon="gitlab" className="pr-2" />
-              Add GitLab profile
-            </MDBModalHeader>
-            <MDBModalBody className="text-center">
-              <input
-                type="text"
-                className="form-control mb-2"
-                placeholder="GitLab username"
-                name="gitlab_username"
-                onChange={(e) =>
-                  this.setState({ [e.target.name]: e.target.value })
-                }
-                value={this.state.gitlab_username}
-              />
-              <MDBSelect
-                outline
-                getValue={this.handleSelectChange}
-                className="mb-0"
-              >
-                <MDBSelectInput selected={this.state.gitlab_server} />
-                <MDBSelectOptions>
-                  <MDBSelectOption disabled>
-                    Choose your organisation
-                  </MDBSelectOption>
-                  {this.state.gitlab_servers &&
-                    this.state.gitlab_servers.map((source, i) => {
-                      return (
-                        <MDBSelectOption key={i} value={source.domain}>
-                          {source.organisation}
-                        </MDBSelectOption>
-                      );
-                    })}
-                </MDBSelectOptions>
-              </MDBSelect>
-            </MDBModalBody>
-            <MDBModalFooter className="justify-content-center">
-              <MDBBtn color="orange" onClick={this.addGitLab}>
-                <MDBIcon icon="plus-circle" className="mr-2" />
-                Add
-              </MDBBtn>
-              <MDBBtn color="elegant" outline onClick={this.toggle}>
-                Cancel
-              </MDBBtn>
-            </MDBModalFooter>
-          </MDBModal>
-        )}
-      </>
-    );
-  }
-}
-//#endregion
-
-//#region > PropTypes
-RegisterForm.propTypes = {
-  goto: PropTypes.func,
-};
-//#endregion
-
-//#region > Redux Mapping
-const mapStateToProps = (state) => ({
-  registrationHistory: state.user.registrationHistory,
-  //gitlabServers: state.general.allGitlabServers,
-});
-
-const mapDispatchToProps = (dispatch) => {
-  return {
-    register: (registrationData) => dispatch(registerAction(registrationData)),
-    login: (user) => dispatch(loginAction(user)),
-    fetchGitLabServers: () => dispatch(fetchGitLabServersAction()),
-  };
-};
-//#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)(RegisterForm);
-//#endregion
-
-/**
- * SPDX-License-Identifier: (EUPL-1.2)
- * Copyright © 2019-2020 Simon Prast
- */
diff --git a/src/components/organisms/sections/person/InfoCard/index.jsx b/src/components/organisms/sections/person/InfoCard/index.jsx
index 5483ca2..1d36338 100644
--- a/src/components/organisms/sections/person/InfoCard/index.jsx
+++ b/src/components/organisms/sections/person/InfoCard/index.jsx
@@ -36,7 +36,6 @@ class InfoCard extends React.Component {
   render() {
     const { fetchedPerson } = this.props;
 
-    console.log(fetchedPerson);
     return (
       <div className="social">
         <MDBView>
diff --git a/src/components/pages/SettingsPage/index.jsx b/src/components/pages/SettingsPage/index.jsx
index e6ad71d..b73e2fc 100644
--- a/src/components/pages/SettingsPage/index.jsx
+++ b/src/components/pages/SettingsPage/index.jsx
@@ -471,7 +471,6 @@ class SettingsPage extends React.Component {
                   <MDBTabPane tabId={1}>
                     <h5>Connections</h5>
                     <MDBListGroup>
-                      {console.log(person)}
                       {person.profiles?.map((profile, p) => {
                         return (
                           <MDBListGroupItem
diff --git a/src/store/actions/personActions.js b/src/store/actions/personActions.js
index 45f621e..4d06e96 100644
--- a/src/store/actions/personActions.js
+++ b/src/store/actions/personActions.js
@@ -158,7 +158,7 @@ const getProfiles = (personName) => {
   return async (dispatch, getState, {}) => {
     try {
       dispatch({ type: Action.PERSON_PROFILES_FETCH_REQUEST });
-      
+
       const profiles = await INTEL_SNEK.person.profiles({
         personName,
       });
@@ -535,8 +535,6 @@ const addTalk = (
 
       let personName;
 
-      console.log(state);
-
       try {
         personName = extractNameFromPersonSlug(state.user.user.person.slug);
       } catch {
@@ -572,8 +570,6 @@ const deleteTalk = (id) => {
     try {
       dispatch({ type: Action.PERSON_TALK_DELETE_REQUEST });
 
-      console.log("DELETING", id);
-
       const remainingTalks = await INTEL_SNEK.talk.deleteTalk({ talkId: id });
 
       dispatch({

From ecc8366d6fc0def68e62948fee5b3f88073a57d0 Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Thu, 10 Sep 2020 20:35:57 +0200
Subject: [PATCH 050/175] Fix project owner name

Now the correct project owner name is displayed.
---
 src/components/atoms/Project/index.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/atoms/Project/index.jsx b/src/components/atoms/Project/index.jsx
index 3e85f0c..c1e60a8 100644
--- a/src/components/atoms/Project/index.jsx
+++ b/src/components/atoms/Project/index.jsx
@@ -35,8 +35,8 @@ class Project extends React.Component {
               />
               <small>
                 @
-                {repo.owner.name ? (
-                  repo.owner.name
+                {repo.owner.username ? (
+                  repo.owner.username
                 ) : (
                   <span className="text-muted">unknown</span>
                 )}

From 9f01ae3fc65899dee7be91cdada7214172c5197b Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Thu, 10 Sep 2020 20:37:04 +0200
Subject: [PATCH 051/175] Fix info card languages

Now the person languages gets displayed in the info card.
---
 .../organisms/sections/person/InfoCard/index.jsx       | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/organisms/sections/person/InfoCard/index.jsx b/src/components/organisms/sections/person/InfoCard/index.jsx
index 1d36338..18cf872 100644
--- a/src/components/organisms/sections/person/InfoCard/index.jsx
+++ b/src/components/organisms/sections/person/InfoCard/index.jsx
@@ -262,20 +262,20 @@ class InfoCard extends React.Component {
               )}
             </div>
           )}
-          {fetchedPerson.person.statistic?.languages?.length > 0 && (
+          {fetchedPerson.person.languages?.length > 0 && (
             <div className="px-1">
               <hr />
               <p>Top languages</p>
               <LanguageChart
-                languages={fetchedPerson.person.statistic.languages}
+                languages={fetchedPerson.person.languages}
                 height={10}
               />
-              {fetchedPerson.person.statistic.languages
+              {fetchedPerson.person.languages
                 .slice(
                   0,
                   this.state.limitLanguages
                     ? 3
-                    : fetchedPerson.person.statistic.languages.length - 1
+                    : fetchedPerson.person.languages.length - 1
                 )
                 .map((language, i) => {
                   return (
@@ -299,7 +299,7 @@ class InfoCard extends React.Component {
                   );
                 })}
               {this.state.limitLanguages &&
-              fetchedPerson.person.statistic.languages.length > 3 ? (
+              fetchedPerson.person.languages.length > 3 ? (
                 <p
                   className="small clickable blue-text d-inline"
                   onClick={() => this.setState({ limitLanguages: false })}

From 3c7cac3dbe325a51baa6d8d9a24aa24f13c77786 Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Thu, 10 Sep 2020 23:00:35 +0200
Subject: [PATCH 052/175] Integrate overview tab and calendar 3d

Now it is possible to view the 3d calendar again.
---
 .../atoms/charts/Calendar3D/index.jsx         |  61 ++++----
 .../organisms/sections/person/Tabs/index.jsx  |   8 +-
 .../organisms/tabs/OverviewTab/index.jsx      | 148 +++++++++---------
 3 files changed, 111 insertions(+), 106 deletions(-)

diff --git a/src/components/atoms/charts/Calendar3D/index.jsx b/src/components/atoms/charts/Calendar3D/index.jsx
index a5036fa..dba90f4 100644
--- a/src/components/atoms/charts/Calendar3D/index.jsx
+++ b/src/components/atoms/charts/Calendar3D/index.jsx
@@ -2,6 +2,8 @@
 //> 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 packages
 // Used to display the time in a readable format
 import moment from "moment";
@@ -31,7 +33,7 @@ class Calendar3D extends React.Component {
   }
 
   componentDidMount = () => {
-    if (this.props.platformData) {
+    if (this.props.currentStatistic && this.props.yearsStatistic) {
       // Add resize listener
       window.addEventListener("resize", this.updateDimensions);
 
@@ -81,20 +83,17 @@ class Calendar3D extends React.Component {
     let countTotal, averageCount, datesTotal, maxCount, dateBest, contribData;
 
     if (this.props.year) {
-      contribData = this.props.platformData.statistic.years.find(
-        (element) => element.year === this.props.year
-      );
+      contribData = this.props.yearsStatistic[this.props.year];
     } else {
-      contribData = this.props.platformData.statistic.current;
+      contribData = this.props.currentStatistic;
     }
 
-    let contributionCalendar = contribData.calendar;
+    let contributionCalendar = JSON.parse(contribData.calendarData);
+    let contributionDetails = JSON.parse(contribData.contributionTypeData);
+    let busiestDay = JSON.parse(JSON.stringify(contribData.busiestDay));
 
-    countTotal = contribData.contributions.total;
-    averageCount =
-      Math.round(
-        (contribData.contributions.total / 365 + Number.EPSILON) * 100
-      ) / 100;
+    countTotal = contributionDetails.total;
+    averageCount = Math.round((countTotal / 365 + Number.EPSILON) * 100) / 100;
 
     datesTotal =
       moment(contributionCalendar.startDate).format("MMM D") +
@@ -103,6 +102,7 @@ class Calendar3D extends React.Component {
 
     /* Busiest day */
     maxCount = contribData.busiestDay.total;
+    console.log(busiestDay);
     dateBest = moment(contribData.busiestDay.date);
     dateBest = dateBest.isValid() ? dateBest.format("MMM DD") : "-";
 
@@ -119,30 +119,28 @@ class Calendar3D extends React.Component {
     let streakLongest, datesLongest, streakCurrent, datesCurrent, contribData;
 
     if (this.props.year) {
-      contribData = this.props.platformData.statistic.years.find(
-        (element) => element.year === this.props.year
-      );
+      contribData = this.props.yearsStatistic[this.props.year];
     } else {
-      contribData = this.props.platformData.statistic.current;
+      contribData = this.props.currentStatistic;
     }
 
-    if (contribData.streak.longest) {
-      streakLongest = contribData.streak.longest.totalDays;
+    if (contribData.longestStreak) {
+      streakLongest = contribData.longestStreak.totalDays;
       datesLongest =
-        moment(contribData.streak.longest.startDate).format("MMM D") +
+        moment(contribData.longestStreak.startDate).format("MMM D") +
         " → " +
-        moment(contribData.streak.longest.endDate).format("MMM D");
+        moment(contribData.longestStreak.endDate).format("MMM D");
     } else {
       streakLongest = "0";
       datesLongest = "-";
     }
 
-    if (contribData.streak.current.id !== -1) {
-      streakCurrent = contribData.streak.current.totalDays;
+    if (contribData.currentStreak) {
+      streakCurrent = contribData.currentStreak.totalDays;
       datesCurrent =
-        moment(contribData.streak.current.startDate).format("MMM D") +
+        moment(contribData.currentStreak.startDate).format("MMM D") +
         " → " +
-        moment(contribData.streak.current.endDate).format("MMM D");
+        moment(contribData.currentStreak.endDate).format("MMM D");
     } else {
       streakCurrent = "0";
       datesCurrent = "-";
@@ -168,16 +166,14 @@ class Calendar3D extends React.Component {
 
       // Get contributions of the selected year
       let contribData;
-
+      console.log(this.props.yearsStatistic, this.props.year);
       if (this.props.year) {
-        contribData = this.props.platformData.statistic.years.find(
-          (element) => element.year === this.props.year
-        );
+        contribData = this.props.yearsStatistic[this.props.year];
       } else {
-        contribData = this.props.platformData.statistic.current;
+        contribData = this.props.currentStatistic;
       }
 
-      let contributions = contribData.calendar;
+      let contributions = JSON.parse(contribData.calendarData);
 
       // Define basic variables
       let size = 2 * Math.round(this.state.width / 80 / 2);
@@ -397,6 +393,13 @@ class Calendar3D extends React.Component {
 }
 //#endregion
 
+//#region > PropTypes
+Calendar3D.propTypes = {
+  currentStatistic: PropTypes.object,
+  yearsStatistic: PropTypes.array,
+};
+//#endregion
+
 //#region > Exports
 //> Default Component
 export default Calendar3D;
diff --git a/src/components/organisms/sections/person/Tabs/index.jsx b/src/components/organisms/sections/person/Tabs/index.jsx
index 1948e47..5950df6 100644
--- a/src/components/organisms/sections/person/Tabs/index.jsx
+++ b/src/components/organisms/sections/person/Tabs/index.jsx
@@ -97,13 +97,7 @@ class SoftwareTabs extends React.Component {
           })}
         </ul>
         <div className="p-3 content">
-          {activeTab === 0 && (
-            // <OverviewTab
-            //   platformData={fetchedUser && fetchedUser.platformData}
-            //   sameOrigin={this.isSameOrigin()}
-            // />
-            <h1></h1>
-          )}
+          {activeTab === 0 && <OverviewTab sameOrigin={this.isSameOrigin()} />}
           {activeTab === 1 && (
             <ProjectTab
               repoList={
diff --git a/src/components/organisms/tabs/OverviewTab/index.jsx b/src/components/organisms/tabs/OverviewTab/index.jsx
index c4ce56d..3f65b62 100644
--- a/src/components/organisms/tabs/OverviewTab/index.jsx
+++ b/src/components/organisms/tabs/OverviewTab/index.jsx
@@ -61,7 +61,7 @@ const pinned = [
 /** @class This component implements the overview tab */
 class OverviewTab extends React.Component {
   state = {
-    selectedYear: undefined,
+    selectedYearIndex: undefined,
     edit: false,
   };
 
@@ -75,24 +75,38 @@ class OverviewTab extends React.Component {
     });
   };
 
-  handleEditClick = (platformData) => {
-    if (this.state.edit) {
-      this.props.writeCache(platformData);
-    }
+  // handleEditClick = (platformData) => {
+  //   if (this.state.edit) {
+  //     this.props.writeCache(platformData);
+  //   }
 
-    this.setState({ edit: !this.state.edit });
-  };
+  //   this.setState({ edit: !this.state.edit });
+  // };
 
   render() {
-    const { fetchedUser, sameOrigin } = this.props;
-    const platformData = fetchedUser.platformData;
+    const { fetchedPerson, sameOrigin } = this.props;
+
+    // // Create empty pool if there isn't already one
+    // if (!fetchedUser.platformData.user.movablePool) {
+    //   fetchedUser.platformData.user.movablePool = {};
+    // }
+
+    const movablePool = {};
+    const {
+      currentStatistic,
+      yearsStatistic,
+      languages,
+    } = fetchedPerson.person;
+
+    const {
+      displayProgrammingLanguages,
+      display2dCalendar,
+      display3dCalendar,
+    } = fetchedPerson;
 
-    // Create empty pool if there isn't already one
-    if (!fetchedUser.platformData.user.movablePool) {
-      fetchedUser.platformData.user.movablePool = {};
-    }
+    console.log(display2dCalendar, display3dCalendar);
 
-    const movablePool = fetchedUser.platformData.user.movablePool;
+    let platformData = "";
 
     return (
       <>
@@ -103,7 +117,7 @@ class OverviewTab extends React.Component {
               <MDBBtn
                 color={this.state.edit ? "success" : "green"}
                 size="md"
-                onClick={() => this.handleEditClick(platformData)}
+                // onClick={() => this.handleEditClick(platformData)}
               >
                 {this.state.edit ? (
                   <span>
@@ -122,9 +136,9 @@ class OverviewTab extends React.Component {
             edit={this.state.edit}
             items={[
               <>
-                {platformData && (
+                {languages && (
                   <MDBRow className="text-center text-md-left mb-4">
-                    {platformData.statistic.languages.map((language, i) => {
+                    {languages?.map((language, i) => {
                       if (i < 6) {
                         return (
                           <MDBCol md="4" key={i}>
@@ -163,59 +177,59 @@ class OverviewTab extends React.Component {
                 )}
               </>,
               <>
-                {platformData &&
-                  (platformData.user.settings.show3DDiagram ||
-                    platformData.user.settings.show2DDiagram) && (
-                    <div className="text-right year-select">
-                      {platformData.statistic.years.map((year, i) => {
-                        return (
-                          <MDBBtn
-                            color="white"
-                            key={i}
-                            size="md"
-                            className={
-                              year.year === this.state.selectedYear
-                                ? "selected"
-                                : undefined
-                            }
-                            onClick={() =>
-                              this.setState({ selectedYear: year.year })
-                            }
-                          >
-                            {year.year}
-                          </MDBBtn>
-                        );
-                      })}
-                      <MDBBtn
-                        color="white"
-                        size="md"
-                        className={
-                          this.state.selectedYear === undefined
-                            ? "selected"
-                            : undefined
-                        }
-                        onClick={() =>
-                          this.setState({ selectedYear: undefined })
-                        }
-                      >
-                        Current
-                      </MDBBtn>
-                    </div>
-                  )}
+                {(display3dCalendar || display3dCalendar) && (
+                  <div className="text-right year-select">
+                    {yearsStatistic.map((year, i) => {
+                      return (
+                        <MDBBtn
+                          color="white"
+                          key={i}
+                          size="md"
+                          className={
+                            i === this.state.selectedYearIndex
+                              ? "selected"
+                              : undefined
+                          }
+                          onClick={() =>
+                            this.setState({ selectedYearIndex: i })
+                          }
+                        >
+                          {this.state.selectedYearIndex}
+                        </MDBBtn>
+                      );
+                    })}
+                    <MDBBtn
+                      color="white"
+                      size="md"
+                      className={
+                        this.state.selectedYearIndex === undefined
+                          ? "selected"
+                          : undefined
+                      }
+                      onClick={() =>
+                        this.setState({ selectedYearIndex: undefined })
+                      }
+                    >
+                      Current
+                    </MDBBtn>
+                  </div>
+                )}
               </>,
               <>
-                {platformData && platformData.user.settings.show3DDiagram && (
+                {display3dCalendar && (
                   <Calendar3D
-                    platformData={platformData}
-                    year={this.state.selectedYear}
+                    currentStatistic={currentStatistic}
+                    yearsStatistic={yearsStatistic}
+                    year={this.state.selectedYearIndex}
                   />
                 )}
               </>,
               <>
-                {platformData && platformData.user.settings.show2DDiagram && (
+                {display2dCalendar &
+                (
                   <Calendar2D
                     platformData={platformData}
-                    year={this.state.selectedYear}
+                    year={this.state.selectedYearIndex}
                     selectDay={this.selectDay}
                   />
                 )}
@@ -233,7 +247,7 @@ class OverviewTab extends React.Component {
                           <div className="mt-5">
                             <ContribRadar
                               statistic={platformData.statistic}
-                              year={this.state.selectedYear}
+                              year={this.state.selectedYearIndex}
                             />
                           </div>
                         )}
@@ -250,7 +264,7 @@ class OverviewTab extends React.Component {
                       <p className="text-muted mb-0">Weekly overview</p>
                       <LatestActivity
                         statistic={platformData.statistic}
-                        year={this.state.selectedYear}
+                        year={this.state.selectedYearIndex}
                         activity={this.state.activity}
                       />
                     </>,
@@ -268,15 +282,9 @@ class OverviewTab extends React.Component {
 }
 //#endregion
 
-//#region > PropTypes
-OverviewTab.propTypes = {
-  platformData: PropTypes.object.isRequired,
-};
-//#endregion
-
 //#region > Redux Mapping
 const mapStateToProps = (state) => ({
-  fetchedUser: state.user.fetchedUser,
+  fetchedPerson: state.person.fetchedPerson,
 });
 
 const mapDispatchToProps = (dispatch) => {

From 8a432a333a01fe922f7b5d3dfc4190a9cf699a51 Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Thu, 10 Sep 2020 23:28:18 +0200
Subject: [PATCH 053/175] Integrate calendar2d, contrib radar and latest
 activity chart

The components work again, but they are still a bit sloppy
implemented.
---
 .../atoms/charts/Calendar2D/index.jsx         | 17 ++++-----
 .../atoms/charts/ContribRadar/index.jsx       | 36 ++++++++-----------
 .../atoms/charts/LatestActivity/index.jsx     | 13 ++++---
 .../organisms/tabs/OverviewTab/index.jsx      | 27 +++++++-------
 4 files changed, 43 insertions(+), 50 deletions(-)

diff --git a/src/components/atoms/charts/Calendar2D/index.jsx b/src/components/atoms/charts/Calendar2D/index.jsx
index 6af5382..c838a9d 100644
--- a/src/components/atoms/charts/Calendar2D/index.jsx
+++ b/src/components/atoms/charts/Calendar2D/index.jsx
@@ -61,19 +61,18 @@ class Calender2D extends React.Component {
   };
 
   setCalendar = async (props) => {
-    if (props.platformData) {
+    const { currentStatistic, yearsStatistic, year } = props;
+    if (currentStatistic && yearsStatistic) {
       // Get contribution data
       let contribData;
 
-      if (props.year) {
-        contribData = props.platformData.statistic.years.find(
-          (element) => element.year === props.year
-        );
+      if (year) {
+        contribData = yearsStatistic[year];
       } else {
-        contribData = props.platformData.statistic.current;
+        contribData = currentStatistic;
       }
 
-      let contributions = contribData.calendar;
+      let contributions = JSON.parse(contribData.calendarData);
 
       this.setState({
         width: this.myInput.current.offsetWidth,
@@ -156,7 +155,9 @@ class Calender2D extends React.Component {
   };
 
   render() {
-    if (this.props.platformData) {
+    const { currentStatistic, yearsStatistic, year } = this.props;
+
+    if (currentStatistic && yearsStatistic) {
       return (
         <div id="calendar2d">
           <div className="text-right">
diff --git a/src/components/atoms/charts/ContribRadar/index.jsx b/src/components/atoms/charts/ContribRadar/index.jsx
index 086ecde..30e025a 100644
--- a/src/components/atoms/charts/ContribRadar/index.jsx
+++ b/src/components/atoms/charts/ContribRadar/index.jsx
@@ -103,47 +103,39 @@ class ContribRadar extends React.Component {
     }
   };
 
-  calculateSources = (nextPropsYear) => {
-    const { statistic } = this.props;
+  calculateSources = (nextPropsYearIndex) => {
+    const { yearsStatistic, currentStatistic } = this.props;
 
     let totalReviews = 0;
     let totalIssues = 0;
     let totalRequests = 0;
     let totalCommits = 0;
     let totalSources = 1;
-    let year;
+    let contribData;
     let results = [];
 
-    if (nextPropsYear === null) {
-      year = this.props.year;
+    if (nextPropsYearIndex) {
+      contribData = yearsStatistic[nextPropsYearIndex];
     } else {
-      year = nextPropsYear;
+      contribData = currentStatistic;
     }
 
-    if (year) {
-      let selectedYear = statistic.years.find(
-        (element) => element.year === year
-      );
+    let contributionDetails = JSON.parse(contribData.contributionTypeData);
 
-      totalIssues = selectedYear.contributions.issue.share;
-      totalRequests = selectedYear.contributions.pullRequest.share;
-      totalCommits = selectedYear.contributions.commit.share;
-      totalReviews = selectedYear.contributions.pullRequestReview.share;
-    } else {
-      let contributions = statistic.current.contributions;
-
-      totalIssues = contributions.issue.share;
-      totalRequests = contributions.pullRequest.share;
-      totalCommits = contributions.commit.share;
-      totalReviews = contributions.pullRequestReview.share;
-    }
+    totalIssues = contributionDetails.issue.share;
+    totalRequests = contributionDetails.pullRequest.share;
+    totalCommits = contributionDetails.commit.share;
+    totalReviews = contributionDetails.pullRequestReview.share;
 
     let values = [totalReviews, totalIssues, totalRequests, totalCommits];
 
     // Check if the values are valid
     if (values.includes(undefined)) {
+      console.log("UNDEFINED");
       this.fillChart(null);
     } else {
+      console.log("NOT UNDEFINED");
+
       results.push({
         label: "GitHub",
         backgroundColor: "rgba(123, 201, 111,.4)",
diff --git a/src/components/atoms/charts/LatestActivity/index.jsx b/src/components/atoms/charts/LatestActivity/index.jsx
index b572edc..848d4ea 100644
--- a/src/components/atoms/charts/LatestActivity/index.jsx
+++ b/src/components/atoms/charts/LatestActivity/index.jsx
@@ -117,19 +117,18 @@ class LatestActivity extends React.Component {
   };
 
   calculateSources = (year, activity) => {
-    const { statistic } = this.props;
+    const { yearsStatistic, currentStatistic } = this.props;
 
-    if (statistic) {
+    if (yearsStatistic && currentStatistic) {
       // Real data
       let contribData, week, lastWeek, lastWeekValues;
 
-      if (!year) {
-        contribData = statistic.current;
+      if (year) {
+        contribData = yearsStatistic[year];
       } else {
-        contribData = statistic.years.find((element) => element.year === year);
+        contribData = currentStatistic;
       }
-
-      const weeks = contribData.calendar.weeks;
+      const weeks = JSON.parse(contribData.calendarData).weeks;
 
       if (!activity) {
         week = weeks[weeks.length - 1];
diff --git a/src/components/organisms/tabs/OverviewTab/index.jsx b/src/components/organisms/tabs/OverviewTab/index.jsx
index 3f65b62..1b6ebfe 100644
--- a/src/components/organisms/tabs/OverviewTab/index.jsx
+++ b/src/components/organisms/tabs/OverviewTab/index.jsx
@@ -225,10 +225,10 @@ class OverviewTab extends React.Component {
                 )}
               </>,
               <>
-                {display2dCalendar &
-                (
+                {display2dCalendar && (
                   <Calendar2D
-                    platformData={platformData}
+                    currentStatistic={currentStatistic}
+                    yearsStatistic={yearsStatistic}
                     year={this.state.selectedYearIndex}
                     selectDay={this.selectDay}
                   />
@@ -242,15 +242,15 @@ class OverviewTab extends React.Component {
                   items={[
                     <>
                       <p className="lead">Contribution Types</p>
-                      {platformData &&
-                        !platformData.user.settings.showContribDiagram && (
-                          <div className="mt-5">
-                            <ContribRadar
-                              statistic={platformData.statistic}
-                              year={this.state.selectedYearIndex}
-                            />
-                          </div>
-                        )}
+                      {true && (
+                        <div className="mt-5">
+                          <ContribRadar
+                            currentStatistic={currentStatistic}
+                            yearsStatistic={yearsStatistic}
+                            year={this.state.selectedYearIndex}
+                          />
+                        </div>
+                      )}
                     </>,
                     <>
                       <p className="lead">
@@ -263,7 +263,8 @@ class OverviewTab extends React.Component {
                       </p>
                       <p className="text-muted mb-0">Weekly overview</p>
                       <LatestActivity
-                        statistic={platformData.statistic}
+                        currentStatistic={currentStatistic}
+                        yearsStatistic={yearsStatistic}
                         year={this.state.selectedYearIndex}
                         activity={this.state.activity}
                       />

From 50a41acfc645a803a51e401569265658b002b7de Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Thu, 10 Sep 2020 23:47:03 +0200
Subject: [PATCH 054/175] Add to continue style

The style sheet for the to continue modal was added.
---
 .../modals/ToContinueModal/tocontinue.scss      | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 src/components/molecules/modals/ToContinueModal/tocontinue.scss

diff --git a/src/components/molecules/modals/ToContinueModal/tocontinue.scss b/src/components/molecules/modals/ToContinueModal/tocontinue.scss
new file mode 100644
index 0000000..fb81275
--- /dev/null
+++ b/src/components/molecules/modals/ToContinueModal/tocontinue.scss
@@ -0,0 +1,17 @@
+#continue {
+  img {
+    width: 5rem;
+    height: 5rem;
+    border-radius: 50%;
+    margin-bottom: 2rem;
+  }
+
+  .font-weight-normal {
+    margin-bottom: 1rem;
+  }
+}
+
+/**
+ * SPDX-License-Identifier: (EUPL-1.2)
+ * Copyright © 2019-2020 Simon Prast
+ */

From 13a881080df363297df8fdb7df7c6ac87166413d Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Thu, 10 Sep 2020 23:47:36 +0200
Subject: [PATCH 055/175] Add to continue modal

The to continue component was added.
---
 .../modals/ToContinueModal/index.jsx          | 79 +++++++++++++++++++
 1 file changed, 79 insertions(+)
 create mode 100644 src/components/molecules/modals/ToContinueModal/index.jsx

diff --git a/src/components/molecules/modals/ToContinueModal/index.jsx b/src/components/molecules/modals/ToContinueModal/index.jsx
new file mode 100644
index 0000000..822ec4a
--- /dev/null
+++ b/src/components/molecules/modals/ToContinueModal/index.jsx
@@ -0,0 +1,79 @@
+//#region > Imports
+//> React
+// Contains all the functionality necessary to define React components
+import React from "react";
+// DOM bindings for React Router
+import { Link } from "react-router-dom";
+//> MDB
+// "Material Design for Bootstrap" is a great UI design framework
+import { MDBModal, MDBIcon, MDBModalBody, MDBBtn } from "mdbreact";
+
+//> Stylesheet
+import "./tocontinue.scss";
+//#endregion
+
+//#region > Components
+/** @class A modal that shows if a login is required to continue an action */
+class ToContinueModal extends React.Component {
+  render() {
+    return (
+      <MDBModal
+        modalStyle="white"
+        className="text-dark"
+        size="lg"
+        id="continue"
+        backdrop={true}
+        isOpen={true}
+        toggle={this.props.closeModal}
+      >
+        <MDBModalBody className="text-center">
+          <img
+            src={this.props.fetchedPerson.avatarImage.src}
+            alt={"Avatar of " + this.props.fetchedPerson.slug.substring(2)}
+            className="img-fluid"
+          />
+          <div className="font-weight-normal">
+            Create a new SNEK account or login to SNEK, to continue.
+          </div>
+          <Link
+            to={{
+              pathname: "/",
+              state: {
+                actionCard: 1,
+              },
+            }}
+          >
+            <MDBBtn color="green" outline className="mb-0">
+              Login
+              <MDBIcon icon="angle-right" className="pl-1" />
+            </MDBBtn>
+          </Link>
+          <Link
+            to={{
+              pathname: "/",
+              state: {
+                actionCard: 0,
+              },
+            }}
+          >
+            <MDBBtn color="primary" outline className="mb-0">
+              Create new account
+              <MDBIcon icon="angle-right" className="pl-1" />
+            </MDBBtn>
+          </Link>
+        </MDBModalBody>
+      </MDBModal>
+    );
+  }
+}
+//#endregion
+
+//#region > Exports
+//> Default Component
+export default ToContinueModal;
+//#endregion
+
+/**
+ * SPDX-License-Identifier: (EUPL-1.2)
+ * Copyright © 2019-2020 Simon Prast
+ */

From 2c9ce539cd1d85a4cf0828faae42aab9bea91942 Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Thu, 10 Sep 2020 23:48:10 +0200
Subject: [PATCH 056/175] Update exports

The to continue modal is now being exported.
---
 src/components/molecules/modals/index.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/molecules/modals/index.js b/src/components/molecules/modals/index.js
index 5305d5d..20fed07 100644
--- a/src/components/molecules/modals/index.js
+++ b/src/components/molecules/modals/index.js
@@ -9,6 +9,7 @@ import AddVideoModal from "./AddVideoModal";
 import InstagramSelectorModal from "./InstagramSelectorModal";
 import AddSongModal from "./AddSongModal";
 import ConnectModal from "./ConnectModal";
+import ToContinueModal from "./ToContinueModal";
 //#endregion
 
 //#region > Exports
@@ -23,6 +24,7 @@ export {
   InstagramSelectorModal,
   AddSongModal,
   ConnectModal,
+  ToContinueModal,
 };
 //#endregion
 

From a0a8fafb49b863915202aff5f0fc0096a783885a Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Thu, 10 Sep 2020 23:48:31 +0200
Subject: [PATCH 057/175] Add follow styles

The style sheet for the follow modal was added.
---
 .../molecules/modals/FollowModal/follow.scss        | 13 +++++++++++++
 1 file changed, 13 insertions(+)
 create mode 100644 src/components/molecules/modals/FollowModal/follow.scss

diff --git a/src/components/molecules/modals/FollowModal/follow.scss b/src/components/molecules/modals/FollowModal/follow.scss
new file mode 100644
index 0000000..4f72b52
--- /dev/null
+++ b/src/components/molecules/modals/FollowModal/follow.scss
@@ -0,0 +1,13 @@
+#follow {
+  img {
+    width: 4rem;
+    height: 4rem;
+    margin-bottom: 1rem;
+    border-radius: 50%;
+  }
+}
+
+/**
+ * SPDX-License-Identifier: (EUPL-1.2)
+ * Copyright © 2019-2020 Simon Prast
+ */

From 5a69d535ccf1d11c595f11b851de57e67396a2b4 Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Thu, 10 Sep 2020 23:48:47 +0200
Subject: [PATCH 058/175] Add follow modal

The follow modal component was added.
---
 .../molecules/modals/FollowModal/index.jsx    | 234 ++++++++++++++++++
 1 file changed, 234 insertions(+)
 create mode 100644 src/components/molecules/modals/FollowModal/index.jsx

diff --git a/src/components/molecules/modals/FollowModal/index.jsx b/src/components/molecules/modals/FollowModal/index.jsx
new file mode 100644
index 0000000..902b10c
--- /dev/null
+++ b/src/components/molecules/modals/FollowModal/index.jsx
@@ -0,0 +1,234 @@
+//#region > Imports
+//> React
+// Contains all the functionality necessary to define React components
+import React from "react";
+// DOM bindings for React Router
+import { Link } from "react-router-dom";
+//> MDB
+// "Material Design for Bootstrap" is a great UI design framework
+import {
+  MDBModal,
+  MDBIcon,
+  MDBModalBody,
+  MDBBtn,
+  MDBModalHeader,
+  MDBRow,
+  MDBCol,
+} from "mdbreact";
+
+//> Stylesheet
+import "./follow.scss";
+//#endregion
+
+//#region > Components
+/** @class A modal that shows a list of follows */
+class FollowModal extends React.Component {
+  state = {
+    loggedUser: null,
+  };
+
+  componentDidMount = () => {
+    const { loggedUser } = this.props;
+
+    this.setState({
+      loggedUser: loggedUser,
+    });
+  };
+
+  componentDidUpdate = () => {
+    const { loggedUser } = this.props;
+
+    if (loggedUser !== this.state.loggedUser) {
+      this.setState({
+        loggedUser: loggedUser,
+      });
+    }
+  };
+
+  follow = (personToFollow) => {
+    this.props.follow(personToFollow).then(() => {
+      let loggedUser = this.props.loggedUser;
+      let follows = [];
+
+      for (let count in loggedUser.person.follows) {
+        follows.push(loggedUser.person.follows[count]);
+      }
+
+      follows.push({ slug: "p-" + personToFollow });
+
+      loggedUser.person.follows = follows;
+      console.log("1");
+      this.setState({ loggedUser });
+    });
+  };
+
+  unfollow = (personToUnfollow) => {
+    this.props.unfollow(personToUnfollow).then(() => {
+      let loggedUser = this.state.loggedUser;
+      let follows = [];
+
+      for (let count in loggedUser?.person?.follows) {
+        if (loggedUser.person.follows[count].slug !== "p-" + personToUnfollow) {
+          follows.push(loggedUser.person.follows[count]);
+        }
+      }
+
+      loggedUser.person.follows = follows;
+      console.log("1");
+      this.setState({ loggedUser });
+    });
+  };
+
+  isFollowing = (follower) => {
+    const { loggedUser } = this.state;
+
+    for (let count in loggedUser?.person?.follows) {
+      if (loggedUser.person.follows[count].slug === follower.slug) {
+        return true;
+      }
+    }
+
+    return false;
+  };
+
+  render() {
+    const { followType, fetchedPerson } = this.props;
+    console.log("XD");
+    return (
+      <MDBModal
+        modalStyle="white"
+        className="text-dark"
+        size="md"
+        id="follow"
+        backdrop={true}
+        isOpen={true}
+        toggle={this.props.closeModal}
+      >
+        <MDBModalHeader
+          className="text-center text-dark donate"
+          titleClass="w-100"
+          tag="p"
+        >
+          {followType}
+        </MDBModalHeader>
+        <MDBModalBody>
+          {followType === "Followers" &&
+            fetchedPerson.followedBy.map((follower, i) => {
+              return (
+                <div key={i}>
+                  <MDBRow>
+                    <MDBCol size="2">
+                      <img
+                        src={
+                          follower.avatarImage?.src
+                            ? follower.avatarImage?.src
+                            : "https://octodex.github.com/images/nyantocat.gif"
+                        }
+                      />
+                    </MDBCol>
+                    <MDBCol size="6">
+                      <strong>{follower.slug.substring(2)}</strong>
+                      <p>{follower.firstName + " " + follower.lastName}</p>
+                    </MDBCol>
+                    {follower.slug !== this.props.loggedUser?.person?.slug && (
+                      <MDBCol size="4">
+                        {this.isFollowing(follower) ? (
+                          <MDBBtn
+                            color="green"
+                            outline
+                            size="md"
+                            onClick={() =>
+                              this.unfollow(follower.slug.substring(2))
+                            }
+                          >
+                            <MDBIcon icon="minus-circle" className="mr-2" />
+                            Unfollow
+                          </MDBBtn>
+                        ) : (
+                          <MDBBtn
+                            color="green"
+                            outline
+                            size="md"
+                            onClick={() =>
+                              this.follow(follower.slug.substring(2))
+                            }
+                          >
+                            <MDBIcon icon="plus-circle" className="mr-2" />
+                            Follow
+                          </MDBBtn>
+                        )}
+                      </MDBCol>
+                    )}
+                  </MDBRow>
+                </div>
+              );
+            })}
+          {followType === "Following" &&
+            fetchedPerson.follows.map((follower, i) => {
+              return (
+                <div key={i}>
+                  <MDBRow>
+                    <MDBCol size="2">
+                      {
+                        <img
+                          src={
+                            follower.avatarImage?.src
+                              ? follower.avatarImage?.src
+                              : "https://octodex.github.com/images/nyantocat.gif"
+                          }
+                        />
+                      }
+                    </MDBCol>
+                    <MDBCol size="6">
+                      <strong>{follower.slug.substring(2)}</strong>
+                      <p>{follower.firstName + " " + follower.lastName}</p>
+                    </MDBCol>
+                    {follower.slug !== this.props.loggedUser?.person?.slug && (
+                      <MDBCol size="4">
+                        {this.isFollowing(follower) ? (
+                          <MDBBtn
+                            color="green"
+                            outline
+                            size="md"
+                            onClick={() =>
+                              this.unfollow(follower.slug.substring(2))
+                            }
+                          >
+                            <MDBIcon icon="minus-circle" className="mr-2" />
+                            Unfollow
+                          </MDBBtn>
+                        ) : (
+                          <MDBBtn
+                            color="green"
+                            outline
+                            size="md"
+                            onClick={() =>
+                              this.follow(follower.slug.substring(2))
+                            }
+                          >
+                            <MDBIcon icon="plus-circle" className="mr-2" />
+                            Follow
+                          </MDBBtn>
+                        )}
+                      </MDBCol>
+                    )}
+                  </MDBRow>
+                </div>
+              );
+            })}
+        </MDBModalBody>
+      </MDBModal>
+    );
+  }
+}
+//#endregion
+
+//#region > Exports
+//> Default Component
+export default FollowModal;
+//#endregion
+
+/**
+ * SPDX-License-Identifier: (EUPL-1.2)
+ * Copyright © 2019-2020 Simon Prast
+ */

From 3b2db86ae7ff4f060a19edc84abf06fb92ee475e Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Thu, 10 Sep 2020 23:49:03 +0200
Subject: [PATCH 059/175] Update exports

The follow modal is now being exported.
---
 src/components/molecules/modals/index.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/molecules/modals/index.js b/src/components/molecules/modals/index.js
index 20fed07..d3004ab 100644
--- a/src/components/molecules/modals/index.js
+++ b/src/components/molecules/modals/index.js
@@ -10,6 +10,7 @@ import InstagramSelectorModal from "./InstagramSelectorModal";
 import AddSongModal from "./AddSongModal";
 import ConnectModal from "./ConnectModal";
 import ToContinueModal from "./ToContinueModal";
+import FollowModal from "./FollowModal";
 //#endregion
 
 //#region > Exports
@@ -25,6 +26,7 @@ export {
   AddSongModal,
   ConnectModal,
   ToContinueModal,
+  FollowModal,
 };
 //#endregion
 

From f4a5750ee1a450052dd1d94db800c80f922c58d5 Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Thu, 10 Sep 2020 23:49:51 +0200
Subject: [PATCH 060/175] Import modals

The 2 new modals are now being imported.
---
 src/components/organisms/sections/person/InfoCard/index.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/organisms/sections/person/InfoCard/index.jsx b/src/components/organisms/sections/person/InfoCard/index.jsx
index 5483ca2..7dbd357 100644
--- a/src/components/organisms/sections/person/InfoCard/index.jsx
+++ b/src/components/organisms/sections/person/InfoCard/index.jsx
@@ -22,6 +22,7 @@ import { connect } from "react-redux";
 
 //> Components
 import { LanguageChart } from "../../../../atoms";
+import { ToContinueModal, FollowModal } from "../../../../molecules/modals";
 //> Style Sheet
 import "./infocard.scss";
 //#endregion

From 40607b484243d061597c18d3992e15d2cc7f7e0d Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Thu, 10 Sep 2020 23:50:26 +0200
Subject: [PATCH 061/175] Import actions

The follow and unfollow actions are now being imported.
---
 src/components/organisms/sections/person/InfoCard/index.jsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/organisms/sections/person/InfoCard/index.jsx b/src/components/organisms/sections/person/InfoCard/index.jsx
index 7dbd357..282f26d 100644
--- a/src/components/organisms/sections/person/InfoCard/index.jsx
+++ b/src/components/organisms/sections/person/InfoCard/index.jsx
@@ -23,6 +23,9 @@ import { connect } from "react-redux";
 //> Components
 import { LanguageChart } from "../../../../atoms";
 import { ToContinueModal, FollowModal } from "../../../../molecules/modals";
+//> Actions
+// Functions to send data from the application to the store
+import { follow, unfollow } from "../../../../../store/actions/personActions";
 //> Style Sheet
 import "./infocard.scss";
 //#endregion

From ad9169a75f3ef4bff37dec720f6f59c74ba72379 Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Thu, 10 Sep 2020 23:51:03 +0200
Subject: [PATCH 062/175] Update redux mapping

The redux mapping was updated to the needs.
---
 src/components/organisms/sections/person/InfoCard/index.jsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/organisms/sections/person/InfoCard/index.jsx b/src/components/organisms/sections/person/InfoCard/index.jsx
index 282f26d..227abf5 100644
--- a/src/components/organisms/sections/person/InfoCard/index.jsx
+++ b/src/components/organisms/sections/person/InfoCard/index.jsx
@@ -331,10 +331,14 @@ class InfoCard extends React.Component {
 //#region > Redux Mapping
 const mapStateToProps = (state) => ({
   fetchedPerson: state.person.fetchedPerson,
+  loggedUser: state.user.user,
 });
 
 const mapDispatchToProps = (dispatch) => {
-  return {};
+  return {
+    follow: (personToFollow) => dispatch(follow(personToFollow)),
+    unfollow: (personToUnfollow) => dispatch(unfollow(personToUnfollow)),
+  };
 };
 //#endregion
 

From 9b790a95ecfe5a8865bd5113f286893d6e96f9dd Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Thu, 10 Sep 2020 23:51:28 +0200
Subject: [PATCH 063/175] Update imports

The MDB component imports were updated.
---
 src/components/organisms/sections/person/InfoCard/index.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/organisms/sections/person/InfoCard/index.jsx b/src/components/organisms/sections/person/InfoCard/index.jsx
index 227abf5..b94ad28 100644
--- a/src/components/organisms/sections/person/InfoCard/index.jsx
+++ b/src/components/organisms/sections/person/InfoCard/index.jsx
@@ -14,6 +14,8 @@ import {
   MDBPopoverHeader,
   MDBIcon,
   MDBTooltip,
+  MDBRow,
+  MDBCol,
 } from "mdbreact";
 //> Redux
 // Allows to React components read data from a Redux store, and dispatch actions

From 187625b5c90507c25d1af3f0a731e00e2aec6fb0 Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Thu, 10 Sep 2020 23:52:08 +0200
Subject: [PATCH 064/175] Update state

The state for the component was updated.
---
 .../organisms/sections/person/InfoCard/index.jsx          | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/organisms/sections/person/InfoCard/index.jsx b/src/components/organisms/sections/person/InfoCard/index.jsx
index b94ad28..6c93dd5 100644
--- a/src/components/organisms/sections/person/InfoCard/index.jsx
+++ b/src/components/organisms/sections/person/InfoCard/index.jsx
@@ -35,7 +35,13 @@ import "./infocard.scss";
 //#region > Components
 /** @class This component displays personal information and status of a user */
 class InfoCard extends React.Component {
-  state = { limitLanguages: true };
+  state = {
+    limitLanguages: true,
+    showToContinue: false,
+    showFollow: false,
+    followType: "",
+    fetchedPerson: null,
+  };
 
   componentDidMount = () => {};
 

From 598ba9abeac0a5775d615f8fe8823028be428b81 Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Thu, 10 Sep 2020 23:53:09 +0200
Subject: [PATCH 065/175] Add follow function

The function for following persons was added.
---
 .../sections/person/InfoCard/index.jsx        | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/components/organisms/sections/person/InfoCard/index.jsx b/src/components/organisms/sections/person/InfoCard/index.jsx
index 6c93dd5..ab76136 100644
--- a/src/components/organisms/sections/person/InfoCard/index.jsx
+++ b/src/components/organisms/sections/person/InfoCard/index.jsx
@@ -44,6 +44,26 @@ class InfoCard extends React.Component {
   };
 
   componentDidMount = () => {};
+  follow = (personToFollow) => {
+    if (!this.props.loggedUser?.anonymous) {
+      this.props.follow(personToFollow).then(() => {
+        let fetchedPerson = this.state.fetchedPerson;
+        let followedBy = [];
+
+        for (let count in fetchedPerson.followedBy) {
+          followedBy.push(fetchedPerson.followedBy[count]);
+        }
+
+        followedBy.push(this.props.loggedUser.person);
+
+        fetchedPerson.followedBy = followedBy;
+
+        this.setState({ fetchedPerson });
+      });
+    } else {
+      this.setState({ showToContinue: true });
+    }
+  };
 
   render() {
     const { fetchedPerson } = this.props;

From 21aa9c8fed8ff21f3fd031d2a10f012d778b9798 Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Thu, 10 Sep 2020 23:53:52 +0200
Subject: [PATCH 066/175] Add unfollow function

The function for unfollowing a person was added.
---
 .../sections/person/InfoCard/index.jsx        | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/src/components/organisms/sections/person/InfoCard/index.jsx b/src/components/organisms/sections/person/InfoCard/index.jsx
index ab76136..a9a6674 100644
--- a/src/components/organisms/sections/person/InfoCard/index.jsx
+++ b/src/components/organisms/sections/person/InfoCard/index.jsx
@@ -65,6 +65,28 @@ class InfoCard extends React.Component {
     }
   };
 
+  unfollow = (personToUnfollow) => {
+    if (!this.props.loggedUser?.anonymous) {
+      this.props.unfollow(personToUnfollow).then(() => {
+        let fetchedPerson = this.state.fetchedPerson;
+        let followedBy = [];
+
+        const { loggedUser } = this.props;
+
+        for (let count in fetchedPerson.followedBy) {
+          if (fetchedPerson.followedBy[count].slug !== loggedUser.person.slug) {
+            followedBy.push(fetchedPerson.followedBy[count]);
+          }
+        }
+
+        fetchedPerson.followedBy = followedBy;
+
+        this.setState({ fetchedPerson });
+      });
+    } else {
+      this.setState({ showToContinue: true });
+    }
+  };
   render() {
     const { fetchedPerson } = this.props;
 

From c81aa9d7e4a39aac274524188e59e937c1f98c74 Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Thu, 10 Sep 2020 23:54:39 +0200
Subject: [PATCH 067/175] Add follow check function

A function was added for checking the follow status.
---
 .../sections/person/InfoCard/index.jsx          | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/components/organisms/sections/person/InfoCard/index.jsx b/src/components/organisms/sections/person/InfoCard/index.jsx
index a9a6674..b33822f 100644
--- a/src/components/organisms/sections/person/InfoCard/index.jsx
+++ b/src/components/organisms/sections/person/InfoCard/index.jsx
@@ -87,6 +87,23 @@ class InfoCard extends React.Component {
       this.setState({ showToContinue: true });
     }
   };
+
+  isFollower = () => {
+    if (!this.props.loggedUser?.anonymous) {
+      const loggedUser = this.props.loggedUser.username;
+      const followerList = this.state.fetchedPerson?.followedBy;
+      console.log(followerList);
+      for (let count in followerList) {
+        let follower = followerList[count];
+
+        if (follower.slug.substring(2) === loggedUser) {
+          return true;
+        }
+      }
+    }
+
+    return false;
+  };
   render() {
     const { fetchedPerson } = this.props;
 

From 9b349dffbb39e4faef2ae96039aa39b35a05ca27 Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Thu, 10 Sep 2020 23:55:18 +0200
Subject: [PATCH 068/175] Add component function

Component function were added to keep the state up to date.
---
 .../sections/person/InfoCard/index.jsx        | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/components/organisms/sections/person/InfoCard/index.jsx b/src/components/organisms/sections/person/InfoCard/index.jsx
index b33822f..62a67e7 100644
--- a/src/components/organisms/sections/person/InfoCard/index.jsx
+++ b/src/components/organisms/sections/person/InfoCard/index.jsx
@@ -43,7 +43,24 @@ class InfoCard extends React.Component {
     fetchedPerson: null,
   };
 
-  componentDidMount = () => {};
+  componentDidMount = () => {
+    const { fetchedPerson } = this.props;
+
+    this.setState({
+      fetchedPerson: fetchedPerson,
+    });
+  };
+
+  componentDidUpdate = () => {
+    const { fetchedPerson } = this.props;
+
+    if (fetchedPerson !== this.state.fetchedPerson) {
+      this.setState({
+        fetchedPerson: fetchedPerson,
+      });
+    }
+  };
+
   follow = (personToFollow) => {
     if (!this.props.loggedUser?.anonymous) {
       this.props.follow(personToFollow).then(() => {

From 919e8feafa8c3afb88a08a97d9c813d0ebaecb0e Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Thu, 10 Sep 2020 23:55:52 +0200
Subject: [PATCH 069/175] Add modal handle function

The function for handling the modals was added.
---
 .../organisms/sections/person/InfoCard/index.jsx    | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/components/organisms/sections/person/InfoCard/index.jsx b/src/components/organisms/sections/person/InfoCard/index.jsx
index 62a67e7..c025cb7 100644
--- a/src/components/organisms/sections/person/InfoCard/index.jsx
+++ b/src/components/organisms/sections/person/InfoCard/index.jsx
@@ -121,6 +121,19 @@ class InfoCard extends React.Component {
 
     return false;
   };
+
+  handleModalClose = () => {
+    if (this.state.showToContinue) {
+      this.setState({
+        showToContinue: false,
+      });
+    } else if (this.state.showFollow) {
+      this.setState({
+        showFollow: false,
+      });
+    }
+  };
+
   render() {
     const { fetchedPerson } = this.props;
 

From 64c58633a0b5361c1aa28dff53b826b12954193b Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Thu, 10 Sep 2020 23:56:48 +0200
Subject: [PATCH 070/175] Implement modals

The modals are now implemented.
---
 .../organisms/sections/person/InfoCard/index.jsx  | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/components/organisms/sections/person/InfoCard/index.jsx b/src/components/organisms/sections/person/InfoCard/index.jsx
index c025cb7..f64c5f6 100644
--- a/src/components/organisms/sections/person/InfoCard/index.jsx
+++ b/src/components/organisms/sections/person/InfoCard/index.jsx
@@ -139,6 +139,7 @@ class InfoCard extends React.Component {
 
     console.log(fetchedPerson);
     return (
+      <>
       <div className="social">
         <MDBView>
           <img
@@ -420,6 +421,20 @@ class InfoCard extends React.Component {
           )}
         </div>
       </div>
+        {this.state.showToContinue && (
+          <ToContinueModal {...this.props} closeModal={this.handleModalClose} />
+        )}
+        {this.state.showFollow && (
+          <FollowModal
+            closeModal={this.handleModalClose}
+            fetchedPerson={this.state.fetchedPerson}
+            followType={this.state.followType}
+            follow={this.props.follow}
+            unfollow={this.props.unfollow}
+            loggedUser={this.props.loggedUser}
+          />
+        )}
+      </>
     );
   }
 }

From 9451df2edeb58cea460b7c88beb3040ba8c8ebd9 Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Thu, 10 Sep 2020 23:57:42 +0200
Subject: [PATCH 071/175] Implement follow

It is now possible to follow other users.
---
 .../sections/person/InfoCard/index.jsx        | 571 ++++++++++--------
 1 file changed, 306 insertions(+), 265 deletions(-)

diff --git a/src/components/organisms/sections/person/InfoCard/index.jsx b/src/components/organisms/sections/person/InfoCard/index.jsx
index f64c5f6..f4e340a 100644
--- a/src/components/organisms/sections/person/InfoCard/index.jsx
+++ b/src/components/organisms/sections/person/InfoCard/index.jsx
@@ -135,292 +135,333 @@ class InfoCard extends React.Component {
   };
 
   render() {
-    const { fetchedPerson } = this.props;
+    const { fetchedPerson, loggedUser } = this.props;
 
-    console.log(fetchedPerson);
     return (
       <>
-      <div className="social">
-        <MDBView>
-          <img
-            className="img-fluid main-avatar"
-            src={
-              fetchedPerson?.avatarImage?.src
-                ? fetchedPerson.avatarImage.src
-                : ""
-            }
-          />
-          <MDBMask />
-        </MDBView>
-        <div className="bg-elegant py-3 px-3">
-          <h4 className="mb-0">
-            {fetchedPerson?.firstName && <>{fetchedPerson.firstName}</>}{" "}
-            {fetchedPerson?.lastName && <>{fetchedPerson.lastName}</>}
-          </h4>
-          {fetchedPerson?.showLocalRanking && (
-            <p className="mb-1 text-muted">
-              <small>
-                <a href="#!">#3</a> in your region
-              </small>
-            </p>
-          )}
-          {fetchedPerson?.company && (
-            <>
-              {fetchedPerson?.showCompanyPublic && (
-                <small className="text-muted py-3">
-                  {fetchedPerson.company}
+        <div className="social">
+          <MDBView>
+            <img
+              className="img-fluid main-avatar"
+              src={
+                fetchedPerson?.avatarImage?.src
+                  ? fetchedPerson.avatarImage.src
+                  : ""
+              }
+            />
+            <MDBMask />
+          </MDBView>
+          <div className="bg-elegant py-3 px-3">
+            <h4 className="mb-0">
+              {fetchedPerson?.firstName && <>{fetchedPerson.firstName}</>}{" "}
+              {fetchedPerson?.lastName && <>{fetchedPerson.lastName}</>}
+            </h4>
+            {fetchedPerson?.showLocalRanking && (
+              <p className="mb-1 text-muted">
+                <small>
+                  <a href="#!">#3</a> in your region
                 </small>
-              )}
-            </>
-          )}
-          <div className="badges">
-            {fetchedPerson?.bids && (
+              </p>
+            )}
+            {fetchedPerson?.company && (
               <>
-                {fetchedPerson.bids.map((bid, i) => {
-                  switch (bid) {
-                    case "6403bf4d17b8472735a93b71a37e0bd0":
-                      return (
-                        <MDBBadge color="secondary-color" key={i}>
-                          Alpha
-                        </MDBBadge>
-                      );
-                  }
-                })}
+                {fetchedPerson?.showCompanyPublic && (
+                  <small className="text-muted py-3">
+                    {fetchedPerson.company}
+                  </small>
+                )}
               </>
             )}
-          </div>
-          {fetchedPerson?.status && (
-            <div className="d-flex pt-3">
-              {fetchedPerson.status && (
-                <div
-                  dangerouslySetInnerHTML={{
-                    __html: fetchedPerson.status,
-                  }}
-                />
+            <MDBRow>
+              <MDBCol
+                onClick={() =>
+                  this.setState({ showFollow: true, followType: "Followers" })
+                }
+              >
+                <strong>{this.state.fetchedPerson?.followedBy.length} </strong>
+                Followers
+              </MDBCol>
+              <MDBCol
+                onClick={() =>
+                  this.setState({ showFollow: true, followType: "Following" })
+                }
+              >
+                <strong>{this.state.fetchedPerson?.follows.length} </strong>
+                Following
+              </MDBCol>
+            </MDBRow>
+            <div className="badges">
+              {fetchedPerson?.bids && (
+                <>
+                  {fetchedPerson.bids.map((bid, i) => {
+                    switch (bid) {
+                      case "6403bf4d17b8472735a93b71a37e0bd0":
+                        return (
+                          <MDBBadge color="secondary-color" key={i}>
+                            Alpha
+                          </MDBBadge>
+                        );
+                    }
+                  })}
+                </>
               )}
-              <small className="px-1">{fetchedPerson.status}</small>
             </div>
-          )}
-        </div>
-        <div className="py-3 follow text-center">
-          <MDBBtn color="green" outline size="md">
-            <MDBIcon icon="plus-circle" className="mr-2" />
-            Follow
-          </MDBBtn>
-          <MDBBtn color="primary" outline size="md">
-            <MDBIcon icon="angle-up" className="mr-2" />
-            Upvote
-          </MDBBtn>
-        </div>
-        <div className="bg-light py-3 px-2">
-          <p>Connected accounts</p>
-          <div className="connected mt-2 text-muted">
-            <MDBIcon
-              fab
-              icon="github"
-              size="lg"
-              className={
-                fetchedPerson?.profiles.some(
-                  (e) => e.sourceType == "GITHUB" && e.isActive
-                )
-                  ? "active"
-                  : ""
-              }
-            />
-            <MDBIcon
-              fab
-              icon="gitlab"
-              size="lg"
-              className={
-                fetchedPerson?.profiles.some(
-                  (e) => e.sourceType == "GITLAB" && e.isActive
-                )
-                  ? "active"
-                  : ""
-              }
-            />
-            <MDBIcon
-              fab
-              icon="instagram"
-              size="lg"
-              className={
-                fetchedPerson?.profiles.some(
-                  (e) => e.sourceType == "INSTAGRAM" && e.isActive
-                )
-                  ? "active"
-                  : ""
-              }
-            />
+            {fetchedPerson?.status && (
+              <div className="d-flex pt-3">
+                {fetchedPerson.status && (
+                  <div
+                    dangerouslySetInnerHTML={{
+                      __html: fetchedPerson.status,
+                    }}
+                  />
+                )}
+                <small className="px-1">{fetchedPerson.status}</small>
+              </div>
+            )}
           </div>
-          <hr />
-          <p>Organisations</p>
-          {fetchedPerson && (
-            <div
-              className={
-                fetchedPerson.person.organisations.length >= 5
-                  ? "orgs text-center"
-                  : "orgs"
-              }
-            >
-              {fetchedPerson.person.organisations.length > 0 ? (
-                <>
-                  {fetchedPerson.person.organisations.map((org, i) => {
-                    return (
-                      <MDBPopover placement="top" popover clickable key={i}>
-                        <MDBBtn color="link">
-                          <div className="org">
-                            {org.avatarUrl ? (
-                              <img src={org.avatarUrl} alt={org.name} />
-                            ) : (
-                              <MDBIcon
-                                icon="sitemap"
-                                className="text-muted"
-                                size="lg"
-                              />
-                            )}
-                            {org.members && (
-                              <div className="tag">{org.members.length}</div>
-                            )}
-                          </div>
-                        </MDBBtn>
-                        <div>
-                          <MDBPopoverHeader>
-                            <div>
-                              {org.platformName}/
-                              <strong className="text-dark">{org.name}</strong>
+          <div className="py-3 follow text-center">
+            {this.isFollower() ? (
+              <MDBBtn
+                color="green"
+                outline
+                size="md"
+                onClick={() => this.unfollow(fetchedPerson.slug.substring(2))}
+              >
+                <MDBIcon icon="minus-circle" className="mr-2" />
+                Unfollow
+              </MDBBtn>
+            ) : (
+              <MDBBtn
+                color="green"
+                outline
+                size="md"
+                onClick={() => this.follow(fetchedPerson.slug.substring(2))}
+              >
+                <MDBIcon icon="plus-circle" className="mr-2" />
+                Follow
+              </MDBBtn>
+            )}
+
+            <MDBBtn color="primary" outline size="md">
+              <MDBIcon icon="angle-up" className="mr-2" />
+              Upvote
+            </MDBBtn>
+          </div>
+          <div className="bg-light py-3 px-2">
+            <p>Connected accounts</p>
+            <div className="connected mt-2 text-muted">
+              <MDBIcon
+                fab
+                icon="github"
+                size="lg"
+                className={
+                  fetchedPerson?.profiles.some(
+                    (e) => e.sourceType == "GITHUB" && e.isActive
+                  )
+                    ? "active"
+                    : ""
+                }
+              />
+              <MDBIcon
+                fab
+                icon="gitlab"
+                size="lg"
+                className={
+                  fetchedPerson?.profiles.some(
+                    (e) => e.sourceType == "GITLAB" && e.isActive
+                  )
+                    ? "active"
+                    : ""
+                }
+              />
+              <MDBIcon
+                fab
+                icon="instagram"
+                size="lg"
+                className={
+                  fetchedPerson?.profiles.some(
+                    (e) => e.sourceType == "INSTAGRAM" && e.isActive
+                  )
+                    ? "active"
+                    : ""
+                }
+              />
+            </div>
+            <hr />
+            <p>Organisations</p>
+            {fetchedPerson && (
+              <div
+                className={
+                  fetchedPerson.person.organisations.length >= 5
+                    ? "orgs text-center"
+                    : "orgs"
+                }
+              >
+                {fetchedPerson.person.organisations.length > 0 ? (
+                  <>
+                    {fetchedPerson.person.organisations.map((org, i) => {
+                      return (
+                        <MDBPopover placement="top" popover clickable key={i}>
+                          <MDBBtn color="link">
+                            <div className="org">
+                              {org.avatarUrl ? (
+                                <img src={org.avatarUrl} alt={org.name} />
+                              ) : (
+                                <MDBIcon
+                                  icon="sitemap"
+                                  className="text-muted"
+                                  size="lg"
+                                />
+                              )}
+                              {org.members && (
+                                <div className="tag">{org.members.length}</div>
+                              )}
                             </div>
-                            <div className="d-flex justify-content-between">
+                          </MDBBtn>
+                          <div>
+                            <MDBPopoverHeader>
                               <div>
-                                <small>
-                                  {org.members ? org.members.length : "Unknown"}{" "}
-                                  members
-                                </small>
+                                {org.platformName}/
+                                <strong className="text-dark">
+                                  {org.name}
+                                </strong>
                               </div>
-                              <div className="member-list">
+                              <div className="d-flex justify-content-between">
                                 <div>
-                                  {org.members &&
-                                    org.members.length > 0 &&
-                                    org.members.slice(0, 8).map((member, m) => {
-                                      return (
-                                        <MDBTooltip
-                                          domElement
-                                          tag="span"
-                                          placement="top"
-                                          key={m}
-                                        >
-                                          <a
-                                            href={member.url}
-                                            target="_blank"
-                                            rel="noopener noreferrer"
-                                          >
-                                            <img
-                                              src={member.avatarUrl}
-                                              alt={member.username}
-                                            />
-                                          </a>
-                                          <span>{member.username}</span>
-                                        </MDBTooltip>
-                                      );
-                                    })}
+                                  <small>
+                                    {org.members
+                                      ? org.members.length
+                                      : "Unknown"}{" "}
+                                    members
+                                  </small>
                                 </div>
-                                {org.members && org.members.length > 9 && (
-                                  <div className="text-muted text-right">
-                                    {org.platformName === "github" && (
-                                      <a
-                                        href={`https://www.github.com/orgs/${org.name}/people`}
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                      >
-                                        <small>Show all</small>
-                                      </a>
-                                    )}
+                                <div className="member-list">
+                                  <div>
+                                    {org.members &&
+                                      org.members.length > 0 &&
+                                      org.members
+                                        .slice(0, 8)
+                                        .map((member, m) => {
+                                          return (
+                                            <MDBTooltip
+                                              domElement
+                                              tag="span"
+                                              placement="top"
+                                              key={m}
+                                            >
+                                              <a
+                                                href={member.url}
+                                                target="_blank"
+                                                rel="noopener noreferrer"
+                                              >
+                                                <img
+                                                  src={member.avatarUrl}
+                                                  alt={member.username}
+                                                />
+                                              </a>
+                                              <span>{member.username}</span>
+                                            </MDBTooltip>
+                                          );
+                                        })}
                                   </div>
-                                )}
+                                  {org.members && org.members.length > 9 && (
+                                    <div className="text-muted text-right">
+                                      {org.platformName === "github" && (
+                                        <a
+                                          href={`https://www.github.com/orgs/${org.name}/people`}
+                                          target="_blank"
+                                          rel="noopener noreferrer"
+                                        >
+                                          <small>Show all</small>
+                                        </a>
+                                      )}
+                                    </div>
+                                  )}
+                                </div>
                               </div>
-                            </div>
-                          </MDBPopoverHeader>
-                          <MDBPopoverBody>
-                            <p className="my-2">{org.description}</p>
-                            <a
-                              href={org.url}
-                              target="_blank"
-                              rel="noopener noreferrer"
-                            >
-                              Show more
-                              <MDBIcon
-                                icon="external-link-alt"
-                                className="ml-1"
-                              />
-                            </a>
-                          </MDBPopoverBody>
+                            </MDBPopoverHeader>
+                            <MDBPopoverBody>
+                              <p className="my-2">{org.description}</p>
+                              <a
+                                href={org.url}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                              >
+                                Show more
+                                <MDBIcon
+                                  icon="external-link-alt"
+                                  className="ml-1"
+                                />
+                              </a>
+                            </MDBPopoverBody>
+                          </div>
+                        </MDBPopover>
+                      );
+                    })}
+                  </>
+                ) : (
+                  <small>
+                    {fetchedPerson.title} hasn't joined an organisation yet.
+                  </small>
+                )}
+              </div>
+            )}
+            {fetchedPerson.person.statistic?.languages?.length > 0 && (
+              <div className="px-1">
+                <hr />
+                <p>Top languages</p>
+                <LanguageChart
+                  languages={fetchedPerson.person.statistic.languages}
+                  height={10}
+                />
+                {fetchedPerson.person.statistic.languages
+                  .slice(
+                    0,
+                    this.state.limitLanguages
+                      ? 3
+                      : fetchedPerson.person.statistic.languages.length - 1
+                  )
+                  .map((language, i) => {
+                    return (
+                      <small className="text-left text-muted d-block" key={i}>
+                        <div className="d-flex justify-content-between">
+                          <div>
+                            <MDBIcon
+                              icon="square"
+                              className="pr-1"
+                              style={{
+                                color: language.color,
+                              }}
+                            />
+                            <span>{language.name}</span>
+                          </div>
+                          <span className="text-muted small">
+                            {language.share}%
+                          </span>
                         </div>
-                      </MDBPopover>
+                      </small>
                     );
                   })}
-                </>
-              ) : (
-                <small>
-                  {fetchedPerson.title} hasn't joined an organisation yet.
-                </small>
-              )}
-            </div>
-          )}
-          {fetchedPerson.person.statistic?.languages?.length > 0 && (
-            <div className="px-1">
-              <hr />
-              <p>Top languages</p>
-              <LanguageChart
-                languages={fetchedPerson.person.statistic.languages}
-                height={10}
-              />
-              {fetchedPerson.person.statistic.languages
-                .slice(
-                  0,
-                  this.state.limitLanguages
-                    ? 3
-                    : fetchedPerson.person.statistic.languages.length - 1
-                )
-                .map((language, i) => {
-                  return (
-                    <small className="text-left text-muted d-block" key={i}>
-                      <div className="d-flex justify-content-between">
-                        <div>
-                          <MDBIcon
-                            icon="square"
-                            className="pr-1"
-                            style={{
-                              color: language.color,
-                            }}
-                          />
-                          <span>{language.name}</span>
-                        </div>
-                        <span className="text-muted small">
-                          {language.share}%
-                        </span>
-                      </div>
-                    </small>
-                  );
-                })}
-              {this.state.limitLanguages &&
-              fetchedPerson.person.statistic.languages.length > 3 ? (
-                <p
-                  className="small clickable blue-text d-inline"
-                  onClick={() => this.setState({ limitLanguages: false })}
-                >
-                  Show more
-                </p>
-              ) : (
-                <p
-                  className="small clickable blue-text d-inline"
-                  onClick={() => this.setState({ limitLanguages: true })}
-                >
-                  Show less
-                </p>
-              )}
-            </div>
-          )}
+                {this.state.limitLanguages &&
+                fetchedPerson.person.statistic.languages.length > 3 ? (
+                  <p
+                    className="small clickable blue-text d-inline"
+                    onClick={() => this.setState({ limitLanguages: false })}
+                  >
+                    Show more
+                  </p>
+                ) : (
+                  <p
+                    className="small clickable blue-text d-inline"
+                    onClick={() => this.setState({ limitLanguages: true })}
+                  >
+                    Show less
+                  </p>
+                )}
+              </div>
+            )}
+          </div>
         </div>
-      </div>
         {this.state.showToContinue && (
           <ToContinueModal {...this.props} closeModal={this.handleModalClose} />
         )}

From 7541516a932fab439da3f33e7e6452551b051233 Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Thu, 10 Sep 2020 23:58:07 +0200
Subject: [PATCH 072/175] Fix settings bug

A settings bugs was fixed.
---
 src/components/pages/SettingsPage/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/pages/SettingsPage/index.jsx b/src/components/pages/SettingsPage/index.jsx
index b14c6ff..780f883 100644
--- a/src/components/pages/SettingsPage/index.jsx
+++ b/src/components/pages/SettingsPage/index.jsx
@@ -472,7 +472,7 @@ class SettingsPage extends React.Component {
                               <MDBSelectOption value="">
                                 Default
                               </MDBSelectOption>
-                              {loggedUser?.person?.tids.map((tid, i) => {
+                              {loggedUser?.person?.tids?.map((tid, i) => {
                                 let name = "Unnamed";
                                 switch (tid) {
                                   case "9d88bda4657dcf17581ee91dfe6ab2a3":

From 87780e684349350199a978edfa0e579b02231a41 Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Fri, 11 Sep 2020 00:01:36 +0200
Subject: [PATCH 073/175] Integrate movable pool

Now it is possible to reorganise your components.
---
 .../molecules/MovableBoundary/index.jsx       |  2 --
 .../organisms/tabs/OverviewTab/index.jsx      | 24 ++++++++++---------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/molecules/MovableBoundary/index.jsx b/src/components/molecules/MovableBoundary/index.jsx
index b7d0fd5..a3eed8b 100644
--- a/src/components/molecules/MovableBoundary/index.jsx
+++ b/src/components/molecules/MovableBoundary/index.jsx
@@ -62,8 +62,6 @@ class MovableBoundary extends React.Component {
       });
 
       indexArray = baseIndexArray;
-    } else {
-      indexArray = JSON.parse(indexArray);
     }
 
     this.setState({ indexArray });
diff --git a/src/components/organisms/tabs/OverviewTab/index.jsx b/src/components/organisms/tabs/OverviewTab/index.jsx
index 1b6ebfe..b6da1bc 100644
--- a/src/components/organisms/tabs/OverviewTab/index.jsx
+++ b/src/components/organisms/tabs/OverviewTab/index.jsx
@@ -27,6 +27,7 @@ import {
   ErrorBoundary,
 } from "../../../atoms";
 import { MovableBoundary } from "../../../molecules";
+import { updateSettings } from "../../../../store/actions/personActions";
 //#endregion
 
 //#region > Constant Variables
@@ -75,13 +76,15 @@ class OverviewTab extends React.Component {
     });
   };
 
-  // handleEditClick = (platformData) => {
-  //   if (this.state.edit) {
-  //     this.props.writeCache(platformData);
-  //   }
+  handleEditClick = (movablePool) => {
+    if (this.state.edit) {
+      console.log(movablePool);
 
-  //   this.setState({ edit: !this.state.edit });
-  // };
+      this.props.saveSettings({ movablePool: JSON.stringify(movablePool) });
+    }
+
+    this.setState({ edit: !this.state.edit });
+  };
 
   render() {
     const { fetchedPerson, sameOrigin } = this.props;
@@ -91,7 +94,6 @@ class OverviewTab extends React.Component {
     //   fetchedUser.platformData.user.movablePool = {};
     // }
 
-    const movablePool = {};
     const {
       currentStatistic,
       yearsStatistic,
@@ -117,7 +119,7 @@ class OverviewTab extends React.Component {
               <MDBBtn
                 color={this.state.edit ? "success" : "green"}
                 size="md"
-                // onClick={() => this.handleEditClick(platformData)}
+                onClick={() => this.handleEditClick(fetchedPerson.movablePool)}
               >
                 {this.state.edit ? (
                   <span>
@@ -131,7 +133,7 @@ class OverviewTab extends React.Component {
             </div>
           )}
           <MovableBoundary
-            pool={movablePool}
+            pool={fetchedPerson.movablePool}
             uid="overview"
             edit={this.state.edit}
             items={[
@@ -236,7 +238,7 @@ class OverviewTab extends React.Component {
               </>,
               <div className="interchange-charts">
                 <MovableBoundary
-                  pool={movablePool}
+                  pool={fetchedPerson.movablePool}
                   uid="contribtype"
                   edit={this.state.edit}
                   items={[
@@ -290,7 +292,7 @@ const mapStateToProps = (state) => ({
 
 const mapDispatchToProps = (dispatch) => {
   return {
-    writeCache: (platformData) => dispatch(platformData),
+    saveSettings: (nextSettings) => dispatch(updateSettings(nextSettings)),
   };
 };
 //#endregion

From 4037b661962903a456d276cf49889a7a49c254c4 Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Fri, 11 Sep 2020 00:14:04 +0200
Subject: [PATCH 074/175] Only render charts if statistics data is present

Now charts are only rendered if there is statistic data.
---
 src/components/organisms/tabs/OverviewTab/index.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/organisms/tabs/OverviewTab/index.jsx b/src/components/organisms/tabs/OverviewTab/index.jsx
index b6da1bc..fcb5b43 100644
--- a/src/components/organisms/tabs/OverviewTab/index.jsx
+++ b/src/components/organisms/tabs/OverviewTab/index.jsx
@@ -218,7 +218,7 @@ class OverviewTab extends React.Component {
                 )}
               </>,
               <>
-                {display3dCalendar && (
+                {display3dCalendar && currentStatistic && yearsStatistic && (
                   <Calendar3D
                     currentStatistic={currentStatistic}
                     yearsStatistic={yearsStatistic}
@@ -227,7 +227,7 @@ class OverviewTab extends React.Component {
                 )}
               </>,
               <>
-                {display2dCalendar && (
+                {display2dCalendar && currentStatistic && yearsStatistic && (
                   <Calendar2D
                     currentStatistic={currentStatistic}
                     yearsStatistic={yearsStatistic}
@@ -244,7 +244,7 @@ class OverviewTab extends React.Component {
                   items={[
                     <>
                       <p className="lead">Contribution Types</p>
-                      {true && (
+                      {true && currentStatistic && yearsStatistic && (
                         <div className="mt-5">
                           <ContribRadar
                             currentStatistic={currentStatistic}

From 342945417a6397ac836a324177a7b60ea8ba1566 Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Fri, 11 Sep 2020 01:58:21 +0200
Subject: [PATCH 075/175] Hide diagram labels if diagrams are not visible

The charts are not displayed if the required data
is not available.
---
 .../organisms/tabs/OverviewTab/index.jsx      | 36 ++++++++++---------
 1 file changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/components/organisms/tabs/OverviewTab/index.jsx b/src/components/organisms/tabs/OverviewTab/index.jsx
index fcb5b43..bbb1758 100644
--- a/src/components/organisms/tabs/OverviewTab/index.jsx
+++ b/src/components/organisms/tabs/OverviewTab/index.jsx
@@ -243,9 +243,9 @@ class OverviewTab extends React.Component {
                   edit={this.state.edit}
                   items={[
                     <>
-                      <p className="lead">Contribution Types</p>
                       {true && currentStatistic && yearsStatistic && (
                         <div className="mt-5">
+                          <p className="lead">Contribution Types</p>
                           <ContribRadar
                             currentStatistic={currentStatistic}
                             yearsStatistic={yearsStatistic}
@@ -255,21 +255,25 @@ class OverviewTab extends React.Component {
                       )}
                     </>,
                     <>
-                      <p className="lead">
-                        Activity
-                        <MDBIcon
-                          icon="angle-double-up"
-                          className="green-text ml-2"
-                          size="md"
-                        />
-                      </p>
-                      <p className="text-muted mb-0">Weekly overview</p>
-                      <LatestActivity
-                        currentStatistic={currentStatistic}
-                        yearsStatistic={yearsStatistic}
-                        year={this.state.selectedYearIndex}
-                        activity={this.state.activity}
-                      />
+                      {currentStatistic && yearsStatistic && (
+                        <div>
+                          <p className="lead">
+                            Activity
+                            <MDBIcon
+                              icon="angle-double-up"
+                              className="green-text ml-2"
+                              size="md"
+                            />
+                          </p>
+                          <p className="text-muted mb-0">Weekly overview</p>
+                          <LatestActivity
+                            currentStatistic={currentStatistic}
+                            yearsStatistic={yearsStatistic}
+                            year={this.state.selectedYearIndex}
+                            activity={this.state.activity}
+                          />
+                        </div>
+                      )}
                     </>,
                   ]}
                   movementAxis="x"

From 02a2e930426e5f094e90c9d475ee5e3d9b5dd235 Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Fri, 11 Sep 2020 02:01:22 +0200
Subject: [PATCH 076/175] Add more settings

More settings have been added to the settings page and
were also applied to the overview tab.
The settings page has been improved by moving the display
settings to "customization" tab.
Display settings related to github and gitlab are disabled
when there is no github or gitlab profile present.
---
 .../organisms/tabs/OverviewTab/index.jsx      |  68 +++--
 src/components/pages/SettingsPage/index.jsx   | 255 ++++++++++++++----
 2 files changed, 241 insertions(+), 82 deletions(-)

diff --git a/src/components/organisms/tabs/OverviewTab/index.jsx b/src/components/organisms/tabs/OverviewTab/index.jsx
index bbb1758..faad8c5 100644
--- a/src/components/organisms/tabs/OverviewTab/index.jsx
+++ b/src/components/organisms/tabs/OverviewTab/index.jsx
@@ -104,6 +104,11 @@ class OverviewTab extends React.Component {
       displayProgrammingLanguages,
       display2dCalendar,
       display3dCalendar,
+      displayContributionTypes,
+      displayWeekActivity,
+      displayImageGallery,
+      displayVideoGallery,
+      displayMusicGallery,
     } = fetchedPerson;
 
     console.log(display2dCalendar, display3dCalendar);
@@ -138,7 +143,7 @@ class OverviewTab extends React.Component {
             edit={this.state.edit}
             items={[
               <>
-                {languages && (
+                {languages && displayProgrammingLanguages && (
                   <MDBRow className="text-center text-md-left mb-4">
                     {languages?.map((language, i) => {
                       if (i < 6) {
@@ -243,37 +248,42 @@ class OverviewTab extends React.Component {
                   edit={this.state.edit}
                   items={[
                     <>
-                      {true && currentStatistic && yearsStatistic && (
-                        <div className="mt-5">
-                          <p className="lead">Contribution Types</p>
-                          <ContribRadar
-                            currentStatistic={currentStatistic}
-                            yearsStatistic={yearsStatistic}
-                            year={this.state.selectedYearIndex}
-                          />
-                        </div>
-                      )}
+                      {true &&
+                        currentStatistic &&
+                        yearsStatistic &&
+                        displayContributionTypes && (
+                          <div className="mt-5">
+                            <p className="lead">Contribution Types</p>
+                            <ContribRadar
+                              currentStatistic={currentStatistic}
+                              yearsStatistic={yearsStatistic}
+                              year={this.state.selectedYearIndex}
+                            />
+                          </div>
+                        )}
                     </>,
                     <>
-                      {currentStatistic && yearsStatistic && (
-                        <div>
-                          <p className="lead">
-                            Activity
-                            <MDBIcon
-                              icon="angle-double-up"
-                              className="green-text ml-2"
-                              size="md"
+                      {currentStatistic &&
+                        yearsStatistic &&
+                        displayWeekActivity && (
+                          <div>
+                            <p className="lead">
+                              Activity
+                              <MDBIcon
+                                icon="angle-double-up"
+                                className="green-text ml-2"
+                                size="md"
+                              />
+                            </p>
+                            <p className="text-muted mb-0">Weekly overview</p>
+                            <LatestActivity
+                              currentStatistic={currentStatistic}
+                              yearsStatistic={yearsStatistic}
+                              year={this.state.selectedYearIndex}
+                              activity={this.state.activity}
                             />
-                          </p>
-                          <p className="text-muted mb-0">Weekly overview</p>
-                          <LatestActivity
-                            currentStatistic={currentStatistic}
-                            yearsStatistic={yearsStatistic}
-                            year={this.state.selectedYearIndex}
-                            activity={this.state.activity}
-                          />
-                        </div>
-                      )}
+                          </div>
+                        )}
                     </>,
                   ]}
                   movementAxis="x"
diff --git a/src/components/pages/SettingsPage/index.jsx b/src/components/pages/SettingsPage/index.jsx
index b73e2fc..24c0365 100644
--- a/src/components/pages/SettingsPage/index.jsx
+++ b/src/components/pages/SettingsPage/index.jsx
@@ -29,6 +29,7 @@ import {
   MDBBtn,
   MDBListGroup,
   MDBListGroupItem,
+  MDBBadge,
 } from "mdbreact";
 //> Redux
 // Allows to React components read data from a Redux store, and dispatch actions
@@ -91,6 +92,11 @@ class SettingsPage extends React.Component {
         bio,
         display2dCalendar,
         display3dCalendar,
+        displayContributionTypes,
+        displayWeekActivity,
+        displayImageGallery,
+        displayVideoGallery,
+        displayMusicGallery,
         displayEmail,
         displayProgrammingLanguages,
         displayRanking,
@@ -112,6 +118,11 @@ class SettingsPage extends React.Component {
           bio,
           display2dCalendar,
           display3dCalendar,
+          displayContributionTypes,
+          displayWeekActivity,
+          displayImageGallery,
+          displayVideoGallery,
+          displayMusicGallery,
           displayEmail,
           displayProgrammingLanguages,
           displayRanking,
@@ -194,6 +205,14 @@ class SettingsPage extends React.Component {
     }
   }
 
+  checkProfileTypeExists = (sourceType) => {
+    return this.state.person.profiles.some(
+      (e) => e.sourceType === sourceType && e.isActive
+    )
+      ? true
+      : false;
+  };
+
   render() {
     const { loggedUser } = this.props;
     const { person, activeItem } = this.state;
@@ -414,59 +433,6 @@ class SettingsPage extends React.Component {
                       </small>
                     </div>
                     <hr />
-                    <MDBRow>
-                      <MDBCol md="12">
-                        <MDBInput
-                          label={<p>Show local ranking</p>}
-                          filled
-                          type="checkbox"
-                          id="checkbox2"
-                          name="displayRanking"
-                          onChange={this.handleChange}
-                          checked={person.displayRanking}
-                          containerClass="mr-5"
-                        />
-                      </MDBCol>
-                      <MDBCol md="12">
-                        <MDBInput
-                          label={<p>Show top programming languages</p>}
-                          filled
-                          type="checkbox"
-                          id="checkbox3"
-                          name="displayProgrammingLanguages"
-                          onChange={this.handleChange}
-                          checked={person.displayProgrammingLanguages}
-                          containerClass="mr-5"
-                        />
-                      </MDBCol>
-                      <MDBCol md="12">
-                        <hr />
-                      </MDBCol>
-                      <MDBCol md="12">
-                        <MDBInput
-                          label={<p>Show 3D work activity diagram</p>}
-                          filled
-                          type="checkbox"
-                          id="checkbox4"
-                          name="display3dCalendar"
-                          onChange={this.handleChange}
-                          checked={person.display3dCalendar}
-                          containerClass="mr-5"
-                        />
-                      </MDBCol>
-                      <MDBCol md="12">
-                        <MDBInput
-                          label={<p>Show 2D work activity diagram</p>}
-                          filled
-                          type="checkbox"
-                          id="checkbox5"
-                          name="display2dCalendar"
-                          onChange={this.handleChange}
-                          checked={person.display2dCalendar}
-                          containerClass="mr-5"
-                        />
-                      </MDBCol>
-                    </MDBRow>
                   </MDBTabPane>
                   <MDBTabPane tabId={1}>
                     <h5>Connections</h5>
@@ -587,6 +553,189 @@ class SettingsPage extends React.Component {
                           </MDBSelect>
                         </MDBCol>
                       </MDBRow>
+                      <p className="font-weight-bold">Display settings</p>
+                      <MDBRow>
+                        <MDBCol md="12">
+                          <MDBInput
+                            label={<p>Show local ranking</p>}
+                            filled
+                            type="checkbox"
+                            id="checkbox2"
+                            name="displayRanking"
+                            onChange={this.handleChange}
+                            checked={person.displayRanking}
+                            containerClass="mr-5"
+                          />
+                        </MDBCol>
+                        <MDBCol md="12">
+                          <MDBInput
+                            label={<p>Show music gallery</p>}
+                            filled
+                            type="checkbox"
+                            id="checkbox3"
+                            name="displayMusicGallery"
+                            onChange={this.handleChange}
+                            checked={person.displayMusicGallery}
+                            containerClass="mr-5"
+                          />
+                        </MDBCol>
+                        <MDBCol md="12">
+                          <hr />
+                        </MDBCol>
+
+                        {!this.checkProfileTypeExists("GITHUB") &&
+                          !this.checkProfileTypeExists("GITLAB") && (
+                            <MDBBadge pill color="info">
+                              <i class="fas fa-question-circle"></i> Looks like
+                              no profiles are present. You can add one
+                              <a href={""}> here!</a>
+                            </MDBBadge>
+                          )}
+
+                        <span class="badge badge-info pill"></span>
+                        <MDBCol md="12">
+                          <MDBInput
+                            label={<p>Show top programming languages</p>}
+                            filled
+                            type="checkbox"
+                            id="checkbox4"
+                            name="displayProgrammingLanguages"
+                            onChange={this.handleChange}
+                            checked={
+                              this.checkProfileTypeExists("GITHUB") ||
+                              this.checkProfileTypeExists("GITLAB")
+                                ? person.displayProgrammingLanguages
+                                : false
+                            }
+                            containerClass="mr-5"
+                            disabled={
+                              this.checkProfileTypeExists("GITHUB") ||
+                              this.checkProfileTypeExists("GITLAB")
+                                ? false
+                                : true
+                            }
+                          />
+                        </MDBCol>
+                        <MDBCol md="12">
+                          <MDBInput
+                            label={<p>Show 3D work activity diagram</p>}
+                            filled
+                            type="checkbox"
+                            id="checkbox5"
+                            name="display3dCalendar"
+                            onChange={this.handleChange}
+                            checked={
+                              this.checkProfileTypeExists("GITHUB") ||
+                              this.checkProfileTypeExists("GITLAB")
+                                ? person.display3dCalendar
+                                : false
+                            }
+                            containerClass="mr-5"
+                            disabled={
+                              this.checkProfileTypeExists("GITHUB") ||
+                              this.checkProfileTypeExists("GITLAB")
+                                ? false
+                                : true
+                            }
+                          />
+                        </MDBCol>
+                        <MDBCol md="12">
+                          <MDBInput
+                            label={<p>Show 2D work activity diagram</p>}
+                            filled
+                            type="checkbox"
+                            id="checkbox6"
+                            name="display2dCalendar"
+                            onChange={this.handleChange}
+                            checked={
+                              this.checkProfileTypeExists("GITHUB") ||
+                              this.checkProfileTypeExists("GITLAB")
+                                ? person.display2dCalendar
+                                : false
+                            }
+                            containerClass="mr-5"
+                            disabled={
+                              this.checkProfileTypeExists("GITHUB") ||
+                              this.checkProfileTypeExists("GITLAB")
+                                ? false
+                                : true
+                            }
+                          />
+                        </MDBCol>
+                        <MDBCol md="12">
+                          <MDBInput
+                            label={<p>Show contribution type diagram</p>}
+                            filled
+                            type="checkbox"
+                            id="checkbox7"
+                            name="displayContributionTypes"
+                            onChange={this.handleChange}
+                            checked={
+                              this.checkProfileTypeExists("GITHUB") ||
+                              this.checkProfileTypeExists("GITLAB")
+                                ? person.displayContributionTypes
+                                : false
+                            }
+                            containerClass="mr-5"
+                            disabled={
+                              this.checkProfileTypeExists("GITHUB") ||
+                              this.checkProfileTypeExists("GITLAB")
+                                ? false
+                                : true
+                            }
+                          />
+                        </MDBCol>
+                        <MDBCol md="12">
+                          <MDBInput
+                            label={<p>Show week activity diagram</p>}
+                            filled
+                            type="checkbox"
+                            id="checkbox8"
+                            name="displayWeekActivity"
+                            onChange={this.handleChange}
+                            checked={
+                              this.checkProfileTypeExists("GITHUB") ||
+                              this.checkProfileTypeExists("GITLAB")
+                                ? person.displayWeekActivity
+                                : false
+                            }
+                            containerClass="mr-5"
+                            disabled={
+                              this.checkProfileTypeExists("GITHUB") ||
+                              this.checkProfileTypeExists("GITLAB")
+                                ? false
+                                : true
+                            }
+                          />
+                        </MDBCol>
+                        <MDBCol md="12">
+                          <hr />
+                        </MDBCol>
+                        <MDBCol md="12">
+                          <MDBInput
+                            label={<p>Show image gallery</p>}
+                            filled
+                            type="checkbox"
+                            id="checkbox9"
+                            name="displayImageGallery"
+                            onChange={this.handleChange}
+                            checked={person.displayImageGallery}
+                            containerClass="mr-5"
+                          />
+                        </MDBCol>
+                        <MDBCol md="12">
+                          <MDBInput
+                            label={<p>Show video gallery</p>}
+                            filled
+                            type="checkbox"
+                            id="checkbox10"
+                            name="displayVideoGallery"
+                            onChange={this.handleChange}
+                            checked={person.displayVideoGallery}
+                            containerClass="mr-5"
+                          />
+                        </MDBCol>
+                      </MDBRow>
                     </div>
                   </MDBTabPane>
                   <MDBTabPane tabId={3}>

From f9e738add67d780a18c280b956c328f3d30f9d4d Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Fri, 11 Sep 2020 02:33:13 +0200
Subject: [PATCH 077/175] First attempt to fix company page

First data of a enterprise is displayed now.
---
 src/components/pages/CompanyPage/index.jsx | 380 ++++++++++-----------
 1 file changed, 171 insertions(+), 209 deletions(-)

diff --git a/src/components/pages/CompanyPage/index.jsx b/src/components/pages/CompanyPage/index.jsx
index 501949b..6983785 100644
--- a/src/components/pages/CompanyPage/index.jsx
+++ b/src/components/pages/CompanyPage/index.jsx
@@ -80,21 +80,24 @@ const TAB_ITEMS = [
 /** @class This component displays pipelines */
 class Page extends React.Component {
   state = {
-    general: undefined,
-    users: undefined,
-    projects: undefined,
     activeItem: 0,
   };
 
   componentDidMount = () => {
     // Retrieve Page
     // this.props.getGeneral("schettn");
+    const { match } = this.props;
+    const enterpriseName = match?.params?.name;
+
+    if (enterpriseName) {
+      this.props.getGeneral(enterpriseName);
+    }
   };
 
   componentDidUpdate = () => {
     // Check if there are no current pipelines set
     // if (this.props.page && !this.state.page) {
-    //   this.setState({
+    //   this.setState({/
     //     page: this.props.page.data,
     //   });
     // }
@@ -144,227 +147,186 @@ class Page extends React.Component {
   };
 
   render() {
-    // const { page } = this.state;
+    const { general, users, projects } = this.props;
 
     // console.log("PAGE", page);
 
     // Enterprise data
     // const enterprise = page && page.enterprise;
 
-    return <h1>Hi</h1>;
-
-    // return (
-    //   <MDBContainer id="company">
-    //     {page ? (
-    //       <MDBRow>
-    //         <MDBCol lg="12">
-    //           <MDBCard>
-    //             <MDBCardBody>
-    //               <MDBRow className="d-flex align-items-center">
-    //                 <MDBCol lg="2">
-    //                   <img
-    //                     src="https://www.htl-villach.at/typo3conf/ext/htl_villach/Resources/Public/Images/htl_logo_box.svg"
-    //                     alt="Company logo"
-    //                     className="img-fluid"
-    //                   />
-    //                 </MDBCol>
-    //                 <MDBCol lg="10">
-    //                   <div className="d-flex justify-content-space-between">
-    //                     <div>
-    //                       <p className="lead font-weight-bold mb-1">
-    //                         {enterprise.company.name}
-    //                       </p>
-    //                       <p className="text-muted mb-3">
-    //                         {enterprise.company.description}
-    //                       </p>
-    //                     </div>
-    //                     <div className="d-flex">
-    //                       <MDBBtn
-    //                         color="green"
-    //                         size="md"
-    //                         onClick={() => this.setState({ reAuth: true })}
-    //                       >
-    //                         Publish
-    //                       </MDBBtn>
-    //                     </div>
-    //                   </div>
-    //                   <div>
-    //                     {enterprise.company.isRecruiting && (
-    //                       <MDBBadge color="indigo">
-    //                         <MDBIcon icon="users" />
-    //                         Recruiting
-    //                       </MDBBadge>
-    //                     )}
-    //                     {enterprise.company.employees >= 1 &&
-    //                       enterprise.company.employees < 5 && (
-    //                         <MDBBadge color="primary">1-5 Employees</MDBBadge>
-    //                       )}
-    //                     {enterprise.company.employees >= 5 &&
-    //                       enterprise.company.employees < 20 && (
-    //                         <MDBBadge color="primary">5-20 Employees</MDBBadge>
-    //                       )}
-    //                     {enterprise.company.employees >= 20 &&
-    //                       enterprise.company.employees < 100 && (
-    //                         <MDBBadge color="primary">
-    //                           20-100 Employees
-    //                         </MDBBadge>
-    //                       )}
-    //                     {enterprise.company.employees >= 100 && (
-    //                       <MDBBadge color="primary">100+ Employees</MDBBadge>
-    //                     )}
-    //                     {enterprise.company.isOpenSource && (
-    //                       <a
-    //                         href={enterprise.company.openSourceUrl}
-    //                         target="_blank"
-    //                         rel="noopener noreferrer"
-    //                       >
-    //                         <MDBBadge color="elegant-color">
-    //                           <MDBIcon fab icon="github" />
-    //                           Open source
-    //                         </MDBBadge>
-    //                       </a>
-    //                     )}
-    //                   </div>
-    //                 </MDBCol>
-    //               </MDBRow>
-    //             </MDBCardBody>
-    //           </MDBCard>
-    //         </MDBCol>
-    //         <MDBCol lg="12">
-    //           <MDBNav tabs className="d-flex justify-content-between">
-    //             <div className="d-flex">
-    //               {TAB_ITEMS.map((tab, t) => {
-    //                 return (
-    //                   <MDBNavItem key={t}>
-    //                     <MDBNavLink
-    //                       link
-    //                       to="#"
-    //                       active={this.state.activeItem === t}
-    //                       onClick={(e) => this.toggle(e, t)}
-    //                       role="tab"
-    //                     >
-    //                       <MDBIcon icon={tab.icon} />
-    //                       {tab.name}
-    //                     </MDBNavLink>
-    //                   </MDBNavItem>
-    //                 );
-    //               })}
-    //             </div>
-    //             <div>
-    //               {(this.state.activeItem === 0 ||
-    //                 this.state.activeItem === 1 ||
-    //                 this.state.activeItem === 2) && (
-    //                 <input
-    //                   type="text"
-    //                   className="form-control"
-    //                   placeholder="Search"
-    //                   onChange={(e) =>
-    //                     this.setState({ globalFilter: e.target.value })
-    //                   }
-    //                 />
-    //               )}
-    //             </div>
-    //           </MDBNav>
-    //           <MDBTabContent
-    //             className="card"
-    //             activeItem={this.state.activeItem}
-    //           >
-    //             {this.state.activeItem === 0 && (
-    //               <MDBTabPane tabId={0} role="tabpanel">
-    //                 <PageOverview
-    //                   filter={this.state.globalFilter}
-    //                   feed={enterprise.company?.enterpriseContributionFeed}
-    //                   mergedFeed={
-    //                     enterprise.company?.mergedEnterpriseContributionFeed
-    //                   }
-    //                 />
-    //               </MDBTabPane>
-    //             )}
-    //             {this.state.activeItem === 1 && (
-    //               <MDBTabPane tabId={1} role="tabpanel">
-    //                 <PageProjects
-    //                   filter={this.state.globalFilter}
-    //                   navigateTo={this.props.navigateTo}
-    //                   projects={page.projects}
-    //                 />
-    //               </MDBTabPane>
-    //             )}
-    //             {this.state.activeItem === 2 && (
-    //               <MDBTabPane tabId={2} role="tabpanel">
-    //                 <PageUsers
-    //                   filter={this.state.globalFilter}
-    //                   navigateTo={this.props.navigateTo}
-    //                   users={page.users}
-    //                 />
-    //               </MDBTabPane>
-    //             )}
-    //             {this.state.activeItem === 3 && (
-    //               <MDBTabPane tabId={3} role="tabpanel">
-    //                 <PageImprint />
-    //               </MDBTabPane>
-    //             )}
-    //           </MDBTabContent>
-    //         </MDBCol>
-    //       </MDBRow>
-    //     ) : (
-    //       <div className="flex-center">
-    //         <MDBSpinner />
-    //       </div>
-    //     )}
-    //     {this.state.reAuth && (
-    //       <MDBModal isOpen={true} toggle={this.toggleModal} size="sm">
-    //         <MDBModalBody>
-    //           <p>To continue, type an administrator password.</p>
-    //           {this.state.reAuthError && (
-    //             <MDBAlert color="danger">
-    //               The password you have entered is wrong.
-    //             </MDBAlert>
-    //           )}
-    //           <input
-    //             type="password"
-    //             className="form-control"
-    //             value={this.state.password}
-    //             onChange={(e) => this.setState({ password: e.target.value })}
-    //           />
-    //           <MDBBtn
-    //             color="elegant"
-    //             size="md"
-    //             onClick={async () => {
-    //               const result = await this.props.authenticate(
-    //                 this.state.password
-    //               );
-
-    //               if (result) {
-    //                 this.setState({ reAuth: false }, () =>
-    //                   this.props.publishenterprise(
-    //                     enterprise.company.connectorHandle
-    //                   )
-    //                 );
-    //               } else {
-    //                 this.setState({ reAuthError: true });
-    //               }
-    //             }}
-    //           >
-    //             Authenticate
-    //           </MDBBtn>
-    //         </MDBModalBody>
-    //       </MDBModal>
-    //     )}
-    //   </MDBContainer>
-    // );
+    return (
+      <MDBContainer id="company">
+        {general ? (
+          <MDBRow>
+            <MDBCol lg="12">
+              <MDBCard>
+                <MDBCardBody>
+                  <MDBRow className="d-flex align-items-center">
+                    <MDBCol lg="2">
+                      <img
+                        src="https://www.htl-villach.at/typo3conf/ext/htl_villach/Resources/Public/Images/htl_logo_box.svg"
+                        alt="Company logo"
+                        className="img-fluid"
+                      />
+                    </MDBCol>
+                    <MDBCol lg="10">
+                      <div className="d-flex justify-content-space-between">
+                        <div>
+                          <p className="lead font-weight-bold mb-1">
+                            {general.name}
+                          </p>
+                          <p className="text-muted mb-3">
+                            {general.description}
+                          </p>
+                        </div>
+                      </div>
+                      <div>
+                        {/* {general.company.isRecruiting && (
+                          <MDBBadge color="indigo">
+                            <MDBIcon icon="users" />
+                            Recruiting
+                          </MDBBadge>
+                        )}
+                        {enterprise.company.employees >= 1 &&
+                          enterprise.company.employees < 5 && (
+                            <MDBBadge color="primary">1-5 Employees</MDBBadge>
+                          )}
+                        {enterprise.company.employees >= 5 &&
+                          enterprise.company.employees < 20 && (
+                            <MDBBadge color="primary">5-20 Employees</MDBBadge>
+                          )}
+                        {enterprise.company.employees >= 20 &&
+                          enterprise.company.employees < 100 && (
+                            <MDBBadge color="primary">
+                              20-100 Employees
+                            </MDBBadge>
+                          )}
+                        {enterprise.company.employees >= 100 && (
+                          <MDBBadge color="primary">100+ Employees</MDBBadge>
+                        )}
+                        {enterprise.company.isOpenSource && (
+                          <a
+                            href={enterprise.company.openSourceUrl}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                          >
+                            <MDBBadge color="elegant-color">
+                              <MDBIcon fab icon="github" />
+                              Open source
+                            </MDBBadge>
+                          </a>
+                        )} */}
+                      </div>
+                    </MDBCol>
+                  </MDBRow>
+                </MDBCardBody>
+              </MDBCard>
+            </MDBCol>
+            <MDBCol lg="12">
+              <MDBNav tabs className="d-flex justify-content-between">
+                <div className="d-flex">
+                  {TAB_ITEMS.map((tab, t) => {
+                    return (
+                      <MDBNavItem key={t}>
+                        <MDBNavLink
+                          link
+                          to="#"
+                          active={this.state.activeItem === t}
+                          onClick={(e) => this.toggle(e, t)}
+                          role="tab"
+                        >
+                          <MDBIcon icon={tab.icon} />
+                          {tab.name}
+                        </MDBNavLink>
+                      </MDBNavItem>
+                    );
+                  })}
+                </div>
+                <div>
+                  {(this.state.activeItem === 0 ||
+                    this.state.activeItem === 1 ||
+                    this.state.activeItem === 2) && (
+                    <input
+                      type="text"
+                      className="form-control"
+                      placeholder="Search"
+                      onChange={(e) =>
+                        this.setState({ globalFilter: e.target.value })
+                      }
+                    />
+                  )}
+                </div>
+              </MDBNav>
+              <MDBTabContent
+                className="card"
+                activeItem={this.state.activeItem}
+              >
+                {this.state.activeItem === 0 && (
+                  <MDBTabPane tabId={0} role="tabpanel">
+                    <PageOverview
+                      filter={this.state.globalFilter}
+                      feed={general.enterpriseContributionFeed}
+                      mergedFeed={general.mergedEnterpriseContributionFeed}
+                    />
+                  </MDBTabPane>
+                )}
+                {this.state.activeItem === 1 && (
+                  <MDBTabPane tabId={1} role="tabpanel">
+                    {projects ? (
+                      <PageProjects
+                        filter={this.state.globalFilter}
+                        navigateTo={this.props.navigateTo}
+                        projects={projects}
+                      />
+                    ) : (
+                      <h1>Loading</h1>
+                    )}
+                  </MDBTabPane>
+                )}
+                {this.state.activeItem === 2 && (
+                  <MDBTabPane tabId={2} role="tabpanel">
+                    {users ? (
+                      <PageUsers
+                        filter={this.state.globalFilter}
+                        navigateTo={this.props.navigateTo}
+                        users={users}
+                      />
+                    ) : (
+                      <h1>Loading</h1>
+                    )}
+                  </MDBTabPane>
+                )}
+                {this.state.activeItem === 3 && (
+                  <MDBTabPane tabId={3} role="tabpanel">
+                    <PageImprint />
+                  </MDBTabPane>
+                )}
+              </MDBTabContent>
+            </MDBCol>
+          </MDBRow>
+        ) : (
+          <div className="text-center my-5 py-5">
+            <div className="spinner-grow text-success" role="status">
+              <span className="sr-only">Loading...</span>
+            </div>
+          </div>
+        )}
+      </MDBContainer>
+    );
   }
 }
 //#endregion
 
 //#region > Redux Mapping
 const mapStateToProps = (state) => ({
-  // user: state.user.user,
-  // page: state.enterprise.page,
+  general: state.enterprise.page.general,
+  projects: state.enterprise.page.projects,
+  users: state.enterprise.page.users,
 });
 
 const mapDispatchToProps = (dispatch) => {
   return {
-    // getGeneral: (handle) => dispatch(getGeneral(handle)),
+    getGeneral: (handle) => dispatch(getGeneral(handle)),
     // getProjects: (handle) => dispatch(getProjects(handle)),
     // getUsers: (handle) => dispatch(getUsers(handle)),
   };

From 61e3739f98e1d60239234d6ea8020364ed1f6e35 Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Fri, 11 Sep 2020 05:17:35 +0200
Subject: [PATCH 078/175] Fix person actions

The like and unlike actions were fixed.
---
 src/store/actions/personActions.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/store/actions/personActions.js b/src/store/actions/personActions.js
index 4d06e96..b6d4943 100644
--- a/src/store/actions/personActions.js
+++ b/src/store/actions/personActions.js
@@ -419,7 +419,7 @@ const like = (receiverPersonName) => {
       const state = getState();
       const personName = extractNameFromPersonSlug(state.user.user.person.slug);
 
-      const res = await INTEL_SNEK.social.follow({
+      const res = await INTEL_SNEK.social.like({
         invoker: personName,
         receiver: receiverPersonName,
       });
@@ -449,7 +449,7 @@ const unlike = (receiverPersonName) => {
       const state = getState();
       const personName = extractNameFromPersonSlug(state.user.user.person.slug);
 
-      const res = await INTEL_SNEK.social.unfollow({
+      const res = await INTEL_SNEK.social.unlike({
         invoker: personName,
         receiver: receiverPersonName,
       });

From e054255fd5bb41dc71f346168f2d2a3c737fda7a Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Fri, 11 Sep 2020 05:18:21 +0200
Subject: [PATCH 079/175] Update follow modal

The follow modal was updated to deny unauthenticated actions.
---
 .../molecules/modals/FollowModal/index.jsx    | 28 +++++++++++--------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/components/molecules/modals/FollowModal/index.jsx b/src/components/molecules/modals/FollowModal/index.jsx
index 902b10c..d87e704 100644
--- a/src/components/molecules/modals/FollowModal/index.jsx
+++ b/src/components/molecules/modals/FollowModal/index.jsx
@@ -46,20 +46,24 @@ class FollowModal extends React.Component {
   };
 
   follow = (personToFollow) => {
-    this.props.follow(personToFollow).then(() => {
-      let loggedUser = this.props.loggedUser;
-      let follows = [];
+    if (!this.props.loggedUser?.anonymous) {
+      this.props.follow(personToFollow).then(() => {
+        let loggedUser = this.props.loggedUser;
+        let follows = [];
 
-      for (let count in loggedUser.person.follows) {
-        follows.push(loggedUser.person.follows[count]);
-      }
+        for (let count in loggedUser.person.follows) {
+          follows.push(loggedUser.person.follows[count]);
+        }
 
-      follows.push({ slug: "p-" + personToFollow });
+        follows.push({ slug: "p-" + personToFollow });
 
-      loggedUser.person.follows = follows;
-      console.log("1");
-      this.setState({ loggedUser });
-    });
+        loggedUser.person.follows = follows;
+
+        this.setState({ loggedUser });
+      });
+    } else {
+      this.props.toContinue();
+    }
   };
 
   unfollow = (personToUnfollow) => {
@@ -74,7 +78,7 @@ class FollowModal extends React.Component {
       }
 
       loggedUser.person.follows = follows;
-      console.log("1");
+
       this.setState({ loggedUser });
     });
   };

From eab378f1fba514db84d40309c0e3aa4e5bd6c7f6 Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Fri, 11 Sep 2020 05:19:39 +0200
Subject: [PATCH 080/175] Add likes modal styles

The style sheet for the likes modal was added.
---
 .../molecules/modals/LikesModal/likes.scss          | 13 +++++++++++++
 1 file changed, 13 insertions(+)
 create mode 100644 src/components/molecules/modals/LikesModal/likes.scss

diff --git a/src/components/molecules/modals/LikesModal/likes.scss b/src/components/molecules/modals/LikesModal/likes.scss
new file mode 100644
index 0000000..18b764d
--- /dev/null
+++ b/src/components/molecules/modals/LikesModal/likes.scss
@@ -0,0 +1,13 @@
+#likes {
+  img {
+    width: 4rem;
+    height: 4rem;
+    margin-bottom: 1rem;
+    border-radius: 50%;
+  }
+}
+
+/**
+ * SPDX-License-Identifier: (EUPL-1.2)
+ * Copyright © 2019-2020 Simon Prast
+ */

From 3868b4906e06005160423c26105e9a83427c42c4 Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Fri, 11 Sep 2020 05:19:57 +0200
Subject: [PATCH 081/175] Add likes modal

The likes modal component was added.
---
 .../molecules/modals/LikesModal/index.jsx     | 180 ++++++++++++++++++
 1 file changed, 180 insertions(+)
 create mode 100644 src/components/molecules/modals/LikesModal/index.jsx

diff --git a/src/components/molecules/modals/LikesModal/index.jsx b/src/components/molecules/modals/LikesModal/index.jsx
new file mode 100644
index 0000000..bde7517
--- /dev/null
+++ b/src/components/molecules/modals/LikesModal/index.jsx
@@ -0,0 +1,180 @@
+//#region > Imports
+//> React
+// Contains all the functionality necessary to define React components
+import React from "react";
+// DOM bindings for React Router
+import { Link } from "react-router-dom";
+//> MDB
+// "Material Design for Bootstrap" is a great UI design framework
+import {
+  MDBModal,
+  MDBIcon,
+  MDBModalBody,
+  MDBBtn,
+  MDBModalHeader,
+  MDBRow,
+  MDBCol,
+} from "mdbreact";
+
+//> Stylesheet
+import "./likes.scss";
+//#endregion
+
+//#region > Components
+/** @class A modal that shows a list of people that liked */
+class LikesModal extends React.Component {
+  state = {
+    loggedUser: null,
+  };
+
+  componentDidMount = () => {
+    const { loggedUser } = this.props;
+
+    this.setState({
+      loggedUser: loggedUser,
+    });
+  };
+
+  componentDidUpdate = () => {
+    const { loggedUser } = this.props;
+
+    if (loggedUser !== this.state.loggedUser) {
+      this.setState({
+        loggedUser: loggedUser,
+      });
+    }
+  };
+
+  follow = (personToFollow) => {
+    if (!this.props.loggedUser?.anonymous) {
+      this.props.follow(personToFollow).then(() => {
+        let loggedUser = this.props.loggedUser;
+        let follows = [];
+
+        for (let count in loggedUser.person.follows) {
+          follows.push(loggedUser.person.follows[count]);
+        }
+
+        follows.push({ slug: "p-" + personToFollow });
+
+        loggedUser.person.follows = follows;
+
+        this.setState({ loggedUser });
+      });
+    } else {
+      this.props.toContinue();
+    }
+  };
+
+  unfollow = (personToUnfollow) => {
+    this.props.unfollow(personToUnfollow).then(() => {
+      let loggedUser = this.state.loggedUser;
+      let follows = [];
+
+      for (let count in loggedUser?.person?.follows) {
+        if (loggedUser.person.follows[count].slug !== "p-" + personToUnfollow) {
+          follows.push(loggedUser.person.follows[count]);
+        }
+      }
+
+      loggedUser.person.follows = follows;
+
+      this.setState({ loggedUser });
+    });
+  };
+
+  isFollowing = (liker) => {
+    const { loggedUser } = this.state;
+    console.log("1");
+    for (let count in loggedUser?.person?.follows) {
+      if (loggedUser.person.follows[count].slug === liker.slug) {
+        return true;
+      }
+    }
+
+    return false;
+  };
+
+  render() {
+    const { fetchedPerson } = this.props;
+
+    return (
+      <MDBModal
+        modalStyle="white"
+        className="text-dark"
+        size="md"
+        id="likes"
+        backdrop={true}
+        isOpen={true}
+        toggle={this.props.closeModal}
+      >
+        <MDBModalHeader
+          className="text-center text-dark donate"
+          titleClass="w-100"
+          tag="p"
+        >
+          Likes
+        </MDBModalHeader>
+        <MDBModalBody>
+          {fetchedPerson.likedBy.map((liker, i) => {
+            return (
+              <div key={i}>
+                <MDBRow>
+                  <MDBCol size="2">
+                    <img
+                      src={
+                        liker.avatarImage?.src
+                          ? liker.avatarImage?.src
+                          : "https://octodex.github.com/images/nyantocat.gif"
+                      }
+                    />
+                  </MDBCol>
+                  <MDBCol size="6">
+                    <strong>{liker.slug.substring(2)}</strong>
+                    <p>{liker.firstName + " " + liker.lastName}</p>
+                  </MDBCol>
+                  {liker.slug !== this.props.loggedUser?.person?.slug && (
+                    <MDBCol size="4">
+                      {this.isFollowing(liker) ? (
+                        <MDBBtn
+                          color="green"
+                          outline
+                          size="md"
+                          onClick={() => this.unfollow(liker.slug.substring(2))}
+                        >
+                          <MDBIcon icon="minus-circle" className="mr-2" />
+                          Unfollow
+                        </MDBBtn>
+                      ) : (
+                        <MDBBtn
+                          color="green"
+                          outline
+                          size="md"
+                          onClick={() => this.follow(liker.slug.substring(2))}
+                        >
+                          <MDBIcon icon="plus-circle" className="mr-2" />
+                          Follow
+                        </MDBBtn>
+                      )}
+                    </MDBCol>
+                  )}
+                </MDBRow>
+              </div>
+            );
+          })}
+        </MDBModalBody>
+      </MDBModal>
+    );
+  }
+}
+//#endregion
+
+//#region > Exports
+//> Default Component
+export default LikesModal;
+//#endregion
+
+/**
+ * SPDX-License-Identifier: (EUPL-1.2)
+ * Copyright © 2019-2020 Simon Prast
+ */

From f80322dce6c18b31bb8ac532cd73b3ace85ef06e Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Fri, 11 Sep 2020 05:20:18 +0200
Subject: [PATCH 082/175] Update exports

The likes modal is now being exported.
---
 src/components/molecules/modals/index.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/molecules/modals/index.js b/src/components/molecules/modals/index.js
index d3004ab..1434ed3 100644
--- a/src/components/molecules/modals/index.js
+++ b/src/components/molecules/modals/index.js
@@ -11,6 +11,7 @@ import AddSongModal from "./AddSongModal";
 import ConnectModal from "./ConnectModal";
 import ToContinueModal from "./ToContinueModal";
 import FollowModal from "./FollowModal";
+import LikesModal from "./LikesModal";
 //#endregion
 
 //#region > Exports
@@ -27,6 +28,7 @@ export {
   ConnectModal,
   ToContinueModal,
   FollowModal,
+  LikesModal,
 };
 //#endregion
 

From fc1a2aa34293c1eaa2ebb82ea1a89e9497ef3572 Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Fri, 11 Sep 2020 05:20:46 +0200
Subject: [PATCH 083/175] Update imports

The info card imports were updated.
---
 .../organisms/sections/person/InfoCard/index.jsx    | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/organisms/sections/person/InfoCard/index.jsx b/src/components/organisms/sections/person/InfoCard/index.jsx
index f4e340a..6ed9dc7 100644
--- a/src/components/organisms/sections/person/InfoCard/index.jsx
+++ b/src/components/organisms/sections/person/InfoCard/index.jsx
@@ -24,10 +24,19 @@ import { connect } from "react-redux";
 
 //> Components
 import { LanguageChart } from "../../../../atoms";
-import { ToContinueModal, FollowModal } from "../../../../molecules/modals";
+import {
+  ToContinueModal,
+  FollowModal,
+  LikesModal,
+} from "../../../../molecules/modals";
 //> Actions
 // Functions to send data from the application to the store
-import { follow, unfollow } from "../../../../../store/actions/personActions";
+import {
+  follow,
+  unfollow,
+  like,
+  unlike,
+} from "../../../../../store/actions/personActions";
 //> Style Sheet
 import "./infocard.scss";
 //#endregion

From b9ac3f000551cb91e9eeba6568fa03266f50c19d Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Fri, 11 Sep 2020 05:21:29 +0200
Subject: [PATCH 084/175] Implement likes modal

The likes modal was implemented.
---
 .../sections/person/InfoCard/index.jsx        | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/src/components/organisms/sections/person/InfoCard/index.jsx b/src/components/organisms/sections/person/InfoCard/index.jsx
index 6ed9dc7..89ef7a2 100644
--- a/src/components/organisms/sections/person/InfoCard/index.jsx
+++ b/src/components/organisms/sections/person/InfoCard/index.jsx
@@ -48,6 +48,7 @@ class InfoCard extends React.Component {
     limitLanguages: true,
     showToContinue: false,
     showFollow: false,
+    showLikes: false,
     followType: "",
     fetchedPerson: null,
   };
@@ -140,9 +141,21 @@ class InfoCard extends React.Component {
       this.setState({
         showFollow: false,
       });
+    } else if (this.state.showLikes) {
+      this.setState({
+        showLikes: false,
+      });
     }
   };
 
+  toContinue = () => {
+    this.handleModalClose();
+
+    this.setState({
+      showToContinue: true,
+    });
+  };
+
   render() {
     const { fetchedPerson, loggedUser } = this.props;
 
@@ -482,6 +495,17 @@ class InfoCard extends React.Component {
             follow={this.props.follow}
             unfollow={this.props.unfollow}
             loggedUser={this.props.loggedUser}
+            toContinue={this.toContinue}
+          />
+        )}
+        {this.state.showLikes && (
+          <LikesModal
+            closeModal={this.handleModalClose}
+            fetchedPerson={this.state.fetchedPerson}
+            follow={this.props.follow}
+            unfollow={this.props.unfollow}
+            loggedUser={this.props.loggedUser}
+            toContinue={this.toContinue}
           />
         )}
       </>

From 0ce1b68f8eed6a9104135e6531390d962551a347 Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Fri, 11 Sep 2020 05:22:09 +0200
Subject: [PATCH 085/175] Update redux mapping

The redux mapping was updated to support like and unlike.
---
 src/components/organisms/sections/person/InfoCard/index.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/organisms/sections/person/InfoCard/index.jsx b/src/components/organisms/sections/person/InfoCard/index.jsx
index 89ef7a2..9bf0326 100644
--- a/src/components/organisms/sections/person/InfoCard/index.jsx
+++ b/src/components/organisms/sections/person/InfoCard/index.jsx
@@ -524,6 +524,8 @@ const mapDispatchToProps = (dispatch) => {
   return {
     follow: (personToFollow) => dispatch(follow(personToFollow)),
     unfollow: (personToUnfollow) => dispatch(unfollow(personToUnfollow)),
+    like: (personToLike) => dispatch(like(personToLike)),
+    unlike: (personToUnlike) => dispatch(unlike(personToUnlike)),
   };
 };
 //#endregion

From a3a65cf3132b5850d1e0934f1f8c969716ad15e7 Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Fri, 11 Sep 2020 05:23:26 +0200
Subject: [PATCH 086/175] Add like function

The function for liking persons was added.
---
 .../sections/person/InfoCard/index.jsx        | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/components/organisms/sections/person/InfoCard/index.jsx b/src/components/organisms/sections/person/InfoCard/index.jsx
index 9bf0326..bb7bee8 100644
--- a/src/components/organisms/sections/person/InfoCard/index.jsx
+++ b/src/components/organisms/sections/person/InfoCard/index.jsx
@@ -132,6 +132,26 @@ class InfoCard extends React.Component {
     return false;
   };
 
+  like = (personToLike) => {
+    if (!this.props.loggedUser?.anonymous) {
+      this.props.like(personToLike).then(() => {
+        let fetchedPerson = this.state.fetchedPerson;
+        let likedBy = [];
+
+        for (let count in fetchedPerson.likedBy) {
+          likedBy.push(fetchedPerson.likedBy[count]);
+        }
+
+        likedBy.push(this.props.loggedUser.person);
+
+        fetchedPerson.likedBy = likedBy;
+
+        this.setState({ fetchedPerson });
+      });
+    } else {
+      this.setState({ showToContinue: true });
+    }
+  };
   handleModalClose = () => {
     if (this.state.showToContinue) {
       this.setState({

From 9c21c5dce7206b8f4123d6fca628033392628c5a Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Fri, 11 Sep 2020 05:24:08 +0200
Subject: [PATCH 087/175] Add unlike function

The function for unliking persons was added.
---
 .../sections/person/InfoCard/index.jsx        | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/src/components/organisms/sections/person/InfoCard/index.jsx b/src/components/organisms/sections/person/InfoCard/index.jsx
index bb7bee8..21c696d 100644
--- a/src/components/organisms/sections/person/InfoCard/index.jsx
+++ b/src/components/organisms/sections/person/InfoCard/index.jsx
@@ -152,6 +152,29 @@ class InfoCard extends React.Component {
       this.setState({ showToContinue: true });
     }
   };
+
+  unlike = (personToUnlike) => {
+    if (!this.props.loggedUser?.anonymous) {
+      this.props.unlike(personToUnlike).then(() => {
+        let fetchedPerson = this.state.fetchedPerson;
+        let likedBy = [];
+
+        const { loggedUser } = this.props;
+
+        for (let count in fetchedPerson.likedBy) {
+          if (fetchedPerson.likedBy[count].slug !== loggedUser.person.slug) {
+            likedBy.push(fetchedPerson.likedBy[count]);
+          }
+        }
+
+        fetchedPerson.likedBy = likedBy;
+
+        this.setState({ fetchedPerson });
+      });
+    } else {
+      this.setState({ showToContinue: true });
+    }
+  };
   handleModalClose = () => {
     if (this.state.showToContinue) {
       this.setState({

From 096631e96bbbd880f8dbca9b72b3cb34ec819c5b Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Fri, 11 Sep 2020 05:24:35 +0200
Subject: [PATCH 088/175] Add like checker

The function for checking if a person has likes was added.
---
 .../sections/person/InfoCard/index.jsx        | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/components/organisms/sections/person/InfoCard/index.jsx b/src/components/organisms/sections/person/InfoCard/index.jsx
index 21c696d..27b0c39 100644
--- a/src/components/organisms/sections/person/InfoCard/index.jsx
+++ b/src/components/organisms/sections/person/InfoCard/index.jsx
@@ -175,6 +175,25 @@ class InfoCard extends React.Component {
       this.setState({ showToContinue: true });
     }
   };
+
+  isLiker = () => {
+    if (!this.props.loggedUser?.anonymous) {
+      const loggedUser = this.props.loggedUser.username;
+      const likerList = this.state.fetchedPerson?.likedBy;
+
+      for (let count in likerList) {
+        let liker = likerList[count];
+
+        if (liker.slug.substring(2) === loggedUser) {
+          console.log("1");
+          return true;
+        }
+      }
+    }
+
+    return false;
+  };
+
   handleModalClose = () => {
     if (this.state.showToContinue) {
       this.setState({

From e3fdb1b9d5607c591a98a9c10136c06abd2ef823 Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Fri, 11 Sep 2020 05:25:15 +0200
Subject: [PATCH 089/175] Implement like component

The like component was implemented.
---
 .../sections/person/InfoCard/index.jsx        | 84 ++++++++++++-------
 1 file changed, 55 insertions(+), 29 deletions(-)

diff --git a/src/components/organisms/sections/person/InfoCard/index.jsx b/src/components/organisms/sections/person/InfoCard/index.jsx
index 27b0c39..830df34 100644
--- a/src/components/organisms/sections/person/InfoCard/index.jsx
+++ b/src/components/organisms/sections/person/InfoCard/index.jsx
@@ -119,7 +119,7 @@ class InfoCard extends React.Component {
     if (!this.props.loggedUser?.anonymous) {
       const loggedUser = this.props.loggedUser.username;
       const followerList = this.state.fetchedPerson?.followedBy;
-      console.log(followerList);
+
       for (let count in followerList) {
         let follower = followerList[count];
 
@@ -274,6 +274,14 @@ class InfoCard extends React.Component {
                 Following
               </MDBCol>
             </MDBRow>
+            <div className="likes">
+              <MDBRow>
+                <MDBCol onClick={() => this.setState({ showLikes: true })}>
+                  <strong>{this.state.fetchedPerson?.likedBy.length} </strong>
+                  Likes
+                </MDBCol>
+              </MDBRow>
+            </div>
             <div className="badges">
               {fetchedPerson?.bids && (
                 <>
@@ -303,34 +311,52 @@ class InfoCard extends React.Component {
               </div>
             )}
           </div>
-          <div className="py-3 follow text-center">
-            {this.isFollower() ? (
-              <MDBBtn
-                color="green"
-                outline
-                size="md"
-                onClick={() => this.unfollow(fetchedPerson.slug.substring(2))}
-              >
-                <MDBIcon icon="minus-circle" className="mr-2" />
-                Unfollow
-              </MDBBtn>
-            ) : (
-              <MDBBtn
-                color="green"
-                outline
-                size="md"
-                onClick={() => this.follow(fetchedPerson.slug.substring(2))}
-              >
-                <MDBIcon icon="plus-circle" className="mr-2" />
-                Follow
-              </MDBBtn>
-            )}
-
-            <MDBBtn color="primary" outline size="md">
-              <MDBIcon icon="angle-up" className="mr-2" />
-              Upvote
-            </MDBBtn>
-          </div>
+          {loggedUser.person?.slug !== fetchedPerson.slug && (
+            <div className="py-3 social text-center">
+              {this.isFollower() ? (
+                <MDBBtn
+                  color="green"
+                  outline
+                  size="md"
+                  onClick={() => this.unfollow(fetchedPerson.slug.substring(2))}
+                >
+                  <MDBIcon icon="minus-circle" className="mr-2" />
+                  Unfollow
+                </MDBBtn>
+              ) : (
+                <MDBBtn
+                  color="green"
+                  outline
+                  size="md"
+                  onClick={() => this.follow(fetchedPerson.slug.substring(2))}
+                >
+                  <MDBIcon icon="plus-circle" className="mr-2" />
+                  Follow
+                </MDBBtn>
+              )}
+              {this.isLiker() ? (
+                <MDBBtn
+                  color="primary"
+                  outline
+                  size="md"
+                  onClick={() => this.unlike(fetchedPerson.slug.substring(2))}
+                >
+                  <MDBIcon icon="angle-down" className="mr-2" />
+                  Unlike
+                </MDBBtn>
+              ) : (
+                <MDBBtn
+                  color="primary"
+                  outline
+                  size="md"
+                  onClick={() => this.like(fetchedPerson.slug.substring(2))}
+                >
+                  <MDBIcon icon="angle-up" className="mr-2" />
+                  Like
+                </MDBBtn>
+              )}
+            </div>
+          )}
           <div className="bg-light py-3 px-2">
             <p>Connected accounts</p>
             <div className="connected mt-2 text-muted">

From f996843d8adb60610d0e62b98f13d70d3c46e370 Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Fri, 11 Sep 2020 05:30:33 +0200
Subject: [PATCH 090/175] Update sign out

The sign out now no longer redirects.
---
 src/components/molecules/Navbar/index.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/molecules/Navbar/index.jsx b/src/components/molecules/Navbar/index.jsx
index 4b6639e..b716ef2 100644
--- a/src/components/molecules/Navbar/index.jsx
+++ b/src/components/molecules/Navbar/index.jsx
@@ -139,7 +139,6 @@ class Navbar extends React.Component {
                           Settings
                         </Link>
                         <Link
-                          to="/"
                           onClick={this.props.logout}
                           className="dropdown-item"
                         >

From f48582089e7d1841353a547d72324ad0807f677a Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Fri, 11 Sep 2020 05:53:10 +0200
Subject: [PATCH 091/175] Fix link ussues

The to param was added.
---
 src/components/molecules/Navbar/index.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/molecules/Navbar/index.jsx b/src/components/molecules/Navbar/index.jsx
index b716ef2..6461146 100644
--- a/src/components/molecules/Navbar/index.jsx
+++ b/src/components/molecules/Navbar/index.jsx
@@ -139,6 +139,7 @@ class Navbar extends React.Component {
                           Settings
                         </Link>
                         <Link
+                          to=""
                           onClick={this.props.logout}
                           className="dropdown-item"
                         >

From 32c924b6c1a7626914818aa14b181ed4a0dec871 Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Fri, 11 Sep 2020 07:53:41 +0200
Subject: [PATCH 092/175] Improve settings menu

The menu items now appear clickable.
---
 src/components/pages/SettingsPage/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/pages/SettingsPage/index.jsx b/src/components/pages/SettingsPage/index.jsx
index 24c0365..825f34d 100644
--- a/src/components/pages/SettingsPage/index.jsx
+++ b/src/components/pages/SettingsPage/index.jsx
@@ -254,7 +254,7 @@ class SettingsPage extends React.Component {
                   </MDBNavItem>
                   {this.state.tabItems.map((tab, i) => {
                     return (
-                      <MDBNavItem key={i}>
+                      <MDBNavItem key={i} className="clickable">
                         <span
                           className={
                             activeItem === i ? "nav-link active" : "nav-link"

From 0ea8c8931c216b54841460289552300edcdbc48b Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Fri, 11 Sep 2020 08:04:02 +0200
Subject: [PATCH 093/175] Improve settings profile picture selector

The mouse now switches to a pointer when hovering the image.
---
 src/components/pages/SettingsPage/index.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/SettingsPage/index.jsx b/src/components/pages/SettingsPage/index.jsx
index 825f34d..9815a08 100644
--- a/src/components/pages/SettingsPage/index.jsx
+++ b/src/components/pages/SettingsPage/index.jsx
@@ -224,7 +224,7 @@ class SettingsPage extends React.Component {
             <div id="notification">
               <MDBContainer>
                 <MDBRow className="message">
-                  Changes were saved successfully —{" "}
+                  Changes were saved successfully —{"  "}
                   <Link to={"/u/" + loggedUser.username}>
                     View your profile
                   </Link>
@@ -290,7 +290,7 @@ class SettingsPage extends React.Component {
                               src={person.avatarImage?.src}
                               className="img-fluid"
                             />
-                            <MDBMask className="flex-center">
+                            <MDBMask className="flex-center clickable">
                               <MDBIcon
                                 icon="camera"
                                 size="2x"

From 730639822b03e2c748f37db39ecc06521602f3c0 Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Fri, 11 Sep 2020 08:23:13 +0200
Subject: [PATCH 094/175] Fix invalid login issue

Now it is possible to unsuccessfully login.
---
 src/components/molecules/Navbar/index.jsx | 4 ++--
 src/store/reducers/userReducers.js        | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/molecules/Navbar/index.jsx b/src/components/molecules/Navbar/index.jsx
index 6461146..d79e6e6 100644
--- a/src/components/molecules/Navbar/index.jsx
+++ b/src/components/molecules/Navbar/index.jsx
@@ -83,7 +83,7 @@ class Navbar extends React.Component {
             </MDBSmoothScroll>
           ) : (
             <>
-              {!loggedUser.anonymous ? (
+              {loggedUser.anonymous === false ? (
                 <Link to={"/u/" + loggedUser?.username}>
                   <MDBNavbarBrand className="flex-center">
                     <img
@@ -116,7 +116,7 @@ class Navbar extends React.Component {
               </MDBNavItem>
             </MDBNavbarNav>
             <MDBNavbarNav right>
-              {!loggedUser.anonymous ? (
+              {loggedUser.anonymous === false ? (
                 <>
                   <Link to={"/u/" + loggedUser.username}>
                     <MDBBtn color="white">
diff --git a/src/store/reducers/userReducers.js b/src/store/reducers/userReducers.js
index c7ddad1..f188991 100644
--- a/src/store/reducers/userReducers.js
+++ b/src/store/reducers/userReducers.js
@@ -29,7 +29,7 @@ const userReducer = (state = INIT_STATE, action) => {
       };
     case Action.USER_LOGIN_FAILURE:
       return {
-        user: INIT_STATE.user,
+        user: { anonymous: null, username: null, person: null },
         error: action.payload,
         errorDetails: serializeError(action.payload.error),
       };

From 0b4e96d758a63d66495b7d3cab8d68d34b558ede Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Fri, 11 Sep 2020 08:33:42 +0200
Subject: [PATCH 095/175] Improve company page

The enterprise overview tab has been adjusted and no longer brakes.
---
 .../tabs/enterprise/PageOverview/index.jsx    | 62 ++++++++++---------
 src/components/pages/CompanyPage/index.jsx    | 38 +++++++++---
 2 files changed, 63 insertions(+), 37 deletions(-)

diff --git a/src/components/organisms/tabs/enterprise/PageOverview/index.jsx b/src/components/organisms/tabs/enterprise/PageOverview/index.jsx
index 5546745..09d3401 100644
--- a/src/components/organisms/tabs/enterprise/PageOverview/index.jsx
+++ b/src/components/organisms/tabs/enterprise/PageOverview/index.jsx
@@ -89,9 +89,9 @@ class PageOverview extends React.Component {
       <MDBRow id="pageoverview">
         <MDBCol lg="3">
           <div className="mt-3">
-            <p className="lead font-weight-bold mb-0">Contributions</p>
+            <p className="lead font-weight-bold mb-1">Contributions</p>
             {feed && (
-              <MDBCard className="mt-4">
+              <MDBCard className="mt-2">
                 <MDBCardBody>
                   <div className="d-flex justify-content-between">
                     <div>
@@ -107,7 +107,7 @@ class PageOverview extends React.Component {
                       <p className="text-muted small mb-0">Average</p>
                       <p className="mb-0">
                         <span className="lead font-weight-bold">
-                          {(365 / feed.length).toFixed(2)}
+                          {feed.length > 0 ? (365 / feed.length).toFixed(2) : 0}
                         </span>{" "}
                         <span className="small">/ day</span>
                       </p>
@@ -120,7 +120,7 @@ class PageOverview extends React.Component {
         </MDBCol>
         <MDBCol lg="5">
           <div className="mt-3">
-            <p className="lead font-weight-bold mb-0">Statistics</p>
+            <p className="lead font-weight-bold mb-1">Statistics</p>
             <div className="text-right">
               {mergedFeed &&
                 mergedFeed.years.map((year, y) => {
@@ -137,40 +137,44 @@ class PageOverview extends React.Component {
                     </p>
                   );
                 })}
-              <p
-                className={
-                  this.state.selectedYearIndex === undefined
-                    ? "blue-text clickable mx-2 d-inline-block"
-                    : "text-muted clickable mx-2 d-inline-block"
-                }
-                onClick={() => this.setState({ selectedYearIndex: undefined })}
-              >
-                Current
-              </p>
-            </div>
-            <div className="canvas-container">
-              <AILineChart
-                data={mergedFeed}
-                year={this.state.selectedYearIndex}
-                size={50}
-                key="overview-chart"
-              />
+              {mergedFeed && mergedFeed.length > 0 && (
+                <p
+                  className={
+                    this.state.selectedYearIndex === undefined
+                      ? "blue-text clickable mx-2 d-inline-block"
+                      : "text-muted clickable mx-2 d-inline-block"
+                  }
+                  onClick={() =>
+                    this.setState({ selectedYearIndex: undefined })
+                  }
+                >
+                  Current
+                </p>
+              )}
             </div>
+            {mergedFeed && mergedFeed.length > 0 ? (
+              <div className="canvas-container">
+                <AILineChart
+                  data={mergedFeed}
+                  year={this.state.selectedYearIndex}
+                  size={50}
+                  key="overview-chart"
+                />
+              </div>
+            ) : (
+              <p className="text-muted small">No statistics available yet.</p>
+            )}
           </div>
         </MDBCol>
         <MDBCol lg="4">
           <div className="mt-3">
-            <p className="lead font-weight-bold mb-0">Activity</p>
-            <p className="text-muted small">
-              <MDBIcon icon="question-circle" className="mr-2" />
-              History of all projects in your page.
-            </p>
+            <p className="lead font-weight-bold mb-1">Activity</p>
           </div>
           {this.props.filter && (
             <p className="blue-text">{feed.length} matches found.</p>
           )}
           <MDBListGroup>
-            {feed ? (
+            {feed && feed.length > 0 ? (
               <>
                 {feed.reverse().map((activity, a) => {
                   return (
@@ -290,7 +294,7 @@ class PageOverview extends React.Component {
 
 //#region > Redux Mapping
 const mapStateToProps = (state) => ({
-  activities: state.pages.activities,
+  activities: state.enterprise.page.general.activities,
 });
 //#endregion
 
diff --git a/src/components/pages/CompanyPage/index.jsx b/src/components/pages/CompanyPage/index.jsx
index 6983785..a1266fb 100644
--- a/src/components/pages/CompanyPage/index.jsx
+++ b/src/components/pages/CompanyPage/index.jsx
@@ -147,7 +147,15 @@ class Page extends React.Component {
   };
 
   render() {
-    const { general, users, projects } = this.props;
+    const { error, general, users, projects } = this.props;
+
+    console.error(error);
+    console.log("GENERAL");
+    console.log(general);
+    console.log("USERS");
+    console.log(users);
+    console.log("PROJECTS");
+    console.log(projects);
 
     // console.log("PAGE", page);
 
@@ -305,11 +313,24 @@ class Page extends React.Component {
             </MDBCol>
           </MDBRow>
         ) : (
-          <div className="text-center my-5 py-5">
-            <div className="spinner-grow text-success" role="status">
-              <span className="sr-only">Loading...</span>
-            </div>
-          </div>
+          <>
+            {error ? (
+              <div className="text-center">
+                <MDBIcon
+                  icon="times-circle"
+                  size="3x"
+                  className="text-danger"
+                />
+                <span className="d-block mt-3 lead">{error.message}</span>
+              </div>
+            ) : (
+              <div className="text-center my-5 py-5">
+                <div className="spinner-grow text-success" role="status">
+                  <span className="sr-only">Loading...</span>
+                </div>
+              </div>
+            )}
+          </>
         )}
       </MDBContainer>
     );
@@ -322,13 +343,14 @@ const mapStateToProps = (state) => ({
   general: state.enterprise.page.general,
   projects: state.enterprise.page.projects,
   users: state.enterprise.page.users,
+  error: state.enterprise.error,
 });
 
 const mapDispatchToProps = (dispatch) => {
   return {
     getGeneral: (handle) => dispatch(getGeneral(handle)),
-    // getProjects: (handle) => dispatch(getProjects(handle)),
-    // getUsers: (handle) => dispatch(getUsers(handle)),
+    getProjects: (handle) => dispatch(getProjects(handle)),
+    getUsers: (handle) => dispatch(getUsers(handle)),
   };
 };
 //#endregion

From aebe9e5cad628f18bb2b8f5af47cc8933780ec1b Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Fri, 11 Sep 2020 08:53:02 +0200
Subject: [PATCH 096/175] Improve enterprise project modal

The project modal has been improved. Projects and users are now being queried.
---
 .../modals/enterprise/ProjectModal/index.jsx  | 117 +++++++++++-------
 src/components/pages/CompanyPage/index.jsx    |  39 +++---
 2 files changed, 95 insertions(+), 61 deletions(-)

diff --git a/src/components/molecules/modals/enterprise/ProjectModal/index.jsx b/src/components/molecules/modals/enterprise/ProjectModal/index.jsx
index 2fbb967..8799b16 100644
--- a/src/components/molecules/modals/enterprise/ProjectModal/index.jsx
+++ b/src/components/molecules/modals/enterprise/ProjectModal/index.jsx
@@ -78,9 +78,10 @@ class ProjectModal extends React.Component {
                   <p className="lead font-weight-bold mt-3">Contributors</p>
                   <div className="activity">
                     <MDBCard className="border">
-                      <MDBListGroup>
-                        {project.contributors &&
-                          project.contributors.map((contributor, i) => {
+                      {project.contributors &&
+                      project.contributors.length > 0 ? (
+                        <MDBListGroup>
+                          {project.contributors.map((contributor, i) => {
                             return (
                               <MDBListGroupItem key={"project-contrib-" + i}>
                                 <p className="mb-0">{contributor.name}</p>
@@ -97,56 +98,77 @@ class ProjectModal extends React.Component {
                               </MDBListGroupItem>
                             );
                           })}
-                      </MDBListGroup>
+                        </MDBListGroup>
+                      ) : (
+                        <div className="text-center p-3">
+                          <span className="d-block small text-muted">
+                            No contributors yet.
+                          </span>
+                        </div>
+                      )}
                     </MDBCard>
                   </div>
                 </MDBCol>
                 <MDBCol lg="8" className="activity">
                   <p className="lead font-weight-bold">Activity</p>
                   <div className="text-right">
-                    {this.props.chart &&
-                      this.props.chart.years.map((year, y) => {
-                        return (
-                          <p
-                            className={
-                              this.state.selectedYearIndex === y
-                                ? "blue-text clickable mx-2 d-inline-block"
-                                : "text-muted clickable mx-2 d-inline-block"
-                            }
-                            onClick={() =>
-                              this.setState({ selectedYearIndex: y })
-                            }
-                          >
-                            {moment(year.endDate).format("YYYY")}
-                          </p>
-                        );
-                      })}
-                    <p
-                      className={
-                        this.state.selectedYearIndex === undefined
-                          ? "blue-text clickable mx-2 d-inline-block"
-                          : "text-muted clickable mx-2 d-inline-block"
-                      }
-                      onClick={() =>
-                        this.setState({ selectedYearIndex: undefined })
-                      }
-                    >
-                      Current
-                    </p>
-                  </div>
-                  <div className="canvas-container-modal">
-                    <AILineChart
-                      data={this.props.chart}
-                      year={this.state.selectedYearIndex}
-                      key="overview-chart"
-                    />
+                    {this.props.chart && this.props.chart.years.length > 0 ? (
+                      <>
+                        {this.props.chart.years.map((year, y) => {
+                          return (
+                            <p
+                              className={
+                                this.state.selectedYearIndex === y
+                                  ? "blue-text clickable mx-2 d-inline-block"
+                                  : "text-muted clickable mx-2 d-inline-block"
+                              }
+                              onClick={() =>
+                                this.setState({ selectedYearIndex: y })
+                              }
+                            >
+                              {moment(year.endDate).format("YYYY")}
+                            </p>
+                          );
+                        })}
+                      </>
+                    ) : (
+                      <div className="text-center p-3">
+                        <span className="d-block small text-muted">
+                          No statistics yet.
+                        </span>
+                      </div>
+                    )}
+                    {this.props.chart && this.props.chart.years.length > 0 && (
+                      <p
+                        className={
+                          this.state.selectedYearIndex === undefined
+                            ? "blue-text clickable mx-2 d-inline-block"
+                            : "text-muted clickable mx-2 d-inline-block"
+                        }
+                        onClick={() =>
+                          this.setState({ selectedYearIndex: undefined })
+                        }
+                      >
+                        Current
+                      </p>
+                    )}
                   </div>
+                  {this.props.chart && this.props.chart.years.length > 0 && (
+                    <div className="canvas-container-modal">
+                      <AILineChart
+                        data={this.props.chart}
+                        year={this.state.selectedYearIndex}
+                        key="overview-chart"
+                      />
+                    </div>
+                  )}
                   <p className="lead font-weight-bold mt-3">History</p>
                   <MDBCard className="border">
                     <MDBCardBody>
-                      <MDBListGroup>
-                        {project.contributionFeed &&
-                          project.contributionFeed.map((contrib, i) => {
+                      {project.contributionFeed &&
+                      project.contributionFeed.length > 0 ? (
+                        <MDBListGroup>
+                          {project.contributionFeed.map((contrib, i) => {
                             return (
                               <MDBListGroupItem key={"project-contrib-" + i}>
                                 <p className="mb-0">{contrib.message}</p>
@@ -165,7 +187,14 @@ class ProjectModal extends React.Component {
                               </MDBListGroupItem>
                             );
                           })}
-                      </MDBListGroup>
+                        </MDBListGroup>
+                      ) : (
+                        <div className="text-center p-3">
+                          <span className="d-block small text-muted">
+                            No history yet.
+                          </span>
+                        </div>
+                      )}
                     </MDBCardBody>
                   </MDBCard>
                 </MDBCol>
diff --git a/src/components/pages/CompanyPage/index.jsx b/src/components/pages/CompanyPage/index.jsx
index a1266fb..620cce0 100644
--- a/src/components/pages/CompanyPage/index.jsx
+++ b/src/components/pages/CompanyPage/index.jsx
@@ -84,28 +84,33 @@ class Page extends React.Component {
   };
 
   componentDidMount = () => {
-    // Retrieve Page
-    // this.props.getGeneral("schettn");
-    const { match } = this.props;
-    const enterpriseName = match?.params?.name;
+    const enterpriseName = this.getUrl();
 
     if (enterpriseName) {
-      this.props.getGeneral(enterpriseName);
+      this.setState(
+        {
+          enterpriseName,
+        },
+        () => this.props.getGeneral(enterpriseName)
+      );
     }
   };
 
-  componentDidUpdate = () => {
-    // Check if there are no current pipelines set
-    // if (this.props.page && !this.state.page) {
-    //   this.setState({/
-    //     page: this.props.page.data,
-    //   });
-    // }
-    /*if (JSON.stringify(this.props.page) !== JSON.stringify(this.state.page)) {
-      this.setState({
-        page: this.props.page.data,
-      });
-    }*/
+  componentDidUpdate = (prevProps) => {
+    const enterpriseName = this.getUrl();
+
+    if (prevProps.general !== this.props.general && !this.props.error) {
+      this.props.getProjects(enterpriseName);
+      this.props.getUsers(enterpriseName);
+    }
+  };
+
+  // Get enterprise name from URL
+  getUrl = () => {
+    const { match } = this.props;
+    const enterpriseName = match?.params?.name;
+
+    return enterpriseName ? enterpriseName : false;
   };
 
   // Toogle reauth

From 2d25295ebb59f47d34a6d82f797872581e61c7e9 Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Fri, 11 Sep 2020 08:56:44 +0200
Subject: [PATCH 097/175] Fix fetching users

Instead of users, projects were loaded and returned.
---
 src/store/actions/enterpriseActions.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/store/actions/enterpriseActions.js b/src/store/actions/enterpriseActions.js
index 4ebeb78..41eadf6 100644
--- a/src/store/actions/enterpriseActions.js
+++ b/src/store/actions/enterpriseActions.js
@@ -72,7 +72,7 @@ const getUsers = (enterpriseName) => {
     try {
       dispatch({ type: Action.ENTERPRISE_USERS_FETCH_REQUEST });
 
-      const projects = await INTEL_SNEK_E.general.getEnterprisePageProjectsContent(
+      const projects = await INTEL_SNEK_E.general.getEnterprisePageUsersContent(
         { slug: `e-${enterpriseName}` }
       );
 

From 9b9a77c85ad6ac8de683f5e94e20327ed83ac004 Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Fri, 11 Sep 2020 09:30:26 +0200
Subject: [PATCH 098/175] Improve user modal

Some data has been adjusted. The code statistics have been improved.
---
 .../modals/enterprise/UserModal/index.jsx     | 163 ++++++++++--------
 1 file changed, 93 insertions(+), 70 deletions(-)

diff --git a/src/components/molecules/modals/enterprise/UserModal/index.jsx b/src/components/molecules/modals/enterprise/UserModal/index.jsx
index 436424f..7a7d103 100644
--- a/src/components/molecules/modals/enterprise/UserModal/index.jsx
+++ b/src/components/molecules/modals/enterprise/UserModal/index.jsx
@@ -62,63 +62,66 @@ class UserModal extends React.Component {
                     <MDBCardBody>
                       <p className="lead font-weight-bold mb-1">{user.name}</p>
                       <p className="text-muted small">
-                        <p>{user.username}</p>
+                        <span>{user.username}</span>
                       </p>
                     </MDBCardBody>
                   </MDBCard>
                   <p className="lead font-weight-bold mt-4">Code statistics</p>
                   <MDBCard className="border">
                     <MDBCardBody>
-                      <AILanguageChart
-                        languages={[
-                          {
-                            color: "rgb(241, 224, 90)",
-                            share: 40,
-                          },
-                          {
-                            color: "rgb(299, 150, 90)",
-                            share: 60,
-                          },
-                        ]}
-                      />
-                      <div className="px-1">
-                        <hr />
-                        {[
-                          {
-                            color: "rgb(241, 224, 90)",
-                            share: 40,
-                            name: "JavaScript",
-                          },
-                          {
-                            color: "rgb(299, 150, 90)",
-                            share: 60,
-                            name: "FooScript",
-                          },
-                        ].map((language, i) => {
-                          return (
-                            <small
-                              className="text-left text-muted d-block"
-                              key={i}
-                            >
-                              <div className="d-flex justify-content-between">
-                                <div>
-                                  <MDBIcon
-                                    icon="square"
-                                    className="pr-1"
-                                    style={{
-                                      color: language.color,
-                                    }}
-                                  />
-                                  <span>{language.name}</span>
+                      {user.codelanguages && user.codelanguages.length > 0 ? (
+                        <div>
+                          {user.codelanguages.map((language, i) => {
+                            return (
+                              <small
+                                className={
+                                  user.codelanguages.length === i + 1
+                                    ? "text-left text-muted d-block py-1"
+                                    : "text-left text-muted d-block py-1 border-bottom"
+                                }
+                                key={i}
+                              >
+                                <div className="d-flex justify-content-between align-items-center">
+                                  <div>
+                                    <MDBIcon
+                                      icon="square"
+                                      className="pr-1"
+                                      style={{
+                                        color: language.color,
+                                      }}
+                                    />
+                                    <span>{language.name}</span>
+                                  </div>
+                                  <span className="small text-right">
+                                    <span className="d-block">
+                                      {language.insertions}
+                                      <MDBIcon
+                                        icon="plus"
+                                        size="sm"
+                                        className="text-success pl-1"
+                                      />
+                                    </span>
+                                    <span className="d-block">
+                                      {language.deletions}
+                                      <MDBIcon
+                                        icon="minus"
+                                        size="sm"
+                                        className="text-danger pl-1"
+                                      />
+                                    </span>
+                                  </span>
                                 </div>
-                                <span className="text-muted small">
-                                  {language.share}%
-                                </span>
-                              </div>
-                            </small>
-                          );
-                        })}
-                      </div>
+                              </small>
+                            );
+                          })}
+                        </div>
+                      ) : (
+                        <div className="text-center p-3">
+                          <span className="d-block small text-muted">
+                            No information yet.
+                          </span>
+                        </div>
+                      )}
                     </MDBCardBody>
                   </MDBCard>
                 </MDBCol>
@@ -144,31 +147,44 @@ class UserModal extends React.Component {
                               </p>
                             );
                           })}
-                        <p
-                          className={
-                            this.state.selectedYearIndex === undefined
-                              ? "blue-text clickable mx-2 d-inline-block"
-                              : "text-muted clickable mx-2 d-inline-block"
-                          }
-                          onClick={() =>
-                            this.setState({ selectedYearIndex: undefined })
-                          }
-                        >
-                          Current
-                        </p>
+                        {user.mergedContributionFeed &&
+                          user.mergedContributionFeed.years.length > 0 && (
+                            <p
+                              className={
+                                this.state.selectedYearIndex === undefined
+                                  ? "blue-text clickable mx-2 d-inline-block"
+                                  : "text-muted clickable mx-2 d-inline-block"
+                              }
+                              onClick={() =>
+                                this.setState({ selectedYearIndex: undefined })
+                              }
+                            >
+                              Current
+                            </p>
+                          )}
                       </div>
-                      <AIContribCalendar
-                        platformData={user.mergedContributionFeed}
-                        year={this.state.selectedYearIndex}
-                      />
+                      {user.mergedContributionFeed &&
+                      user.mergedContributionFeed.years.length > 0 ? (
+                        <AIContribCalendar
+                          platformData={user.mergedContributionFeed}
+                          year={this.state.selectedYearIndex}
+                        />
+                      ) : (
+                        <div className="text-center p-3">
+                          <span className="d-block small text-muted">
+                            No statistics yet.
+                          </span>
+                        </div>
+                      )}
                     </MDBCardBody>
                   </MDBCard>
                   <div className="activity">
                     <p className="lead font-weight-bold">Activity</p>
                     <MDBCard className="border">
-                      <MDBListGroup>
-                        {user.contributionFeed &&
-                          user.contributionFeed.map((contrib, i) => {
+                      {user.contributionFeed &&
+                      user.contributionFeed.length > 0 ? (
+                        <MDBListGroup>
+                          {user.contributionFeed.map((contrib, i) => {
                             return (
                               <MDBListGroupItem>
                                 <p className="mb-0">{contrib.message}</p>
@@ -187,7 +203,14 @@ class UserModal extends React.Component {
                               </MDBListGroupItem>
                             );
                           })}
-                      </MDBListGroup>
+                        </MDBListGroup>
+                      ) : (
+                        <div className="text-center p-3">
+                          <span className="d-block small text-muted">
+                            No activities yet.
+                          </span>
+                        </div>
+                      )}
                     </MDBCard>
                   </div>
                 </MDBCol>

From 4609f0a89a167756e0beb5f7f4fa43b2942b2940 Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Fri, 11 Sep 2020 09:33:17 +0200
Subject: [PATCH 099/175] Add code statistics to enterprise overview

The code statistics have been added to the enterprise overview page.
---
 .../tabs/enterprise/PageOverview/index.jsx    | 61 ++++++++++++++++++-
 src/components/pages/CompanyPage/index.jsx    |  1 +
 2 files changed, 61 insertions(+), 1 deletion(-)

diff --git a/src/components/organisms/tabs/enterprise/PageOverview/index.jsx b/src/components/organisms/tabs/enterprise/PageOverview/index.jsx
index 09d3401..24627a2 100644
--- a/src/components/organisms/tabs/enterprise/PageOverview/index.jsx
+++ b/src/components/organisms/tabs/enterprise/PageOverview/index.jsx
@@ -83,7 +83,7 @@ class PageOverview extends React.Component {
 
   render() {
     const { feed } = this.state;
-    const { mergedFeed } = this.props;
+    const { mergedFeed, codestats } = this.props;
 
     return (
       <MDBRow id="pageoverview">
@@ -116,6 +116,65 @@ class PageOverview extends React.Component {
                 </MDBCardBody>
               </MDBCard>
             )}
+            {codestats && (
+              <MDBCard className="border">
+                <MDBCardBody>
+                  {codestats && codestats.length > 0 ? (
+                    <div>
+                      {codestats.map((language, i) => {
+                        return (
+                          <small
+                            className={
+                              codestats.length === i + 1
+                                ? "text-left text-muted d-block py-1"
+                                : "text-left text-muted d-block py-1 border-bottom"
+                            }
+                            key={i}
+                          >
+                            <div className="d-flex justify-content-between align-items-center">
+                              <div>
+                                <MDBIcon
+                                  icon="square"
+                                  className="pr-1"
+                                  style={{
+                                    color: language.color,
+                                  }}
+                                />
+                                <span>{language.name}</span>
+                              </div>
+                              <span className="small text-right">
+                                <span className="d-block">
+                                  {language.insertions}
+                                  <MDBIcon
+                                    icon="plus"
+                                    size="sm"
+                                    className="text-success pl-1"
+                                  />
+                                </span>
+                                <span className="d-block">
+                                  {language.deletions}
+                                  <MDBIcon
+                                    icon="minus"
+                                    size="sm"
+                                    className="text-danger pl-1"
+                                  />
+                                </span>
+                              </span>
+                            </div>
+                          </small>
+                        );
+                      })}
+                    </div>
+                  ) : (
+                    <div className="text-center p-3">
+                      <span className="d-block small text-muted">
+                        No information yet.
+                      </span>
+                    </div>
+                  )}
+                </MDBCardBody>
+              </MDBCard>
+            )}
           </div>
         </MDBCol>
         <MDBCol lg="5">
diff --git a/src/components/pages/CompanyPage/index.jsx b/src/components/pages/CompanyPage/index.jsx
index 620cce0..8c223e0 100644
--- a/src/components/pages/CompanyPage/index.jsx
+++ b/src/components/pages/CompanyPage/index.jsx
@@ -280,6 +280,7 @@ class Page extends React.Component {
                       filter={this.state.globalFilter}
                       feed={general.enterpriseContributionFeed}
                       mergedFeed={general.mergedEnterpriseContributionFeed}
+                      codestats={general.enterpriseCodelanguageStatistic}
                     />
                   </MDBTabPane>
                 )}

From 57b194e96e5a8d464586c8b4e35d57cb1ceb9d4c Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Fri, 11 Sep 2020 09:56:11 +0200
Subject: [PATCH 100/175] Add imprint

The imprint has been reworked and the details are now being shown.
---
 .../tabs/enterprise/PageImprint/index.jsx     | 94 ++++++-------------
 src/components/pages/CompanyPage/index.jsx    |  2 +-
 2 files changed, 29 insertions(+), 67 deletions(-)

diff --git a/src/components/organisms/tabs/enterprise/PageImprint/index.jsx b/src/components/organisms/tabs/enterprise/PageImprint/index.jsx
index 10be6d5..1a8fe1d 100644
--- a/src/components/organisms/tabs/enterprise/PageImprint/index.jsx
+++ b/src/components/organisms/tabs/enterprise/PageImprint/index.jsx
@@ -31,91 +31,53 @@ import moment from "moment";
 class PageImprint extends React.Component {
   state = { page: null };
 
-  componentDidMount = () => {
-    this.setState({
-      page: this.props.page,
-    });
-  };
-
-  handleSwitchChange = (nr) => {
-    this.setState({
-      page: {
-        ...this.state.page,
-        company: {
-          ...this.state.page.company,
-          [nr]: !this.state.page.company[nr],
-        },
-      },
-    });
-  };
-
-  handleChange = (name, value) => {
-    this.setState({
-      page: {
-        ...this.state.page,
-        company: {
-          ...this.state.page.company,
-          [name]:
-            typeof this.state.page.company[name] !== "object"
-              ? value
-              : { ...this.state.page.company[name], value },
-        },
-      },
-    });
-  };
-
-  checkIfChanged = () => {
-    if (JSON.stringify(this.props.page) !== JSON.stringify(this.state.page)) {
-      return true;
-    } else {
-      return false;
-    }
-  };
-
   render() {
-    const { page } = this.state;
+    const { page } = this.props;
 
     console.log(page);
 
     return (
       <div id="pageimprint">
-        <div className="d-flex justify-content-between mt-3">
+        <div className="mt-3">
           <div>
             <p className="lead font-weight-bold mb-0">Imprint</p>
-            <p className="text-muted small">
-              <MDBIcon icon="question-circle" className="mr-2" />
-              Manage your enterprise imprint
-            </p>
-          </div>
-          <div>
-            {this.checkIfChanged() && (
-              <MDBBtn
-                color="success"
-                onClick={() => this.props.editImprint(this.state.page)}
-              >
-                <MDBIcon icon="check-circle" />
-                Save
-              </MDBBtn>
-            )}
           </div>
         </div>
-        {this.state.page ? (
+        {page ? (
           <MDBRow className="mt-3">
             <MDBCol lg="4">
               <MDBCard>
                 <MDBCardBody>
-                  <p className="lead">General</p>
-                  <p>{this.state.page.company.name}</p>
-                  <p>{this.state.page.company.description}</p>
-                  <p>{this.state.page.company.email}</p>
-                  <hr />
-                  <p>{this.state.page.company.vat.value}</p>
+                  <p className="lead mb-2">General</p>
+                  {page.name && (
+                    <p className="mb-0 font-weight-bold">{page.name}</p>
+                  )}
+                  {page.ownership && <p className="mb-2">{page.ownership}</p>}
+                  {page.address && <p className="mb-0">{page.address}</p>}
+                  {page.zipCode && page.city && (
+                    <p className="mb-0">
+                      {page.zipCode} {page.city}
+                    </p>
+                  )}
+                  {page.email && (
+                    <p className="mt-2 mb-0">
+                      <a href={`mailto:${page.email}`}>{page.email}</a>
+                    </p>
+                  )}
+                  {page.telephone && <p className="mb-0">{page.telephone}</p>}
+                  {page.vatNumber && (
+                    <>
+                      <hr />
+                      <p className="mb-1">VAT: {page.vatNumber}</p>
+                    </>
+                  )}
+                  {page.taxId && <p>Tax ID: {page.taxId}</p>}
                 </MDBCardBody>
               </MDBCard>
             </MDBCol>
           </MDBRow>
         ) : (
-          <span>No imprint</span>
+          <div></div>
         )}
       </div>
     );
diff --git a/src/components/pages/CompanyPage/index.jsx b/src/components/pages/CompanyPage/index.jsx
index 8c223e0..14774f2 100644
--- a/src/components/pages/CompanyPage/index.jsx
+++ b/src/components/pages/CompanyPage/index.jsx
@@ -312,7 +312,7 @@ class Page extends React.Component {
                 )}
                 {this.state.activeItem === 3 && (
                   <MDBTabPane tabId={3} role="tabpanel">
-                    <PageImprint />
+                    <PageImprint page={general} />
                   </MDBTabPane>
                 )}
               </MDBTabContent>

From be6318ac17a9e88c08ae120a305b3e8a265b838d Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Fri, 11 Sep 2020 10:07:32 +0200
Subject: [PATCH 101/175] Improve overview page

The tabs have been renamed and restructured.
---
 .../tabs/enterprise/PageOverview/index.jsx    | 32 ++-----------------
 1 file changed, 3 insertions(+), 29 deletions(-)

diff --git a/src/components/organisms/tabs/enterprise/PageOverview/index.jsx b/src/components/organisms/tabs/enterprise/PageOverview/index.jsx
index 24627a2..f3945e0 100644
--- a/src/components/organisms/tabs/enterprise/PageOverview/index.jsx
+++ b/src/components/organisms/tabs/enterprise/PageOverview/index.jsx
@@ -90,32 +90,6 @@ class PageOverview extends React.Component {
         <MDBCol lg="3">
           <div className="mt-3">
             <p className="lead font-weight-bold mb-1">Contributions</p>
-            {feed && (
-              <MDBCard className="mt-2">
-                <MDBCardBody>
-                  <div className="d-flex justify-content-between">
-                    <div>
-                      <p className="text-muted small mb-0">Total</p>
-                      <p className="mb-0">
-                        <span className="lead font-weight-bold">
-                          {feed.length}
-                        </span>{" "}
-                        <span className="small">commits</span>
-                      </p>
-                    </div>
-                    <div>
-                      <p className="text-muted small mb-0">Average</p>
-                      <p className="mb-0">
-                        <span className="lead font-weight-bold">
-                          {feed.length > 0 ? (365 / feed.length).toFixed(2) : 0}
-                        </span>{" "}
-                        <span className="small">/ day</span>
-                      </p>
-                    </div>
-                  </div>
-                </MDBCardBody>
-              </MDBCard>
-            )}
             {codestats && (
               <MDBCard className="border">
                 <MDBCardBody>
@@ -196,7 +170,7 @@ class PageOverview extends React.Component {
                     </p>
                   );
                 })}
-              {mergedFeed && mergedFeed.length > 0 && (
+              {mergedFeed && mergedFeed.years.length > 0 && (
                 <p
                   className={
                     this.state.selectedYearIndex === undefined
@@ -211,9 +185,9 @@ class PageOverview extends React.Component {
                 </p>
               )}
             </div>
-            {mergedFeed && mergedFeed.length > 0 ? (
+            {mergedFeed && mergedFeed.years.length > 0 ? (
               <div className="canvas-container">
-                <AILineChart
+                <AIBarChart
                   data={mergedFeed}
                   year={this.state.selectedYearIndex}
                   size={50}

From e17f9832f74d51e5e0ab20e271391db9ba70b20f Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Fri, 11 Sep 2020 10:07:45 +0200
Subject: [PATCH 102/175] Improve company page

Some more info is now being shown.
---
 src/components/pages/CompanyPage/company.scss |  1 +
 src/components/pages/CompanyPage/index.jsx    | 41 +++++++++++--------
 2 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/src/components/pages/CompanyPage/company.scss b/src/components/pages/CompanyPage/company.scss
index b424f71..5f7c2b4 100644
--- a/src/components/pages/CompanyPage/company.scss
+++ b/src/components/pages/CompanyPage/company.scss
@@ -61,6 +61,7 @@
     .badge {
       padding: 0.4rem;
       margin-right: 0.5rem;
+      box-shadow: none;
 
       i {
         margin-right: 0.3rem;
diff --git a/src/components/pages/CompanyPage/index.jsx b/src/components/pages/CompanyPage/index.jsx
index 14774f2..cae89e8 100644
--- a/src/components/pages/CompanyPage/index.jsx
+++ b/src/components/pages/CompanyPage/index.jsx
@@ -194,32 +194,38 @@ class Page extends React.Component {
                         </div>
                       </div>
                       <div>
-                        {/* {general.company.isRecruiting && (
-                          <MDBBadge color="indigo">
-                            <MDBIcon icon="users" />
-                            Recruiting
-                          </MDBBadge>
+                        {general.recruitingUrl && (
+                          <a
+                            href={general.recruitingUrl}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                          >
+                            <MDBBadge color="indigo">
+                              <MDBIcon icon="users" />
+                              Recruiting
+                            </MDBBadge>
+                          </a>
                         )}
-                        {enterprise.company.employees >= 1 &&
-                          enterprise.company.employees < 5 && (
+                        {general.employeeCount >= 1 &&
+                          general.employeeCount < 5 && (
                             <MDBBadge color="primary">1-5 Employees</MDBBadge>
                           )}
-                        {enterprise.company.employees >= 5 &&
-                          enterprise.company.employees < 20 && (
+                        {general.employeeCount >= 5 &&
+                          general.employeeCount < 20 && (
                             <MDBBadge color="primary">5-20 Employees</MDBBadge>
                           )}
-                        {enterprise.company.employees >= 20 &&
-                          enterprise.company.employees < 100 && (
+                        {general.employeeCount >= 20 &&
+                          general.employeeCount < 100 && (
                             <MDBBadge color="primary">
                               20-100 Employees
                             </MDBBadge>
                           )}
-                        {enterprise.company.employees >= 100 && (
+                        {general.employeeCount >= 100 && (
                           <MDBBadge color="primary">100+ Employees</MDBBadge>
                         )}
-                        {enterprise.company.isOpenSource && (
+                        {general.opensourceUrl && (
                           <a
-                            href={enterprise.company.openSourceUrl}
+                            href={general.opensourceUrl}
                             target="_blank"
                             rel="noopener noreferrer"
                           >
@@ -228,7 +234,7 @@ class Page extends React.Component {
                               Open source
                             </MDBBadge>
                           </a>
-                        )} */}
+                        )}
                       </div>
                     </MDBCol>
                   </MDBRow>
@@ -278,8 +284,9 @@ class Page extends React.Component {
                   <MDBTabPane tabId={0} role="tabpanel">
                     <PageOverview
                       filter={this.state.globalFilter}
-                      feed={general.enterpriseContributionFeed}
-                      mergedFeed={general.mergedEnterpriseContributionFeed}
+                      mergedFeed={
+                        general.mergedEnterpriseCodetransitionStatistic
+                      }
                       codestats={general.enterpriseCodelanguageStatistic}
                     />
                   </MDBTabPane>

From a8842b54979474c7290601307bbf101a6cd48a3e Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Fri, 11 Sep 2020 11:14:26 +0200
Subject: [PATCH 103/175] Add fake data for enterprise users

Now  a fake username and password is displayed if
the user is a anonymous one.
---
 package.json                                  |  1 +
 .../tabs/enterprise/PageUsers/index.jsx       | 25 ++++++++++++++++++-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index f671938..34d3f51 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "homepage": "https://snek.at",
   "license": "(EUPL-1.2)",
   "dependencies": {
+    "faker": "^5.1.0",
     "fuzzysort": "^1.1.4",
     "gh-pages": "^3.1.0",
     "js-sha256": "^0.9.0",
diff --git a/src/components/organisms/tabs/enterprise/PageUsers/index.jsx b/src/components/organisms/tabs/enterprise/PageUsers/index.jsx
index aa7e8c0..5c25040 100644
--- a/src/components/organisms/tabs/enterprise/PageUsers/index.jsx
+++ b/src/components/organisms/tabs/enterprise/PageUsers/index.jsx
@@ -19,6 +19,8 @@ import {
 //> Additional
 // Everything time related
 import moment from "moment";
+// Fake data generator
+import faker from "faker";
 
 //> Components
 import { UserModal } from "../../../../molecules/modals/enterprise";
@@ -119,6 +121,22 @@ class PageUsers extends React.Component {
         <MDBListGroup>
           {users ? (
             users.map((user, p) => {
+              const seed = parseInt(user.hash ? user.hash : user.username, 36);
+
+              faker.seed(seed);
+              user.anonym = true;
+
+              if (user.anonym) {
+                if (!user.hash) {
+                  user.hash = user.username;
+                }
+
+                user.username = faker.internet.userName();
+
+                user.avatar = faker.internet.avatar();
+                user.name = faker.name.findName();
+              }
+
               return (
                 <>
                   {user ? (
@@ -146,7 +164,12 @@ class PageUsers extends React.Component {
                           />
                         </MDBAvatar>
                         <div className="d-inline">
-                          <p className="mb-0">{user.name}</p>
+                          <p className="mb-0">
+                            <small>
+                              <span class="badge badge-success">Anonym</span>
+                            </small>
+                            {user.name}
+                          </p>
                           <p className="small text-muted mb-0">
                             {user.username}
                           </p>

From 00fc1f352308cffdc8d131329d5f617d0577c7b7 Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Sat, 12 Sep 2020 13:04:55 +0200
Subject: [PATCH 104/175] Add dynamic avatar image to company page

Now the company page no longer contains a
static image. Instead the company avatar image is
displayed.
---
 src/components/pages/CompanyPage/index.jsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/CompanyPage/index.jsx b/src/components/pages/CompanyPage/index.jsx
index cae89e8..5df8059 100644
--- a/src/components/pages/CompanyPage/index.jsx
+++ b/src/components/pages/CompanyPage/index.jsx
@@ -177,8 +177,12 @@ class Page extends React.Component {
                   <MDBRow className="d-flex align-items-center">
                     <MDBCol lg="2">
                       <img
-                        src="https://www.htl-villach.at/typo3conf/ext/htl_villach/Resources/Public/Images/htl_logo_box.svg"
-                        alt="Company logo"
+                        src={
+                          general?.avatarImage?.src
+                            ? general.avatarImage.src
+                            : ""
+                        }
+                        alt="No logo"
                         className="img-fluid"
                       />
                     </MDBCol>

From ff7d7c73c4058355e313cd7f46d1906ef9cbff0f Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Sat, 12 Sep 2020 13:06:21 +0200
Subject: [PATCH 105/175] Improve instagram posts action

Now the instagram post action returns
the posts.
---
 src/store/actions/personActions.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/store/actions/personActions.js b/src/store/actions/personActions.js
index b6d4943..edf49be 100644
--- a/src/store/actions/personActions.js
+++ b/src/store/actions/personActions.js
@@ -309,6 +309,8 @@ const getInstagramPosts = (id) => {
         type: Action.PERSON_INSTAGRAM_POSTS_FETCH_SUCCESS,
         payload: posts,
       });
+
+      return posts;
     } catch (ex) {
       dispatch({
         type: Action.PERSON_INSTAGRAM_POSTS_FETCH_FAILURE,

From 6b8eebb8c62ba108676e821567dd54a8467c9e21 Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Sat, 12 Sep 2020 20:23:09 +0200
Subject: [PATCH 106/175] Fix projects

The project language chart has been fully fixed.
---
 src/components/atoms/Project/index.jsx        | 24 +++---
 .../atoms/charts/AILanguageChart/index.jsx    | 77 -------------------
 .../charts/AILanguageChart/languages.scss     | 27 -------
 .../atoms/charts/LanguageBar/index.jsx        |  2 +-
 src/components/atoms/index.js                 |  2 -
 .../modals/enterprise/UserModal/index.jsx     |  2 +-
 6 files changed, 13 insertions(+), 121 deletions(-)
 delete mode 100644 src/components/atoms/charts/AILanguageChart/index.jsx
 delete mode 100644 src/components/atoms/charts/AILanguageChart/languages.scss

diff --git a/src/components/atoms/Project/index.jsx b/src/components/atoms/Project/index.jsx
index c1e60a8..ac81e82 100644
--- a/src/components/atoms/Project/index.jsx
+++ b/src/components/atoms/Project/index.jsx
@@ -43,19 +43,17 @@ class Project extends React.Component {
               </small>
             </div>
             <div className="pt-3">
-              {repo.languages?.length > 0 && (
-                <LanguageChart languages={repo.languages} />
-              )}
-              {repo.languages?.length > 0 && (
-                <small className="text-left text-muted">
-                  <MDBIcon
-                    icon="square"
-                    className="pr-1"
-                    style={{ color: repo.languages[0].color }}
-                  />
-                  {repo.languages[0].name ? repo.languages[0].name : "Unknown"}
-                </small>
-              )}
+              <LanguageChart languages={repo.languages} />
+              <small className="text-left text-muted">
+                <MDBIcon
+                  icon="square"
+                  className="pr-1"
+                  style={{
+                    color: repo.languages ? repo.languages[0].color : "grey",
+                  }}
+                />
+                {repo.languages ? repo.languages[0].name : "Unknown"}
+              </small>
             </div>
           </li>
         </a>
diff --git a/src/components/atoms/charts/AILanguageChart/index.jsx b/src/components/atoms/charts/AILanguageChart/index.jsx
deleted file mode 100644
index a8cc899..0000000
--- a/src/components/atoms/charts/AILanguageChart/index.jsx
+++ /dev/null
@@ -1,77 +0,0 @@
-//#region > Imports
-//> React
-// Contains all the functionality necessary to define React components
-import React from "react";
-
-//> Style sheet
-import "./languages.scss";
-//#endregion
-
-//#region > Components
-/**
- * @class A language chart which contains several items with their shares.
- */
-class AILanguageChart extends React.Component {
-  state = {};
-
-  renderBars = (languages) => {
-    let latest = 0;
-
-    if (languages[0].size !== 0) {
-      return languages.map((language, i) => {
-        const { color, share } = language;
-        const value = latest + share;
-
-        latest += share;
-
-        return (
-          <div
-            className="filler"
-            key={i}
-            style={{
-              width: `${value}%`,
-              backgroundColor: color,
-              zIndex: languages.length - i,
-            }}
-          ></div>
-        );
-      });
-    } else {
-      return (
-        <div
-          className="filler"
-          key={1}
-          style={{
-            width: `100%`,
-            backgroundColor: "grey",
-            zIndex: "1",
-          }}
-        ></div>
-      );
-    }
-  };
-
-  render() {
-    const { languages, height } = this.props;
-
-    return (
-      <div
-        className="languages"
-        style={{ height: `${height ? height + "px" : "7px"}` }}
-      >
-        {this.renderBars(languages)}
-      </div>
-    );
-  }
-}
-//#endregion
-
-//#region > Exports
-//> Default Component
-export default AILanguageChart;
-//#endregion
-
-/**
- * SPDX-License-Identifier: (EUPL-1.2)
- * Copyright © 2020 Simon Prast
- */
diff --git a/src/components/atoms/charts/AILanguageChart/languages.scss b/src/components/atoms/charts/AILanguageChart/languages.scss
deleted file mode 100644
index 2c37c75..0000000
--- a/src/components/atoms/charts/AILanguageChart/languages.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-.languages {
-  width: "100%";
-  background-color: "#e0e0de";
-  margin: 0.3rem 0;
-  position: relative;
-  transition: height 0.2s ease;
-
-  .filler {
-    height: 100%;
-    border-radius: inherit;
-    text-align: right;
-    position: absolute;
-
-    &:last-child {
-      border-top-right-radius: 0.3rem;
-      border-bottom-right-radius: 0.3rem;
-    }
-
-    border-top-left-radius: 0.3rem;
-    border-bottom-left-radius: 0.3rem;
-  }
-}
-
-/**
- * SPDX-License-Identifier: (EUPL-1.2)
- * Copyright © 2020 Simon Prast
- */
diff --git a/src/components/atoms/charts/LanguageBar/index.jsx b/src/components/atoms/charts/LanguageBar/index.jsx
index ddf69c1..e6d2e04 100644
--- a/src/components/atoms/charts/LanguageBar/index.jsx
+++ b/src/components/atoms/charts/LanguageBar/index.jsx
@@ -17,7 +17,7 @@ class LanguageBar extends React.Component {
   renderBars = (languages) => {
     let latest = 0;
 
-    if (languages[0].size !== 0) {
+    if (languages && languages[0].size !== 0) {
       return languages.map((language, i) => {
         const { color, share } = language;
         const value = latest + share;
diff --git a/src/components/atoms/index.js b/src/components/atoms/index.js
index 9107f6c..cceccb4 100644
--- a/src/components/atoms/index.js
+++ b/src/components/atoms/index.js
@@ -15,7 +15,6 @@ import LanguageChart from "./charts/LanguageBar";
 import AIBarChart from "./charts/AIBarChart";
 import AILineChart from "./charts/AILineChart";
 import AIContribCalendar from "./charts/AIContribCalendar";
-import AILanguageChart from "./charts/AILanguageChart";
 //> General
 import SearchBar from "./SearchBar";
 import ErrorBoundary from "./ErrorBoundary";
@@ -38,7 +37,6 @@ export {
   AIBarChart,
   AILineChart,
   AIContribCalendar,
-  AILanguageChart,
   /* General */
   SearchBar,
   ErrorBoundary,
diff --git a/src/components/molecules/modals/enterprise/UserModal/index.jsx b/src/components/molecules/modals/enterprise/UserModal/index.jsx
index 7a7d103..bc14b89 100644
--- a/src/components/molecules/modals/enterprise/UserModal/index.jsx
+++ b/src/components/molecules/modals/enterprise/UserModal/index.jsx
@@ -20,7 +20,7 @@ import {
 import moment from "moment";
 
 //> Components
-import { AIContribCalendar, AILanguageChart } from "../../../../atoms";
+import { AIContribCalendar } from "../../../../atoms";
 //#endregion
 
 //#region > Components

From f58a1c4cb51c1516bc0c2a99f6b51d845531cfe1 Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Sat, 12 Sep 2020 21:20:05 +0200
Subject: [PATCH 107/175] Remove duplicate status on person page

Now the status is only displayed once.
---
 src/components/organisms/sections/person/InfoCard/index.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/organisms/sections/person/InfoCard/index.jsx b/src/components/organisms/sections/person/InfoCard/index.jsx
index 830df34..a6e771e 100644
--- a/src/components/organisms/sections/person/InfoCard/index.jsx
+++ b/src/components/organisms/sections/person/InfoCard/index.jsx
@@ -307,7 +307,6 @@ class InfoCard extends React.Component {
                     }}
                   />
                 )}
-                <small className="px-1">{fetchedPerson.status}</small>
               </div>
             )}
           </div>

From faee546d5c95343029c18bee8096aa22aab7ddf4 Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Sat, 12 Sep 2020 23:03:50 +0200
Subject: [PATCH 108/175] Improve calendars

Now all calendar years are displayed properly.
---
 .../atoms/charts/AIContribCalendar/index.jsx  |  2 +-
 .../atoms/charts/Calendar2D/index.jsx         |  4 +--
 .../atoms/charts/Calendar3D/index.jsx         | 25 +++++++++++--------
 .../organisms/tabs/OverviewTab/index.jsx      |  4 +--
 4 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/components/atoms/charts/AIContribCalendar/index.jsx b/src/components/atoms/charts/AIContribCalendar/index.jsx
index 98fb231..ad80a51 100644
--- a/src/components/atoms/charts/AIContribCalendar/index.jsx
+++ b/src/components/atoms/charts/AIContribCalendar/index.jsx
@@ -80,7 +80,7 @@ class AIContribCalendar extends React.Component {
     // Get current month
     let current;
 
-    if (this.props.year) {
+    if (this.props.year !== undefined) {
       current = 0;
     } else {
       current = new Date().getMonth();
diff --git a/src/components/atoms/charts/Calendar2D/index.jsx b/src/components/atoms/charts/Calendar2D/index.jsx
index c838a9d..a8e4f28 100644
--- a/src/components/atoms/charts/Calendar2D/index.jsx
+++ b/src/components/atoms/charts/Calendar2D/index.jsx
@@ -66,7 +66,7 @@ class Calender2D extends React.Component {
       // Get contribution data
       let contribData;
 
-      if (year) {
+      if (year !== undefined) {
         contribData = yearsStatistic[year];
       } else {
         contribData = currentStatistic;
@@ -95,7 +95,7 @@ class Calender2D extends React.Component {
     // Get current month
     let current;
 
-    if (this.props.year) {
+    if (this.props.year !== undefined) {
       current = 0;
     } else {
       current = new Date().getMonth();
diff --git a/src/components/atoms/charts/Calendar3D/index.jsx b/src/components/atoms/charts/Calendar3D/index.jsx
index dba90f4..9d18d8f 100644
--- a/src/components/atoms/charts/Calendar3D/index.jsx
+++ b/src/components/atoms/charts/Calendar3D/index.jsx
@@ -81,8 +81,7 @@ class Calendar3D extends React.Component {
 
   renderTopStats() {
     let countTotal, averageCount, datesTotal, maxCount, dateBest, contribData;
-
-    if (this.props.year) {
+    if (this.props.year !== undefined) {
       contribData = this.props.yearsStatistic[this.props.year];
     } else {
       contribData = this.props.currentStatistic;
@@ -90,7 +89,7 @@ class Calendar3D extends React.Component {
 
     let contributionCalendar = JSON.parse(contribData.calendarData);
     let contributionDetails = JSON.parse(contribData.contributionTypeData);
-    let busiestDay = JSON.parse(JSON.stringify(contribData.busiestDay));
+    let busiestDay = contribData.busiestDay;
 
     countTotal = contributionDetails.total;
     averageCount = Math.round((countTotal / 365 + Number.EPSILON) * 100) / 100;
@@ -101,8 +100,7 @@ class Calendar3D extends React.Component {
       moment(contributionCalendar.endDate).format("MMM D");
 
     /* Busiest day */
-    maxCount = contribData.busiestDay.total;
-    console.log(busiestDay);
+    maxCount = busiestDay.total;
     dateBest = moment(contribData.busiestDay.date);
     dateBest = dateBest.isValid() ? dateBest.format("MMM DD") : "-";
 
@@ -118,13 +116,16 @@ class Calendar3D extends React.Component {
   renderBottomStats() {
     let streakLongest, datesLongest, streakCurrent, datesCurrent, contribData;
 
-    if (this.props.year) {
+    if (this.props.year !== undefined) {
       contribData = this.props.yearsStatistic[this.props.year];
     } else {
       contribData = this.props.currentStatistic;
     }
 
-    if (contribData.longestStreak) {
+    if (
+      contribData.longestStreak &&
+      contribData.longestStreak.totalDays !== null
+    ) {
       streakLongest = contribData.longestStreak.totalDays;
       datesLongest =
         moment(contribData.longestStreak.startDate).format("MMM D") +
@@ -135,7 +136,11 @@ class Calendar3D extends React.Component {
       datesLongest = "-";
     }
 
-    if (contribData.currentStreak) {
+    console.log(contribData);
+    if (
+      contribData.currentStreak &&
+      contribData.currentStreak.totalDays != null
+    ) {
       streakCurrent = contribData.currentStreak.totalDays;
       datesCurrent =
         moment(contribData.currentStreak.startDate).format("MMM D") +
@@ -166,8 +171,8 @@ class Calendar3D extends React.Component {
 
       // Get contributions of the selected year
       let contribData;
-      console.log(this.props.yearsStatistic, this.props.year);
-      if (this.props.year) {
+
+      if (this.props.year !== undefined) {
         contribData = this.props.yearsStatistic[this.props.year];
       } else {
         contribData = this.props.currentStatistic;
diff --git a/src/components/organisms/tabs/OverviewTab/index.jsx b/src/components/organisms/tabs/OverviewTab/index.jsx
index faad8c5..129d217 100644
--- a/src/components/organisms/tabs/OverviewTab/index.jsx
+++ b/src/components/organisms/tabs/OverviewTab/index.jsx
@@ -186,7 +186,7 @@ class OverviewTab extends React.Component {
               <>
                 {(display3dCalendar || display3dCalendar) && (
                   <div className="text-right year-select">
-                    {yearsStatistic.map((year, i) => {
+                    {[...yearsStatistic].reverse().map((year, i) => {
                       return (
                         <MDBBtn
                           color="white"
@@ -201,7 +201,7 @@ class OverviewTab extends React.Component {
                             this.setState({ selectedYearIndex: i })
                           }
                         >
-                          {this.state.selectedYearIndex}
+                          {year.year}
                         </MDBBtn>
                       );
                     })}

From efe471d29b37881b14a78de5d2066609e3e96589 Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Sat, 12 Sep 2020 23:26:53 +0200
Subject: [PATCH 109/175] Reverse the reversing

Now the years list is not reversed anymore.
Old: [2020, 2019, 2018 ] Current
New: [2018, 2019, 2020 ] Current
---
 src/components/organisms/tabs/OverviewTab/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/organisms/tabs/OverviewTab/index.jsx b/src/components/organisms/tabs/OverviewTab/index.jsx
index 129d217..98c8fb3 100644
--- a/src/components/organisms/tabs/OverviewTab/index.jsx
+++ b/src/components/organisms/tabs/OverviewTab/index.jsx
@@ -186,7 +186,7 @@ class OverviewTab extends React.Component {
               <>
                 {(display3dCalendar || display3dCalendar) && (
                   <div className="text-right year-select">
-                    {[...yearsStatistic].reverse().map((year, i) => {
+                    {yearsStatistic.map((year, i) => {
                       return (
                         <MDBBtn
                           color="white"

From 6d450e4ec21cf99ac7d36fa4884de9c2a8a20751 Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Sun, 13 Sep 2020 00:44:00 +0200
Subject: [PATCH 110/175] Implement connections

It is now possible to add GitHub and Instagram. GitLab is still WIP.
---
 src/Routes.js                                 |   3 +-
 .../molecules/modals/ConnectModal/index.jsx   | 201 ++++++++-----
 src/components/pages/SettingsPage/index.jsx   | 266 +++++++++++++-----
 src/store/actions/generalActions.js           |   5 +
 src/store/actions/personActions.js            |  30 +-
 src/store/reducers/generalReducers.js         |   4 +-
 6 files changed, 337 insertions(+), 172 deletions(-)

diff --git a/src/Routes.js b/src/Routes.js
index dd5d90d..c4c1eea 100644
--- a/src/Routes.js
+++ b/src/Routes.js
@@ -42,7 +42,7 @@ class Routes extends React.Component {
           exact
           path="/t/:username/:uid"
           component={(props) => <TalkPage {...props} />}
-        />
+        />*/}
         <Route
           exact
           path="/redirect"
@@ -53,7 +53,6 @@ class Routes extends React.Component {
             };
           }}
         />
-        */}
         <Route
           exact
           path="/settings"
diff --git a/src/components/molecules/modals/ConnectModal/index.jsx b/src/components/molecules/modals/ConnectModal/index.jsx
index 2634af8..9661c43 100644
--- a/src/components/molecules/modals/ConnectModal/index.jsx
+++ b/src/components/molecules/modals/ConnectModal/index.jsx
@@ -28,26 +28,28 @@ import {
 
 //> Actions
 // Functions to send data from the application to the store
-//import { fetchGitLabServersAction } from "../../../../store/actions/generalActions";
+import { addProfile } from "../../../../store/actions/personActions";
+import { getGitlabServers } from "../../../../store/actions/generalActions";
+//> OAuth
+import { GitHubOAuth, InstagramOAuth } from "reactjs-oauth";
+//> Style
+import "./connectmodal.scss";
 //#endregion
 
 //#region > Components
 class ConnectModal extends React.Component {
-  state = { youtubeLink: "", modalGitLab: false };
+  state = { sourceList: [], gitlab_server: undefined };
 
   componentDidMount = () => {
-    this.getGitLabServers();
+    this.props.getGitlabServers();
   };
 
-  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,
-        });
-      });*/
+  componentDidUpdate = () => {
+    console.log("SERVER", this.props.gitlabServer);
+    if (!this.state.gitlab_servers && this.props.gitlabServer) {
+      this.setState({
+        gitlab_servers: this.props.gitlabServer,
+      });
     }
   };
 
@@ -68,79 +70,123 @@ class ConnectModal extends React.Component {
     );
   };
 
-  addGitHub = () => {
-    // Do stuff
+  oauthGitHubSuccess = (response) => {
+    this.setState(
+      {
+        loadingGitHub: true,
+      },
+      async () => {
+        console.log(response);
+        this.props
+          .addProfile({
+            URL: "https://api.github.com/graphql",
+            type: "GITHUB",
+            authorization: response.accessToken,
+            username: response.username,
+          })
+          .then(() => this.props.refetch());
+      }
+    );
+  };
+
+  oauthGitHubFailure = (response) => {
+    //#ERROR
+    console.error(response);
+  };
+
+  oauthInstagramSuccess = (response) => {
+    this.setState(
+      {
+        loadingInstagram: true,
+      },
+      async () => {
+        console.log(response);
+        this.props
+          .addProfile({
+            URL: "https://graph.instagram.com",
+            type: "INSTAGRAM",
+            authorization: response.accessToken,
+            username: response.username,
+          })
+          .then(() => this.props.refetch());
+      }
+    );
   };
 
-  addInstagram = () => {
-    // Do stuff
+  oauthInstagramFailure = (response) => {
+    //#ERROR
+    console.error(response);
   };
 
   render() {
     const { selectedVideoId } = this.props;
 
+    console.log(this.state);
+    console.log(this.props);
+
     return (
       <>
-        <MDBModal
-          isOpen={this.state.modalGitLab ? false : true}
-          toggle={this.props.toggle}
-          size="md"
-          centered
-          animation="left"
-        >
-          <MDBModalBody className="p-3 text-center">
-            <div className="d-flex justify-content-between align-items-center">
-              <p className="lead mb-0">Connect your profiles</p>
-              <MDBBtn color="green" onClick={this.props.toggle}>
-                Done
+        <div className="text-center" id="connectmodal">
+          {this.props.disabled ? (
+            <>
+              <MDBBtn social="git" disabled>
+                <MDBIcon fab icon="github" size="lg" />
+              </MDBBtn>
+              <MDBBtn social="ins" disabled>
+                <MDBIcon fab icon="instagram" size="lg" />
+              </MDBBtn>
+              <MDBBtn color="orange" disabled>
+                <MDBIcon fab icon="gitlab" size="lg" />
+              </MDBBtn>
+            </>
+          ) : (
+            <>
+              {!process.env.NODE_ENV ||
+              process.env.NODE_ENV === "development" ? (
+                <GitHubOAuth
+                  authorizationUrl="https://github.com/login/oauth/authorize"
+                  clientId="1440dd4c1d1c4c0fa124"
+                  clientSecret="0723a2b5bfef27efc8b2d26d837ead239fa0b0e6"
+                  redirectUri="http://localhost:3000/redirect"
+                  onSuccess={this.oauthGitHubSuccess}
+                  onFailure={this.oauthGitHubFailure}
+                />
+              ) : (
+                <GitHubOAuth
+                  authorizationUrl="https://github.com/login/oauth/authorize"
+                  clientId="2148629809594d57c113"
+                  clientSecret="64a37e4846387cfcaea35d83afca3c9c8689628c"
+                  redirectUri="https://snek.at/redirect"
+                  onSuccess={this.oauthGitHubSuccess}
+                  onFailure={this.oauthGitHubFailure}
+                />
+              )}
+              {!process.env.NODE_ENV ||
+              process.env.NODE_ENV === "development" ? (
+                <InstagramOAuth
+                  authorizationUrl="https://api.instagram.com/oauth/authorize"
+                  clientId="291591375471783"
+                  clientSecret="d4e65f2dd4c72c3123cfbd84c19e7bee"
+                  redirectUri="https://localhost:3000/redirect"
+                  onSuccess={this.oauthInstagramSuccess}
+                  onFailure={this.oauthInstagramFailure}
+                />
+              ) : (
+                <InstagramOAuth
+                  authorizationUrl="https://api.instagram.com/oauth/authorize"
+                  clientId="291591375471783"
+                  clientSecret="d4e65f2dd4c72c3123cfbd84c19e7bee"
+                  redirectUri="https://snek.at/redirect"
+                  onSuccess={this.oauthInstagramSuccess}
+                  onFailure={this.oauthInstagramFailure}
+                />
+              )}
+              <MDBBtn color="orange" onClick={this.toggle}>
+                <MDBIcon fab icon="gitlab" size="lg" />
               </MDBBtn>
-            </div>
-            <div className="pt-4 text-center">
-              <MDBRow className="justify-content-center">
-                <MDBCol lg="7">
-                  <MDBBtn
-                    social="git"
-                    size="lg"
-                    className="d-block mx-auto w-100"
-                    onClick={() => this.addGitHub()}
-                  >
-                    <MDBIcon fab icon="github" />
-                    Connect GitHub
-                  </MDBBtn>
-                  <MDBBtn
-                    color="orange"
-                    size="lg"
-                    className="d-block mx-auto w-100"
-                    onClick={this.toggle}
-                  >
-                    <MDBIcon fab icon="gitlab" />
-                    Connect GitLab
-                  </MDBBtn>
-                  <MDBBtn
-                    social="ins"
-                    size="lg"
-                    className="d-block mx-auto w-100"
-                    onClick={() => this.addInstagram()}
-                  >
-                    <MDBIcon fab icon="instagram" />
-                    Connect Instagram
-                  </MDBBtn>
-                </MDBCol>
-              </MDBRow>
-            </div>
-            {this.state.youtubeId && (
-              <div className="embed-responsive embed-responsive-16by9 mt-3">
-                <iframe
-                  className="embed-responsive-item"
-                  title="YouTube Video"
-                  src={"//www.youtube.com/embed/" + this.state.youtubeId}
-                  frameBorder="0"
-                  allowFullScreen
-                ></iframe>
-              </div>
-            )}
-          </MDBModalBody>
-        </MDBModal>
+            </>
+          )}
+        </div>
         {this.state.modalGitLab && (
           <MDBModal
             className="text-white"
@@ -210,12 +256,13 @@ class ConnectModal extends React.Component {
 
 //#region > Redux Mapping
 const mapStateToProps = (state) => ({
-  //gitlabServers: state.general.allGitlabServers,
+  gitlabServer: state.general.gitlabServer,
 });
 
 const mapDispatchToProps = (dispatch) => {
   return {
-    //fetchGitLabServers: () => dispatch(fetchGitLabServersAction())
+    addProfile: (source) => dispatch(addProfile(source)),
+    getGitlabServers: () => dispatch(getGitlabServers()),
   };
 };
 //#endregion
diff --git a/src/components/pages/SettingsPage/index.jsx b/src/components/pages/SettingsPage/index.jsx
index 9815a08..8d2a0c3 100644
--- a/src/components/pages/SettingsPage/index.jsx
+++ b/src/components/pages/SettingsPage/index.jsx
@@ -30,6 +30,8 @@ import {
   MDBListGroup,
   MDBListGroupItem,
   MDBBadge,
+  MDBAlert,
+  MDBProgress,
 } from "mdbreact";
 //> Redux
 // Allows to React components read data from a Redux store, and dispatch actions
@@ -44,12 +46,20 @@ import { connect } from "react-redux";
 // } from "../../../store/actions/userActions";
 //> Components
 // Profile Picture Editor
-import { ProfilePictureModal } from "../../../components/molecules/modals";
+import {
+  ProfilePictureModal,
+  ConnectModal,
+} from "../../../components/molecules/modals";
 //> Style sheet
 import "./settings.scss";
 //> Actions
 // Functions to send data from the application to the store
-import { updateSettings } from "../../../store/actions/personActions";
+import {
+  updateSettings,
+  deleteProfile,
+  updateProfile,
+} from "../../../store/actions/personActions";
+import { getPerson as getUserPerson } from "../../../store/actions/userActions";
 //#endregion
 
 //#region > Components
@@ -77,6 +87,8 @@ class SettingsPage extends React.Component {
   handleLoading = () => {
     const { loggedUser } = this.props;
 
+    console.log("HANDLE LOADING");
+
     if (loggedUser.anonymous) {
       this.props.history.push({
         pathname: "/",
@@ -86,7 +98,7 @@ class SettingsPage extends React.Component {
       });
     }
 
-    if (loggedUser?.person && this.state.loading) {
+    if (loggedUser?.person) {
       const {
         avatarImage,
         bio,
@@ -111,32 +123,58 @@ class SettingsPage extends React.Component {
         profiles,
       } = loggedUser?.person;
 
-      this.setState({
-        loading: false,
-        person: {
-          avatarImage,
-          bio,
-          display2dCalendar,
-          display3dCalendar,
-          displayContributionTypes,
-          displayWeekActivity,
-          displayImageGallery,
-          displayVideoGallery,
-          displayMusicGallery,
-          displayEmail,
-          displayProgrammingLanguages,
-          displayRanking,
-          displayWorkplace,
-          email,
-          firstName,
-          lastName,
-          location,
-          status,
-          websiteUrl,
-          workplace,
-          profiles,
-        },
-      });
+      const person = {
+        avatarImage,
+        bio,
+        display2dCalendar,
+        display3dCalendar,
+        displayContributionTypes,
+        displayWeekActivity,
+        displayImageGallery,
+        displayVideoGallery,
+        displayMusicGallery,
+        displayEmail,
+        displayProgrammingLanguages,
+        displayRanking,
+        displayWorkplace,
+        email,
+        firstName,
+        lastName,
+        location,
+        status,
+        websiteUrl,
+        workplace,
+        profiles,
+      };
+
+      if (JSON.stringify(this.state.person) !== JSON.stringify(person)) {
+        this.setState({
+          loading: false,
+          person: {
+            avatarImage,
+            bio,
+            display2dCalendar,
+            display3dCalendar,
+            displayContributionTypes,
+            displayWeekActivity,
+            displayImageGallery,
+            displayVideoGallery,
+            displayMusicGallery,
+            displayEmail,
+            displayProgrammingLanguages,
+            displayRanking,
+            displayWorkplace,
+            email,
+            firstName,
+            lastName,
+            location,
+            status,
+            websiteUrl,
+            workplace,
+            profiles,
+          },
+        });
+      }
     }
   };
 
@@ -150,6 +188,28 @@ class SettingsPage extends React.Component {
     this.handleLoading();
   };
 
+  refetch = () => {
+    const { loggedUser } = this.props;
+
+    if (loggedUser.anonymous) {
+      this.props.history.push({
+        pathname: "/",
+        state: {
+          actionCard: 1,
+        },
+      });
+    }
+
+    if (loggedUser.person) {
+      this.setState(
+        {
+          loading: true,
+        },
+        () => this.props.getUserPerson(loggedUser.person.slug.split("-")[1])
+      );
+    }
+  };
+
   onDrop = async (files) => {
     if (files.length > 0) {
       this.setState({
@@ -213,10 +273,18 @@ class SettingsPage extends React.Component {
       : false;
   };
 
+  toggle = (modal) => {
+    this.setState({
+      [modal]: !this.state[modal],
+    });
+  };
+
   render() {
     const { loggedUser } = this.props;
     const { person, activeItem } = this.state;
 
+    console.log("STATE", this.state);
+
     if (person) {
       return (
         <>
@@ -435,12 +503,22 @@ class SettingsPage extends React.Component {
                     <hr />
                   </MDBTabPane>
                   <MDBTabPane tabId={1}>
-                    <h5>Connections</h5>
+                    <div className="d-flex justify-content-between align-items-center mb-4">
+                      <h5 className="mb-0">Connections</h5>
+                      <div>
+                        <ConnectModal
+                          refetch={this.refetch}
+                          disabled={this.state.loading}
+                        />
+                      </div>
+                    </div>
+                    {this.state.loading && <MDBProgress material preloader />}
                     <MDBListGroup>
                       {person.profiles?.map((profile, p) => {
+                        console.log("PROFILE", profile);
                         return (
                           <MDBListGroupItem
-                            className="d-flex justify-content-between align-items-center clickable"
+                            className="d-flex justify-content-between align-items-center clickable py-0 pr-0 pl-2"
                             // onClick={
                             //   // this.setState({
                             //   //   modal: true,
@@ -450,70 +528,108 @@ class SettingsPage extends React.Component {
                             // }
                             key={p}
                           >
-                            <div>
-                              <td>
-                                <a
-                                  href={profile.sourceUrl}
-                                  target="_blank"
-                                  className="mr-3"
-                                >
-                                  <MDBIcon
-                                    fab
-                                    icon={this.renderProfileTypeSwitch(
-                                      profile.sourceType
-                                    )}
-                                    li
-                                    size="4x"
-                                  />
-                                </a>
-                              </td>
+                            <div className="d-flex align-items-center">
+                              <a
+                                href={profile.sourceUrl}
+                                target="_blank"
+                                className="mr-2 text-dark"
+                              >
+                                <MDBIcon
+                                  fab
+                                  icon={this.renderProfileTypeSwitch(
+                                    profile.sourceType
+                                  )}
+                                  size="2x"
+                                />
+                              </a>
                               <code>
                                 {profile.username ? profile.username : null}
                               </code>
+                              {profile.isAccessTokenExpired && (
+                                <MDBBadge
+                                  pill
+                                  color="danger"
+                                  className="z-depth-0 ml-2"
+                                >
+                                  Expired
+                                </MDBBadge>
+                              )}
                             </div>
                             <div className="d-flex align-items-center justify-content-center">
-                              <div className="small d-inline-block text-center px-2">
+                              <div className="small d-inline-block text-right px-2">
                                 <span className="text-muted">Type</span>
                                 <span className="d-block">
                                   {profile.sourceType}
                                 </span>
                               </div>
                               <div className="small d-inline-block text-center ml-2">
-                                <span className="text-muted">Expired</span>
+                                <span className="text-muted">Active</span>
                                 <span className="d-block">
                                   <MDBIcon
                                     icon="circle"
                                     size="lg"
                                     className={
-                                      profile.active
+                                      profile.isActive &&
+                                      !profile.isAccessTokenExpired
                                         ? "text-success"
                                         : "text-danger"
                                     }
                                   />
                                 </span>
                               </div>
-                              <div className="small d-inline-block text-center ml-2">
-                                <span className="text-muted">Active</span>
-                                <span className="d-block">
+                              {profile.isActive ? (
+                                <div className="bg-warning h-100 ml-3">
                                   <MDBIcon
-                                    icon="circle"
-                                    size="lg"
-                                    className={
-                                      profile.active
-                                        ? "text-success"
-                                        : "text-danger"
+                                    icon="pause"
+                                    className="text-white p-3"
+                                    onClick={() =>
+                                      this.props
+                                        .updateProfile(profile.id, {
+                                          URL: profile.sourceUrl,
+                                          type: profile.sourceType,
+                                          authorization: profile.accessToken,
+                                          username: profile.username,
+                                          isActive: false,
+                                        })
+                                        .then(() => this.refetch())
                                     }
                                   />
-                                </span>
+                                </div>
+                              ) : (
+                                <div className="bg-success h-100 ml-3">
+                                  <MDBIcon
+                                    icon="play"
+                                    className="text-white p-3"
+                                    onClick={() =>
+                                      this.props
+                                        .updateProfile(profile.id, {
+                                          URL: profile.sourceUrl,
+                                          type: profile.sourceType,
+                                          authorization: profile.accessToken,
+                                          username: profile.username,
+                                          isActive: true,
+                                        })
+                                        .then(() => this.refetch())
+                                    }
+                                  />
+                                </div>
+                              )}
+                              <div className="bg-danger h-100">
+                                <MDBIcon
+                                  icon="trash"
+                                  className="text-white p-3"
+                                  onClick={() =>
+                                    this.props
+                                      .deleteProfile(profile.id)
+                                      .then(() => this.refetch())
+                                  }
+                                />
                               </div>
                             </div>
                           </MDBListGroupItem>
                         );
                       })}
                     </MDBListGroup>
-                    <div class="text-right">
-                      <MDBBtn color="green">Add</MDBBtn>
-                    </div>
                   </MDBTabPane>
                   <MDBTabPane tabId={2}>
                     <h5>Customization</h5>
@@ -582,16 +698,19 @@ class SettingsPage extends React.Component {
                         <MDBCol md="12">
                           <hr />
                         </MDBCol>
-
                         {!this.checkProfileTypeExists("GITHUB") &&
                           !this.checkProfileTypeExists("GITLAB") && (
-                            <MDBBadge pill color="info">
-                              <i class="fas fa-question-circle"></i> Looks like
-                              no profiles are present. You can add one
-                              <a href={""}> here!</a>
-                            </MDBBadge>
+                            <MDBAlert color="info">
+                              <MDBIcon icon="question-circle" /> Looks like no
+                              profiles are present. You can add one{" "}
+                              <span
+                                className="blue-text clickable"
+                                onClick={() => this.setState({ activeItem: 1 })}
+                              >
+                                here!
+                              </span>
+                            </MDBAlert>
                           )}
-
                         <span class="badge badge-info pill"></span>
                         <MDBCol md="12">
                           <MDBInput
@@ -809,11 +928,16 @@ class SettingsPage extends React.Component {
 //#region > Redux Mapping
 const mapStateToProps = (state) => ({
   loggedUser: state.user.user,
+  person: state.person,
 });
 
 const mapDispatchToProps = (dispatch) => {
   return {
     saveSettings: (nextSettings) => dispatch(updateSettings(nextSettings)),
+    deleteProfile: (id) => dispatch(deleteProfile(id)),
+    updateProfile: (id, nextProfile) =>
+      dispatch(updateProfile(id, nextProfile)),
+    getUserPerson: (user) => dispatch(getUserPerson(user)),
   };
 };
 //#endregion
diff --git a/src/store/actions/generalActions.js b/src/store/actions/generalActions.js
index 52bf782..66b9005 100644
--- a/src/store/actions/generalActions.js
+++ b/src/store/actions/generalActions.js
@@ -91,3 +91,8 @@ const getAchievements = () => {
 //#endregion
 
 export { getGitlabServers, getPersonsBrief, getAchievements };
+
+/**
+ * SPDX-License-Identifier: (EUPL-1.2)
+ * Copyright © 2019-2020 Simon Prast
+ */
diff --git a/src/store/actions/personActions.js b/src/store/actions/personActions.js
index edf49be..43b2cb9 100644
--- a/src/store/actions/personActions.js
+++ b/src/store/actions/personActions.js
@@ -184,7 +184,7 @@ const getProfiles = (personName) => {
 
 const addProfile = (
   source = {
-    url: undefined,
+    URL: undefined,
     type: undefined,
     authorization: undefined,
     username: undefined,
@@ -199,9 +199,7 @@ const addProfile = (
 
       const profile = await INTEL_SNEK.person.addProfile({
         personName,
-        source: {
-          ...source,
-        },
+        source,
       });
 
       dispatch({ type: Action.PERSON_PROFILE_ADD_SUCCESS, payload: profile });
@@ -232,6 +230,7 @@ const deleteProfile = (id) => {
         payload: profiles,
       });
     } catch (ex) {
+      console.log("FAIL", Action.PERSON_META_LINK_DELETE_FAILURE);
       dispatch({
         type: Action.PERSON_META_LINK_DELETE_FAILURE,
         payload: {
@@ -247,28 +246,19 @@ const deleteProfile = (id) => {
 const updateProfile = (
   id,
   nextProfile = {
-    avatarImage: undefined,
-    bio: undefined,
-    display2dCalendar: undefined,
-    display3dCalendar: undefined,
-    displayEmail: undefined,
-    displayProgrammingLanguages: undefined,
-    displayRanking: undefined,
-    displayWorkplace: undefined,
-    email: undefined,
-    firstName: undefined,
-    lastName: undefined,
-    location: undefined,
-    movablePool: undefined,
-    status: undefined,
-    websiteUrl: undefined,
-    workplace: undefined,
+    URL: undefined,
+    type: undefined,
+    authorization: undefined,
+    username: undefined,
+    isActive: undefined,
   }
 ) => {
   return async (dispatch, getState, {}) => {
     try {
       dispatch({ type: Action.PERSON_PROFILE_UPDATE_REQUEST });
 
+      console.log(nextProfile, id);
+
       const profile = await INTEL_SNEK.person.updateProfile({
         profileId: id,
         toUpdate: {
diff --git a/src/store/reducers/generalReducers.js b/src/store/reducers/generalReducers.js
index 22c0211..21c9e5e 100644
--- a/src/store/reducers/generalReducers.js
+++ b/src/store/reducers/generalReducers.js
@@ -22,12 +22,12 @@ const generalReducer = (state = INIT_STATE, action) => {
     //> Get all gitlab server
     case Action.GENERAL_GITLAB_SERVER_FETCH_REQUEST:
       return state;
-    case Action.GENERAL_GITLAB_SERVER_FETCH_FAILURE:
+    case Action.GENERAL_GITLAB_SERVER_FETCH_SUCCESS:
       return {
         ...state,
         gitlabServer: action.payload,
       };
-    case Action.GENERAL_GITLAB_SERVER_FETCH_SUCCESS:
+    case Action.GENERAL_GITLAB_SERVER_FETCH_FAILURE:
       return {
         ...state,
         gitlabServer: undefined,

From ef11eb8e3660a39bd18858868128bceae9c001a5 Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Sun, 13 Sep 2020 00:50:36 +0200
Subject: [PATCH 111/175] Add connect modal styling

Styling has been added to the connect modal.
---
 .../molecules/modals/ConnectModal/connectmodal.scss  | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 src/components/molecules/modals/ConnectModal/connectmodal.scss

diff --git a/src/components/molecules/modals/ConnectModal/connectmodal.scss b/src/components/molecules/modals/ConnectModal/connectmodal.scss
new file mode 100644
index 0000000..31d7e7a
--- /dev/null
+++ b/src/components/molecules/modals/ConnectModal/connectmodal.scss
@@ -0,0 +1,12 @@
+#connectmodal {
+  .btn {
+    i {
+      margin: 0;
+    }
+  }
+}
+
+/**
+ * SPDX-License-Identifier: (EUPL-1.2)
+ * Copyright © 2019-2020 Simon Prast
+ */

From 91a392a49eae4f62717e929c15549ab3fe47cd4f Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Sun, 13 Sep 2020 00:53:53 +0200
Subject: [PATCH 112/175] Implement gitlab

Gitlabs can now be added.
---
 .../molecules/modals/ConnectModal/index.jsx   | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/components/molecules/modals/ConnectModal/index.jsx b/src/components/molecules/modals/ConnectModal/index.jsx
index 9661c43..49bae51 100644
--- a/src/components/molecules/modals/ConnectModal/index.jsx
+++ b/src/components/molecules/modals/ConnectModal/index.jsx
@@ -65,7 +65,19 @@ class ConnectModal extends React.Component {
         modalGitLab: false,
       },
       () => {
-        // Do stuff
+        const gitlab = {
+          server: this.state.gitlab_server,
+          username: this.state.gitlab_username,
+        };
+
+        this.props
+          .addProfile({
+            URL: gitlab.server,
+            type: "GITLAB",
+            authorization: undefined,
+            username: gitlab.username,
+          })
+          .then(() => this.props.refetch());
       }
     );
   };
@@ -118,6 +130,12 @@ class ConnectModal extends React.Component {
     console.error(response);
   };
 
+  handleSelectChange = (e) => {
+    this.setState({
+      gitlab_server: e[0],
+    });
+  };
+
   render() {
     const { selectedVideoId } = this.props;
 

From c2547a5ba377492729b964e66b8962f18a25feb8 Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Sun, 13 Sep 2020 00:55:57 +0200
Subject: [PATCH 113/175] Improve gitlab modal

The button is now disabled unless the required info is given.
---
 src/components/molecules/modals/ConnectModal/index.jsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/molecules/modals/ConnectModal/index.jsx b/src/components/molecules/modals/ConnectModal/index.jsx
index 49bae51..54d1e18 100644
--- a/src/components/molecules/modals/ConnectModal/index.jsx
+++ b/src/components/molecules/modals/ConnectModal/index.jsx
@@ -256,7 +256,13 @@ class ConnectModal extends React.Component {
               </MDBSelect>
             </MDBModalBody>
             <MDBModalFooter className="justify-content-center">
-              <MDBBtn color="orange" onClick={this.addGitLab}>
+              <MDBBtn
+                color="orange"
+                onClick={this.addGitLab}
+                disabled={
+                  !this.state.gitlab_username || !this.state.gitlab_servers
+                }
+              >
                 <MDBIcon icon="plus-circle" className="mr-2" />
                 Add
               </MDBBtn>

From f3db888ebf9fe5dbef6fcd876408917191f7bcaa Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Sun, 13 Sep 2020 01:26:24 +0200
Subject: [PATCH 114/175] Improve profile processing

A 30 second lock has been implemented which
occurs after profile processing is successful.
If you are on your own profile at the time the
lockdown is released, it will be re-fetched
immediately. Otherwise when entering the profile.
---
 src/components/pages/PersonPage/index.jsx | 6 ++++--
 src/store/actions/personActions.js        | 9 ++++++++-
 src/store/reducers/personReducers.js      | 8 +++++++-
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/components/pages/PersonPage/index.jsx b/src/components/pages/PersonPage/index.jsx
index 2d77501..d5acd6d 100644
--- a/src/components/pages/PersonPage/index.jsx
+++ b/src/components/pages/PersonPage/index.jsx
@@ -50,13 +50,14 @@ class PersonPage extends React.Component {
   };
 
   componentDidUpdate = async () => {
-    const { fetchedPerson, loggedUser } = this.props;
+    const { fetchedPerson, loggedUser, profilesProcessed } = this.props;
 
     if (
       !this.state.cachingDone &&
       fetchedPerson &&
       loggedUser?.person &&
-      fetchedPerson.slug === loggedUser.person.slug
+      fetchedPerson.slug === loggedUser.person.slug &&
+      !profilesProcessed
     ) {
       await this.props.processProfiles();
 
@@ -113,6 +114,7 @@ class PersonPage extends React.Component {
 const mapStateToProps = (state) => ({
   loggedUser: state.user.user,
   fetchedPerson: state.person.fetchedPerson,
+  profilesProcessed: state.person.profilesProcessed,
 });
 
 const mapDispatchToProps = (dispatch) => {
diff --git a/src/store/actions/personActions.js b/src/store/actions/personActions.js
index 43b2cb9..0cb3406 100644
--- a/src/store/actions/personActions.js
+++ b/src/store/actions/personActions.js
@@ -326,9 +326,16 @@ const processProfiles = () => {
         personName,
       });
 
+      await dispatch({
+        type: Action.PERSON_PROFILES_PROCESS_SUCCESS,
+        payload: true,
+      });
+
+      await new Promise((resolve) => setTimeout(resolve, 30000));
+
       dispatch({
         type: Action.PERSON_PROFILES_PROCESS_SUCCESS,
-        payload: posts,
+        payload: false,
       });
     } catch (ex) {
       dispatch({
diff --git a/src/store/reducers/personReducers.js b/src/store/reducers/personReducers.js
index 8b79908..3ee232f 100644
--- a/src/store/reducers/personReducers.js
+++ b/src/store/reducers/personReducers.js
@@ -9,6 +9,7 @@ import * as Action from "../types";
 //#region > Constant Variables
 const INIT_STATE = {
   fetchedPerson: undefined,
+  profilesProcessed: false,
   error: undefined,
   errorDetails: undefined,
 };
@@ -44,7 +45,6 @@ const personReducer = (state = INIT_STATE, action) => {
       Action.PERSON_PROFILE_DELETE_SUCCESS |
       Action.PERSON_PROFILE_UPDATE_SUCCESS |
       Action.PERSON_INSTAGRAM_POSTS_FETCH_SUCCESS |
-      Action.PERSON_PROFILES_PROCESS_SUCCESS |
       Action.PERSON_FOLLOW_SUCCESS |
       Action.PERSON_UNFOLLOW_SUCCESS |
       Action.PERSON_LIKE_SUCCESS |
@@ -72,6 +72,12 @@ const personReducer = (state = INIT_STATE, action) => {
         error: action.payload,
         errorDetails: serializeError(action.payload.error),
       };
+    //> Profile processing
+    case Action.PERSON_PROFILES_PROCESS_SUCCESS:
+      return {
+        ...state,
+        profilesProcessed: action.payload,
+      };
     //> Get person
     case Action.PERSON_FETCH_REQUEST:
       return state;

From ffb878fc839a8ca213b1f819f839b23ba7aa8807 Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Sun, 13 Sep 2020 12:23:42 +0200
Subject: [PATCH 115/175] Implement media sections functionality

Some more functionality has been introduced like a young kitten to a new flat.
---
 .../molecules/modals/AddVideoModal/index.jsx  |  2 +-
 .../modals/InstagramSelectorModal/index.jsx   | 57 +++++++++++-------
 .../sections/media/AIGallery/aigallery.scss   | 22 ++++---
 .../sections/media/AIGallery/index.jsx        | 16 ++++-
 .../sections/media/AISongGallery/index.jsx    | 28 ++++++---
 .../media/AIVideoGallery/aivideogallery.scss  | 23 ++++----
 .../sections/media/AIVideoGallery/index.jsx   | 58 +++++++++----------
 .../organisms/tabs/OverviewTab/index.jsx      | 24 ++++++++
 src/store/actions/personActions.js            |  8 ++-
 9 files changed, 147 insertions(+), 91 deletions(-)

diff --git a/src/components/molecules/modals/AddVideoModal/index.jsx b/src/components/molecules/modals/AddVideoModal/index.jsx
index 9f1cd3e..cddff16 100644
--- a/src/components/molecules/modals/AddVideoModal/index.jsx
+++ b/src/components/molecules/modals/AddVideoModal/index.jsx
@@ -94,7 +94,7 @@ class AddVideoModal extends React.Component {
             <div className="d-flex justify-content-between align-items-center">
               <p className="lead mb-0">Add YouTube Video</p>
               <MDBBtn
-                color="green"
+                social="yt"
                 disabled={!this.state.youtubeId || this.state.youtubeLinkError}
                 onClick={() => this.props.save(this.state)}
               >
diff --git a/src/components/molecules/modals/InstagramSelectorModal/index.jsx b/src/components/molecules/modals/InstagramSelectorModal/index.jsx
index 3e6c096..c81dd62 100644
--- a/src/components/molecules/modals/InstagramSelectorModal/index.jsx
+++ b/src/components/molecules/modals/InstagramSelectorModal/index.jsx
@@ -24,6 +24,9 @@ import {
   MDBMask,
 } from "mdbreact";
 
+//> Actions
+// Functions to send data from the application to the store
+import { getInstagramPosts } from "../../../../store/actions/personActions";
 //> Style
 import "./instagramselector.scss";
 //#endregion
@@ -41,6 +44,12 @@ const DUMMY = [
 class InstagramSelectorModal extends React.Component {
   state = { selection: [] };
 
+  componentDidMount = async () => {
+    this.setState({
+      posts: await this.props.getInstagramPosts(),
+    });
+  };
+
   updateList = (picture) => {
     if (this.state.selection.includes(picture)) {
       const current = this.state.selection;
@@ -61,6 +70,7 @@ class InstagramSelectorModal extends React.Component {
   };
 
   render() {
+    console.log("REEEEEE", this.state);
     return (
       <>
         <MDBModal
@@ -83,27 +93,30 @@ class InstagramSelectorModal extends React.Component {
               </MDBBtn>
             </div>
             <MDBRow className="mt-3">
-              {DUMMY.map((picture, i) => {
-                const selected = this.state.selection.includes(picture);
+              {this.state.posts &&
+                this.state.posts.map((picture, i) => {
+                  const selected = this.state.selection.includes(picture);
 
-                return (
-                  <MDBCol
-                    lg="4"
-                    className={selected ? "mb-3 selected" : "mb-3"}
-                    key={"selector-" + i}
-                  >
-                    <MDBView>
-                      <img src={picture} className="img-fluid" />
-                      <MDBMask
-                        onClick={() => this.updateList(picture)}
-                        className="text-white d-flex justify-content-center align-items-center"
-                      >
-                        {selected && <MDBIcon icon="check-circle" size="3x" />}
-                      </MDBMask>
-                    </MDBView>
-                  </MDBCol>
-                );
-              })}
+                  return (
+                    <MDBCol
+                      lg="4"
+                      className={selected ? "mb-3 selected" : "mb-3"}
+                      key={"selector-" + i}
+                    >
+                      <MDBView>
+                        <img src={picture} className="img-fluid" />
+                        <MDBMask
+                          onClick={() => this.updateList(picture)}
+                          className="text-white d-flex justify-content-center align-items-center"
+                        >
+                          {selected && (
+                            <MDBIcon icon="check-circle" size="3x" />
+                          )}
+                        </MDBMask>
+                      </MDBView>
+                    </MDBCol>
+                  );
+                })}
             </MDBRow>
           </MDBModalBody>
         </MDBModal>
@@ -119,7 +132,9 @@ const mapStateToProps = (state) => ({
 });
 
 const mapDispatchToProps = (dispatch) => {
-  return {};
+  return {
+    getInstagramPosts: (id) => dispatch(getInstagramPosts(id)),
+  };
 };
 //#endregion
 
diff --git a/src/components/organisms/sections/media/AIGallery/aigallery.scss b/src/components/organisms/sections/media/AIGallery/aigallery.scss
index ee67a2e..56e4430 100644
--- a/src/components/organisms/sections/media/AIGallery/aigallery.scss
+++ b/src/components/organisms/sections/media/AIGallery/aigallery.scss
@@ -1,17 +1,15 @@
-#media {
-  #gallery {
-    .card {
-      .card-body {
-        padding: 0;
+#gallery {
+  .card {
+    .card-body {
+      padding: 0;
 
-        .mask {
-          background: transparentize($color: white, $amount: 1);
-          transition: background 0.1s ease;
-          cursor: pointer;
+      .mask {
+        background: transparentize($color: white, $amount: 1);
+        transition: background 0.1s ease;
+        cursor: pointer;
 
-          &:hover {
-            background: transparentize($color: white, $amount: 0.9);
-          }
+        &:hover {
+          background: transparentize($color: white, $amount: 0.9);
         }
       }
     }
diff --git a/src/components/organisms/sections/media/AIGallery/index.jsx b/src/components/organisms/sections/media/AIGallery/index.jsx
index 82aca79..11b6787 100644
--- a/src/components/organisms/sections/media/AIGallery/index.jsx
+++ b/src/components/organisms/sections/media/AIGallery/index.jsx
@@ -70,6 +70,10 @@ class AIGallery extends React.Component {
     });
   };
 
+  componentDidUpdate = () => {
+    console.log("AAAAAAAAAAAAAAA", this.props.loggedUser);
+  };
+
   toggle = (modal) => {
     this.setState({
       [modal]: !this.state[modal],
@@ -100,7 +104,7 @@ class AIGallery extends React.Component {
     const { loggedUser } = this.props;
 
     return (
-      <div className="py-5">
+      <div className="py-5" id="gallery">
         <div className="mb-4 text-right">
           <MDBBtn
             color="green"
@@ -109,7 +113,7 @@ class AIGallery extends React.Component {
             Select images
           </MDBBtn>
         </div>
-        <MDBRow id="gallery">
+        <MDBRow>
           {this.state.images &&
             this.state.images.map((picture, i) => {
               console.log("YE", picture);
@@ -147,6 +151,12 @@ class AIGallery extends React.Component {
         {this.state.modalSelectPictures && (
           <InstagramSelectorModal
             toggle={() => this.toggle("modalSelectPictures")}
+            profile={
+              loggedUser.person &&
+              loggedUser.person.profiles.filter(
+                (profile) => profile.sourceType === "INSTAGRAM"
+              )
+            }
             save={this.save}
           />
         )}
@@ -158,7 +168,7 @@ class AIGallery extends React.Component {
 
 //#region > Redux Mapping
 const mapStateToProps = (state) => ({
-  //loggedUser: state.auth.loggedUser,
+  loggedUser: state.user.user,
 });
 
 const mapDispatchToProps = (dispatch) => {
diff --git a/src/components/organisms/sections/media/AISongGallery/index.jsx b/src/components/organisms/sections/media/AISongGallery/index.jsx
index 24b5779..133f6c9 100644
--- a/src/components/organisms/sections/media/AISongGallery/index.jsx
+++ b/src/components/organisms/sections/media/AISongGallery/index.jsx
@@ -30,6 +30,9 @@ import {
 
 //> Components
 import { AddSongModal } from "../../../../molecules/modals";
+//> Actions
+// Functions to send data from the application to the store
+import { addMetaLink } from "../../../../../store/actions/personActions";
 //> Style
 import "./aisonggallery.scss";
 //#endregion
@@ -48,7 +51,7 @@ class AISongGallery extends React.Component {
 
   componentDidMount = () => {
     this.setState({
-      songs: DUMMY,
+      songs: this.props.songs,
     });
   };
 
@@ -61,14 +64,21 @@ class AISongGallery extends React.Component {
 
   addSong = (url) => {
     const song = {
-      type: "SOUNDCLOUD",
-      url,
+      linkType: "SOUNDCLOUD",
+      URL: url,
     };
 
-    this.setState({
-      modalAddSong: false,
-      songs: [...this.state.songs, song],
-    });
+    this.setState(
+      {
+        modalAddSong: false,
+        songs: [...this.state.songs, song],
+      },
+      () =>
+        this.props.addMetaLink({
+          URL: song.URL,
+          linkType: song.linkType,
+        })
+    );
   };
 
   render() {
@@ -98,7 +108,7 @@ class AISongGallery extends React.Component {
                         scrolling="no"
                         frameborder="no"
                         allow="autoplay"
-                        src={"https://w.soundcloud.com/player/?url=" + song.url}
+                        src={"https://w.soundcloud.com/player/?url=" + song.URL}
                       ></iframe>
                     </MDBCardBody>
                   </MDBCard>
@@ -124,7 +134,7 @@ const mapStateToProps = (state) => ({
 });
 
 const mapDispatchToProps = (dispatch) => {
-  return {};
+  return { addMetaLink: (linkOptions) => dispatch(addMetaLink(linkOptions)) };
 };
 //#endregion
 
diff --git a/src/components/organisms/sections/media/AIVideoGallery/aivideogallery.scss b/src/components/organisms/sections/media/AIVideoGallery/aivideogallery.scss
index 7deb7e1..7757521 100644
--- a/src/components/organisms/sections/media/AIVideoGallery/aivideogallery.scss
+++ b/src/components/organisms/sections/media/AIVideoGallery/aivideogallery.scss
@@ -1,17 +1,15 @@
-#media {
-  #videogallery {
-    .card {
-      .card-body {
-        padding: 0;
+#videogallery {
+  .card {
+    .card-body {
+      padding: 0;
 
-        .mask {
-          background: transparentize($color: white, $amount: 1);
-          transition: background 0.1s ease;
-          cursor: pointer;
+      .mask {
+        background: transparentize($color: white, $amount: 1);
+        transition: background 0.1s ease;
+        cursor: pointer;
 
-          &:hover {
-            background: transparentize($color: white, $amount: 0.9);
-          }
+        &:hover {
+          background: transparentize($color: white, $amount: 0.9);
         }
       }
     }
@@ -31,7 +29,6 @@
     width: 100%;
     position: absolute;
     color: white;
-    background: transparentize($color: black, $amount: 0.3);
   }
 }
 
diff --git a/src/components/organisms/sections/media/AIVideoGallery/index.jsx b/src/components/organisms/sections/media/AIVideoGallery/index.jsx
index 7733519..5047109 100644
--- a/src/components/organisms/sections/media/AIVideoGallery/index.jsx
+++ b/src/components/organisms/sections/media/AIVideoGallery/index.jsx
@@ -30,29 +30,20 @@ import {
 
 //> Components
 import { VideoModal, AddVideoModal } from "../../../../molecules/modals";
+//> Actions
+// Functions to send data from the application to the store
+import { addMetaLink } from "../../../../../store/actions/personActions";
 //> Style
 import "./aivideogallery.scss";
 //#endregion
 
-//#region > Dummy data
-const DUMMY = [
-  {
-    id: "rX0kyTpTIw0",
-  },
-  {
-    id: "viek5d1_0VA",
-  },
-  { id: "pPw_izFr5PA" },
-];
-//#endregion
-
 //#region > Components
 class AIVideoGallery extends React.Component {
   state = { modalPicture: false };
 
   componentDidMount = () => {
     this.setState({
-      videos: DUMMY,
+      videos: this.props.videos,
     });
   };
 
@@ -65,30 +56,38 @@ class AIVideoGallery extends React.Component {
 
   addVideo = (state) => {
     const video = {
-      type: "YOUTUBE",
-      id: state.youtubeId,
+      linkType: "YOUTUBE",
+      URL: state.youtubeId,
     };
 
-    this.setState({
-      modalAddVideo: false,
-      videos: [...this.state.videos, video],
-    });
+    this.setState(
+      {
+        modalAddVideo: false,
+        videos: [...this.state.videos, video],
+      },
+      () =>
+        this.props.addMetaLink({
+          URL: video.URL,
+          linkType: video.linkType,
+        })
+    );
   };
 
   render() {
     const { loggedUser } = this.props;
 
     return (
-      <div className="py-5">
+      <div className="py-5" id="videogallery">
         <div className="mb-4 text-right">
           <MDBBtn
-            color="green"
+            social="yt"
             onClick={() => this.setState({ modalAddVideo: true })}
           >
+            <MDBIcon fab icon="youtube" />
             Add video
           </MDBBtn>
         </div>
-        <MDBRow id="videogallery">
+        <MDBRow>
           {this.state.videos &&
             this.state.videos.map((video, i) => {
               return (
@@ -98,12 +97,11 @@ class AIVideoGallery extends React.Component {
                       <MDBView>
                         <div className="position-relative">
                           <img
-                            src={`https://img.youtube.com/vi/${video.id}/mqdefault.jpg`}
+                            src={`https://img.youtube.com/vi/${video.URL}/mqdefault.jpg`}
                             alt="Video thumbnail"
                             className="img-fluid"
                           />
-                          <div className="d-flex justify-content-between video-title p-2 align-items-center">
-                            <span>Titel ausständig</span>
+                          <div className="text-right video-title py-1 px-2">
                             <MDBIcon
                               fab
                               icon="youtube"
@@ -114,19 +112,19 @@ class AIVideoGallery extends React.Component {
                             <MDBRow>
                               <MDBCol lg="4">
                                 <img
-                                  src={`https://img.youtube.com/vi/${video.id}/1.jpg`}
+                                  src={`https://img.youtube.com/vi/${video.URL}/1.jpg`}
                                   className="img-fluid"
                                 />
                               </MDBCol>
                               <MDBCol lg="4">
                                 <img
-                                  src={`https://img.youtube.com/vi/${video.id}/2.jpg`}
+                                  src={`https://img.youtube.com/vi/${video.URL}/2.jpg`}
                                   className="img-fluid"
                                 />
                               </MDBCol>
                               <MDBCol lg="4">
                                 <img
-                                  src={`https://img.youtube.com/vi/${video.id}/3.jpg`}
+                                  src={`https://img.youtube.com/vi/${video.URL}/3.jpg`}
                                   className="img-fluid"
                                 />
                               </MDBCol>
@@ -137,7 +135,7 @@ class AIVideoGallery extends React.Component {
                           onClick={() =>
                             this.setState({
                               modalVideo: true,
-                              selectedVideoId: video.id,
+                              selectedVideoId: video.URL,
                             })
                           }
                         />
@@ -172,7 +170,7 @@ const mapStateToProps = (state) => ({
 });
 
 const mapDispatchToProps = (dispatch) => {
-  return {};
+  return { addMetaLink: (linkOptions) => dispatch(addMetaLink(linkOptions)) };
 };
 //#endregion
 
diff --git a/src/components/organisms/tabs/OverviewTab/index.jsx b/src/components/organisms/tabs/OverviewTab/index.jsx
index 98c8fb3..928f38e 100644
--- a/src/components/organisms/tabs/OverviewTab/index.jsx
+++ b/src/components/organisms/tabs/OverviewTab/index.jsx
@@ -26,6 +26,11 @@ import {
   LatestActivity,
   ErrorBoundary,
 } from "../../../atoms";
+import {
+  AIGallery,
+  AISongGallery,
+  AIVideoGallery,
+} from "../../../organisms/sections/media";
 import { MovableBoundary } from "../../../molecules";
 import { updateSettings } from "../../../../store/actions/personActions";
 //#endregion
@@ -231,6 +236,25 @@ class OverviewTab extends React.Component {
                   />
                 )}
               </>,
+              <>{displayImageGallery && <AIGallery />}</>,
+              <>
+                {displayImageGallery && (
+                  <AIVideoGallery
+                    videos={fetchedPerson.metaLinks.filter(
+                      (link) => link.linkType === "YOUTUBE"
+                    )}
+                  />
+                )}
+              </>,
+              <>
+                {displayImageGallery && (
+                  <AISongGallery
+                    songs={fetchedPerson.metaLinks.filter(
+                      (link) => link.linkType === "SOUNDCLOUD"
+                    )}
+                  />
+                )}
+              </>,
               <>
                 {display2dCalendar && currentStatistic && yearsStatistic && (
                   <Calendar2D
diff --git a/src/store/actions/personActions.js b/src/store/actions/personActions.js
index 0cb3406..8217a9c 100644
--- a/src/store/actions/personActions.js
+++ b/src/store/actions/personActions.js
@@ -96,7 +96,7 @@ const updateSettings = (
 
 const addMetaLink = (
   linkOptions = {
-    url: undefined,
+    URL: undefined,
     linkType: undefined,
     location: undefined,
     imgurDeleteHash: undefined,
@@ -110,6 +110,8 @@ const addMetaLink = (
       const state = getState();
       const personName = extractNameFromPersonSlug(state.user.user.person.slug);
 
+      console.log(linkOptions);
+
       const link = await INTEL_SNEK.person.addMetaLink({
         personName,
         linkOptions: {
@@ -283,7 +285,7 @@ const updateProfile = (
   };
 };
 
-const getInstagramPosts = (id) => {
+const getInstagramPosts = () => {
   return async (dispatch, getState, {}) => {
     try {
       dispatch({ type: Action.PERSON_INSTAGRAM_POSTS_FETCH_REQUEST });
@@ -310,6 +312,8 @@ const getInstagramPosts = (id) => {
           error: ex,
         },
       });
+
+      return false;
     }
   };
 };

From f9c9720ddebf2a10d011ac81ff8110454119a4ad Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Sun, 13 Sep 2020 14:32:02 +0200
Subject: [PATCH 116/175] Implement video and song gallery

The two galleries have been added and are now working.
---
 .../sections/media/AISongGallery/index.jsx         |  6 +++---
 .../sections/media/AIVideoGallery/index.jsx        | 14 +++++++-------
 .../organisms/tabs/OverviewTab/index.jsx           | 10 +++++++++-
 src/store/actions/personActions.js                 |  2 +-
 4 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/components/organisms/sections/media/AISongGallery/index.jsx b/src/components/organisms/sections/media/AISongGallery/index.jsx
index 133f6c9..427d9a7 100644
--- a/src/components/organisms/sections/media/AISongGallery/index.jsx
+++ b/src/components/organisms/sections/media/AISongGallery/index.jsx
@@ -65,7 +65,7 @@ class AISongGallery extends React.Component {
   addSong = (url) => {
     const song = {
       linkType: "SOUNDCLOUD",
-      URL: url,
+      url,
     };
 
     this.setState(
@@ -75,7 +75,7 @@ class AISongGallery extends React.Component {
       },
       () =>
         this.props.addMetaLink({
-          URL: song.URL,
+          url: song.url,
           linkType: song.linkType,
         })
     );
@@ -108,7 +108,7 @@ class AISongGallery extends React.Component {
                         scrolling="no"
                         frameborder="no"
                         allow="autoplay"
-                        src={"https://w.soundcloud.com/player/?url=" + song.URL}
+                        src={"https://w.soundcloud.com/player/?url=" + song.url}
                       ></iframe>
                     </MDBCardBody>
                   </MDBCard>
diff --git a/src/components/organisms/sections/media/AIVideoGallery/index.jsx b/src/components/organisms/sections/media/AIVideoGallery/index.jsx
index 5047109..c0e8075 100644
--- a/src/components/organisms/sections/media/AIVideoGallery/index.jsx
+++ b/src/components/organisms/sections/media/AIVideoGallery/index.jsx
@@ -57,7 +57,7 @@ class AIVideoGallery extends React.Component {
   addVideo = (state) => {
     const video = {
       linkType: "YOUTUBE",
-      URL: state.youtubeId,
+      url: state.youtubeId,
     };
 
     this.setState(
@@ -67,7 +67,7 @@ class AIVideoGallery extends React.Component {
       },
       () =>
         this.props.addMetaLink({
-          URL: video.URL,
+          url: video.url,
           linkType: video.linkType,
         })
     );
@@ -97,7 +97,7 @@ class AIVideoGallery extends React.Component {
                       <MDBView>
                         <div className="position-relative">
                           <img
-                            src={`https://img.youtube.com/vi/${video.URL}/mqdefault.jpg`}
+                            src={`https://img.youtube.com/vi/${video.url}/mqdefault.jpg`}
                             alt="Video thumbnail"
                             className="img-fluid"
                           />
@@ -112,19 +112,19 @@ class AIVideoGallery extends React.Component {
                             <MDBRow>
                               <MDBCol lg="4">
                                 <img
-                                  src={`https://img.youtube.com/vi/${video.URL}/1.jpg`}
+                                  src={`https://img.youtube.com/vi/${video.url}/1.jpg`}
                                   className="img-fluid"
                                 />
                               </MDBCol>
                               <MDBCol lg="4">
                                 <img
-                                  src={`https://img.youtube.com/vi/${video.URL}/2.jpg`}
+                                  src={`https://img.youtube.com/vi/${video.url}/2.jpg`}
                                   className="img-fluid"
                                 />
                               </MDBCol>
                               <MDBCol lg="4">
                                 <img
-                                  src={`https://img.youtube.com/vi/${video.URL}/3.jpg`}
+                                  src={`https://img.youtube.com/vi/${video.url}/3.jpg`}
                                   className="img-fluid"
                                 />
                               </MDBCol>
@@ -135,7 +135,7 @@ class AIVideoGallery extends React.Component {
                           onClick={() =>
                             this.setState({
                               modalVideo: true,
-                              selectedVideoId: video.URL,
+                              selectedVideoId: video.url,
                             })
                           }
                         />
diff --git a/src/components/organisms/tabs/OverviewTab/index.jsx b/src/components/organisms/tabs/OverviewTab/index.jsx
index 928f38e..85e80d8 100644
--- a/src/components/organisms/tabs/OverviewTab/index.jsx
+++ b/src/components/organisms/tabs/OverviewTab/index.jsx
@@ -236,7 +236,15 @@ class OverviewTab extends React.Component {
                   />
                 )}
               </>,
-              <>{displayImageGallery && <AIGallery />}</>,
+              <>
+                {displayImageGallery && (
+                  <AIGallery
+                    images={fetchedPerson.metaLinks.filter(
+                      (link) => link.linkType === "IMAGE"
+                    )}
+                  />
+                )}
+              </>,
               <>
                 {displayImageGallery && (
                   <AIVideoGallery
diff --git a/src/store/actions/personActions.js b/src/store/actions/personActions.js
index 8217a9c..d9622ff 100644
--- a/src/store/actions/personActions.js
+++ b/src/store/actions/personActions.js
@@ -96,7 +96,7 @@ const updateSettings = (
 
 const addMetaLink = (
   linkOptions = {
-    URL: undefined,
+    url: undefined,
     linkType: undefined,
     location: undefined,
     imgurDeleteHash: undefined,

From 828ff1e1844dd0cf0debcf814481987df71aa593 Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Sun, 13 Sep 2020 14:32:20 +0200
Subject: [PATCH 117/175] Improve instagram selection

The selector now works with real data.
---
 .../modals/InstagramSelectorModal/index.jsx   | 105 ++++++++++++------
 .../instagramselector.scss                    |   2 +-
 .../sections/media/AIGallery/index.jsx        |  44 +-------
 3 files changed, 77 insertions(+), 74 deletions(-)

diff --git a/src/components/molecules/modals/InstagramSelectorModal/index.jsx b/src/components/molecules/modals/InstagramSelectorModal/index.jsx
index c81dd62..badb922 100644
--- a/src/components/molecules/modals/InstagramSelectorModal/index.jsx
+++ b/src/components/molecules/modals/InstagramSelectorModal/index.jsx
@@ -44,16 +44,40 @@ const DUMMY = [
 class InstagramSelectorModal extends React.Component {
   state = { selection: [] };
 
-  componentDidMount = async () => {
-    this.setState({
-      posts: await this.props.getInstagramPosts(),
-    });
+  componentDidMount = () => {
+    this.init();
+  };
+
+  init = async () => {
+    this.setState(
+      {
+        posts: localStorage.getItem("instagram_posts")
+          ? JSON.parse(localStorage.getItem("instagram_posts"))
+          : await this.props.getInstagramPosts(),
+        selection: this.props.selection ? this.props.selection : [],
+      },
+      () =>
+        localStorage.setItem(
+          "instagram_posts",
+          JSON.stringify(this.state.posts)
+        )
+    );
   };
 
   updateList = (picture) => {
-    if (this.state.selection.includes(picture)) {
+    console.log("ALTER PIC");
+    console.log(
+      this.state.selection.filter(
+        (item) => item.mediaLink === picture.mediaLink
+      ).length > 0
+    );
+    if (
+      this.state.selection.filter(
+        (item) => item.mediaLink === picture.mediaLink
+      ).length > 0
+    ) {
       const current = this.state.selection;
-      const index = current.indexOf(picture);
+      const index = current.findIndex((x) => x.mediaLink === picture.mediaLink);
 
       if (index > -1) {
         current.splice(index, 1);
@@ -84,38 +108,51 @@ class InstagramSelectorModal extends React.Component {
           <MDBModalBody className="p-2 text-center">
             <div className="d-flex justify-content-between align-items-center">
               <p className="lead mb-0">Select Instagram images</p>
-              <MDBBtn
-                color="green"
-                disabled={this.state.selection.length === 0}
-                onClick={() => this.props.save(this.state)}
-              >
-                Confirm selection
-              </MDBBtn>
+              <div>
+                <MDBBtn color="blue" onClick={() => this.init()}>
+                  Refresh
+                </MDBBtn>
+                <MDBBtn
+                  color="green"
+                  onClick={() => this.props.save(this.state.selection)}
+                >
+                  Confirm selection
+                </MDBBtn>
+              </div>
             </div>
             <MDBRow className="mt-3">
               {this.state.posts &&
-                this.state.posts.map((picture, i) => {
-                  const selected = this.state.selection.includes(picture);
+                this.state.posts.posts.map((picture, i) => {
+                  const selected =
+                    this.state.selection.filter(
+                      (item) => item.mediaLink === picture.mediaLink
+                    ).length > 0
+                      ? true
+                      : false;
 
-                  return (
-                    <MDBCol
-                      lg="4"
-                      className={selected ? "mb-3 selected" : "mb-3"}
-                      key={"selector-" + i}
-                    >
-                      <MDBView>
-                        <img src={picture} className="img-fluid" />
-                        <MDBMask
-                          onClick={() => this.updateList(picture)}
-                          className="text-white d-flex justify-content-center align-items-center"
-                        >
-                          {selected && (
-                            <MDBIcon icon="check-circle" size="3x" />
-                          )}
-                        </MDBMask>
-                      </MDBView>
-                    </MDBCol>
-                  );
+                  if (picture.mediaType === "IMAGE") {
+                    return (
+                      <MDBCol
+                        lg="4"
+                        className={selected ? "mb-3 selected" : "mb-3"}
+                        key={"selector-" + i}
+                      >
+                        <MDBView>
+                          <img src={picture.mediaLink} className="img-fluid" />
+                          <MDBMask
+                            onClick={() => this.updateList(picture)}
+                            className="text-white d-flex justify-content-center align-items-center"
+                          >
+                            {selected && (
+                              <MDBIcon icon="check-circle" size="3x" />
+                            )}
+                          </MDBMask>
+                        </MDBView>
+                      </MDBCol>
+                    );
+                  } else {
+                    return null;
+                  }
                 })}
             </MDBRow>
           </MDBModalBody>
diff --git a/src/components/molecules/modals/InstagramSelectorModal/instagramselector.scss b/src/components/molecules/modals/InstagramSelectorModal/instagramselector.scss
index 887184b..1e4c572 100644
--- a/src/components/molecules/modals/InstagramSelectorModal/instagramselector.scss
+++ b/src/components/molecules/modals/InstagramSelectorModal/instagramselector.scss
@@ -6,7 +6,7 @@
   }
 
   .view {
-    max-height: 150px;
+    max-height: 300px;
     overflow: hidden;
 
     .mask {
diff --git a/src/components/organisms/sections/media/AIGallery/index.jsx b/src/components/organisms/sections/media/AIGallery/index.jsx
index 11b6787..37b46dd 100644
--- a/src/components/organisms/sections/media/AIGallery/index.jsx
+++ b/src/components/organisms/sections/media/AIGallery/index.jsx
@@ -37,36 +37,13 @@ import {
 import "./aigallery.scss";
 //#endregion
 
-//#region > Dummy data
-const DUMMY = [
-  {
-    img: {
-      url: "https://mdbootstrap.com/img/Photos/Others/images/43.jpg",
-      alt: "Dummy image",
-    },
-    data: {
-      title: "Dummy",
-    },
-  },
-  {
-    img: {
-      url: "https://mdbootstrap.com/img/Photos/Others/images/12.jpg",
-      alt: "Dummy image",
-    },
-    data: {
-      title: "Dummy 2",
-    },
-  },
-];
-//#endregion
-
 //#region > Components
 class AIGallery extends React.Component {
   state = { modalPicture: false };
 
   componentDidMount = () => {
     this.setState({
-      images: DUMMY,
+      images: this.props.images,
     });
   };
 
@@ -81,17 +58,9 @@ class AIGallery extends React.Component {
     });
   };
 
-  save = (urlList) => {
-    const res = urlList.selection.map((url) => {
-      return {
-        img: {
-          url,
-        },
-      };
-    });
-
+  save = (pictureList) => {
     this.setState({
-      images: [...this.state.images, ...res],
+      images: [...this.state.images, ...pictureList],
       modalSelectPictures: false,
     });
   };
@@ -122,11 +91,7 @@ class AIGallery extends React.Component {
                   <MDBCard>
                     <MDBCardBody>
                       <MDBView>
-                        <img
-                          src={picture.img.url}
-                          alt={picture.img.alt}
-                          className="img-fluid"
-                        />
+                        <img src={picture.mediaLink} className="img-fluid" />
                         <MDBMask
                           onClick={() =>
                             this.setState({
@@ -157,6 +122,7 @@ class AIGallery extends React.Component {
                 (profile) => profile.sourceType === "INSTAGRAM"
               )
             }
+            selection={this.state.images}
             save={this.save}
           />
         )}

From dbfa65faba4989bfcdba452075bd123427532290 Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Sun, 13 Sep 2020 14:38:08 +0200
Subject: [PATCH 118/175] Hide media section buttons for diff origin users

The buttons are now only visible on the own user profile page.
---
 .../sections/media/AIGallery/index.jsx        | 20 +++++++++--------
 .../sections/media/AISongGallery/index.jsx    | 22 ++++++++++---------
 .../sections/media/AIVideoGallery/index.jsx   | 22 ++++++++++---------
 .../organisms/tabs/OverviewTab/index.jsx      |  3 +++
 4 files changed, 38 insertions(+), 29 deletions(-)

diff --git a/src/components/organisms/sections/media/AIGallery/index.jsx b/src/components/organisms/sections/media/AIGallery/index.jsx
index 37b46dd..eee64a0 100644
--- a/src/components/organisms/sections/media/AIGallery/index.jsx
+++ b/src/components/organisms/sections/media/AIGallery/index.jsx
@@ -70,18 +70,20 @@ class AIGallery extends React.Component {
   };
 
   render() {
-    const { loggedUser } = this.props;
+    const { loggedUser, sameOrigin } = this.props;
 
     return (
       <div className="py-5" id="gallery">
-        <div className="mb-4 text-right">
-          <MDBBtn
-            color="green"
-            onClick={() => this.setState({ modalSelectPictures: true })}
-          >
-            Select images
-          </MDBBtn>
-        </div>
+        {sameOrigin && (
+          <div className="mb-4 text-right">
+            <MDBBtn
+              color="green"
+              onClick={() => this.setState({ modalSelectPictures: true })}
+            >
+              Select images
+            </MDBBtn>
+          </div>
+        )}
         <MDBRow>
           {this.state.images &&
             this.state.images.map((picture, i) => {
diff --git a/src/components/organisms/sections/media/AISongGallery/index.jsx b/src/components/organisms/sections/media/AISongGallery/index.jsx
index 427d9a7..5a7ea2e 100644
--- a/src/components/organisms/sections/media/AISongGallery/index.jsx
+++ b/src/components/organisms/sections/media/AISongGallery/index.jsx
@@ -82,19 +82,21 @@ class AISongGallery extends React.Component {
   };
 
   render() {
-    const { loggedUser } = this.props;
+    const { sameOrigin } = this.props;
 
     return (
       <div className="py-5">
-        <div className="mb-4 text-right">
-          <MDBBtn
-            color="orange"
-            onClick={() => this.setState({ modalAddSong: true })}
-          >
-            <MDBIcon fab icon="soundcloud" />
-            Add song
-          </MDBBtn>
-        </div>
+        {sameOrigin && (
+          <div className="mb-4 text-right">
+            <MDBBtn
+              color="orange"
+              onClick={() => this.setState({ modalAddSong: true })}
+            >
+              <MDBIcon fab icon="soundcloud" />
+              Add song
+            </MDBBtn>
+          </div>
+        )}
         <MDBRow id="videogallery">
           {this.state.songs &&
             this.state.songs.map((song, i) => {
diff --git a/src/components/organisms/sections/media/AIVideoGallery/index.jsx b/src/components/organisms/sections/media/AIVideoGallery/index.jsx
index c0e8075..d68026d 100644
--- a/src/components/organisms/sections/media/AIVideoGallery/index.jsx
+++ b/src/components/organisms/sections/media/AIVideoGallery/index.jsx
@@ -74,19 +74,21 @@ class AIVideoGallery extends React.Component {
   };
 
   render() {
-    const { loggedUser } = this.props;
+    const { sameOrigin } = this.props;
 
     return (
       <div className="py-5" id="videogallery">
-        <div className="mb-4 text-right">
-          <MDBBtn
-            social="yt"
-            onClick={() => this.setState({ modalAddVideo: true })}
-          >
-            <MDBIcon fab icon="youtube" />
-            Add video
-          </MDBBtn>
-        </div>
+        {sameOrigin && (
+          <div className="mb-4 text-right">
+            <MDBBtn
+              social="yt"
+              onClick={() => this.setState({ modalAddVideo: true })}
+            >
+              <MDBIcon fab icon="youtube" />
+              Add video
+            </MDBBtn>
+          </div>
+        )}
         <MDBRow>
           {this.state.videos &&
             this.state.videos.map((video, i) => {
diff --git a/src/components/organisms/tabs/OverviewTab/index.jsx b/src/components/organisms/tabs/OverviewTab/index.jsx
index 85e80d8..6e1244c 100644
--- a/src/components/organisms/tabs/OverviewTab/index.jsx
+++ b/src/components/organisms/tabs/OverviewTab/index.jsx
@@ -242,6 +242,7 @@ class OverviewTab extends React.Component {
                     images={fetchedPerson.metaLinks.filter(
                       (link) => link.linkType === "IMAGE"
                     )}
+                    sameOrigin={sameOrigin}
                   />
                 )}
               </>,
@@ -251,6 +252,7 @@ class OverviewTab extends React.Component {
                     videos={fetchedPerson.metaLinks.filter(
                       (link) => link.linkType === "YOUTUBE"
                     )}
+                    sameOrigin={sameOrigin}
                   />
                 )}
               </>,
@@ -260,6 +262,7 @@ class OverviewTab extends React.Component {
                     songs={fetchedPerson.metaLinks.filter(
                       (link) => link.linkType === "SOUNDCLOUD"
                     )}
+                    sameOrigin={sameOrigin}
                   />
                 )}
               </>,

From 4df45e1a0c95a4e8251f2477a321fa45008b8e54 Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Sun, 13 Sep 2020 15:12:32 +0200
Subject: [PATCH 119/175] Rework editing system

The buttons have been altered.
---
 .../organisms/tabs/OverviewTab/index.jsx      | 46 +++++++++++++------
 1 file changed, 31 insertions(+), 15 deletions(-)

diff --git a/src/components/organisms/tabs/OverviewTab/index.jsx b/src/components/organisms/tabs/OverviewTab/index.jsx
index 6e1244c..003cfec 100644
--- a/src/components/organisms/tabs/OverviewTab/index.jsx
+++ b/src/components/organisms/tabs/OverviewTab/index.jsx
@@ -69,6 +69,7 @@ class OverviewTab extends React.Component {
   state = {
     selectedYearIndex: undefined,
     edit: false,
+    toggleEdit: false,
   };
 
   selectDay = (day, wkey, dkey) => {
@@ -83,8 +84,6 @@ class OverviewTab extends React.Component {
 
   handleEditClick = (movablePool) => {
     if (this.state.edit) {
-      console.log(movablePool);
-
       this.props.saveSettings({ movablePool: JSON.stringify(movablePool) });
     }
 
@@ -126,19 +125,36 @@ class OverviewTab extends React.Component {
         <ErrorBoundary>
           {sameOrigin && (
             <div className="text-right">
+              {this.state.toggleEdit && (
+                <MDBBtn
+                  color={this.state.edit ? "success" : "green"}
+                  size="md"
+                  onClick={() =>
+                    this.handleEditClick(fetchedPerson.movablePool)
+                  }
+                >
+                  {this.state.edit ? (
+                    <span>
+                      <MDBIcon icon="check-circle" />
+                      Save
+                    </span>
+                  ) : (
+                    <span>
+                      <MDBIcon icon="arrows-alt" />
+                      Move items
+                    </span>
+                  )}
+                </MDBBtn>
+              )}
               <MDBBtn
-                color={this.state.edit ? "success" : "green"}
+                color={this.state.toggleEdit ? "elegant" : "elegant"}
                 size="md"
-                onClick={() => this.handleEditClick(fetchedPerson.movablePool)}
+                onClick={() =>
+                  this.setState({ toggleEdit: !this.state.toggleEdit })
+                }
+                disabled={this.state.edit}
               >
-                {this.state.edit ? (
-                  <span>
-                    <MDBIcon icon="check-circle" />
-                    Save items
-                  </span>
-                ) : (
-                  <span>Move items</span>
-                )}
+                {this.state.toggleEdit ? <span>Done</span> : <span>Edit</span>}
               </MDBBtn>
             </div>
           )}
@@ -242,7 +258,7 @@ class OverviewTab extends React.Component {
                     images={fetchedPerson.metaLinks.filter(
                       (link) => link.linkType === "IMAGE"
                     )}
-                    sameOrigin={sameOrigin}
+                    sameOrigin={sameOrigin && this.state.toggleEdit}
                   />
                 )}
               </>,
@@ -252,7 +268,7 @@ class OverviewTab extends React.Component {
                     videos={fetchedPerson.metaLinks.filter(
                       (link) => link.linkType === "YOUTUBE"
                     )}
-                    sameOrigin={sameOrigin}
+                    sameOrigin={sameOrigin && this.state.toggleEdit}
                   />
                 )}
               </>,
@@ -262,7 +278,7 @@ class OverviewTab extends React.Component {
                     songs={fetchedPerson.metaLinks.filter(
                       (link) => link.linkType === "SOUNDCLOUD"
                     )}
-                    sameOrigin={sameOrigin}
+                    sameOrigin={sameOrigin && this.state.toggleEdit}
                   />
                 )}
               </>,

From d5559a8323e24ab35872f8c70cdc4533537bed1f Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Sun, 13 Sep 2020 15:12:52 +0200
Subject: [PATCH 120/175] Improve Instagram selection

The selection should now be saved.
---
 .../molecules/modals/ImageModal/index.jsx     | 26 ++--------------
 .../modals/InstagramSelectorModal/index.jsx   | 18 +++++++++--
 .../sections/media/AIGallery/index.jsx        | 31 +++++++++++++++----
 3 files changed, 42 insertions(+), 33 deletions(-)

diff --git a/src/components/molecules/modals/ImageModal/index.jsx b/src/components/molecules/modals/ImageModal/index.jsx
index 8de2c59..3d3fcd7 100644
--- a/src/components/molecules/modals/ImageModal/index.jsx
+++ b/src/components/molecules/modals/ImageModal/index.jsx
@@ -43,34 +43,12 @@ class ImageModal extends React.Component {
             <MDBRow>
               <MDBCol lg="8">
                 <MDBView>
-                  <img
-                    src={selectedPicture.img.url}
-                    alt={selectedPicture.img.alt}
-                    className="img-fluid"
-                  />
+                  <img src={selectedPicture.mediaLink} className="img-fluid" />
                   <MDBMask />
                 </MDBView>
               </MDBCol>
               <MDBCol lg="4">
-                <div className="d-block d-sm-flex justify-content-between pr-3">
-                  {selectedPicture.data ? (
-                    <span className="text-muted small">
-                      by {selectedPicture.data.artist}
-                    </span>
-                  ) : (
-                    <div />
-                  )}
-                  <MDBIcon
-                    icon="times"
-                    className="text-muted clickable p-1"
-                    onClick={this.props.toggle}
-                  />
-                </div>
-                {selectedPicture.data && (
-                  <div className="text-left mt-3">
-                    <p className="lead">{selectedPicture.data.title}</p>
-                  </div>
-                )}
+                <div>Content</div>
               </MDBCol>
             </MDBRow>
           </MDBModalBody>
diff --git a/src/components/molecules/modals/InstagramSelectorModal/index.jsx b/src/components/molecules/modals/InstagramSelectorModal/index.jsx
index badb922..3bd316e 100644
--- a/src/components/molecules/modals/InstagramSelectorModal/index.jsx
+++ b/src/components/molecules/modals/InstagramSelectorModal/index.jsx
@@ -48,10 +48,12 @@ class InstagramSelectorModal extends React.Component {
     this.init();
   };
 
-  init = async () => {
+  init = async (refetch) => {
     this.setState(
       {
-        posts: localStorage.getItem("instagram_posts")
+        posts: refetch
+          ? await this.props.getInstagramPosts()
+          : localStorage.getItem("instagram_posts")
           ? JSON.parse(localStorage.getItem("instagram_posts"))
           : await this.props.getInstagramPosts(),
         selection: this.props.selection ? this.props.selection : [],
@@ -109,7 +111,7 @@ class InstagramSelectorModal extends React.Component {
             <div className="d-flex justify-content-between align-items-center">
               <p className="lead mb-0">Select Instagram images</p>
               <div>
-                <MDBBtn color="blue" onClick={() => this.init()}>
+                <MDBBtn color="blue" onClick={() => this.init(true)}>
                   Refresh
                 </MDBBtn>
                 <MDBBtn
@@ -155,6 +157,16 @@ class InstagramSelectorModal extends React.Component {
                   }
                 })}
             </MDBRow>
+            {this.state.posts && this.state.posts.next[0] && (
+              <div className="text-center">
+                <MDBBtn
+                  color="elegant"
+                  onClick={() => this.state.posts.next[0].next()}
+                >
+                  Load more
+                </MDBBtn>
+              </div>
+            )}
           </MDBModalBody>
         </MDBModal>
       </>
diff --git a/src/components/organisms/sections/media/AIGallery/index.jsx b/src/components/organisms/sections/media/AIGallery/index.jsx
index eee64a0..ed4974c 100644
--- a/src/components/organisms/sections/media/AIGallery/index.jsx
+++ b/src/components/organisms/sections/media/AIGallery/index.jsx
@@ -33,6 +33,9 @@ import {
   ImageModal,
   InstagramSelectorModal,
 } from "../../../../molecules/modals";
+//> Actions
+// Functions to send data from the application to the store
+import { addMetaLink } from "../../../../../store/actions/personActions";
 //> Style
 import "./aigallery.scss";
 //#endregion
@@ -59,10 +62,21 @@ class AIGallery extends React.Component {
   };
 
   save = (pictureList) => {
-    this.setState({
-      images: [...this.state.images, ...pictureList],
-      modalSelectPictures: false,
-    });
+    this.setState(
+      {
+        images: [...this.state.images, ...pictureList],
+        modalSelectPictures: false,
+      },
+      () => {
+        pictureList.forEach((picture) => {
+          console.log("PIC", picture);
+          this.props.addMetaLink({
+            url: picture.mediaLink,
+            linkType: "IMAGE",
+          });
+        });
+      }
+    );
   };
 
   removeImage = (url) => {
@@ -76,10 +90,15 @@ class AIGallery extends React.Component {
       <div className="py-5" id="gallery">
         {sameOrigin && (
           <div className="mb-4 text-right">
+            <MDBBtn color="elegant" onClick={() => {}}>
+              <MDBIcon icon="upload" />
+              Upload image
+            </MDBBtn>
             <MDBBtn
-              color="green"
+              social="ins"
               onClick={() => this.setState({ modalSelectPictures: true })}
             >
+              <MDBIcon fab icon="instagram" />
               Select images
             </MDBBtn>
           </div>
@@ -140,7 +159,7 @@ const mapStateToProps = (state) => ({
 });
 
 const mapDispatchToProps = (dispatch) => {
-  return {};
+  return { addMetaLink: (linkOptions) => dispatch(addMetaLink(linkOptions)) };
 };
 //#endregion
 

From 4bbd8057aa4194fd1671d57fb0be7b22118ae1e9 Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Sun, 13 Sep 2020 22:13:14 +0200
Subject: [PATCH 121/175] Improve image selector

Meh.
---
 src/components/atoms/Project/index.jsx                      | 2 +-
 src/components/organisms/sections/media/AIGallery/index.jsx | 5 ++---
 src/store/actions/personActions.js                          | 2 +-
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/atoms/Project/index.jsx b/src/components/atoms/Project/index.jsx
index ac81e82..ee4890d 100644
--- a/src/components/atoms/Project/index.jsx
+++ b/src/components/atoms/Project/index.jsx
@@ -35,7 +35,7 @@ class Project extends React.Component {
               />
               <small>
                 @
-                {repo.owner.username ? (
+                {repo.owner ? (
                   repo.owner.username
                 ) : (
                   <span className="text-muted">unknown</span>
diff --git a/src/components/organisms/sections/media/AIGallery/index.jsx b/src/components/organisms/sections/media/AIGallery/index.jsx
index ed4974c..363e7c9 100644
--- a/src/components/organisms/sections/media/AIGallery/index.jsx
+++ b/src/components/organisms/sections/media/AIGallery/index.jsx
@@ -69,10 +69,9 @@ class AIGallery extends React.Component {
       },
       () => {
         pictureList.forEach((picture) => {
-          console.log("PIC", picture);
           this.props.addMetaLink({
             url: picture.mediaLink,
-            linkType: "IMAGE",
+            linkType: "INSTAGRAM",
           });
         });
       }
@@ -112,7 +111,7 @@ class AIGallery extends React.Component {
                   <MDBCard>
                     <MDBCardBody>
                       <MDBView>
-                        <img src={picture.mediaLink} className="img-fluid" />
+                        <img src={picture.url} className="img-fluid" />
                         <MDBMask
                           onClick={() =>
                             this.setState({
diff --git a/src/store/actions/personActions.js b/src/store/actions/personActions.js
index d9622ff..d3ae9a9 100644
--- a/src/store/actions/personActions.js
+++ b/src/store/actions/personActions.js
@@ -110,7 +110,7 @@ const addMetaLink = (
       const state = getState();
       const personName = extractNameFromPersonSlug(state.user.user.person.slug);
 
-      console.log(linkOptions);
+      console.log("OPTIONS", linkOptions);
 
       const link = await INTEL_SNEK.person.addMetaLink({
         personName,

From db658f1840097cc346c50889bb1d0630f7b52feb Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Sun, 13 Sep 2020 22:23:45 +0200
Subject: [PATCH 122/175] Improve YouTube adding

The URL is now being used instead of video id.
---
 .../sections/media/AIVideoGallery/index.jsx   | 28 +++++++++++++++----
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/components/organisms/sections/media/AIVideoGallery/index.jsx b/src/components/organisms/sections/media/AIVideoGallery/index.jsx
index d68026d..9ffa016 100644
--- a/src/components/organisms/sections/media/AIVideoGallery/index.jsx
+++ b/src/components/organisms/sections/media/AIVideoGallery/index.jsx
@@ -54,10 +54,24 @@ class AIVideoGallery extends React.Component {
     });
   };
 
+  /**
+   * Retrieving YouTube video ID from URL
+   *
+   * @param {string} url YouTube video URL
+   * @author SithCult <https://github.com/SithCult/Holobook>
+   * @license EUPL-1.2
+   */
+  getYouTubeVideoId = (url) => {
+    const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
+    const match = url.match(regExp);
+
+    return match && match[2].length === 11 ? match[2] : null;
+  };
+
   addVideo = (state) => {
     const video = {
       linkType: "YOUTUBE",
-      url: state.youtubeId,
+      url: state.youtubeLink,
     };
 
     this.setState(
@@ -92,6 +106,8 @@ class AIVideoGallery extends React.Component {
         <MDBRow>
           {this.state.videos &&
             this.state.videos.map((video, i) => {
+              const videoId = this.getYouTubeVideoId(video.url);
+
               return (
                 <MDBCol lg="4" className="mb-3" key={"video-" + i}>
                   <MDBCard>
@@ -99,7 +115,7 @@ class AIVideoGallery extends React.Component {
                       <MDBView>
                         <div className="position-relative">
                           <img
-                            src={`https://img.youtube.com/vi/${video.url}/mqdefault.jpg`}
+                            src={`https://img.youtube.com/vi/${videoId}/mqdefault.jpg`}
                             alt="Video thumbnail"
                             className="img-fluid"
                           />
@@ -114,19 +130,19 @@ class AIVideoGallery extends React.Component {
                             <MDBRow>
                               <MDBCol lg="4">
                                 <img
-                                  src={`https://img.youtube.com/vi/${video.url}/1.jpg`}
+                                  src={`https://img.youtube.com/vi/${videoId}/1.jpg`}
                                   className="img-fluid"
                                 />
                               </MDBCol>
                               <MDBCol lg="4">
                                 <img
-                                  src={`https://img.youtube.com/vi/${video.url}/2.jpg`}
+                                  src={`https://img.youtube.com/vi/${videoId}/2.jpg`}
                                   className="img-fluid"
                                 />
                               </MDBCol>
                               <MDBCol lg="4">
                                 <img
-                                  src={`https://img.youtube.com/vi/${video.url}/3.jpg`}
+                                  src={`https://img.youtube.com/vi/${videoId}/3.jpg`}
                                   className="img-fluid"
                                 />
                               </MDBCol>
@@ -137,7 +153,7 @@ class AIVideoGallery extends React.Component {
                           onClick={() =>
                             this.setState({
                               modalVideo: true,
-                              selectedVideoId: video.url,
+                              selectedVideoId: videoId,
                             })
                           }
                         />

From 9fab6c28c2591e0150d8abd1be6f4e0926047c84 Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Sun, 13 Sep 2020 22:35:11 +0200
Subject: [PATCH 123/175] Improve upload modal

The modal has been visually improved.
---
 .../modals/TalkUploadModal/index.jsx          | 28 +++++++++----------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/src/components/molecules/modals/TalkUploadModal/index.jsx b/src/components/molecules/modals/TalkUploadModal/index.jsx
index 96ea482..48b9e2c 100644
--- a/src/components/molecules/modals/TalkUploadModal/index.jsx
+++ b/src/components/molecules/modals/TalkUploadModal/index.jsx
@@ -78,14 +78,9 @@ class TalkUploadModal extends React.Component {
         backdrop={true}
         isOpen={true}
         toggle={this.props.closeModal}
+        centered
+        animation="left"
       >
-        <MDBModalHeader
-          className="text-center text-dark donate"
-          titleClass="w-100"
-          tag="p"
-        >
-          Upload
-        </MDBModalHeader>
         <MDBModalBody className="text-center">
           <div>
             <Dropzone onDrop={this.onDrop} accept="application/pdf">
@@ -102,12 +97,13 @@ class TalkUploadModal extends React.Component {
                               key={i}
                             >
                               <MDBIcon
-                                icon="file"
+                                icon="file-upload"
                                 className="green-text"
-                                size="6x"
+                                size="3x"
                               />
-                              <p />
-                              <h3>{acceptedFile.name}</h3>
+                              <p className="lead mt-3 mb-0">
+                                {acceptedFile.name}
+                              </p>
                             </li>
                           ))}
                       </ul>
@@ -118,6 +114,7 @@ class TalkUploadModal extends React.Component {
                           animated
                           height="25px"
                           color="success"
+                          className="mb-0 pb-0"
                         >
                           Uploading file
                         </MDBProgress>
@@ -141,14 +138,15 @@ class TalkUploadModal extends React.Component {
                       </ul>
                     </div>
                   ) : (
-                    <div>
+                    <div className="border rounded px-4 pt-4 pb-3">
                       <MDBIcon
                         icon="file-upload"
                         className="green-text"
-                        size="6x"
+                        size="3x"
                       />
-                      <p />
-                      <h3>Click here or drop a file to upload!</h3>
+                      <p className="lead mt-3 mb-0">
+                        Click here or drop a file to upload!
+                      </p>
                     </div>
                   )}
                 </div>

From a348b2d2361aa8f8f7738deb5a58f8d28c9c7bfa Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Sun, 13 Sep 2020 22:39:04 +0200
Subject: [PATCH 124/175] Improve upload modal

Clickable has been added.
---
 src/components/molecules/modals/TalkUploadModal/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/molecules/modals/TalkUploadModal/index.jsx b/src/components/molecules/modals/TalkUploadModal/index.jsx
index 48b9e2c..3573b4b 100644
--- a/src/components/molecules/modals/TalkUploadModal/index.jsx
+++ b/src/components/molecules/modals/TalkUploadModal/index.jsx
@@ -138,7 +138,7 @@ class TalkUploadModal extends React.Component {
                       </ul>
                     </div>
                   ) : (
-                    <div className="border rounded px-4 pt-4 pb-3">
+                    <div className="border rounded px-4 pt-4 pb-3 clickable">
                       <MDBIcon
                         icon="file-upload"
                         className="green-text"

From 936705398b427d01c12e7576ebebb58835f11920 Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Sun, 13 Sep 2020 23:21:35 +0200
Subject: [PATCH 125/175] Implement video removal

Videos can now be removed.
---
 .../media/AIVideoGallery/aivideogallery.scss  |  4 ++-
 .../sections/media/AIVideoGallery/index.jsx   | 30 +++++++++++++++++--
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/components/organisms/sections/media/AIVideoGallery/aivideogallery.scss b/src/components/organisms/sections/media/AIVideoGallery/aivideogallery.scss
index 7757521..c465968 100644
--- a/src/components/organisms/sections/media/AIVideoGallery/aivideogallery.scss
+++ b/src/components/organisms/sections/media/AIVideoGallery/aivideogallery.scss
@@ -21,7 +21,9 @@
 
   .video-preview {
     bottom: 0;
-    background: transparentize($color: black, $amount: 0.4);
+    right: 0;
+    z-index: 3;
+    position: absolute;
   }
 
   .video-title {
diff --git a/src/components/organisms/sections/media/AIVideoGallery/index.jsx b/src/components/organisms/sections/media/AIVideoGallery/index.jsx
index 9ffa016..82d57b4 100644
--- a/src/components/organisms/sections/media/AIVideoGallery/index.jsx
+++ b/src/components/organisms/sections/media/AIVideoGallery/index.jsx
@@ -32,7 +32,10 @@ import {
 import { VideoModal, AddVideoModal } from "../../../../molecules/modals";
 //> Actions
 // Functions to send data from the application to the store
-import { addMetaLink } from "../../../../../store/actions/personActions";
+import {
+  addMetaLink,
+  deleteMetaLink,
+} from "../../../../../store/actions/personActions";
 //> Style
 import "./aivideogallery.scss";
 //#endregion
@@ -126,6 +129,26 @@ class AIVideoGallery extends React.Component {
                               className="text-danger"
                             />
                           </div>
+                          {sameOrigin && video.id && (
+                            <div className="text-right video-preview py-1 px-2">
+                              <MDBBtn
+                                color="danger"
+                                size="sm"
+                                onClick={() => {
+                                  this.setState(
+                                    {
+                                      videos: this.state.videos.filter(
+                                        (video) => video.id !== video.id
+                                      ),
+                                    },
+                                    () => this.props.deleteMetaLink(video.id)
+                                  );
+                                }}
+                              >
+                                <MDBIcon icon="trash" className="m-0" />
+                              </MDBBtn>
+                            </div>
+                          )}
                           <div className="position-absolute w-100 video-preview d-none">
                             <MDBRow>
                               <MDBCol lg="4">
@@ -188,7 +211,10 @@ const mapStateToProps = (state) => ({
 });
 
 const mapDispatchToProps = (dispatch) => {
-  return { addMetaLink: (linkOptions) => dispatch(addMetaLink(linkOptions)) };
+  return {
+    addMetaLink: (linkOptions) => dispatch(addMetaLink(linkOptions)),
+    deleteMetaLink: (id) => dispatch(deleteMetaLink(id)),
+  };
 };
 //#endregion
 

From 488cceca60e8eb7cac05f619b6ff41a774d42563 Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Sun, 13 Sep 2020 23:24:58 +0200
Subject: [PATCH 126/175] Improve upload modal

Now there is a independent upload modal which it is not limited to talk uploading.
Imgur and anonfiles are available as storage engines.
---
 src/components/molecules/index.js             |  4 +-
 .../index.jsx                                 | 62 ++++++++++---------
 src/components/molecules/modals/index.js      |  4 +-
 .../organisms/tabs/TalksTab/index.jsx         | 29 +++++++--
 4 files changed, 63 insertions(+), 36 deletions(-)
 rename src/components/molecules/modals/{TalkUploadModal => UploadModal}/index.jsx (80%)

diff --git a/src/components/molecules/index.js b/src/components/molecules/index.js
index fae23e9..51c0f52 100644
--- a/src/components/molecules/index.js
+++ b/src/components/molecules/index.js
@@ -5,7 +5,7 @@ import Footer from "./Footer";
 import Navbar from "./Navbar";
 import LoginForm from "./forms/LoginForm";
 import RegisterForm from "./forms/RegisterForm";
-import TalkUploadModal from "./modals/TalkUploadModal";
+import UploadModal from "./modals/UploadModal";
 import UserActionCard from "./UserActionCard";
 import MovableBoundary from "./MovableBoundary";
 //#endregion
@@ -17,7 +17,7 @@ export {
   Navbar,
   LoginForm,
   RegisterForm,
-  TalkUploadModal,
+  UploadModal,
   UserActionCard,
   MovableBoundary,
 };
diff --git a/src/components/molecules/modals/TalkUploadModal/index.jsx b/src/components/molecules/modals/UploadModal/index.jsx
similarity index 80%
rename from src/components/molecules/modals/TalkUploadModal/index.jsx
rename to src/components/molecules/modals/UploadModal/index.jsx
index 3573b4b..cd6cbdd 100644
--- a/src/components/molecules/modals/TalkUploadModal/index.jsx
+++ b/src/components/molecules/modals/UploadModal/index.jsx
@@ -2,6 +2,8 @@
 //> 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";
 // Contains the functionality for uploading a file
 import Dropzone from "react-dropzone";
 //> MDB
@@ -20,6 +22,7 @@ import { connect } from "react-redux";
 import { addTalk } from "../../../../store/actions/personActions";
 //> Intel
 import { anonfiles } from "snek-intel/lib/utils/upload";
+import IMGUR_PROVIDER from "snek-intel/lib/utils/imgur";
 
 //> Actions
 // Functions to send data from the application to the store
@@ -28,14 +31,14 @@ import { anonfiles } from "snek-intel/lib/utils/upload";
 
 //#region > Components
 /** @class A upload modal component for uploading files including a drop-zone */
-class TalkUploadModal extends React.Component {
+class UploadModal extends React.Component {
   state = {
     loading: false,
     error: [],
   };
 
   onDrop = async (files) => {
-    const { loggedUser, fetchedUser } = this.props;
+    const { storageEngine } = this.props;
 
     if (files.length > 0) {
       this.setState({
@@ -43,30 +46,29 @@ class TalkUploadModal extends React.Component {
         loading: true,
       });
 
-      this.uploadToAnonfiles(files[0]).then(() => {
-        this.setState({
-          loading: false,
-        });
+      let res;
 
-        this.props.closeModal();
+      if (storageEngine === "anonfiles") {
+        res = await anonfiles.uploadFile(files[0]);
+      } else if (storageEngine === "imgur") {
+        res = await IMGUR_PROVIDER.upload(files[0]);
+      } else {
+        this.setState({ error: ["no valid storageEngine specified"] });
+      }
+
+      this.props.onSuccess(res);
+
+      this.setState({
+        loading: false,
       });
+
+      this.props.closeModal();
     } else {
-      this.setState({ error: ["Only PDF files can be uploaded!"] });
+      this.setState({ error: [this.props.invalidTypeMessage] });
     }
   };
 
-  uploadToAnonfiles = async (file) => {
-    const res = await anonfiles.uploadFile(file);
-
-    this.props.uploadTalk(
-      res.name,
-      "",
-      "https://docs.google.com/viewer?embedded=true&url=" + res.displayUrl,
-      res.downloadUrl,
-      res.path,
-      res.html_url
-    );
-  };
+  uploadToAnonfiles = async (file) => {};
 
   render() {
     return (
@@ -83,7 +85,7 @@ class TalkUploadModal extends React.Component {
       >
         <MDBModalBody className="text-center">
           <div>
-            <Dropzone onDrop={this.onDrop} accept="application/pdf">
+            <Dropzone onDrop={this.onDrop} accept={this.props.acceptTypes}>
               {({ getRootProps, getInputProps, acceptedFiles }) => (
                 <div {...getRootProps()}>
                   <input {...getInputProps()} />
@@ -160,6 +162,15 @@ class TalkUploadModal extends React.Component {
 }
 //#endregion
 
+//#region > PropTypes
+UploadModal.propTypes = {
+  acceptTypes: PropTypes.string.isRequired,
+  invalidTypeMessage: PropTypes.string.isRequired,
+  storageEngine: PropTypes.oneOf(["anonfiles", "imgur"]).isRequired,
+  onSuccess: PropTypes.func,
+};
+//#endregion
+
 //#region > Redux Mapping
 const mapStateToProps = (state) => ({
   loggedUser: state.user.fetchedUser,
@@ -167,12 +178,7 @@ const mapStateToProps = (state) => ({
 });
 
 const mapDispatchToProps = (dispatch) => {
-  return {
-    uploadTalk: (title, description, displayUrl, downloadUrl, path, url) =>
-      dispatch(
-        addTalk({ title, description, displayUrl, downloadUrl, path, url })
-      ),
-  };
+  return {};
 };
 //#endregion
 
@@ -182,7 +188,7 @@ const mapDispatchToProps = (dispatch) => {
  * 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)(TalkUploadModal);
+export default connect(mapStateToProps, mapDispatchToProps)(UploadModal);
 //#endregion
 
 /**
diff --git a/src/components/molecules/modals/index.js b/src/components/molecules/modals/index.js
index 1434ed3..8335bcd 100644
--- a/src/components/molecules/modals/index.js
+++ b/src/components/molecules/modals/index.js
@@ -1,7 +1,7 @@
 //#region > Imports
 //> Components
 // Import all components to export them for easy access from parent components
-import TalkUploadModal from "./TalkUploadModal";
+import UploadModal from "./UploadModal";
 import ProfilePictureModal from "./ProfilePictureModal";
 import ImageModal from "./ImageModal";
 import VideoModal from "./VideoModal";
@@ -18,7 +18,7 @@ import LikesModal from "./LikesModal";
 //> Components
 // Export the components for easy access from parent components
 export {
-  TalkUploadModal,
+  UploadModal,
   ProfilePictureModal,
   ImageModal,
   VideoModal,
diff --git a/src/components/organisms/tabs/TalksTab/index.jsx b/src/components/organisms/tabs/TalksTab/index.jsx
index 96af94c..2caa4d8 100644
--- a/src/components/organisms/tabs/TalksTab/index.jsx
+++ b/src/components/organisms/tabs/TalksTab/index.jsx
@@ -33,9 +33,9 @@ import moment from "moment";
 import "./talkstab.scss";
 //> Actions
 // Functions to send data from the application to the store
-import { deleteTalk } from "../../../../store/actions/personActions";
+import { addTalk, deleteTalk } from "../../../../store/actions/personActions";
 //> Modules
-import { TalkUploadModal } from "../../../molecules/modals";
+import { UploadModal } from "../../../molecules/modals";
 //#endregion
 
 //#region > Components
@@ -54,6 +54,17 @@ class TalkTab extends React.Component {
     }
   };
 
+  handleSuccess = (event) => {
+    this.props.addTalk(
+      event.name,
+      "",
+      "https://docs.google.com/viewer?embedded=true&url=" + event.displayUrl,
+      event.downloadUrl,
+      event.path,
+      event.html_url
+    );
+  };
+
   updateIframe = (talk) => {
     let iframe;
 
@@ -208,8 +219,12 @@ class TalkTab extends React.Component {
             })}
         </MDBRow>
         {this.state.showUpload && (
-          <TalkUploadModal
+          <UploadModal
             {...this.props}
+            acceptTypes={"application/pdf"}
+            invalidTypeMessage={"Only PDF files can be uploaded!"}
+            storageEngine={"anonfiles"}
+            onSuccess={this.handleSuccess}
             closeModal={this.handleUploadClose}
           />
         )}
@@ -226,7 +241,13 @@ const mapStateToProps = (state) => ({
 });
 
 const mapDispatchToProps = (dispatch) => {
-  return { deleteTalk: (id) => dispatch(deleteTalk(id)) };
+  return {
+    addTalk: (title, description, displayUrl, downloadUrl, path, url) =>
+      dispatch(
+        addTalk({ title, description, displayUrl, downloadUrl, path, url })
+      ),
+    deleteTalk: (id) => dispatch(deleteTalk(id)),
+  };
 };
 //#endregion
 

From 39852ed1e9a7062581181fb1a590235969715538 Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Sun, 13 Sep 2020 23:26:47 +0200
Subject: [PATCH 127/175] Improve video removal

The id is now being passed on on creation.
---
 .../sections/media/AIVideoGallery/index.jsx   | 29 ++++++++++---------
 src/store/actions/personActions.js            |  4 +++
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/components/organisms/sections/media/AIVideoGallery/index.jsx b/src/components/organisms/sections/media/AIVideoGallery/index.jsx
index 82d57b4..80a9a7e 100644
--- a/src/components/organisms/sections/media/AIVideoGallery/index.jsx
+++ b/src/components/organisms/sections/media/AIVideoGallery/index.jsx
@@ -71,23 +71,26 @@ class AIVideoGallery extends React.Component {
     return match && match[2].length === 11 ? match[2] : null;
   };
 
-  addVideo = (state) => {
-    const video = {
+  addVideo = async (state) => {
+    let video = {
       linkType: "YOUTUBE",
       url: state.youtubeLink,
     };
 
-    this.setState(
-      {
-        modalAddVideo: false,
-        videos: [...this.state.videos, video],
-      },
-      () =>
-        this.props.addMetaLink({
-          url: video.url,
-          linkType: video.linkType,
-        })
-    );
+    const rtn = await this.props.addMetaLink({
+      url: video.url,
+      linkType: video.linkType,
+    });
+
+    video = {
+      ...video,
+      id: rtn.id,
+    };
+
+    this.setState({
+      modalAddVideo: false,
+      videos: [...this.state.videos, video],
+    });
   };
 
   render() {
diff --git a/src/store/actions/personActions.js b/src/store/actions/personActions.js
index d3ae9a9..cb0fea7 100644
--- a/src/store/actions/personActions.js
+++ b/src/store/actions/personActions.js
@@ -120,6 +120,8 @@ const addMetaLink = (
       });
 
       dispatch({ type: Action.PERSON_META_LINK_ADD_SUCCESS, payload: link });
+
+      return link;
     } catch (ex) {
       dispatch({
         type: Action.PERSON_META_LINK_ADD_FAILURE,
@@ -129,6 +131,8 @@ const addMetaLink = (
           error: ex,
         },
       });
+
+      return false;
     }
   };
 };

From fe9e09c2d5abad02c06fa1dcb4087f365cd001bb Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Sun, 13 Sep 2020 23:42:01 +0200
Subject: [PATCH 128/175] Implement song removal

Songs can now be yeeted.
---
 .../sections/media/AISongGallery/index.jsx    | 70 ++++++++++++-------
 1 file changed, 46 insertions(+), 24 deletions(-)

diff --git a/src/components/organisms/sections/media/AISongGallery/index.jsx b/src/components/organisms/sections/media/AISongGallery/index.jsx
index 5a7ea2e..aefdc69 100644
--- a/src/components/organisms/sections/media/AISongGallery/index.jsx
+++ b/src/components/organisms/sections/media/AISongGallery/index.jsx
@@ -11,28 +11,22 @@ import { connect } from "react-redux";
 //> MDB
 // "Material Design for Bootstrap" is a great UI design framework
 import {
-  MDBContainer,
   MDBRow,
   MDBCol,
   MDBCard,
   MDBCardBody,
-  MDBCardFooter,
   MDBBtn,
-  MDBBadge,
-  MDBProgress,
-  MDBTooltip,
   MDBIcon,
-  MDBTimeline,
-  MDBTimelineStep,
-  MDBView,
-  MDBMask,
 } from "mdbreact";
 
 //> Components
 import { AddSongModal } from "../../../../molecules/modals";
 //> Actions
 // Functions to send data from the application to the store
-import { addMetaLink } from "../../../../../store/actions/personActions";
+import {
+  addMetaLink,
+  deleteMetaLink,
+} from "../../../../../store/actions/personActions";
 //> Style
 import "./aisonggallery.scss";
 //#endregion
@@ -62,28 +56,33 @@ class AISongGallery extends React.Component {
     });
   };
 
-  addSong = (url) => {
-    const song = {
+  addSong = async (url) => {
+    let song = {
       linkType: "SOUNDCLOUD",
       url,
     };
 
-    this.setState(
-      {
-        modalAddSong: false,
-        songs: [...this.state.songs, song],
-      },
-      () =>
-        this.props.addMetaLink({
-          url: song.url,
-          linkType: song.linkType,
-        })
-    );
+    const rtn = await this.props.addMetaLink({
+      url: song.url,
+      linkType: song.linkType,
+    });
+
+    song = {
+      ...song,
+      id: rtn.id,
+    };
+
+    this.setState({
+      modalAddSong: false,
+      songs: [...this.state.songs, song],
+    });
   };
 
   render() {
     const { sameOrigin } = this.props;
 
+    console.log(this.state);
+
     return (
       <div className="py-5">
         {sameOrigin && (
@@ -104,6 +103,26 @@ class AISongGallery extends React.Component {
                 <MDBCol lg="6" className="mb-3" key={"song-" + i}>
                   <MDBCard>
                     <MDBCardBody>
+                      {sameOrigin && song.id && (
+                        <div className="text-right video-preview py-1 px-2">
+                          <MDBBtn
+                            color="danger"
+                            size="sm"
+                            onClick={() => {
+                              this.setState(
+                                {
+                                  songs: this.state.songs.filter(
+                                    (s) => s.id !== song.id
+                                  ),
+                                },
+                                () => this.props.deleteMetaLink(song.id)
+                              );
+                            }}
+                          >
+                            <MDBIcon icon="trash" className="m-0" />
+                          </MDBBtn>
+                        </div>
+                      )}
                       <iframe
                         width="100%"
                         height="166"
@@ -136,7 +155,10 @@ const mapStateToProps = (state) => ({
 });
 
 const mapDispatchToProps = (dispatch) => {
-  return { addMetaLink: (linkOptions) => dispatch(addMetaLink(linkOptions)) };
+  return {
+    addMetaLink: (linkOptions) => dispatch(addMetaLink(linkOptions)),
+    deleteMetaLink: (id) => dispatch(deleteMetaLink(id)),
+  };
 };
 //#endregion
 

From b1a4c9142416ded62936dbf3bb1990b4500e6ced Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Sun, 13 Sep 2020 23:47:59 +0200
Subject: [PATCH 129/175] Remove unused import form upload modal

A unused import has been removed.
---
 src/components/molecules/modals/UploadModal/index.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/molecules/modals/UploadModal/index.jsx b/src/components/molecules/modals/UploadModal/index.jsx
index cd6cbdd..f204af1 100644
--- a/src/components/molecules/modals/UploadModal/index.jsx
+++ b/src/components/molecules/modals/UploadModal/index.jsx
@@ -19,7 +19,6 @@ import {
 // Allows to React components read data from a Redux store, and dispatch actions
 // to the store to update data.
 import { connect } from "react-redux";
-import { addTalk } from "../../../../store/actions/personActions";
 //> Intel
 import { anonfiles } from "snek-intel/lib/utils/upload";
 import IMGUR_PROVIDER from "snek-intel/lib/utils/imgur";

From 7fdecf81360d706cd94667823bbb0c099041bc4b Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Sun, 13 Sep 2020 23:49:46 +0200
Subject: [PATCH 130/175] Improve import of talks tab

The import region has been improved.
---
 src/components/organisms/tabs/TalksTab/index.jsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/organisms/tabs/TalksTab/index.jsx b/src/components/organisms/tabs/TalksTab/index.jsx
index 2caa4d8..5d02e04 100644
--- a/src/components/organisms/tabs/TalksTab/index.jsx
+++ b/src/components/organisms/tabs/TalksTab/index.jsx
@@ -26,15 +26,11 @@ import { connect } from "react-redux";
 // Used to display the time in a readable format
 import moment from "moment";
 
-//> Actions
-// Functions to send data from the application to the store
-// import { deleteTalkAction } from "../../../../store/actions/userActions";
 //> Style sheet
 import "./talkstab.scss";
 //> Actions
 // Functions to send data from the application to the store
 import { addTalk, deleteTalk } from "../../../../store/actions/personActions";
-//> Modules
 import { UploadModal } from "../../../molecules/modals";
 //#endregion
 

From b3deca0f55be02d89a7ec565b7a4732d02c88bbc Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Sun, 13 Sep 2020 23:50:34 +0200
Subject: [PATCH 131/175] Add custom image upload

Now it is possible to upload custom images to imgur.
---
 .../sections/media/AIGallery/index.jsx        | 32 +++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/components/organisms/sections/media/AIGallery/index.jsx b/src/components/organisms/sections/media/AIGallery/index.jsx
index 363e7c9..2e50be1 100644
--- a/src/components/organisms/sections/media/AIGallery/index.jsx
+++ b/src/components/organisms/sections/media/AIGallery/index.jsx
@@ -32,6 +32,7 @@ import {
 import {
   ImageModal,
   InstagramSelectorModal,
+  UploadModal,
 } from "../../../../molecules/modals";
 //> Actions
 // Functions to send data from the application to the store
@@ -42,7 +43,7 @@ import "./aigallery.scss";
 
 //#region > Components
 class AIGallery extends React.Component {
-  state = { modalPicture: false };
+  state = { modalPicture: false, showUpload: false };
 
   componentDidMount = () => {
     this.setState({
@@ -54,6 +55,18 @@ class AIGallery extends React.Component {
     console.log("AAAAAAAAAAAAAAA", this.props.loggedUser);
   };
 
+  handleUploadClose = () => {
+    if (this.state.showUpload) {
+      this.setState({
+        showUpload: false,
+      });
+    }
+  };
+
+  handleSuccess = (event) => {
+    console.log("SUCCESS", event);
+  };
+
   toggle = (modal) => {
     this.setState({
       [modal]: !this.state[modal],
@@ -89,7 +102,10 @@ class AIGallery extends React.Component {
       <div className="py-5" id="gallery">
         {sameOrigin && (
           <div className="mb-4 text-right">
-            <MDBBtn color="elegant" onClick={() => {}}>
+            <MDBBtn
+              color="elegant"
+              onClick={() => this.setState({ showUpload: true })}
+            >
               <MDBIcon icon="upload" />
               Upload image
             </MDBBtn>
@@ -146,6 +162,18 @@ class AIGallery extends React.Component {
             save={this.save}
           />
         )}
+        {this.state.showUpload && (
+          <UploadModal
+            {...this.props}
+            acceptTypes={"image/jpeg, image/png, image/gif"}
+            invalidTypeMessage={
+              "Only JPEG, PNG and GIF uploading is supported!"
+            }
+            storageEngine={"imgur"}
+            onSuccess={this.handleSuccess}
+            closeModal={this.handleUploadClose}
+          />
+        )}
       </div>
     );
   }

From a50499bb6177f5737e11c6bf24b4b064d9a35bd1 Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Mon, 14 Sep 2020 00:11:14 +0200
Subject: [PATCH 132/175] Improve image galleries

The galleries have been visually improved.
---
 .../molecules/modals/ImageModal/imagemodal.scss       | 11 +++++++++++
 src/components/molecules/modals/ImageModal/index.jsx  |  6 +++++-
 .../molecules/modals/InstagramSelectorModal/index.jsx | 10 +++++-----
 .../organisms/sections/media/AIGallery/aigallery.scss |  4 ++++
 4 files changed, 25 insertions(+), 6 deletions(-)
 create mode 100644 src/components/molecules/modals/ImageModal/imagemodal.scss

diff --git a/src/components/molecules/modals/ImageModal/imagemodal.scss b/src/components/molecules/modals/ImageModal/imagemodal.scss
new file mode 100644
index 0000000..36f99dc
--- /dev/null
+++ b/src/components/molecules/modals/ImageModal/imagemodal.scss
@@ -0,0 +1,11 @@
+#imagemodal {
+  img {
+    min-height: 300px;
+    width: auto;
+  }
+}
+
+/**
+ * SPDX-License-Identifier: (EUPL-1.2)
+ * Copyright © 2019-2020 Simon Prast
+ */
diff --git a/src/components/molecules/modals/ImageModal/index.jsx b/src/components/molecules/modals/ImageModal/index.jsx
index 3d3fcd7..42128b7 100644
--- a/src/components/molecules/modals/ImageModal/index.jsx
+++ b/src/components/molecules/modals/ImageModal/index.jsx
@@ -23,6 +23,9 @@ import {
   MDBView,
   MDBMask,
 } from "mdbreact";
+
+//> Style
+import "./imagemodal.scss";
 //#endregion
 
 //#region > Components
@@ -38,12 +41,13 @@ class ImageModal extends React.Component {
           size="lg"
           centered
           animation="left"
+          id="imagemodal"
         >
           <MDBModalBody className="p-2 text-center">
             <MDBRow>
               <MDBCol lg="8">
                 <MDBView>
-                  <img src={selectedPicture.mediaLink} className="img-fluid" />
+                  <img src={selectedPicture.url} className="img-fluid" />
                   <MDBMask />
                 </MDBView>
               </MDBCol>
diff --git a/src/components/molecules/modals/InstagramSelectorModal/index.jsx b/src/components/molecules/modals/InstagramSelectorModal/index.jsx
index 3bd316e..d6ec4a2 100644
--- a/src/components/molecules/modals/InstagramSelectorModal/index.jsx
+++ b/src/components/molecules/modals/InstagramSelectorModal/index.jsx
@@ -22,6 +22,7 @@ import {
   MDBAlert,
   MDBView,
   MDBMask,
+  MDBCard,
 } from "mdbreact";
 
 //> Actions
@@ -122,7 +123,7 @@ class InstagramSelectorModal extends React.Component {
                 </MDBBtn>
               </div>
             </div>
-            <MDBRow className="mt-3">
+            <div className="mt-3 card-columns">
               {this.state.posts &&
                 this.state.posts.posts.map((picture, i) => {
                   const selected =
@@ -134,8 +135,7 @@ class InstagramSelectorModal extends React.Component {
 
                   if (picture.mediaType === "IMAGE") {
                     return (
-                      <MDBCol
-                        lg="4"
+                      <MDBCard
                         className={selected ? "mb-3 selected" : "mb-3"}
                         key={"selector-" + i}
                       >
@@ -150,13 +150,13 @@ class InstagramSelectorModal extends React.Component {
                             )}
                           </MDBMask>
                         </MDBView>
-                      </MDBCol>
+                      </MDBCard>
                     );
                   } else {
                     return null;
                   }
                 })}
-            </MDBRow>
+            </div>
             {this.state.posts && this.state.posts.next[0] && (
               <div className="text-center">
                 <MDBBtn
diff --git a/src/components/organisms/sections/media/AIGallery/aigallery.scss b/src/components/organisms/sections/media/AIGallery/aigallery.scss
index 56e4430..aea3d1d 100644
--- a/src/components/organisms/sections/media/AIGallery/aigallery.scss
+++ b/src/components/organisms/sections/media/AIGallery/aigallery.scss
@@ -3,6 +3,10 @@
     .card-body {
       padding: 0;
 
+      img {
+        width: 100%;
+      }
+
       .mask {
         background: transparentize($color: white, $amount: 1);
         transition: background 0.1s ease;

From 11beab3c0359f3f1727862913f0696a94c4ed3e0 Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Mon, 14 Sep 2020 00:11:39 +0200
Subject: [PATCH 133/175] Implement image upload

It is now possible to upload images to IMGUR.
---
 .../sections/media/AIGallery/index.jsx        | 57 ++++++++++++-------
 .../organisms/tabs/OverviewTab/index.jsx      |  4 +-
 2 files changed, 39 insertions(+), 22 deletions(-)

diff --git a/src/components/organisms/sections/media/AIGallery/index.jsx b/src/components/organisms/sections/media/AIGallery/index.jsx
index 2e50be1..99706fb 100644
--- a/src/components/organisms/sections/media/AIGallery/index.jsx
+++ b/src/components/organisms/sections/media/AIGallery/index.jsx
@@ -63,8 +63,25 @@ class AIGallery extends React.Component {
     }
   };
 
-  handleSuccess = (event) => {
-    console.log("SUCCESS", event);
+  handleSuccess = async (event) => {
+    let photo = {
+      url: event.link,
+      linkType: "PHOTO",
+    };
+
+    const res = await this.props.addMetaLink({
+      url: photo.url,
+      linkType: photo.linkType,
+    });
+
+    photo = {
+      ...photo,
+      id: res.id,
+    };
+
+    this.setState({
+      images: [...this.state.images, photo],
+    });
   };
 
   toggle = (modal) => {
@@ -118,31 +135,29 @@ class AIGallery extends React.Component {
             </MDBBtn>
           </div>
         )}
-        <MDBRow>
+        <div className="card-columns">
           {this.state.images &&
             this.state.images.map((picture, i) => {
               console.log("YE", picture);
               return (
-                <MDBCol lg="4" key={"picture-" + i}>
-                  <MDBCard>
-                    <MDBCardBody>
-                      <MDBView>
-                        <img src={picture.url} className="img-fluid" />
-                        <MDBMask
-                          onClick={() =>
-                            this.setState({
-                              modalPicture: true,
-                              selectedPicture: picture,
-                            })
-                          }
-                        />
-                      </MDBView>
-                    </MDBCardBody>
-                  </MDBCard>
-                </MDBCol>
+                <MDBCard key={"picture-" + i} className="mb-3">
+                  <MDBCardBody>
+                    <MDBView>
+                      <img src={picture.url} className="img-fluid" />
+                      <MDBMask
+                        onClick={() =>
+                          this.setState({
+                            modalPicture: true,
+                            selectedPicture: picture,
+                          })
+                        }
+                      />
+                    </MDBView>
+                  </MDBCardBody>
+                </MDBCard>
               );
             })}
-        </MDBRow>
+        </div>
         {this.state.modalPicture && this.state.selectedPicture && (
           <ImageModal
             toggle={() => this.toggle("modalPicture")}
diff --git a/src/components/organisms/tabs/OverviewTab/index.jsx b/src/components/organisms/tabs/OverviewTab/index.jsx
index 003cfec..10fa58f 100644
--- a/src/components/organisms/tabs/OverviewTab/index.jsx
+++ b/src/components/organisms/tabs/OverviewTab/index.jsx
@@ -256,7 +256,9 @@ class OverviewTab extends React.Component {
                 {displayImageGallery && (
                   <AIGallery
                     images={fetchedPerson.metaLinks.filter(
-                      (link) => link.linkType === "IMAGE"
+                      (link) =>
+                        link.linkType === "PHOTO" ||
+                        link.linkType === "INSTAGRAM"
                     )}
                     sameOrigin={sameOrigin && this.state.toggleEdit}
                   />

From 09ca65bd2c4a8691f3b5def732042a394d5d5774 Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Mon, 14 Sep 2020 00:20:03 +0200
Subject: [PATCH 134/175] Implement picture removal

It is now possible to remove pictures.
---
 .../molecules/modals/ImageModal/index.jsx     | 17 +++-------
 .../sections/media/AIGallery/aigallery.scss   |  7 +++++
 .../sections/media/AIGallery/index.jsx        | 31 +++++++++++++++++--
 3 files changed, 40 insertions(+), 15 deletions(-)

diff --git a/src/components/molecules/modals/ImageModal/index.jsx b/src/components/molecules/modals/ImageModal/index.jsx
index 42128b7..8db22ca 100644
--- a/src/components/molecules/modals/ImageModal/index.jsx
+++ b/src/components/molecules/modals/ImageModal/index.jsx
@@ -38,23 +38,16 @@ class ImageModal extends React.Component {
         <MDBModal
           isOpen={true}
           toggle={this.props.toggle}
-          size="lg"
+          size="md"
           centered
           animation="left"
           id="imagemodal"
         >
           <MDBModalBody className="p-2 text-center">
-            <MDBRow>
-              <MDBCol lg="8">
-                <MDBView>
-                  <img src={selectedPicture.url} className="img-fluid" />
-                  <MDBMask />
-                </MDBView>
-              </MDBCol>
-              <MDBCol lg="4">
-                <div>Content</div>
-              </MDBCol>
-            </MDBRow>
+            <MDBView>
+              <img src={selectedPicture.url} className="img-fluid" />
+              <MDBMask />
+            </MDBView>
           </MDBModalBody>
         </MDBModal>
       </>
diff --git a/src/components/organisms/sections/media/AIGallery/aigallery.scss b/src/components/organisms/sections/media/AIGallery/aigallery.scss
index aea3d1d..c144ded 100644
--- a/src/components/organisms/sections/media/AIGallery/aigallery.scss
+++ b/src/components/organisms/sections/media/AIGallery/aigallery.scss
@@ -19,6 +19,13 @@
     }
   }
 
+  .video-preview {
+    bottom: 0;
+    right: 0;
+    z-index: 3;
+    position: absolute;
+  }
+
   .fa-times {
     &.text-muted {
       transition: color 0.1s ease;
diff --git a/src/components/organisms/sections/media/AIGallery/index.jsx b/src/components/organisms/sections/media/AIGallery/index.jsx
index 99706fb..3de7c30 100644
--- a/src/components/organisms/sections/media/AIGallery/index.jsx
+++ b/src/components/organisms/sections/media/AIGallery/index.jsx
@@ -36,7 +36,10 @@ import {
 } from "../../../../molecules/modals";
 //> Actions
 // Functions to send data from the application to the store
-import { addMetaLink } from "../../../../../store/actions/personActions";
+import {
+  addMetaLink,
+  deleteMetaLink,
+} from "../../../../../store/actions/personActions";
 //> Style
 import "./aigallery.scss";
 //#endregion
@@ -138,11 +141,30 @@ class AIGallery extends React.Component {
         <div className="card-columns">
           {this.state.images &&
             this.state.images.map((picture, i) => {
-              console.log("YE", picture);
               return (
                 <MDBCard key={"picture-" + i} className="mb-3">
                   <MDBCardBody>
                     <MDBView>
+                      {sameOrigin && picture.id && (
+                        <div className="text-right video-preview py-1 px-2">
+                          <MDBBtn
+                            color="danger"
+                            size="sm"
+                            onClick={() => {
+                              this.setState(
+                                {
+                                  images: this.state.images.filter(
+                                    (p) => p.id !== picture.id
+                                  ),
+                                },
+                                () => this.props.deleteMetaLink(picture.id)
+                              );
+                            }}
+                          >
+                            <MDBIcon icon="trash" className="m-0" />
+                          </MDBBtn>
+                        </div>
+                      )}
                       <img src={picture.url} className="img-fluid" />
                       <MDBMask
                         onClick={() =>
@@ -201,7 +223,10 @@ const mapStateToProps = (state) => ({
 });
 
 const mapDispatchToProps = (dispatch) => {
-  return { addMetaLink: (linkOptions) => dispatch(addMetaLink(linkOptions)) };
+  return {
+    addMetaLink: (linkOptions) => dispatch(addMetaLink(linkOptions)),
+    deleteMetaLink: (id) => dispatch(deleteMetaLink(id)),
+  };
 };
 //#endregion
 

From 9f6fffcc9ef31de96bd481d59e0aba5a39b5a467 Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Mon, 14 Sep 2020 00:42:39 +0200
Subject: [PATCH 135/175] Implement connect modal

The modal is being shown if no profiles are present.
---
 .../molecules/modals/ConnectModal/index.jsx   | 217 +++++++++++++-----
 src/components/pages/PersonPage/index.jsx     |  13 +-
 2 files changed, 166 insertions(+), 64 deletions(-)

diff --git a/src/components/molecules/modals/ConnectModal/index.jsx b/src/components/molecules/modals/ConnectModal/index.jsx
index 54d1e18..edb305d 100644
--- a/src/components/molecules/modals/ConnectModal/index.jsx
+++ b/src/components/molecules/modals/ConnectModal/index.jsx
@@ -139,72 +139,163 @@ class ConnectModal extends React.Component {
   render() {
     const { selectedVideoId } = this.props;
 
-    console.log(this.state);
-    console.log(this.props);
+    console.log("RAAAAAAAAAAAAAAAAAAAAAAAAA");
 
     return (
       <>
-        <div className="text-center" id="connectmodal">
-          {this.props.disabled ? (
-            <>
-              <MDBBtn social="git" disabled>
-                <MDBIcon fab icon="github" size="lg" />
-              </MDBBtn>
-              <MDBBtn social="ins" disabled>
-                <MDBIcon fab icon="instagram" size="lg" />
-              </MDBBtn>
-              <MDBBtn color="orange" disabled>
-                <MDBIcon fab icon="gitlab" size="lg" />
-              </MDBBtn>
-            </>
-          ) : (
-            <>
-              {!process.env.NODE_ENV ||
-              process.env.NODE_ENV === "development" ? (
-                <GitHubOAuth
-                  authorizationUrl="https://github.com/login/oauth/authorize"
-                  clientId="1440dd4c1d1c4c0fa124"
-                  clientSecret="0723a2b5bfef27efc8b2d26d837ead239fa0b0e6"
-                  redirectUri="http://localhost:3000/redirect"
-                  onSuccess={this.oauthGitHubSuccess}
-                  onFailure={this.oauthGitHubFailure}
-                />
-              ) : (
-                <GitHubOAuth
-                  authorizationUrl="https://github.com/login/oauth/authorize"
-                  clientId="2148629809594d57c113"
-                  clientSecret="64a37e4846387cfcaea35d83afca3c9c8689628c"
-                  redirectUri="https://snek.at/redirect"
-                  onSuccess={this.oauthGitHubSuccess}
-                  onFailure={this.oauthGitHubFailure}
-                />
-              )}
-              {!process.env.NODE_ENV ||
-              process.env.NODE_ENV === "development" ? (
-                <InstagramOAuth
-                  authorizationUrl="https://api.instagram.com/oauth/authorize"
-                  clientId="291591375471783"
-                  clientSecret="d4e65f2dd4c72c3123cfbd84c19e7bee"
-                  redirectUri="https://localhost:3000/redirect"
-                  onSuccess={this.oauthInstagramSuccess}
-                  onFailure={this.oauthInstagramFailure}
-                />
-              ) : (
-                <InstagramOAuth
-                  authorizationUrl="https://api.instagram.com/oauth/authorize"
-                  clientId="291591375471783"
-                  clientSecret="d4e65f2dd4c72c3123cfbd84c19e7bee"
-                  redirectUri="https://snek.at/redirect"
-                  onSuccess={this.oauthInstagramSuccess}
-                  onFailure={this.oauthInstagramFailure}
-                />
-              )}
-              <MDBBtn color="orange" onClick={this.toggle}>
-                <MDBIcon fab icon="gitlab" size="lg" />
-              </MDBBtn>
-            </>
-          )}
-        </div>
+        {this.props.isModal ? (
+          <MDBModal
+            size="md"
+            backdrop={true}
+            isOpen={true}
+            toggle={this.props.toggle}
+            centered
+            animation="left"
+          >
+            <MDBModalBody>
+              <div className="text-center" id="connectmodal">
+                <div className="text-right small text-muted">
+                  <span
+                    onClick={() => {
+                      localStorage.setItem("connect_modal", true);
+                      this.props.toggle();
+                    }}
+                    className="clickable"
+                  >
+                    Later
+                  </span>
+                </div>
+                <p className="lead font-weight-bold mb-0">Connect your work</p>
+                <p className="text-muted small">
+                  You can add GitHub, Instagram and GitLab to share parts of
+                  your work.
+                </p>
+                {this.props.disabled ? (
+                  <>
+                    <MDBBtn social="git" disabled>
+                      <MDBIcon fab icon="github" size="lg" />
+                    </MDBBtn>
+                    <MDBBtn social="ins" disabled>
+                      <MDBIcon fab icon="instagram" size="lg" />
+                    </MDBBtn>
+                    <MDBBtn color="orange" disabled>
+                      <MDBIcon fab icon="gitlab" size="lg" />
+                    </MDBBtn>
+                  </>
+                ) : (
+                  <>
+                    {!process.env.NODE_ENV ||
+                    process.env.NODE_ENV === "development" ? (
+                      <GitHubOAuth
+                        authorizationUrl="https://github.com/login/oauth/authorize"
+                        clientId="1440dd4c1d1c4c0fa124"
+                        clientSecret="0723a2b5bfef27efc8b2d26d837ead239fa0b0e6"
+                        redirectUri="http://localhost:3000/redirect"
+                        onSuccess={this.oauthGitHubSuccess}
+                        onFailure={this.oauthGitHubFailure}
+                      />
+                    ) : (
+                      <GitHubOAuth
+                        authorizationUrl="https://github.com/login/oauth/authorize"
+                        clientId="2148629809594d57c113"
+                        clientSecret="64a37e4846387cfcaea35d83afca3c9c8689628c"
+                        redirectUri="https://snek.at/redirect"
+                        onSuccess={this.oauthGitHubSuccess}
+                        onFailure={this.oauthGitHubFailure}
+                      />
+                    )}
+                    {!process.env.NODE_ENV ||
+                    process.env.NODE_ENV === "development" ? (
+                      <InstagramOAuth
+                        authorizationUrl="https://api.instagram.com/oauth/authorize"
+                        clientId="291591375471783"
+                        clientSecret="d4e65f2dd4c72c3123cfbd84c19e7bee"
+                        redirectUri="https://localhost:3000/redirect"
+                        onSuccess={this.oauthInstagramSuccess}
+                        onFailure={this.oauthInstagramFailure}
+                      />
+                    ) : (
+                      <InstagramOAuth
+                        authorizationUrl="https://api.instagram.com/oauth/authorize"
+                        clientId="291591375471783"
+                        clientSecret="d4e65f2dd4c72c3123cfbd84c19e7bee"
+                        redirectUri="https://snek.at/redirect"
+                        onSuccess={this.oauthInstagramSuccess}
+                        onFailure={this.oauthInstagramFailure}
+                      />
+                    )}
+                    <MDBBtn color="orange" onClick={this.toggle}>
+                      <MDBIcon fab icon="gitlab" size="lg" />
+                    </MDBBtn>
+                  </>
+                )}
+                <p className="mt-3">SNEK's no fun without those connections!</p>
+              </div>
+            </MDBModalBody>
+          </MDBModal>
+        ) : (
+          <div className="text-center" id="connectmodal">
+            {this.props.disabled ? (
+              <>
+                <MDBBtn social="git" disabled>
+                  <MDBIcon fab icon="github" size="lg" />
+                </MDBBtn>
+                <MDBBtn social="ins" disabled>
+                  <MDBIcon fab icon="instagram" size="lg" />
+                </MDBBtn>
+                <MDBBtn color="orange" disabled>
+                  <MDBIcon fab icon="gitlab" size="lg" />
+                </MDBBtn>
+              </>
+            ) : (
+              <>
+                {!process.env.NODE_ENV ||
+                process.env.NODE_ENV === "development" ? (
+                  <GitHubOAuth
+                    authorizationUrl="https://github.com/login/oauth/authorize"
+                    clientId="1440dd4c1d1c4c0fa124"
+                    clientSecret="0723a2b5bfef27efc8b2d26d837ead239fa0b0e6"
+                    redirectUri="http://localhost:3000/redirect"
+                    onSuccess={this.oauthGitHubSuccess}
+                    onFailure={this.oauthGitHubFailure}
+                  />
+                ) : (
+                  <GitHubOAuth
+                    authorizationUrl="https://github.com/login/oauth/authorize"
+                    clientId="2148629809594d57c113"
+                    clientSecret="64a37e4846387cfcaea35d83afca3c9c8689628c"
+                    redirectUri="https://snek.at/redirect"
+                    onSuccess={this.oauthGitHubSuccess}
+                    onFailure={this.oauthGitHubFailure}
+                  />
+                )}
+                {!process.env.NODE_ENV ||
+                process.env.NODE_ENV === "development" ? (
+                  <InstagramOAuth
+                    authorizationUrl="https://api.instagram.com/oauth/authorize"
+                    clientId="291591375471783"
+                    clientSecret="d4e65f2dd4c72c3123cfbd84c19e7bee"
+                    redirectUri="https://localhost:3000/redirect"
+                    onSuccess={this.oauthInstagramSuccess}
+                    onFailure={this.oauthInstagramFailure}
+                  />
+                ) : (
+                  <InstagramOAuth
+                    authorizationUrl="https://api.instagram.com/oauth/authorize"
+                    clientId="291591375471783"
+                    clientSecret="d4e65f2dd4c72c3123cfbd84c19e7bee"
+                    redirectUri="https://snek.at/redirect"
+                    onSuccess={this.oauthInstagramSuccess}
+                    onFailure={this.oauthInstagramFailure}
+                  />
+                )}
+                <MDBBtn color="orange" onClick={this.toggle}>
+                  <MDBIcon fab icon="gitlab" size="lg" />
+                </MDBBtn>
+              </>
+            )}
+          </div>
+        )}
         {this.state.modalGitLab && (
           <MDBModal
             className="text-white"
diff --git a/src/components/pages/PersonPage/index.jsx b/src/components/pages/PersonPage/index.jsx
index d5acd6d..cec0b77 100644
--- a/src/components/pages/PersonPage/index.jsx
+++ b/src/components/pages/PersonPage/index.jsx
@@ -21,6 +21,7 @@ import {
 import { getPerson as getUserPerson } from "../../../store/actions/userActions";
 //> Components
 import { PersonInfoCard, PersonTabs } from "../../organisms";
+import { ConnectModal } from "../../molecules/modals";
 //> Style sheet
 import "./person.scss";
 //#endregion
@@ -32,6 +33,7 @@ import "./person.scss";
 class PersonPage extends React.Component {
   state = {
     cachingDone: false,
+    showConnectModal: true,
   };
 
   saveSettings = (state) => {
@@ -79,7 +81,7 @@ class PersonPage extends React.Component {
   };
 
   render() {
-    const { fetchedPerson, match } = this.props;
+    const { fetchedPerson, match, loggedUser } = this.props;
     const username = match?.params?.username;
 
     if (fetchedPerson?.slug.split("-")[1] === username) {
@@ -95,6 +97,15 @@ class PersonPage extends React.Component {
               </MDBCol>
             </MDBRow>
           </MDBContainer>
+          {fetchedPerson &&
+            fetchedPerson.profiles.length > 0 &&
+            this.state.showConnectModal &&
+            !localStorage.getItem("connect_modal") && (
+              <ConnectModal
+                isModal
+                toggle={() => this.setState({ showConnectModal: false })}
+              />
+            )}
         </div>
       );
     } else {

From bad0db104572127f2146cc030096f638ba5e8bba Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Mon, 14 Sep 2020 00:43:28 +0200
Subject: [PATCH 136/175] Improve connect modal

The local storage entry is now being set on toggle.
---
 src/components/molecules/modals/ConnectModal/index.jsx | 8 +-------
 src/components/pages/PersonPage/index.jsx              | 6 +++++-
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/molecules/modals/ConnectModal/index.jsx b/src/components/molecules/modals/ConnectModal/index.jsx
index edb305d..a46a472 100644
--- a/src/components/molecules/modals/ConnectModal/index.jsx
+++ b/src/components/molecules/modals/ConnectModal/index.jsx
@@ -155,13 +155,7 @@ class ConnectModal extends React.Component {
             <MDBModalBody>
               <div className="text-center" id="connectmodal">
                 <div className="text-right small text-muted">
-                  <span
-                    onClick={() => {
-                      localStorage.setItem("connect_modal", true);
-                      this.props.toggle();
-                    }}
-                    className="clickable"
-                  >
+                  <span onClick={this.props.toggle} className="clickable">
                     Later
                   </span>
                 </div>
diff --git a/src/components/pages/PersonPage/index.jsx b/src/components/pages/PersonPage/index.jsx
index cec0b77..36538f6 100644
--- a/src/components/pages/PersonPage/index.jsx
+++ b/src/components/pages/PersonPage/index.jsx
@@ -103,7 +103,11 @@ class PersonPage extends React.Component {
             !localStorage.getItem("connect_modal") && (
               <ConnectModal
                 isModal
-                toggle={() => this.setState({ showConnectModal: false })}
+                toggle={() =>
+                  this.setState({ showConnectModal: false }, () =>
+                    localStorage.setItem("connect_modal", true)
+                  )
+                }
               />
             )}
         </div>

From 4dd14edb0d42d46f0a5b75b65b1127a6c126c6db Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Mon, 14 Sep 2020 00:47:33 +0200
Subject: [PATCH 137/175] Add basic load more instagram posts functionality

Now it is possible to load more instagram posts. This feature
is now fully supported by intel, therefore the load more button,
is disabled now.
---
 .../modals/InstagramSelectorModal/index.jsx   | 59 ++++++++++++++++---
 1 file changed, 51 insertions(+), 8 deletions(-)

diff --git a/src/components/molecules/modals/InstagramSelectorModal/index.jsx b/src/components/molecules/modals/InstagramSelectorModal/index.jsx
index d6ec4a2..7117cad 100644
--- a/src/components/molecules/modals/InstagramSelectorModal/index.jsx
+++ b/src/components/molecules/modals/InstagramSelectorModal/index.jsx
@@ -50,13 +50,23 @@ class InstagramSelectorModal extends React.Component {
   };
 
   init = async (refetch) => {
+    let next;
+    let posts;
+
+    if (localStorage.getItem("instagram_posts") && !refetch) {
+      posts = JSON.parse(localStorage.getItem("instagram_posts"));
+      next = undefined;
+    } else {
+      const res = await this.props.getInstagramPosts();
+
+      posts = res.posts;
+      next = res.next;
+    }
+
     this.setState(
       {
-        posts: refetch
-          ? await this.props.getInstagramPosts()
-          : localStorage.getItem("instagram_posts")
-          ? JSON.parse(localStorage.getItem("instagram_posts"))
-          : await this.props.getInstagramPosts(),
+        posts,
+        next,
         selection: this.props.selection ? this.props.selection : [],
       },
       () =>
@@ -96,6 +106,38 @@ class InstagramSelectorModal extends React.Component {
     }
   };
 
+  loadMore = async () => {
+    const isLocalStorage = localStorage.getItem("instagram_posts")
+      ? true
+      : false;
+
+    if (isLocalStorage) {
+      await this.init(true);
+    }
+
+    // const morePosts
+
+    const nextFns = this.state.next;
+    let nextPosts = [];
+    let nextNextFns = [];
+
+    for (const index in nextFns) {
+      const fn = nextFns[index];
+      const res = await fn();
+
+      nextPosts.concat(res.posts);
+
+      if (res.nex) {
+        nextNextFns.concat(res.nex);
+      }
+    }
+
+    this.setState({
+      posts,
+      next,
+    });
+  };
+
   render() {
     console.log("REEEEEE", this.state);
     return (
@@ -125,7 +167,7 @@ class InstagramSelectorModal extends React.Component {
             </div>
             <div className="mt-3 card-columns">
               {this.state.posts &&
-                this.state.posts.posts.map((picture, i) => {
+                this.state.posts.map((picture, i) => {
                   const selected =
                     this.state.selection.filter(
                       (item) => item.mediaLink === picture.mediaLink
@@ -157,11 +199,12 @@ class InstagramSelectorModal extends React.Component {
                   }
                 })}
             </div>
-            {this.state.posts && this.state.posts.next[0] && (
+            {this.state.posts && (
               <div className="text-center">
                 <MDBBtn
                   color="elegant"
-                  onClick={() => this.state.posts.next[0].next()}
+                  onClick={() => this.loadMore()}
+                  disabled
                 >
                   Load more
                 </MDBBtn>

From e0eec2fffd034d2ef810afa0869448fd763fe353 Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Mon, 14 Sep 2020 00:49:40 +0200
Subject: [PATCH 138/175] Fix state setting on load more

Now the state is set correctly.
---
 .../molecules/modals/InstagramSelectorModal/index.jsx         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/molecules/modals/InstagramSelectorModal/index.jsx b/src/components/molecules/modals/InstagramSelectorModal/index.jsx
index 7117cad..e21bc04 100644
--- a/src/components/molecules/modals/InstagramSelectorModal/index.jsx
+++ b/src/components/molecules/modals/InstagramSelectorModal/index.jsx
@@ -133,8 +133,8 @@ class InstagramSelectorModal extends React.Component {
     }
 
     this.setState({
-      posts,
-      next,
+      posts: nextPosts,
+      next: nextNextFns,
     });
   };
 

From 3bee60bd0f49d4a6382281591b66f59aef3664d4 Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Mon, 14 Sep 2020 00:54:02 +0200
Subject: [PATCH 139/175] Fix connect modal

The modal now only shows up if you have no present profiles.
---
 src/components/pages/PersonPage/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/pages/PersonPage/index.jsx b/src/components/pages/PersonPage/index.jsx
index 36538f6..4e46f94 100644
--- a/src/components/pages/PersonPage/index.jsx
+++ b/src/components/pages/PersonPage/index.jsx
@@ -98,7 +98,7 @@ class PersonPage extends React.Component {
             </MDBRow>
           </MDBContainer>
           {fetchedPerson &&
-            fetchedPerson.profiles.length > 0 &&
+            fetchedPerson.profiles.length === 0 &&
             this.state.showConnectModal &&
             !localStorage.getItem("connect_modal") && (
               <ConnectModal

From 31b1170322f3a619b546b4660e56407017233d46 Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Mon, 14 Sep 2020 01:25:07 +0200
Subject: [PATCH 140/175] Improve code quality

Some console logs have been removed. The Instagram selection modal has been improved to make it more stable.
---
 .../atoms/charts/AILineChart/index.jsx        | 33 ++++++++-----------
 .../atoms/charts/ContribRadar/index.jsx       |  3 --
 .../molecules/modals/ConnectModal/index.jsx   |  5 ---
 .../molecules/modals/FollowModal/index.jsx    |  2 +-
 .../modals/InstagramSelectorModal/index.jsx   | 13 +++-----
 .../molecules/modals/LikesModal/index.jsx     |  2 +-
 .../modals/enterprise/UserModal/index.jsx     |  2 --
 .../sections/media/AISongGallery/index.jsx    |  2 --
 .../sections/person/InfoCard/index.jsx        |  1 -
 .../organisms/tabs/OverviewTab/index.jsx      |  2 --
 .../tabs/enterprise/PageImprint/index.jsx     |  2 --
 src/components/pages/CompanyPage/index.jsx    |  8 -----
 src/components/pages/PersonPage/index.jsx     | 18 ++++++++--
 src/components/pages/SettingsPage/index.jsx   | 30 +++++++++--------
 14 files changed, 54 insertions(+), 69 deletions(-)

diff --git a/src/components/atoms/charts/AILineChart/index.jsx b/src/components/atoms/charts/AILineChart/index.jsx
index 48dfbbd..770ff63 100644
--- a/src/components/atoms/charts/AILineChart/index.jsx
+++ b/src/components/atoms/charts/AILineChart/index.jsx
@@ -79,8 +79,6 @@ class AILineChart extends React.Component {
   init = () => {
     const data = this.props.data;
 
-    console.log("DATAAAAA", data);
-
     if (data) {
       const year = this.props.year;
       const weeks =
@@ -101,24 +99,21 @@ class AILineChart extends React.Component {
           : val.total
       );
 
-      this.setState(
-        {
-          dataBar: {
-            ...this.state.dataBar,
-            labels: dates,
-            datasets: [
-              {
-                data: contribs,
-                borderColor: "#77bd43",
-                fill: false,
-                borderWidth: 1,
-                lineTension: 0.4,
-              },
-            ],
-          },
+      this.setState({
+        dataBar: {
+          ...this.state.dataBar,
+          labels: dates,
+          datasets: [
+            {
+              data: contribs,
+              borderColor: "#77bd43",
+              fill: false,
+              borderWidth: 1,
+              lineTension: 0.4,
+            },
+          ],
         },
-        () => console.log(this.state)
-      );
+      });
     }
   };
 
diff --git a/src/components/atoms/charts/ContribRadar/index.jsx b/src/components/atoms/charts/ContribRadar/index.jsx
index 30e025a..f8e19df 100644
--- a/src/components/atoms/charts/ContribRadar/index.jsx
+++ b/src/components/atoms/charts/ContribRadar/index.jsx
@@ -131,11 +131,8 @@ class ContribRadar extends React.Component {
 
     // Check if the values are valid
     if (values.includes(undefined)) {
-      console.log("UNDEFINED");
       this.fillChart(null);
     } else {
-      console.log("NOT UNDEFINED");
-
       results.push({
         label: "GitHub",
         backgroundColor: "rgba(123, 201, 111,.4)",
diff --git a/src/components/molecules/modals/ConnectModal/index.jsx b/src/components/molecules/modals/ConnectModal/index.jsx
index a46a472..43c8ea2 100644
--- a/src/components/molecules/modals/ConnectModal/index.jsx
+++ b/src/components/molecules/modals/ConnectModal/index.jsx
@@ -45,7 +45,6 @@ class ConnectModal extends React.Component {
   };
 
   componentDidUpdate = () => {
-    console.log("SERVER", this.props.gitlabServer);
     if (!this.state.gitlab_servers && this.props.gitlabServer) {
       this.setState({
         gitlab_servers: this.props.gitlabServer,
@@ -88,7 +87,6 @@ class ConnectModal extends React.Component {
         loadingGitHub: true,
       },
       async () => {
-        console.log(response);
         this.props
           .addProfile({
             URL: "https://api.github.com/graphql",
@@ -112,7 +110,6 @@ class ConnectModal extends React.Component {
         loadingInstagram: true,
       },
       async () => {
-        console.log(response);
         this.props
           .addProfile({
             URL: "https://graph.instagram.com",
@@ -139,8 +136,6 @@ class ConnectModal extends React.Component {
   render() {
     const { selectedVideoId } = this.props;
 
-    console.log("RAAAAAAAAAAAAAAAAAAAAAAAAA");
-
     return (
       <>
         {this.props.isModal ? (
diff --git a/src/components/molecules/modals/FollowModal/index.jsx b/src/components/molecules/modals/FollowModal/index.jsx
index d87e704..bfd3a27 100644
--- a/src/components/molecules/modals/FollowModal/index.jsx
+++ b/src/components/molecules/modals/FollowModal/index.jsx
@@ -97,7 +97,7 @@ class FollowModal extends React.Component {
 
   render() {
     const { followType, fetchedPerson } = this.props;
-    console.log("XD");
+
     return (
       <MDBModal
         modalStyle="white"
diff --git a/src/components/molecules/modals/InstagramSelectorModal/index.jsx b/src/components/molecules/modals/InstagramSelectorModal/index.jsx
index e21bc04..d89b3e5 100644
--- a/src/components/molecules/modals/InstagramSelectorModal/index.jsx
+++ b/src/components/molecules/modals/InstagramSelectorModal/index.jsx
@@ -53,7 +53,11 @@ class InstagramSelectorModal extends React.Component {
     let next;
     let posts;
 
-    if (localStorage.getItem("instagram_posts") && !refetch) {
+    if (
+      localStorage.getItem("instagram_posts") &&
+      localStorage.getItem("instagram_posts") !== "undefined" &&
+      !refetch
+    ) {
       posts = JSON.parse(localStorage.getItem("instagram_posts"));
       next = undefined;
     } else {
@@ -78,12 +82,6 @@ class InstagramSelectorModal extends React.Component {
   };
 
   updateList = (picture) => {
-    console.log("ALTER PIC");
-    console.log(
-      this.state.selection.filter(
-        (item) => item.mediaLink === picture.mediaLink
-      ).length > 0
-    );
     if (
       this.state.selection.filter(
         (item) => item.mediaLink === picture.mediaLink
@@ -139,7 +137,6 @@ class InstagramSelectorModal extends React.Component {
   };
 
   render() {
-    console.log("REEEEEE", this.state);
     return (
       <>
         <MDBModal
diff --git a/src/components/molecules/modals/LikesModal/index.jsx b/src/components/molecules/modals/LikesModal/index.jsx
index bde7517..8c958ad 100644
--- a/src/components/molecules/modals/LikesModal/index.jsx
+++ b/src/components/molecules/modals/LikesModal/index.jsx
@@ -85,7 +85,7 @@ class LikesModal extends React.Component {
 
   isFollowing = (liker) => {
     const { loggedUser } = this.state;
-    console.log("1");
+
     for (let count in loggedUser?.person?.follows) {
       if (loggedUser.person.follows[count].slug === liker.slug) {
         return true;
diff --git a/src/components/molecules/modals/enterprise/UserModal/index.jsx b/src/components/molecules/modals/enterprise/UserModal/index.jsx
index bc14b89..dc52c5a 100644
--- a/src/components/molecules/modals/enterprise/UserModal/index.jsx
+++ b/src/components/molecules/modals/enterprise/UserModal/index.jsx
@@ -48,8 +48,6 @@ class UserModal extends React.Component {
   render() {
     const { user } = this.state;
 
-    console.log("USER", user);
-
     return (
       <MDBModal isOpen={true} toggle={this.props.toggle} size="lg">
         <MDBModalBody>
diff --git a/src/components/organisms/sections/media/AISongGallery/index.jsx b/src/components/organisms/sections/media/AISongGallery/index.jsx
index aefdc69..184430a 100644
--- a/src/components/organisms/sections/media/AISongGallery/index.jsx
+++ b/src/components/organisms/sections/media/AISongGallery/index.jsx
@@ -81,8 +81,6 @@ class AISongGallery extends React.Component {
   render() {
     const { sameOrigin } = this.props;
 
-    console.log(this.state);
-
     return (
       <div className="py-5">
         {sameOrigin && (
diff --git a/src/components/organisms/sections/person/InfoCard/index.jsx b/src/components/organisms/sections/person/InfoCard/index.jsx
index a6e771e..99ce642 100644
--- a/src/components/organisms/sections/person/InfoCard/index.jsx
+++ b/src/components/organisms/sections/person/InfoCard/index.jsx
@@ -185,7 +185,6 @@ class InfoCard extends React.Component {
         let liker = likerList[count];
 
         if (liker.slug.substring(2) === loggedUser) {
-          console.log("1");
           return true;
         }
       }
diff --git a/src/components/organisms/tabs/OverviewTab/index.jsx b/src/components/organisms/tabs/OverviewTab/index.jsx
index 10fa58f..257d440 100644
--- a/src/components/organisms/tabs/OverviewTab/index.jsx
+++ b/src/components/organisms/tabs/OverviewTab/index.jsx
@@ -115,8 +115,6 @@ class OverviewTab extends React.Component {
       displayMusicGallery,
     } = fetchedPerson;
 
-    console.log(display2dCalendar, display3dCalendar);
-
     let platformData = "";
 
     return (
diff --git a/src/components/organisms/tabs/enterprise/PageImprint/index.jsx b/src/components/organisms/tabs/enterprise/PageImprint/index.jsx
index 1a8fe1d..5962a39 100644
--- a/src/components/organisms/tabs/enterprise/PageImprint/index.jsx
+++ b/src/components/organisms/tabs/enterprise/PageImprint/index.jsx
@@ -34,8 +34,6 @@ class PageImprint extends React.Component {
   render() {
     const { page } = this.props;
 
-    console.log(page);
-
     return (
       <div id="pageimprint">
         <div className="mt-3">
diff --git a/src/components/pages/CompanyPage/index.jsx b/src/components/pages/CompanyPage/index.jsx
index 5df8059..0e83832 100644
--- a/src/components/pages/CompanyPage/index.jsx
+++ b/src/components/pages/CompanyPage/index.jsx
@@ -154,14 +154,6 @@ class Page extends React.Component {
   render() {
     const { error, general, users, projects } = this.props;
 
-    console.error(error);
-    console.log("GENERAL");
-    console.log(general);
-    console.log("USERS");
-    console.log(users);
-    console.log("PROJECTS");
-    console.log(projects);
-
     // console.log("PAGE", page);
 
     // Enterprise data
diff --git a/src/components/pages/PersonPage/index.jsx b/src/components/pages/PersonPage/index.jsx
index 4e46f94..b56d0f4 100644
--- a/src/components/pages/PersonPage/index.jsx
+++ b/src/components/pages/PersonPage/index.jsx
@@ -100,12 +100,26 @@ class PersonPage extends React.Component {
           {fetchedPerson &&
             fetchedPerson.profiles.length === 0 &&
             this.state.showConnectModal &&
-            !localStorage.getItem("connect_modal") && (
+            (!localStorage.getItem("connect_modal") ||
+              (localStorage.getItem("connect_modal") &&
+                JSON.parse(localStorage.getItem("connect_modal")).includes(
+                  username
+                ))) && (
               <ConnectModal
                 isModal
+                refetch={this.props.toggle}
                 toggle={() =>
                   this.setState({ showConnectModal: false }, () =>
-                    localStorage.setItem("connect_modal", true)
+                    localStorage.setItem(
+                      "connect_modal",
+                      JSON.stringify(
+                        localStorage.setItem("connect_modal")
+                          ? JSON.parse(
+                              localStorage.setItem("connect_modal")
+                            ).push(username)
+                          : [username]
+                      )
+                    )
                   )
                 }
               />
diff --git a/src/components/pages/SettingsPage/index.jsx b/src/components/pages/SettingsPage/index.jsx
index 8d2a0c3..121840b 100644
--- a/src/components/pages/SettingsPage/index.jsx
+++ b/src/components/pages/SettingsPage/index.jsx
@@ -87,8 +87,6 @@ class SettingsPage extends React.Component {
   handleLoading = () => {
     const { loggedUser } = this.props;
 
-    console.log("HANDLE LOADING");
-
     if (loggedUser.anonymous) {
       this.props.history.push({
         pathname: "/",
@@ -220,6 +218,8 @@ class SettingsPage extends React.Component {
   };
 
   handleChange = (name, value) => {
+    console.log(name, value);
+
     if (name.target) {
       value =
         name?.target?.type === "checkbox"
@@ -228,16 +228,21 @@ class SettingsPage extends React.Component {
       name = name?.target?.name ? name?.target?.name : name;
     }
 
-    this.setState({
-      showSaveButton: true,
-      person: {
-        ...this.state.person,
-        [name]:
-          typeof this.state.person[name] === "object"
-            ? { ...this.state.person[name], ...value }
-            : value,
+    console.log(name, value);
+
+    this.setState(
+      {
+        showSaveButton: true,
+        person: {
+          ...this.state.person,
+          [name]:
+            typeof this.state.person[name] === "object"
+              ? { ...this.state.person[name], ...value }
+              : value,
+        },
       },
-    });
+      () => console.log(this.state)
+    );
   };
 
   setAvatarUrl = (imageSrc) => {
@@ -283,7 +288,7 @@ class SettingsPage extends React.Component {
     const { loggedUser } = this.props;
     const { person, activeItem } = this.state;
 
-    console.log("STATE", this.state);
+    console.log(person);
 
     if (person) {
       return (
@@ -515,7 +520,6 @@ class SettingsPage extends React.Component {
                     {this.state.loading && <MDBProgress material preloader />}
                     <MDBListGroup>
                       {person.profiles?.map((profile, p) => {
-                        console.log("PROFILE", profile);
                         return (
                           <MDBListGroupItem
                             className="d-flex justify-content-between align-items-center clickable py-0 pr-0 pl-2"

From 467e6643f3408f458fd949aece4ca2f8549397ba Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Mon, 14 Sep 2020 01:32:51 +0200
Subject: [PATCH 141/175] Improve remove custom image function

Now when a image is deleted, it will also be deleted from imgur.
---
 .../sections/media/AIGallery/index.jsx         | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/organisms/sections/media/AIGallery/index.jsx b/src/components/organisms/sections/media/AIGallery/index.jsx
index 3de7c30..9599458 100644
--- a/src/components/organisms/sections/media/AIGallery/index.jsx
+++ b/src/components/organisms/sections/media/AIGallery/index.jsx
@@ -42,6 +42,8 @@ import {
 } from "../../../../../store/actions/personActions";
 //> Style
 import "./aigallery.scss";
+//> Intel
+import INTEL_IMGUR from "snek-intel/lib/utils/imgur";
 //#endregion
 
 //#region > Components
@@ -70,16 +72,19 @@ class AIGallery extends React.Component {
     let photo = {
       url: event.link,
       linkType: "PHOTO",
+      deleteHash: event.deletehash,
     };
 
     const res = await this.props.addMetaLink({
       url: photo.url,
       linkType: photo.linkType,
+      imgurDeleteHash: photo.deleteHash,
     });
 
     photo = {
       ...photo,
       id: res.id,
+      imgurDeleteHash: res.imgurDeleteHash,
     };
 
     this.setState({
@@ -111,8 +116,11 @@ class AIGallery extends React.Component {
     );
   };
 
-  removeImage = (url) => {
-    // TODO
+  removeImage = async (id, deleteHash) => {
+    if (deleteHash !== undefined) {
+      await INTEL_IMGUR.delete(deleteHash);
+    }
+    this.props.deleteMetaLink(id);
   };
 
   render() {
@@ -157,7 +165,11 @@ class AIGallery extends React.Component {
                                     (p) => p.id !== picture.id
                                   ),
                                 },
-                                () => this.props.deleteMetaLink(picture.id)
+                                () =>
+                                  this.removeImage(
+                                    picture.id,
+                                    picture.imgurDeleteHash
+                                  )
                               );
                             }}
                           >

From a5dc88928ace6d3ebd7ec3c0d281d47bf6e2c5fa Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Mon, 14 Sep 2020 06:58:01 +0200
Subject: [PATCH 142/175] Add achievement component

The achievement component was added.
---
 src/components/atoms/Achievement/index.jsx | 83 ++++++++++++++++++++++
 1 file changed, 83 insertions(+)
 create mode 100644 src/components/atoms/Achievement/index.jsx

diff --git a/src/components/atoms/Achievement/index.jsx b/src/components/atoms/Achievement/index.jsx
new file mode 100644
index 0000000..e8b0254
--- /dev/null
+++ b/src/components/atoms/Achievement/index.jsx
@@ -0,0 +1,83 @@
+//#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";
+//> MDB
+// "Material Design for Bootstrap" is a great UI design framework
+import {
+  MDBCol,
+  MDBIcon,
+  MDBRow,
+  MDBPopover,
+  MDBPopoverHeader,
+  MDBPopoverBody,
+} from "mdbreact";
+//#endregion
+
+//#region > Components
+/** @class A component to display an achievement */
+class Achievement extends React.Component {
+  state = {
+    isVisible: false,
+  };
+
+  togglePopover = () => {
+    this.setState({
+      isVisible: !this.state.isVisible,
+    });
+  };
+
+  render() {
+    const { achievement } = this.props;
+
+    return (
+      <MDBCol
+        md="6"
+        onMouseEnter={() => {
+          this.togglePopover();
+        }}
+        onMouseLeave={() => {
+          this.togglePopover();
+        }}
+      >
+        <MDBPopover
+          popover
+          placement="top"
+          domElement
+          isVisible={this.state.isVisible}
+        >
+          <li>
+            <MDBRow>
+              <MDBCol md="6">
+                <img src={achievement?.image?.src} />
+              </MDBCol>
+              <MDBCol md="4">
+                <MDBRow>
+                  <strong>{achievement.title}</strong>
+                </MDBRow>
+                <MDBRow>X days ago </MDBRow>
+              </MDBCol>
+            </MDBRow>
+          </li>
+          <div>
+            <MDBPopoverHeader>{achievement.title}</MDBPopoverHeader>
+            <MDBPopoverBody>{achievement.description}</MDBPopoverBody>
+          </div>
+        </MDBPopover>
+      </MDBCol>
+    );
+  }
+}
+//#endregion
+
+//#region > Exports
+//> Default Component
+export default Achievement;
+//#endregion
+
+/**
+ * SPDX-License-Identifier: (EUPL-1.2)
+ * Copyright © 2019-2020 Simon Prast
+ */

From e77de5ad943833dfca0dd7f5fd3b48b823cb2f58 Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Mon, 14 Sep 2020 06:58:44 +0200
Subject: [PATCH 143/175] Update exports

The achievement component is now being exported.
---
 src/components/atoms/index.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/atoms/index.js b/src/components/atoms/index.js
index 9107f6c..e821ccb 100644
--- a/src/components/atoms/index.js
+++ b/src/components/atoms/index.js
@@ -11,6 +11,7 @@ import Calendar3D from "./charts/Calendar3D";
 import ContribRadar from "./charts/ContribRadar";
 import LatestActivity from "./charts/LatestActivity";
 import LanguageChart from "./charts/LanguageBar";
+import Achievement from "./Achievement";
 //> Enterprise page
 import AIBarChart from "./charts/AIBarChart";
 import AILineChart from "./charts/AILineChart";
@@ -34,6 +35,7 @@ export {
   ContribRadar,
   LatestActivity,
   LanguageChart,
+  Achievement,
   /* Enterprise page */
   AIBarChart,
   AILineChart,

From 2963242893c8c08c8ea51edc6ca70dce090de75a Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Mon, 14 Sep 2020 06:59:30 +0200
Subject: [PATCH 144/175] Improve code quality

An unnecessary console.log was removed.
---
 src/components/molecules/modals/LikesModal/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/molecules/modals/LikesModal/index.jsx b/src/components/molecules/modals/LikesModal/index.jsx
index bde7517..8c958ad 100644
--- a/src/components/molecules/modals/LikesModal/index.jsx
+++ b/src/components/molecules/modals/LikesModal/index.jsx
@@ -85,7 +85,7 @@ class LikesModal extends React.Component {
 
   isFollowing = (liker) => {
     const { loggedUser } = this.state;
-    console.log("1");
+
     for (let count in loggedUser?.person?.follows) {
       if (loggedUser.person.follows[count].slug === liker.slug) {
         return true;

From a46b1d281e767d89366721c28ec1eab18ff418c0 Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Mon, 14 Sep 2020 07:00:13 +0200
Subject: [PATCH 145/175] Add achievement tabs styles

The stylesheet for the achievement tab was added.
---
 .../tabs/AchievementsTab/achievementstab.scss | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 src/components/organisms/tabs/AchievementsTab/achievementstab.scss

diff --git a/src/components/organisms/tabs/AchievementsTab/achievementstab.scss b/src/components/organisms/tabs/AchievementsTab/achievementstab.scss
new file mode 100644
index 0000000..903acc0
--- /dev/null
+++ b/src/components/organisms/tabs/AchievementsTab/achievementstab.scss
@@ -0,0 +1,26 @@
+.achievement-list {
+  margin-top: 2rem;
+
+  img {
+    height: 10rem;
+  }
+
+  li {
+    cursor: pointer;
+    list-style: none;
+  }
+
+  .col-md-4 {
+    margin-top: 3.5rem;
+  }
+}
+
+.submit-sequence {
+  padding: 0.5rem 2rem !important;
+  margin-top: -0rem !important;
+}
+
+/**
+ * SPDX-License-Identifier: (EUPL-1.2)
+ * Copyright © 2019-2020 Simon Prast
+ */

From 408f781ecbbf38cc5ebff8800373353d388d511a Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Mon, 14 Sep 2020 07:00:33 +0200
Subject: [PATCH 146/175] Add achievement tab

The achievement tab was added.
---
 .../organisms/tabs/AchievementsTab/index.jsx  | 113 ++++++++++++++++++
 1 file changed, 113 insertions(+)
 create mode 100644 src/components/organisms/tabs/AchievementsTab/index.jsx

diff --git a/src/components/organisms/tabs/AchievementsTab/index.jsx b/src/components/organisms/tabs/AchievementsTab/index.jsx
new file mode 100644
index 0000000..aecd7af
--- /dev/null
+++ b/src/components/organisms/tabs/AchievementsTab/index.jsx
@@ -0,0 +1,113 @@
+//#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";
+//> 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";
+//> MDB
+// "Material Design for Bootstrap" is a great UI design framework
+import { MDBRow, MDBBtn, MDBCol } from "mdbreact";
+
+//> Actions
+// Functions to send data from the application to the store
+import { redeemAchievement } from "../../../../store/actions/personActions";
+//> Components
+import { Achievement } from "../../../atoms";
+//> Style sheet
+import "./achievementstab.scss";
+//#endregion
+
+//#region > Components
+/** @class A component which lists all achievements of a user */
+class AchievementsTab extends React.Component {
+  state = {
+    sequence: "",
+    loading: false,
+  };
+
+  handleChange = (e) => {
+    this.setState({
+      [e.target.name]: e.target.value,
+    });
+  };
+
+  handleSubmit = () => {
+    this.setState(
+      {
+        loading: true,
+      },
+      async () => {
+        this.props
+          .redeemAchievement(this.state.sequence)
+          .then((res) => console.log(res));
+      }
+    );
+  };
+
+  render() {
+    const { achievements } = this.props;
+
+    return (
+      <>
+        <h3 className="font-weight-bold">Achievements</h3>
+        <form className="text-left">
+          <span className="text-muted small">Flag</span>
+          <MDBRow>
+            <MDBCol size="9">
+              <input
+                type="text"
+                className="form-control"
+                name="sequence"
+                onChange={(e) => this.handleChange(e)}
+                value={this.state.sequence}
+              />
+            </MDBCol>
+            <MDBCol size="3">
+              <MDBBtn
+                color="green"
+                onClick={this.handleSubmit}
+                size="lg"
+                className="submit-sequence"
+              >
+                Redeem flag
+              </MDBBtn>
+            </MDBCol>
+          </MDBRow>
+        </form>
+        <MDBRow className="achievement-list">
+          {achievements &&
+            achievements.map((achievement, i) => {
+              return <Achievement achievement={achievement} key={i} />;
+            })}
+        </MDBRow>
+      </>
+    );
+  }
+}
+//#endregion
+
+//#region > Redux Mapping
+const mapStateToProps = (state) => ({
+  fetchedPerson: state.person.fetchedPerson,
+});
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    redeemAchievement: (sequence) => dispatch(redeemAchievement(sequence)),
+  };
+};
+//#endregion
+
+//#region > Exports
+//> Default Component
+export default connect(mapStateToProps, mapDispatchToProps)(AchievementsTab);
+//#endregion
+
+/**
+ * SPDX-License-Identifier: (EUPL-1.2)
+ * Copyright © 2019-2020 Simon Prast
+ */

From c2095a5e2aa9b6f12a111d87679d560cecf2f8d7 Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Mon, 14 Sep 2020 07:00:55 +0200
Subject: [PATCH 147/175] Update exports

The achievement tab is now being exported.
---
 src/components/organisms/tabs/index.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/organisms/tabs/index.js b/src/components/organisms/tabs/index.js
index 3ce6b88..c239118 100644
--- a/src/components/organisms/tabs/index.js
+++ b/src/components/organisms/tabs/index.js
@@ -4,12 +4,13 @@
 import ProjectTab from "./ProjectTab";
 import OverviewTab from "./OverviewTab";
 import TalksTab from "./TalksTab";
+import AchievementsTab from "./AchievementsTab";
 //#endregion
 
 //#region > Exports
 //> Components
 // Export the components for easy access from parent components
-export { ProjectTab, OverviewTab, TalksTab };
+export { ProjectTab, OverviewTab, TalksTab, AchievementsTab };
 //#endregion
 
 /**

From 163e53732b32f7c235bfe30a57c43a8de653f6ff Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Mon, 14 Sep 2020 07:01:28 +0200
Subject: [PATCH 148/175] Implement achievements tab

The achievements tab is now being implemented.
---
 .../organisms/sections/person/Tabs/index.jsx  | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/components/organisms/sections/person/Tabs/index.jsx b/src/components/organisms/sections/person/Tabs/index.jsx
index 5950df6..7612219 100644
--- a/src/components/organisms/sections/person/Tabs/index.jsx
+++ b/src/components/organisms/sections/person/Tabs/index.jsx
@@ -11,7 +11,12 @@ import { MDBBadge } from "mdbreact";
 import { connect } from "react-redux";
 
 //> Components
-import { ProjectTab, OverviewTab, TalksTab } from "../../../tabs";
+import {
+  ProjectTab,
+  OverviewTab,
+  TalksTab,
+  AchievementsTab,
+} from "../../../tabs";
 //> Style sheet
 import "./tabs.scss";
 //#endregion
@@ -65,9 +70,11 @@ class SoftwareTabs extends React.Component {
         notification: false,
       },
       {
-        title: "Papers",
+        title: "Achievements",
         visible: true,
-        pill: "0",
+        pill: fetchedPerson?.achievements
+          ? fetchedPerson?.achievements.length
+          : "0",
         notification: false,
       },
       {
@@ -107,11 +114,18 @@ class SoftwareTabs extends React.Component {
               }
             />
           )}
-          {activeTab > 1 && activeTab < 5 && (
+          {activeTab > 1 && activeTab < 4 && (
             <p className="text-muted">
               This feature is not available just yet.
             </p>
           )}
+          {activeTab === 4 && (
+            <AchievementsTab
+              achievements={
+                fetchedPerson?.achievements ? fetchedPerson.achievements : []
+              }
+            />
+          )}
           {activeTab === 5 && (
             <TalksTab
               talkList={fetchedPerson?.talks ? fetchedPerson.talks : []}

From 9754c74f7c241c9559838b0220f6ecd539319115 Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Mon, 14 Sep 2020 07:02:41 +0200
Subject: [PATCH 149/175] Update .env.template

Flags were added to the template.
---
 .env.template | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/.env.template b/.env.template
index c2e4ef7..7299a46 100644
--- a/.env.template
+++ b/.env.template
@@ -1,2 +1,8 @@
 REACT_APP_ANONYMOUS_USER=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
-REACT_APP_VERSION=$npm_package_version
\ No newline at end of file
+REACT_APP_VERSION=$npm_package_version
+FLAG_CONSOLE_USER=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+FLAG_BOOKWORM=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+FLAG_FAKER=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+FLAG_PATH_EXPLORER=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+FLAG_REAL_GAMER=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+FLAG_INSPECTOR=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
\ No newline at end of file

From edb2782ac30bcb9d78abf9d603b5dd569312d232 Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Mon, 14 Sep 2020 07:03:08 +0200
Subject: [PATCH 150/175] Add path explorer

The path explorer flag was added.
---
 src/Routes.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/Routes.js b/src/Routes.js
index dd5d90d..a4716a7 100644
--- a/src/Routes.js
+++ b/src/Routes.js
@@ -59,6 +59,18 @@ class Routes extends React.Component {
           path="/settings"
           component={(props) => <SettingsPage {...props} />}
         />
+        <Route
+          exact
+          path="/path/explorer"
+          render={function () {
+            return (
+              <div>
+                Here is a flag for you {process.env.FLAG_PATH_EXPLORER}. Keep on
+                searching and find them all.
+              </div>
+            );
+          }}
+        />
         <Route
           render={function () {
             return <h1>Not Found</h1>;

From 47b60df34697c17bd70f28386f6ff2180e5e5a36 Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Mon, 14 Sep 2020 07:03:27 +0200
Subject: [PATCH 151/175] Add inspector

The inspector flag was added.
---
 public/index.html | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/public/index.html b/public/index.html
index 96946a0..6019f57 100644
--- a/public/index.html
+++ b/public/index.html
@@ -10,6 +10,9 @@
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
+    <!--
+      Here is a flag for you, ENV.FLAG_INSPECTOR. Keep on searching and find them all.
+    -->
     <link rel="apple-touch-icon" sizes="57x57" href="%PUBLIC_URL%/fav/apple-icon-57x57.png">
     <link rel="apple-touch-icon" sizes="60x60" href="%PUBLIC_URL%/fav/apple-icon-60x60.png">
     <link rel="apple-touch-icon" sizes="72x72" href="%PUBLIC_URL%/fav/apple-icon-72x72.png">

From 805db14cbb4e4e588f01868a57a5517779bbc261 Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Mon, 14 Sep 2020 07:03:47 +0200
Subject: [PATCH 152/175] Add console user

The console user flag was added.
---
 public/index.html | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/public/index.html b/public/index.html
index 6019f57..22bd469 100644
--- a/public/index.html
+++ b/public/index.html
@@ -79,4 +79,9 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
   </body>
+  <script>
+    function getFlag() {
+      console.log('%FLAG_CONSOLE_USER%')
+    }
+  </script>
 </html>

From 21b291dd6711c22f36cb133fc7fb8e585b78c298 Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Mon, 14 Sep 2020 09:02:09 +0200
Subject: [PATCH 153/175] Fix image modal

The image size has been adjusted to stop distortions.
---
 src/components/molecules/modals/ImageModal/imagemodal.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/molecules/modals/ImageModal/imagemodal.scss b/src/components/molecules/modals/ImageModal/imagemodal.scss
index 36f99dc..57626fb 100644
--- a/src/components/molecules/modals/ImageModal/imagemodal.scss
+++ b/src/components/molecules/modals/ImageModal/imagemodal.scss
@@ -1,7 +1,6 @@
 #imagemodal {
   img {
-    min-height: 300px;
-    width: auto;
+    width: 100%;
   }
 }
 

From 5f2075a7eac360819909a4bc6315bf3c2cde28f4 Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Mon, 14 Sep 2020 09:02:34 +0200
Subject: [PATCH 154/175] Fix settings

Nico can thank me.
---
 src/components/pages/SettingsPage/index.jsx | 37 ++++++++-------------
 1 file changed, 13 insertions(+), 24 deletions(-)

diff --git a/src/components/pages/SettingsPage/index.jsx b/src/components/pages/SettingsPage/index.jsx
index 121840b..02daf2c 100644
--- a/src/components/pages/SettingsPage/index.jsx
+++ b/src/components/pages/SettingsPage/index.jsx
@@ -84,6 +84,14 @@ class SettingsPage extends React.Component {
     ],
   };
 
+  checkTypes = (item, value) => {
+    return this.state.person
+      ? this.state.person[item] !== value
+        ? this.state.person[item]
+        : value
+      : value;
+  };
+
   handleLoading = () => {
     const { loggedUser } = this.props;
 
@@ -124,7 +132,10 @@ class SettingsPage extends React.Component {
       const person = {
         avatarImage,
         bio,
-        display2dCalendar,
+        display2dCalendar: this.checkTypes(
+          "display2dCalendar",
+          display2dCalendar
+        ),
         display3dCalendar,
         displayContributionTypes,
         displayWeekActivity,
@@ -148,29 +159,7 @@ class SettingsPage extends React.Component {
       if (JSON.stringify(this.state.person) !== JSON.stringify(person)) {
         this.setState({
           loading: false,
-          person: {
-            avatarImage,
-            bio,
-            display2dCalendar,
-            display3dCalendar,
-            displayContributionTypes,
-            displayWeekActivity,
-            displayImageGallery,
-            displayVideoGallery,
-            displayMusicGallery,
-            displayEmail,
-            displayProgrammingLanguages,
-            displayRanking,
-            displayWorkplace,
-            email,
-            firstName,
-            lastName,
-            location,
-            status,
-            websiteUrl,
-            workplace,
-            profiles,
-          },
+          person,
         });
       }
     }

From aa11b5361df3e0f594d069b8742ed09abf238fd2 Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Mon, 14 Sep 2020 09:14:51 +0200
Subject: [PATCH 155/175] Add photo map

The photo map component was added.
---
 .../sections/media/PhotoMap/index.jsx         | 130 ++++++++++++++++++
 1 file changed, 130 insertions(+)
 create mode 100644 src/components/organisms/sections/media/PhotoMap/index.jsx

diff --git a/src/components/organisms/sections/media/PhotoMap/index.jsx b/src/components/organisms/sections/media/PhotoMap/index.jsx
new file mode 100644
index 0000000..7bfe8d7
--- /dev/null
+++ b/src/components/organisms/sections/media/PhotoMap/index.jsx
@@ -0,0 +1,130 @@
+//#region > Imports
+//> React
+// Contains all the functionality necessary to define React components
+import React from "react";
+
+import {
+  ComposableMap,
+  Geographies,
+  Geography,
+  ZoomableGroup,
+  Marker,
+} from "react-simple-maps";
+
+//import "./photomap.scss";
+//#endregion
+
+//#region > Components
+/** @class This component displays the landing page including login and register */
+class PhotoMap extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      geoUrl:
+        "https://raw.githubusercontent.com/zcreativelabs/react-simple-maps/master/topojson-maps/world-110m.json",
+      markers: [
+        { cords: [-74.006, 40.7128], hover: false, click: false },
+        { cords: [74.006, -40.7128], hover: false, click: false },
+        { cords: [74.006, -38.7128], hover: false, click: false },
+      ],
+      position: {
+        zoom: 1,
+        cords: [0, 0],
+      },
+    };
+  }
+
+  hoverMarker = (marker) => {
+    let markers = this.state.markers;
+
+    for (let count = 0; count < markers.length; count++) {
+      if (marker !== undefined) {
+        if (markers[count].cords === marker.cords) {
+          markers[count].hover = !markers[count].hover;
+        }
+      } else {
+        markers[count].hover = !markers[count].hover;
+      }
+    }
+
+    this.setState({ markers });
+  };
+
+  clickMarker = (marker) => {
+    let markers = this.state.markers;
+
+    for (let count = 0; count < markers.length; count++) {
+      if (markers[count].cords === marker.cords) {
+        markers[count].click = !markers[count].click;
+      }
+    }
+
+    this.setState({ markers });
+  };
+
+  render() {
+    return (
+      <div id="photo-map">
+        <ComposableMap>
+          <ZoomableGroup
+            zoom={this.state.position.zoom}
+            center={this.state.position.coordinates}
+          >
+            <Geographies geography={this.state.geoUrl}>
+              {({ geographies }) =>
+                geographies.map((geo) => (
+                  <Geography
+                    key={geo.rsmKey}
+                    geography={geo}
+                    fill="#DDD"
+                    stroke="#FFF"
+                  />
+                ))
+              }
+            </Geographies>
+            {this.state.markers.map((marker) => (
+              <Marker
+                coordinates={marker.cords}
+                onMouseEnter={() => this.hoverMarker(marker)}
+                onMouseLeave={() => this.hoverMarker(marker)}
+                onClick={() => this.clickMarker(marker)}
+              >
+                <circle r={2} fill="#F53" />
+                {(marker.hover || marker.click) && (
+                  <image
+                    href="https://instagram.fvie1-1.fna.fbcdn.net/v/t51.2885-15/sh0.08/e35/s750x750/118165085_114965910172930_2351104314231093064_n.jpg?_nc_ht=instagram.fvie1-1.fna.fbcdn.net&_nc_cat=110&_nc_ohc=3qTKCH0tXbEAX8JfXqn&oh=2ac53942deeac9c60263df9a01b66b27&oe=5F766056"
+                    height="100"
+                    width="100"
+                    x="-50"
+                    y="-105"
+                    onClick={() =>
+                      window.open(
+                        "https://instagram.fvie1-1.fna.fbcdn.net/v/t51.2885-15/sh0.08/e35/s750x750/118165085_114965910172930_2351104314231093064_n.jpg?_nc_ht=instagram.fvie1-1.fna.fbcdn.net&_nc_cat=110&_nc_ohc=3qTKCH0tXbEAX8JfXqn&oh=2ac53942deeac9c60263df9a01b66b27&oe=5F766056"
+                      )
+                    }
+                  />
+                )}
+              </Marker>
+            ))}
+          </ZoomableGroup>
+        </ComposableMap>
+      </div>
+    );
+  }
+}
+//#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 PhotoMap;
+//#endregion
+
+/**
+ * SPDX-License-Identifier: (EUPL-1.2)
+ * Copyright © 2019-2020 Simon Prast
+ */

From 6fd5bd2208c638685dbcaf29b147e12fd3471e70 Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Mon, 14 Sep 2020 09:15:25 +0200
Subject: [PATCH 156/175] Implement photo maps

Photo maps is now implemented.
---
 package.json                                        | 1 +
 src/components/organisms/sections/media/index.js    | 3 ++-
 src/components/organisms/tabs/OverviewTab/index.jsx | 4 +++-
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 34d3f51..74b7665 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "react-redux": "^7.2.0",
     "react-redux-loading-bar": "^4.6.0",
     "react-router-dom": "^5.0.1",
+    "react-simple-maps": "^2.1.2",
     "react-text-loop": "^2.3.0",
     "react-typed": "^1.2.0",
     "reactjs-oauth": "0.1.0",
diff --git a/src/components/organisms/sections/media/index.js b/src/components/organisms/sections/media/index.js
index 591684d..d2bdaa7 100644
--- a/src/components/organisms/sections/media/index.js
+++ b/src/components/organisms/sections/media/index.js
@@ -4,11 +4,12 @@
 import AIGallery from "./AIGallery";
 import AIVideoGallery from "./AIVideoGallery";
 import AISongGallery from "./AISongGallery";
+import PhotoMap from "./PhotoMap";
 //#endregion
 
 //#region > Exports
 //> Organisms
-export { AIGallery, AIVideoGallery, AISongGallery };
+export { AIGallery, AIVideoGallery, AISongGallery, PhotoMap };
 //#endregion
 
 /**
diff --git a/src/components/organisms/tabs/OverviewTab/index.jsx b/src/components/organisms/tabs/OverviewTab/index.jsx
index 257d440..33f59ef 100644
--- a/src/components/organisms/tabs/OverviewTab/index.jsx
+++ b/src/components/organisms/tabs/OverviewTab/index.jsx
@@ -30,6 +30,7 @@ import {
   AIGallery,
   AISongGallery,
   AIVideoGallery,
+  PhotoMap,
 } from "../../../organisms/sections/media";
 import { MovableBoundary } from "../../../molecules";
 import { updateSettings } from "../../../../store/actions/personActions";
@@ -114,7 +115,7 @@ class OverviewTab extends React.Component {
       displayVideoGallery,
       displayMusicGallery,
     } = fetchedPerson;
-
+    const displayPhotoMap = true;
     let platformData = "";
 
     return (
@@ -282,6 +283,7 @@ class OverviewTab extends React.Component {
                   />
                 )}
               </>,
+              <>{displayPhotoMap && <PhotoMap />}</>,
               <>
                 {display2dCalendar && currentStatistic && yearsStatistic && (
                   <Calendar2D

From 9beaf202d1019d7a8778e98060f9f27ea6bdc900 Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Mon, 14 Sep 2020 09:17:05 +0200
Subject: [PATCH 157/175] Apply setting state error fix for all settings

Now the settings are adjustable again.
---
 src/components/pages/SettingsPage/index.jsx | 61 ++++++++++++++-------
 1 file changed, 40 insertions(+), 21 deletions(-)

diff --git a/src/components/pages/SettingsPage/index.jsx b/src/components/pages/SettingsPage/index.jsx
index 02daf2c..126a866 100644
--- a/src/components/pages/SettingsPage/index.jsx
+++ b/src/components/pages/SettingsPage/index.jsx
@@ -130,29 +130,50 @@ class SettingsPage extends React.Component {
       } = loggedUser?.person;
 
       const person = {
-        avatarImage,
-        bio,
+        avatarImage: this.checkTypes("avatarImage", avatarImage),
+        bio: this.checkTypes("bio", bio),
         display2dCalendar: this.checkTypes(
           "display2dCalendar",
           display2dCalendar
         ),
-        display3dCalendar,
-        displayContributionTypes,
-        displayWeekActivity,
-        displayImageGallery,
-        displayVideoGallery,
-        displayMusicGallery,
-        displayEmail,
-        displayProgrammingLanguages,
-        displayRanking,
-        displayWorkplace,
-        email,
-        firstName,
-        lastName,
-        location,
-        status,
-        websiteUrl,
-        workplace,
+        display3dCalendar: this.checkTypes(
+          "display3dCalendar",
+          display3dCalendar
+        ),
+        displayContributionTypes: this.checkTypes(
+          "displayContributionTypes",
+          displayContributionTypes
+        ),
+        displayWeekActivity: this.checkTypes(
+          "displayWeekActivity",
+          displayWeekActivity
+        ),
+        displayImageGallery: this.checkTypes(
+          "displayImageGallery",
+          displayImageGallery
+        ),
+        displayVideoGallery: this.checkTypes(
+          "displayVideoGallery",
+          displayVideoGallery
+        ),
+        displayMusicGallery: this.checkTypes(
+          "displayMusicGallery",
+          displayMusicGallery
+        ),
+        displayEmail: this.checkTypes("displayEmail", displayEmail),
+        displayProgrammingLanguages: this.checkTypes(
+          "displayProgrammingLanguages",
+          displayProgrammingLanguages
+        ),
+        displayRanking: this.checkTypes("displayRanking", displayRanking),
+        displayWorkplace: this.checkTypes("displayWorkplace", displayWorkplace),
+        email: this.checkTypes("email", email),
+        firstName: this.checkTypes("firstName", firstName),
+        lastName: this.checkTypes("lastName", lastName),
+        location: this.checkTypes("location", location),
+        status: this.checkTypes("status", status),
+        websiteUrl: this.checkTypes("websiteUrl", websiteUrl),
+        workplace: this.checkTypes("workplace", workplace),
         profiles,
       };
 
@@ -207,8 +228,6 @@ class SettingsPage extends React.Component {
   };
 
   handleChange = (name, value) => {
-    console.log(name, value);
-
     if (name.target) {
       value =
         name?.target?.type === "checkbox"

From 5bd27fa39ab5e9ea292e2ec5602cd2b69f1289f6 Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Mon, 14 Sep 2020 10:09:52 +0200
Subject: [PATCH 158/175] Implement instagram image selector

It is now possible to add and remove images with the instagram selector.
---
 .../modals/InstagramSelectorModal/index.jsx   | 23 ++++++----
 .../sections/media/AIGallery/index.jsx        | 46 +++++++++++++++----
 .../sections/media/AISongGallery/index.jsx    |  2 +-
 3 files changed, 53 insertions(+), 18 deletions(-)

diff --git a/src/components/molecules/modals/InstagramSelectorModal/index.jsx b/src/components/molecules/modals/InstagramSelectorModal/index.jsx
index d89b3e5..a505f7d 100644
--- a/src/components/molecules/modals/InstagramSelectorModal/index.jsx
+++ b/src/components/molecules/modals/InstagramSelectorModal/index.jsx
@@ -82,13 +82,11 @@ class InstagramSelectorModal extends React.Component {
   };
 
   updateList = (picture) => {
-    if (
-      this.state.selection.filter(
-        (item) => item.mediaLink === picture.mediaLink
-      ).length > 0
-    ) {
-      const current = this.state.selection;
-      const index = current.findIndex((x) => x.mediaLink === picture.mediaLink);
+    console.log("ohnonono", picture);
+    const current = this.state.selection;
+
+    if (current.filter((item) => item.url === picture.mediaLink).length > 0) {
+      const index = current.findIndex((x) => x.url === picture.mediaLink);
 
       if (index > -1) {
         current.splice(index, 1);
@@ -98,8 +96,13 @@ class InstagramSelectorModal extends React.Component {
         selection: current,
       });
     } else {
+      const pic = {
+        url: picture.mediaLink,
+        linkType: "INSTAGRAM",
+      };
+
       this.setState({
-        selection: [...this.state.selection, picture],
+        selection: [...current, pic],
       });
     }
   };
@@ -137,6 +140,8 @@ class InstagramSelectorModal extends React.Component {
   };
 
   render() {
+    console.log(this.state);
+
     return (
       <>
         <MDBModal
@@ -167,7 +172,7 @@ class InstagramSelectorModal extends React.Component {
                 this.state.posts.map((picture, i) => {
                   const selected =
                     this.state.selection.filter(
-                      (item) => item.mediaLink === picture.mediaLink
+                      (item) => item.url === picture.mediaLink
                     ).length > 0
                       ? true
                       : false;
diff --git a/src/components/organisms/sections/media/AIGallery/index.jsx b/src/components/organisms/sections/media/AIGallery/index.jsx
index 9599458..b7dd10e 100644
--- a/src/components/organisms/sections/media/AIGallery/index.jsx
+++ b/src/components/organisms/sections/media/AIGallery/index.jsx
@@ -99,25 +99,55 @@ class AIGallery extends React.Component {
     });
   };
 
-  save = (pictureList) => {
+  save = async (pictureList) => {
+    let pics = [];
+
+    for (const index in pictureList) {
+      const picture = pictureList[index];
+      const samePic = this.props.images.filter(
+        (pic) => pic.url === picture.url
+      );
+
+      if (samePic.length === 0) {
+        let pic = {
+          url: picture.url,
+          linkType: "INSTAGRAM",
+        };
+
+        const res = await this.props.addMetaLink({
+          url: pic.url,
+          linkType: pic.linkType,
+        });
+
+        pic = {
+          ...pic,
+          id: res.id,
+        };
+
+        pics = [...pics, pic];
+      }
+    }
+
     this.setState(
       {
-        images: [...this.state.images, ...pictureList],
+        images: [...this.state.images, ...pics],
         modalSelectPictures: false,
       },
       () => {
-        pictureList.forEach((picture) => {
-          this.props.addMetaLink({
-            url: picture.mediaLink,
-            linkType: "INSTAGRAM",
-          });
+        const currentPics = this.props.images;
+        const newPics = this.state.images;
+
+        const intersection = currentPics.filter((x) => !newPics.includes(x));
+
+        intersection.forEach((curItem) => {
+          this.props.deleteMetaLink(curItem.id);
         });
       }
     );
   };
 
   removeImage = async (id, deleteHash) => {
-    if (deleteHash !== undefined) {
+    if (deleteHash !== undefined && deleteHash !== null) {
       await INTEL_IMGUR.delete(deleteHash);
     }
     this.props.deleteMetaLink(id);
diff --git a/src/components/organisms/sections/media/AISongGallery/index.jsx b/src/components/organisms/sections/media/AISongGallery/index.jsx
index 184430a..06d2bbd 100644
--- a/src/components/organisms/sections/media/AISongGallery/index.jsx
+++ b/src/components/organisms/sections/media/AISongGallery/index.jsx
@@ -125,7 +125,7 @@ class AISongGallery extends React.Component {
                         width="100%"
                         height="166"
                         scrolling="no"
-                        frameborder="no"
+                        frameBorder="no"
                         allow="autoplay"
                         src={"https://w.soundcloud.com/player/?url=" + song.url}
                       ></iframe>

From c45af6337ad7141c15c4ddfcc9eb8e1d2b6d5424 Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Mon, 14 Sep 2020 10:25:59 +0200
Subject: [PATCH 159/175] Update photo map

The photo map data and display was updated.
---
 .../sections/media/PhotoMap/index.jsx         | 98 ++++++++++---------
 1 file changed, 54 insertions(+), 44 deletions(-)

diff --git a/src/components/organisms/sections/media/PhotoMap/index.jsx b/src/components/organisms/sections/media/PhotoMap/index.jsx
index 7bfe8d7..535d4f9 100644
--- a/src/components/organisms/sections/media/PhotoMap/index.jsx
+++ b/src/components/organisms/sections/media/PhotoMap/index.jsx
@@ -24,9 +24,27 @@ class PhotoMap extends React.Component {
       geoUrl:
         "https://raw.githubusercontent.com/zcreativelabs/react-simple-maps/master/topojson-maps/world-110m.json",
       markers: [
-        { cords: [-74.006, 40.7128], hover: false, click: false },
-        { cords: [74.006, -40.7128], hover: false, click: false },
-        { cords: [74.006, -38.7128], hover: false, click: false },
+        {
+          cords: [14.180588, 46.722203],
+          hover: false,
+          click: false,
+          img:
+            "https://scontent-frx5-1.cdninstagram.com/v/t51.2885-15/100073723_290663115667352_2200766204448190569_n.jpg?_nc_cat=110&_nc_sid=8ae9d6&_nc_ohc=lElXlAfEmOYAX96tO71&_nc_ht=scontent-frx5-1.cdninstagram.com&oh=8fa19466614fa0c8ed50703c5445081c&oe=5F8317DB",
+        },
+        {
+          cords: [18, 46.722203],
+          hover: false,
+          click: false,
+          img:
+            "https://scontent-frt3-1.cdninstagram.com/v/t51.2885-15/100811582_247790446433980_4259144092930484238_n.jpg?_nc_cat=108&_nc_sid=8ae9d6&_nc_ohc=owEiRBaPxJMAX-0OHyA&_nc_ht=scontent-frt3-1.cdninstagram.com&oh=ede6635099373fb510ff6f33c7854a01&oe=5F84435C",
+        },
+        {
+          cords: [14.180588, 50],
+          hover: false,
+          click: false,
+          img:
+            "https://scontent-frt3-1.cdninstagram.com/v/t51.2885-15/100089905_1550981121744980_7352234614965268133_n.jpg?_nc_cat=102&_nc_sid=8ae9d6&_nc_ohc=Oi7WmFJKmo4AX86q6iC&_nc_ht=scontent-frt3-1.cdninstagram.com&oh=bd2b3613661c89a70fb82f2c350d8b26&oe=5F854976",
+        },
       ],
       position: {
         zoom: 1,
@@ -67,47 +85,39 @@ class PhotoMap extends React.Component {
     return (
       <div id="photo-map">
         <ComposableMap>
-          <ZoomableGroup
-            zoom={this.state.position.zoom}
-            center={this.state.position.coordinates}
-          >
-            <Geographies geography={this.state.geoUrl}>
-              {({ geographies }) =>
-                geographies.map((geo) => (
-                  <Geography
-                    key={geo.rsmKey}
-                    geography={geo}
-                    fill="#DDD"
-                    stroke="#FFF"
-                  />
-                ))
-              }
-            </Geographies>
-            {this.state.markers.map((marker) => (
-              <Marker
-                coordinates={marker.cords}
-                onMouseEnter={() => this.hoverMarker(marker)}
-                onMouseLeave={() => this.hoverMarker(marker)}
-                onClick={() => this.clickMarker(marker)}
-              >
-                <circle r={2} fill="#F53" />
-                {(marker.hover || marker.click) && (
-                  <image
-                    href="https://instagram.fvie1-1.fna.fbcdn.net/v/t51.2885-15/sh0.08/e35/s750x750/118165085_114965910172930_2351104314231093064_n.jpg?_nc_ht=instagram.fvie1-1.fna.fbcdn.net&_nc_cat=110&_nc_ohc=3qTKCH0tXbEAX8JfXqn&oh=2ac53942deeac9c60263df9a01b66b27&oe=5F766056"
-                    height="100"
-                    width="100"
-                    x="-50"
-                    y="-105"
-                    onClick={() =>
-                      window.open(
-                        "https://instagram.fvie1-1.fna.fbcdn.net/v/t51.2885-15/sh0.08/e35/s750x750/118165085_114965910172930_2351104314231093064_n.jpg?_nc_ht=instagram.fvie1-1.fna.fbcdn.net&_nc_cat=110&_nc_ohc=3qTKCH0tXbEAX8JfXqn&oh=2ac53942deeac9c60263df9a01b66b27&oe=5F766056"
-                      )
-                    }
-                  />
-                )}
-              </Marker>
-            ))}
-          </ZoomableGroup>
+          <Geographies geography={this.state.geoUrl}>
+            {({ geographies }) =>
+              geographies.map((geo) => (
+                <Geography
+                  key={geo.rsmKey}
+                  geography={geo}
+                  fill="#48484a"
+                  stroke="#FFF"
+                />
+              ))
+            }
+          </Geographies>
+          {this.state.markers.map((marker, i) => (
+            <Marker
+              key={2}
+              coordinates={marker.cords}
+              onMouseEnter={() => this.hoverMarker(marker)}
+              onMouseLeave={() => this.hoverMarker(marker)}
+              onClick={() => this.clickMarker(marker)}
+            >
+              <circle r={4} fill="#F53" />
+              {(marker.hover || marker.click) && (
+                <image
+                  href={marker.img}
+                  height="100"
+                  width="100"
+                  x="-50"
+                  y="-105"
+                  onClick={() => window.open(marker.img)}
+                />
+              )}
+            </Marker>
+          ))}
         </ComposableMap>
       </div>
     );

From 2d5ffd7399f6f953b6da6de3addc6913498010eb Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Mon, 14 Sep 2020 10:33:12 +0200
Subject: [PATCH 160/175] Add display map setting

Now the map is only displayed if displayMap is enabled.
---
 .../organisms/tabs/OverviewTab/index.jsx           |  4 ++--
 src/components/pages/SettingsPage/index.jsx        | 14 ++++++++++++++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/organisms/tabs/OverviewTab/index.jsx b/src/components/organisms/tabs/OverviewTab/index.jsx
index 33f59ef..5c04fc5 100644
--- a/src/components/organisms/tabs/OverviewTab/index.jsx
+++ b/src/components/organisms/tabs/OverviewTab/index.jsx
@@ -114,8 +114,8 @@ class OverviewTab extends React.Component {
       displayImageGallery,
       displayVideoGallery,
       displayMusicGallery,
+      displayMap,
     } = fetchedPerson;
-    const displayPhotoMap = true;
     let platformData = "";
 
     return (
@@ -283,7 +283,7 @@ class OverviewTab extends React.Component {
                   />
                 )}
               </>,
-              <>{displayPhotoMap && <PhotoMap />}</>,
+              <>{displayMap && <PhotoMap />}</>,
               <>
                 {display2dCalendar && currentStatistic && yearsStatistic && (
                   <Calendar2D
diff --git a/src/components/pages/SettingsPage/index.jsx b/src/components/pages/SettingsPage/index.jsx
index 126a866..fa876bb 100644
--- a/src/components/pages/SettingsPage/index.jsx
+++ b/src/components/pages/SettingsPage/index.jsx
@@ -115,6 +115,7 @@ class SettingsPage extends React.Component {
         displayImageGallery,
         displayVideoGallery,
         displayMusicGallery,
+        displayMap,
         displayEmail,
         displayProgrammingLanguages,
         displayRanking,
@@ -160,6 +161,7 @@ class SettingsPage extends React.Component {
           "displayMusicGallery",
           displayMusicGallery
         ),
+        displayMap: this.checkTypes("displayMap", displayMap),
         displayEmail: this.checkTypes("displayEmail", displayEmail),
         displayProgrammingLanguages: this.checkTypes(
           "displayProgrammingLanguages",
@@ -866,6 +868,18 @@ class SettingsPage extends React.Component {
                             containerClass="mr-5"
                           />
                         </MDBCol>
+                        <MDBCol md="12">
+                          <MDBInput
+                            label={<p>Show image map</p>}
+                            filled
+                            type="checkbox"
+                            id="checkbox11"
+                            name="displayMap"
+                            onChange={this.handleChange}
+                            checked={person.displayMap}
+                            containerClass="mr-5"
+                          />
+                        </MDBCol>
                       </MDBRow>
                     </div>
                   </MDBTabPane>

From 192819185f7ae9b6556d32c4b4d08fb3a6623eed Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Mon, 14 Sep 2020 11:35:27 +0200
Subject: [PATCH 161/175] Add user check

it is no checked if the user is logged in and if its his profile.
---
 .../organisms/tabs/AchievementsTab/index.jsx  | 52 ++++++++++---------
 1 file changed, 28 insertions(+), 24 deletions(-)

diff --git a/src/components/organisms/tabs/AchievementsTab/index.jsx b/src/components/organisms/tabs/AchievementsTab/index.jsx
index aecd7af..c3a4bf3 100644
--- a/src/components/organisms/tabs/AchievementsTab/index.jsx
+++ b/src/components/organisms/tabs/AchievementsTab/index.jsx
@@ -54,30 +54,33 @@ class AchievementsTab extends React.Component {
     return (
       <>
         <h3 className="font-weight-bold">Achievements</h3>
-        <form className="text-left">
-          <span className="text-muted small">Flag</span>
-          <MDBRow>
-            <MDBCol size="9">
-              <input
-                type="text"
-                className="form-control"
-                name="sequence"
-                onChange={(e) => this.handleChange(e)}
-                value={this.state.sequence}
-              />
-            </MDBCol>
-            <MDBCol size="3">
-              <MDBBtn
-                color="green"
-                onClick={this.handleSubmit}
-                size="lg"
-                className="submit-sequence"
-              >
-                Redeem flag
-              </MDBBtn>
-            </MDBCol>
-          </MDBRow>
-        </form>
+        {this.props.loggedUser?.person?.slug ===
+          this.props.fetchedPerson?.slug && (
+          <form className="text-left">
+            <span className="text-muted small">Flag</span>
+            <MDBRow>
+              <MDBCol size="9">
+                <input
+                  type="text"
+                  className="form-control"
+                  name="sequence"
+                  onChange={(e) => this.handleChange(e)}
+                  value={this.state.sequence}
+                />
+              </MDBCol>
+              <MDBCol size="3">
+                <MDBBtn
+                  color="green"
+                  onClick={this.handleSubmit}
+                  size="lg"
+                  className="submit-sequence"
+                >
+                  Redeem flag
+                </MDBBtn>
+              </MDBCol>
+            </MDBRow>
+          </form>
+        )}
         <MDBRow className="achievement-list">
           {achievements &&
             achievements.map((achievement, i) => {
@@ -93,6 +96,7 @@ class AchievementsTab extends React.Component {
 //#region > Redux Mapping
 const mapStateToProps = (state) => ({
   fetchedPerson: state.person.fetchedPerson,
+  loggedUser: state.user.user,
 });
 
 const mapDispatchToProps = (dispatch) => {

From 18701378781f080ee0b2436d55a862e02f2f8387 Mon Sep 17 00:00:00 2001
From: Christian Aichner <contact@aichner-christian.com>
Date: Mon, 14 Sep 2020 11:59:33 +0200
Subject: [PATCH 162/175] Fix connect modal

The modal should now only show up at the own page and now close without errors.
---
 src/components/pages/PersonPage/index.jsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/PersonPage/index.jsx b/src/components/pages/PersonPage/index.jsx
index b56d0f4..b74a427 100644
--- a/src/components/pages/PersonPage/index.jsx
+++ b/src/components/pages/PersonPage/index.jsx
@@ -99,6 +99,7 @@ class PersonPage extends React.Component {
           </MDBContainer>
           {fetchedPerson &&
             fetchedPerson.profiles.length === 0 &&
+            fetchedPerson.slug === loggedUser?.person?.slug &&
             this.state.showConnectModal &&
             (!localStorage.getItem("connect_modal") ||
               (localStorage.getItem("connect_modal") &&
@@ -113,9 +114,9 @@ class PersonPage extends React.Component {
                     localStorage.setItem(
                       "connect_modal",
                       JSON.stringify(
-                        localStorage.setItem("connect_modal")
+                        localStorage.setItem("connect_modal", true)
                           ? JSON.parse(
-                              localStorage.setItem("connect_modal")
+                              localStorage.setItem("connect_modal", true)
                             ).push(username)
                           : [username]
                       )

From 84ee0cf993e18dfe68f874818115afbae9bd0c8e Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Mon, 14 Sep 2020 12:23:30 +0200
Subject: [PATCH 163/175] Fix talks page and add comment functionallity

Now the talks page works again.
It is also possible to leave a comment.
---
 src/Routes.js                                 |   8 +-
 .../organisms/tabs/TalksTab/index.jsx         |   4 +-
 src/components/pages/TalkPage/index.jsx       | 234 +++++++-----------
 src/store/actions/talkActions.js              |   4 +-
 4 files changed, 95 insertions(+), 155 deletions(-)

diff --git a/src/Routes.js b/src/Routes.js
index c4c1eea..f123632 100644
--- a/src/Routes.js
+++ b/src/Routes.js
@@ -10,7 +10,7 @@ import {
   HomePage,
   PersonPage,
   CompanyPage,
-  //   TalkPage,
+  TalkPage,
   SettingsPage,
   TempPage,
 } from "./components/pages";
@@ -38,11 +38,11 @@ class Routes extends React.Component {
           path="/temp"
           component={(props) => <TempPage {...props} />}
         />
-        {/* <Route
+        <Route
           exact
-          path="/t/:username/:uid"
+          path="/t/:uid"
           component={(props) => <TalkPage {...props} />}
-        />*/}
+        />
         <Route
           exact
           path="/redirect"
diff --git a/src/components/organisms/tabs/TalksTab/index.jsx b/src/components/organisms/tabs/TalksTab/index.jsx
index 5d02e04..8ca79c3 100644
--- a/src/components/organisms/tabs/TalksTab/index.jsx
+++ b/src/components/organisms/tabs/TalksTab/index.jsx
@@ -144,9 +144,7 @@ class TalkTab extends React.Component {
                       </MDBRow>
                     </MDBCardHeader>
                     <Link
-                      to={
-                        "/t/" + this.props.match.params.username + "/" + talk.id
-                      }
+                      to={`/t/${talk.id}`}
                       params={{}}
                       rel="noopener noreferrer"
                     >
diff --git a/src/components/pages/TalkPage/index.jsx b/src/components/pages/TalkPage/index.jsx
index c8c45bb..1ea51e3 100644
--- a/src/components/pages/TalkPage/index.jsx
+++ b/src/components/pages/TalkPage/index.jsx
@@ -19,6 +19,7 @@ import {
   MDBMedia,
   MDBPageNav,
   MDBPagination,
+  MDBNavLink,
 } from "mdbreact";
 //> Redux
 // Allows to React components read data from a Redux store, and dispatch actions
@@ -27,9 +28,10 @@ import { connect } from "react-redux";
 
 //> Actions
 // Functions to send data from the application to the store
-// import { getTalkAction } from "../../../store/actions/userActions";
+import { getTalk, addTalkComment } from "../../../store/actions/talkActions";
 //> Style sheet
 import "./talk.scss";
+import { TalksTab } from "../../organisms/tabs";
 //#endregion
 
 //#region > Components
@@ -38,31 +40,13 @@ class TalkPage extends React.Component {
   state = {
     loading: true,
     talk: undefined,
+    commentTextArea: "",
   };
 
   componentDidMount = () => {
-    const { uid, username } = this.props.match?.params;
+    const { uid } = this.props.match?.params;
 
-    this.props.getTalk(uid, username).then(() => {
-      const { selectedTalk } = this.props;
-
-      if (uid && username) {
-        selectedTalk.social = {
-          likes: 17,
-          date: new Date().toLocaleDateString("en-US", {
-            year: "numeric",
-            month: "numeric",
-            day: "numeric",
-          }),
-        };
-
-        selectedTalk.interval = {
-          timeoutID: setInterval(() => this.updateIframe(selectedTalk), 4000),
-          loaded: false,
-        };
-      }
-      this.setState({ talk: selectedTalk, loading: false });
-    });
+    this.props.getTalk(uid);
   };
 
   updateIframe = (talk) => {
@@ -71,17 +55,28 @@ class TalkPage extends React.Component {
     if (talk.interval.loaded === false) {
       if (document.getElementById(talk.uid)) {
         iframe = document.getElementById(talk.uid);
-        iframe.src = talk.html_url;
+        iframe.src = talk.displayUrl;
       }
     }
   };
 
   render() {
-    const talk = this.state.talk;
+    const { fetchedTalk, loggedUser } = this.props;
+
+    let talk;
+
+    if (fetchedTalk) {
+      talk = JSON.parse(JSON.stringify(fetchedTalk));
+
+      talk.interval = {
+        timeoutID: setInterval(() => this.updateIframe(talk), 4000),
+        loaded: false,
+      };
+    }
 
     return (
       <div id="talk">
-        {talk && (
+        {talk ? (
           <>
             <MDBContainer>
               <MDBRow>
@@ -104,13 +99,13 @@ class TalkPage extends React.Component {
                   <MDBCard>
                     <MDBCardBody>
                       <iframe
-                        src={talk.html_url}
+                        src={talk.displayUrl}
                         id={talk.uid}
                         width="100%"
                         height="620px"
                         onLoad={() => {
                           clearInterval(talk.interval.loaded);
-                          this.state.talk.interval.loaded = true;
+                          talk.interval.loaded = true;
                         }}
                         frameBorder="0"
                       />
@@ -123,7 +118,7 @@ class TalkPage extends React.Component {
                       <MDBRow className="d-flex align-items-center">
                         <MDBCol lg="2">
                           <img
-                            src={talk.repository?.avatarUrl}
+                            src={talk?.owner?.avatarImage?.src}
                             alt="logo"
                             className="img-fluid"
                           />
@@ -132,21 +127,13 @@ class TalkPage extends React.Component {
                           <div className="d-flex justify-content-space-between">
                             <div>
                               <p className="lead font-weight-bold mb-1">
-                                Owned by {talk.repository?.owner.username}
+                                Owned by {talk.owner.title}
                               </p>
-                              {talk.repository?.owner && (
-                                <div className="verified-badge mb-1">
-                                  <MDBBadge color="success">
-                                    <MDBIcon icon="check-circle" />
-                                    Verified
-                                  </MDBBadge>
-                                </div>
-                              )}
                               <p className="text-muted mb-1">
-                                {talk.repository?.description}
+                                {talk.description}
                               </p>
                             </div>
-                            <div className="d-flex">
+                            {/* <div className="d-flex">
                               <a>
                                 <MDBBtn color="indigo" size="md">
                                   <MDBIcon icon="thumbs-up"></MDBIcon>
@@ -159,9 +146,9 @@ class TalkPage extends React.Component {
                                   Follow
                                 </MDBBtn>
                               </a>
-                            </div>
+                            </div> */}
                           </div>
-                          <div>
+                          {/* <div>
                             {talk.location === "github" && (
                               <a
                                 href={talk.url}
@@ -186,7 +173,7 @@ class TalkPage extends React.Component {
                                 </MDBBadge>
                               </a>
                             )}
-                          </div>
+                          </div> */}
                         </MDBCol>
                       </MDBRow>
                     </MDBCardBody>
@@ -234,30 +221,14 @@ class TalkPage extends React.Component {
             </MDBContainer>
             <MDBContainer>
               <MDBCardHeader className="border-0 font-weight-bold">
-                <p className="mr-4 mb-0">4 comments</p>
+                <p className="mr-4 mb-0">{talk.talkComments.length} comments</p>
               </MDBCardHeader>
-              <MDBMedia className="d-block d-md-flex mt-4">
-                <img
-                  className="card-img-64 d-flex mx-auto mb-3"
-                  src="https://mdbootstrap.com/img/Photos/Avatars/img (20).jpg"
-                  alt=""
-                />
-                <MDBMedia
-                  body
-                  className="text-center text-md-left ml-md-3 ml-0"
-                >
-                  <h5 className="font-weight-bold mt-0">
-                    Miley Steward
-                    <MDBIcon icon="reply" className="pull-right ml-2" />
-                  </h5>
-                  Duis aute irure dolor in reprehenderit in voluptate velit esse
-                  cillum dolore eu fugiat nulla pariatur. Excepteur sint
-                  occaecat cupidatat non proident, sunt in culpa qui officia
-                  deserunt mollit anim id est laborum.
+              {talk.talkComments.map((comment) => {
+                return (
                   <MDBMedia className="d-block d-md-flex mt-4">
                     <img
                       className="card-img-64 d-flex mx-auto mb-3"
-                      src="https://mdbootstrap.com/img/Photos/Avatars/img (27).jpg"
+                      src={comment.author.avatarImage?.src}
                       alt=""
                     />
                     <MDBMedia
@@ -265,73 +236,51 @@ class TalkPage extends React.Component {
                       className="text-center text-md-left ml-md-3 ml-0"
                     >
                       <h5 className="font-weight-bold mt-0">
-                        Tommy Smith
-                        <MDBIcon icon="reply" className="pull-right ml-2" />
-                      </h5>
-                      Duis aute irure dolor in reprehenderit in voluptate velit
-                      esse cillum dolore eu fugiat nulla pariatur. Excepteur
-                      sint occaecat cupidatat non proident, sunt in culpa qui
-                      officia deserunt mollit anim id est laborum.
-                      <div className="form-group mt-4">
-                        <label htmlFor="quickReplyFormComment">
-                          Your comment
-                        </label>
-                        <textarea
-                          className="form-control"
-                          id="quickReplyFormComment"
-                          rows="5"
-                        ></textarea>
-                        <div className="text-center my-4">
-                          <MDBBtn size="sm" color="primary">
-                            Post
-                          </MDBBtn>
-                        </div>
-                      </div>
-                      <MDBMedia className="d-block d-md-flex mt-4">
-                        <img
-                          className="card-img-64 d-flex mx-auto mb-3"
-                          src="https://mdbootstrap.com/img/Photos/Avatars/img (21).jpg"
-                          alt=""
-                        />
-                        <MDBMedia
-                          body
-                          className="text-center text-md-left ml-md-3 ml-0"
+                        {/* <a href ></a> */}
+                        <MDBNavLink
+                          link
+                          to={`/u/${comment.author.slug.split("-")[1]}`}
                         >
-                          <h5 className="font-weight-bold mt-0">
-                            Sylvester the Cat
-                            <MDBIcon icon="reply" className="pull-right ml-2" />
-                          </h5>
-                          Duis aute irure dolor in reprehenderit in voluptate
-                          velit esse cillum dolore eu fugiat nulla pariatur.
-                          Excepteur sint occaecat cupidatat non proident, sunt
-                          in culpa qui officia deserunt mollit anim id est
-                          laborum.
-                        </MDBMedia>
-                      </MDBMedia>
+                          {comment.author.title}
+                          <MDBIcon icon="reply" className="pull-right ml-2" />
+                        </MDBNavLink>
+                      </h5>
+                      {comment.text}
                     </MDBMedia>
                   </MDBMedia>
-                </MDBMedia>
-              </MDBMedia>
-              <MDBMedia className="d-block d-md-flex mt-4">
-                <img
-                  className="card-img-64 d-flex mx-auto mb-3"
-                  src="https://mdbootstrap.com/img/Photos/Avatars/img (30).jpg"
-                  alt=""
-                />
-                <MDBMedia
-                  body
-                  className="text-center text-md-left ml-md-3 ml-0"
-                >
-                  <h5 className="font-weight-bold mt-0">
-                    Caroline Horwitz
-                    <MDBIcon icon="reply" className="pull-right ml-2" />
-                  </h5>
-                  Duis aute irure dolor in reprehenderit in voluptate velit esse
-                  cillum dolore eu fugiat nulla pariatur. Excepteur sint
-                  occaecat cupidatat non proident, sunt in culpa qui officia
-                  deserunt mollit anim id est laborum.
-                </MDBMedia>
-              </MDBMedia>
+                );
+              })}
+
+              {loggedUser.anonymous === false && (
+                <div className="form-group mt-4">
+                  <label htmlFor="quickReplyFormComment">Your comment</label>
+                  <textarea
+                    className="form-control"
+                    id="quickReplyFormComment"
+                    rows="5"
+                    value={this.state.commentTextArea}
+                    onChange={(e) =>
+                      this.setState({ commentTextArea: e.target.value })
+                    }
+                  ></textarea>
+                  <div className="text-center my-4">
+                    <MDBBtn
+                      size="sm"
+                      color="primary"
+                      onClick={() => {
+                        if (this.state.commentTextArea.length > 0) {
+                          this.props
+                            .addComment(talk.id, this.state.commentTextArea)
+                            .then(this.props.getTalk(talk.id));
+                        }
+                      }}
+                    >
+                      Post
+                    </MDBBtn>
+                  </div>
+                </div>
+              )}
+
               <MDBPagination className="d-flex justify-content-center mt-5">
                 <MDBPageItem disabled>
                   <MDBPageNav>
@@ -349,27 +298,15 @@ class TalkPage extends React.Component {
                     1 <span className="sr-only">(current)</span>
                   </MDBPageNav>
                 </MDBPageItem>
-                <MDBPageItem>
-                  <MDBPageNav>2</MDBPageNav>
-                </MDBPageItem>
-                <MDBPageItem>
-                  <MDBPageNav>3</MDBPageNav>
-                </MDBPageItem>
-                <MDBPageItem>
-                  <MDBPageNav>4</MDBPageNav>
-                </MDBPageItem>
-                <MDBPageItem>
-                  <MDBPageNav>5</MDBPageNav>
-                </MDBPageItem>
-                <MDBPageItem>
-                  <MDBPageNav>&raquo;</MDBPageNav>
-                </MDBPageItem>
-                <MDBPageItem>
-                  <MDBPageNav>Last</MDBPageNav>
-                </MDBPageItem>
               </MDBPagination>
             </MDBContainer>
           </>
+        ) : (
+          <div className="text-center my-5 py-5">
+            <div className="spinner-grow text-success" role="status">
+              <span className="sr-only">Loading...</span>
+            </div>
+          </div>
         )}
       </div>
     );
@@ -379,11 +316,16 @@ class TalkPage extends React.Component {
 
 //#region > Redux Mapping
 const mapStateToProps = (state) => ({
-  selectedTalk: state.user.selectedTalk,
+  loggedUser: state.user.user,
+  fetchedTalk: state.talk.fetchedTalk,
 });
 
 const mapDispatchToProps = (dispatch) => {
-  return { getTalk: (uid, username) => dispatch((uid, username)) };
+  return {
+    getTalk: (uid) => dispatch(getTalk(uid)),
+    addComment: (talkId, text, replyTo) =>
+      dispatch(addTalkComment({ talkId, text, replyTo })),
+  };
 };
 //#endregion
 
diff --git a/src/store/actions/talkActions.js b/src/store/actions/talkActions.js
index d9de9a5..eab4f8a 100644
--- a/src/store/actions/talkActions.js
+++ b/src/store/actions/talkActions.js
@@ -16,12 +16,12 @@ const extractNameFromPersonSlug = (personSlug) => personSlug.split("-")[1];
 const getTalk = (id) => {
   return async (dispatch, getState, {}) => {
     try {
-      dispatch({ type: Action.TALKS_FETCH_REQUEST });
+      dispatch({ type: Action.TALK_FETCH_REQUEST });
 
       const talk = await INTEL_SNEK.talk.getTalk({ id });
 
       dispatch({
-        type: Action.TALKS_FETCH_SUCCESS,
+        type: Action.TALK_FETCH_SUCCESS,
         payload: talk,
       });
     } catch (ex) {

From e578b48c14f70160f447a3d03932d2783965d016 Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Mon, 14 Sep 2020 12:45:10 +0200
Subject: [PATCH 164/175] Update action

The action now returns an achievement.
---
 src/store/actions/personActions.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/store/actions/personActions.js b/src/store/actions/personActions.js
index b6d4943..8508fca 100644
--- a/src/store/actions/personActions.js
+++ b/src/store/actions/personActions.js
@@ -501,6 +501,8 @@ const redeemAchievement = (sequence) => {
           },
         });
       }
+
+      return res;
     } catch (ex) {
       dispatch({
         type: Action.PERSON_ACHIEVEMENT_REDEEM_FAILURE,

From 59cfc98b5b610a7a03daac9eb09c212c49d4b455 Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Mon, 14 Sep 2020 12:46:02 +0200
Subject: [PATCH 165/175] Update achievement tab

The achievement tab was updated.
---
 .../organisms/tabs/AchievementsTab/index.jsx  | 37 +++++++++++++++++--
 1 file changed, 33 insertions(+), 4 deletions(-)

diff --git a/src/components/organisms/tabs/AchievementsTab/index.jsx b/src/components/organisms/tabs/AchievementsTab/index.jsx
index c3a4bf3..7e808f3 100644
--- a/src/components/organisms/tabs/AchievementsTab/index.jsx
+++ b/src/components/organisms/tabs/AchievementsTab/index.jsx
@@ -27,6 +27,25 @@ class AchievementsTab extends React.Component {
   state = {
     sequence: "",
     loading: false,
+    achievements: [],
+  };
+
+  componentDidMount = () => {
+    const { achievements } = this.props;
+
+    this.setState({
+      achievements: achievements,
+    });
+  };
+
+  componentDidUpdate = () => {
+    const { achievements } = this.props;
+
+    if (achievements !== this.state.achievements) {
+      this.setState({
+        achievements: achievements,
+      });
+    }
   };
 
   handleChange = (e) => {
@@ -41,15 +60,25 @@ class AchievementsTab extends React.Component {
         loading: true,
       },
       async () => {
-        this.props
-          .redeemAchievement(this.state.sequence)
-          .then((res) => console.log(res));
+        this.props.redeemAchievement(this.state.sequence).then((res) => {
+          if (res.achievement !== null) {
+            let achievements = [];
+
+            for (let count in this.state.achievements) {
+              achievements.push(this.state.achievements[count]);
+            }
+
+            achievements.push(res.achievement);
+
+            this.setState({ achievements });
+          }
+        });
       }
     );
   };
 
   render() {
-    const { achievements } = this.props;
+    const { achievements } = this.state;
 
     return (
       <>

From 3a2608801118edfc1e43b38fb2d1eca61c6f96fe Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Mon, 14 Sep 2020 12:48:32 +0200
Subject: [PATCH 166/175] Add select image conditional rendering

Now the select images button is only displayed if at least
one instagram profile is connected.
---
 .../sections/media/AIGallery/index.jsx        | 24 +++++++++++++------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/components/organisms/sections/media/AIGallery/index.jsx b/src/components/organisms/sections/media/AIGallery/index.jsx
index b7dd10e..edcac42 100644
--- a/src/components/organisms/sections/media/AIGallery/index.jsx
+++ b/src/components/organisms/sections/media/AIGallery/index.jsx
@@ -153,6 +153,14 @@ class AIGallery extends React.Component {
     this.props.deleteMetaLink(id);
   };
 
+  checkProfileTypeExists = (sourceType) => {
+    return this.props.loggedUser.person.profiles.some(
+      (e) => e.sourceType === sourceType && e.isActive
+    )
+      ? true
+      : false;
+  };
+
   render() {
     const { loggedUser, sameOrigin } = this.props;
 
@@ -167,13 +175,15 @@ class AIGallery extends React.Component {
               <MDBIcon icon="upload" />
               Upload image
             </MDBBtn>
-            <MDBBtn
-              social="ins"
-              onClick={() => this.setState({ modalSelectPictures: true })}
-            >
-              <MDBIcon fab icon="instagram" />
-              Select images
-            </MDBBtn>
+            {this.checkProfileTypeExists("INSTAGRAM") && (
+              <MDBBtn
+                social="ins"
+                onClick={() => this.setState({ modalSelectPictures: true })}
+              >
+                <MDBIcon fab icon="instagram" />
+                Select images
+              </MDBBtn>
+            )}
           </div>
         )}
         <div className="card-columns">

From d07ba0fe729e619e056ae7f84d764cc4544e2cdd Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Wed, 28 Oct 2020 15:49:27 +0100
Subject: [PATCH 167/175] Switch to production engine

Now intel and client no longer uses a local version of the snek
engine but the production one on engine.snek.at.
---
 src/index.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/index.js b/src/index.js
index 68d9f24..7d5f809 100644
--- a/src/index.js
+++ b/src/index.js
@@ -45,7 +45,10 @@ import registerServiceWorker from "./registerServiceWorker";
 //#endregion
 
 //#region > Redux Store Initialization
-const CLIENT_SNEK = new SnekClient("http://localhost:8000/graphql");
+const CLIENT_SNEK = new SnekClient("https://engine.snek.at/graphql");
+
+// Pass over an individual client to intel
+INTEL_SNEK.client = CLIENT_SNEK;
 
 const composeEnhancers =
   typeof window === "object" &&

From ab79e43ba5ae7d43977ad1a2a7f0a113d00d81f5 Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Wed, 28 Oct 2020 16:45:21 +0100
Subject: [PATCH 168/175] Update dependencies

Some dependencies have been updated due to security
vulnerabilities and intel and client releases.
---
 package.json | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 74b7665..35e9444 100644
--- a/package.json
+++ b/package.json
@@ -22,12 +22,12 @@
     "react-simple-maps": "^2.1.2",
     "react-text-loop": "^2.3.0",
     "react-typed": "^1.2.0",
-    "reactjs-oauth": "0.1.0",
+    "reactjs-oauth": "^0.2.0",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
     "serialize-error": "^7.0.1",
-    "snek-client": "file:snek-client-0.2.0-beta.tgz",
-    "snek-intel": "^0.1.1",
+    "snek-client": "file:snek-client-0.2.0-rc.7.tgz",
+    "snek-intel": "file:snek-intel-0.2.0-rc.6.tgz",
     "tippy.js": "^6.2.3"
   },
   "repository": {
@@ -42,11 +42,11 @@
     "eject": "react-scripts eject"
   },
   "devDependencies": {
-    "renamer": "^1.0.0",
-    "rimraf": "^2.6.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "react-scripts": "^3.4.1"
+    "react-scripts": "^4.0.0",
+    "renamer": "^1.0.0",
+    "rimraf": "^2.6.2"
   },
   "browserslist": [
     ">0.2%",

From 36338acdc8aa62ebd81dcb1de56f46f69a8f5bd4 Mon Sep 17 00:00:00 2001
From: Pinterid <david.pinterics@gmail.com>
Date: Tue, 10 Nov 2020 10:58:27 +0100
Subject: [PATCH 169/175] Improve code quality

The code quality was improved due to a request by Codacy.
---
 .../organisms/tabs/AchievementsTab/achievementstab.scss         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/organisms/tabs/AchievementsTab/achievementstab.scss b/src/components/organisms/tabs/AchievementsTab/achievementstab.scss
index 903acc0..483dfa8 100644
--- a/src/components/organisms/tabs/AchievementsTab/achievementstab.scss
+++ b/src/components/organisms/tabs/AchievementsTab/achievementstab.scss
@@ -17,7 +17,7 @@
 
 .submit-sequence {
   padding: 0.5rem 2rem !important;
-  margin-top: -0rem !important;
+  margin-top: 0 !important;
 }
 
 /**

From c6948805616c2cfbb9462e0c3159645e1ee1194d Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Tue, 10 Nov 2020 22:04:46 +0100
Subject: [PATCH 170/175] Remove temp page

The temp page which implemented all newer
components is removed now because it is no longer
required.
---
 src/Routes.js                           |  6 ---
 src/components/pages/TempPage/index.jsx | 64 -------------------------
 src/components/pages/index.js           |  4 +-
 3 files changed, 1 insertion(+), 73 deletions(-)
 delete mode 100644 src/components/pages/TempPage/index.jsx

diff --git a/src/Routes.js b/src/Routes.js
index fc1b889..2fb7ab9 100644
--- a/src/Routes.js
+++ b/src/Routes.js
@@ -12,7 +12,6 @@ import {
   CompanyPage,
   TalkPage,
   SettingsPage,
-  TempPage,
 } from "./components/pages";
 //#endregion
 
@@ -33,11 +32,6 @@ class Routes extends React.Component {
           path="/c/:name"
           component={(props) => <CompanyPage {...props} />}
         />
-        <Route
-          exact
-          path="/temp"
-          component={(props) => <TempPage {...props} />}
-        />
         <Route
           exact
           path="/t/:uid"
diff --git a/src/components/pages/TempPage/index.jsx b/src/components/pages/TempPage/index.jsx
deleted file mode 100644
index 052e28d..0000000
--- a/src/components/pages/TempPage/index.jsx
+++ /dev/null
@@ -1,64 +0,0 @@
-//#region > Imports
-//> React
-// Contains all the functionality necessary to define React components
-import React from "react";
-// DOM bindings for React Router
-import { withRouter } from "react-router-dom";
-//> 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";
-//> MDB
-// "Material Design for Bootstrap" is a great UI design framework
-import { MDBContainer, MDBBtn } from "mdbreact";
-
-//> Components
-import {
-  AIGallery,
-  AIVideoGallery,
-  AISongGallery,
-} from "../../organisms/sections/media";
-import { ConnectModal } from "../../molecules/modals";
-//#endregion
-
-//#region > Components
-class TempPage extends React.Component {
-  state = { connect: true };
-
-  componentDidMount = () => {};
-
-  toggleConnect = () => {
-    this.setState({
-      connect: !this.state.connect,
-    });
-  };
-
-  render() {
-    return (
-      <MDBContainer id="media">
-        {this.state.connect && <ConnectModal toggle={this.toggleConnect} />}
-
-        <AIGallery />
-        <AIVideoGallery />
-        <AISongGallery />
-      </MDBContainer>
-    );
-  }
-}
-//#endregion
-
-//#region > Exports
-/**
- * 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.
- *
- * Got access to the history object’s properties and the closest
- * <Route>'s match.
- */
-export default TempPage;
-//#endregion
-
-/**
- * SPDX-License-Identifier: (EUPL-1.2)
- * Copyright © 2019-2020 Simon Prast
- */
diff --git a/src/components/pages/index.js b/src/components/pages/index.js
index c876b6c..709768c 100644
--- a/src/components/pages/index.js
+++ b/src/components/pages/index.js
@@ -6,13 +6,11 @@ import HomePage from "./HomePage";
 import PersonPage from "./PersonPage";
 import TalkPage from "./TalkPage";
 import SettingsPage from "./SettingsPage";
-// The temp page displays sections that can not be displayed in profile
-import TempPage from "./TempPage";
 //#endregion
 
 //#region > Exports
 //> Pages
-export { CompanyPage, HomePage, PersonPage, TalkPage, SettingsPage, TempPage };
+export { CompanyPage, HomePage, PersonPage, TalkPage, SettingsPage };
 //#endregion
 
 /**

From acb52243cfb96340e829a21ea6b2955eae694a58 Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Tue, 10 Nov 2020 22:05:46 +0100
Subject: [PATCH 171/175] Remove unused code in ContribRadar

This code was never used therefore I removed it.
---
 src/components/atoms/charts/ContribRadar/index.jsx | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/components/atoms/charts/ContribRadar/index.jsx b/src/components/atoms/charts/ContribRadar/index.jsx
index f8e19df..f27a2bf 100644
--- a/src/components/atoms/charts/ContribRadar/index.jsx
+++ b/src/components/atoms/charts/ContribRadar/index.jsx
@@ -110,7 +110,6 @@ class ContribRadar extends React.Component {
     let totalIssues = 0;
     let totalRequests = 0;
     let totalCommits = 0;
-    let totalSources = 1;
     let contribData;
     let results = [];
 
@@ -140,14 +139,6 @@ class ContribRadar extends React.Component {
         data: values,
       });
 
-      // Calculate averages
-      let avgReviews, avgIssues, avgRequests, avgCommits;
-
-      avgReviews = parseInt(totalReviews) / parseInt(totalSources);
-      avgIssues = parseInt(totalIssues) / parseInt(totalSources);
-      avgRequests = parseInt(totalRequests) / parseInt(totalSources);
-      avgCommits = parseInt(totalCommits) / parseInt(totalSources);
-
       this.fillChart(results);
     }
   };

From 57d4538fbc4bf034b06642a9da4f94e1df7492cb Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Tue, 10 Nov 2020 22:06:33 +0100
Subject: [PATCH 172/175] Enhance FollowModal performence

The new implementation is more suitable for larger ones
records but does not fully work yet
---
 .../molecules/modals/FollowModal/index.jsx    | 85 ++++++++++---------
 1 file changed, 44 insertions(+), 41 deletions(-)

diff --git a/src/components/molecules/modals/FollowModal/index.jsx b/src/components/molecules/modals/FollowModal/index.jsx
index bfd3a27..81266d9 100644
--- a/src/components/molecules/modals/FollowModal/index.jsx
+++ b/src/components/molecules/modals/FollowModal/index.jsx
@@ -25,74 +25,77 @@ import "./follow.scss";
 class FollowModal extends React.Component {
   state = {
     loggedUser: null,
+    followers: [],
+    anonymous: undefined,
+    loading: false,
   };
 
   componentDidMount = () => {
     const { loggedUser } = this.props;
 
-    this.setState({
-      loggedUser: loggedUser,
-    });
+    this.setState({ loading: true });
+
+    // this.setState({
+    //   followers: loggedUser.person?.followers,
+    //   anonymous: loggedUser.anonymous,
+    // });
   };
 
-  componentDidUpdate = () => {
+  // shouldComponentUpdate(prevProps, prevState) {
+  //   console.log(
+  //     "SHOUDL UPDATE?",
+  //     this.props.loggedUser.person !== prevProps.loggedUser.person
+  //   );
+  //   return this.props.loggedUser.person !== prevProps.loggedUser.person;
+  // }
+
+  componentDidUpdate = (prevProps, prevState) => {
     const { loggedUser } = this.props;
 
-    if (loggedUser !== this.state.loggedUser) {
+    if (
+      this.state.loading ||
+      this.props.loggedUser.person !== prevProps.loggedUser.person
+    ) {
       this.setState({
-        loggedUser: loggedUser,
+        followers: loggedUser.person.follows,
+        anonymous: loggedUser.anonymous,
+        loading: false,
       });
     }
   };
 
-  follow = (personToFollow) => {
-    if (!this.props.loggedUser?.anonymous) {
-      this.props.follow(personToFollow).then(() => {
-        let loggedUser = this.props.loggedUser;
-        let follows = [];
-
-        for (let count in loggedUser.person.follows) {
-          follows.push(loggedUser.person.follows[count]);
-        }
+  follow = async (personToFollow) => {
+    if (this.state.anonymous == false) {
+      await this.props.follow(personToFollow);
 
-        follows.push({ slug: "p-" + personToFollow });
-
-        loggedUser.person.follows = follows;
-
-        this.setState({ loggedUser });
+      const followers = this.state.followers.concat({
+        slug: `p-${personToFollow}`,
       });
+
+      this.setState({ followers });
     } else {
       this.props.toContinue();
     }
   };
 
-  unfollow = (personToUnfollow) => {
-    this.props.unfollow(personToUnfollow).then(() => {
-      let loggedUser = this.state.loggedUser;
-      let follows = [];
+  unfollow = async (personToUnfollow) => {
+    if (!this.state.anonymous) {
+      await this.props.unfollow(personToUnfollow);
 
-      for (let count in loggedUser?.person?.follows) {
-        if (loggedUser.person.follows[count].slug !== "p-" + personToUnfollow) {
-          follows.push(loggedUser.person.follows[count]);
-        }
-      }
+      let followers = [...this.state.followers];
 
-      loggedUser.person.follows = follows;
+      const idx = followers.findIndex(
+        (o) => o.slug === `p-${personToUnfollow}`
+      );
 
-      this.setState({ loggedUser });
-    });
-  };
-
-  isFollowing = (follower) => {
-    const { loggedUser } = this.state;
+      followers.splice(idx, 1);
 
-    for (let count in loggedUser?.person?.follows) {
-      if (loggedUser.person.follows[count].slug === follower.slug) {
-        return true;
-      }
+      this.setState({ followers });
     }
+  };
 
-    return false;
+  isFollowing = (follower) => {
+    return this.state.followers.find((e) => e.slug === follower.slug);
   };
 
   render() {

From 2bdcab062ec883651b4ffd8baeee59d82deed6fe Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Wed, 11 Nov 2020 14:59:41 +0100
Subject: [PATCH 173/175] Improve person page refreshing

The page refreshing has been improved.
---
 src/components/pages/PersonPage/index.jsx | 33 +++++++++++++++--------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/components/pages/PersonPage/index.jsx b/src/components/pages/PersonPage/index.jsx
index b74a427..8771c29 100644
--- a/src/components/pages/PersonPage/index.jsx
+++ b/src/components/pages/PersonPage/index.jsx
@@ -51,22 +51,33 @@ class PersonPage extends React.Component {
     }
   };
 
-  componentDidUpdate = async () => {
+  componentDidUpdate = async (prevProps, prevState) => {
     const { fetchedPerson, loggedUser, profilesProcessed } = this.props;
 
     if (
-      !this.state.cachingDone &&
-      fetchedPerson &&
-      loggedUser?.person &&
-      fetchedPerson.slug === loggedUser.person.slug &&
-      !profilesProcessed
+      this.state.cachingDone &&
+      prevProps.loggedUser.username !== loggedUser.username
     ) {
-      await this.props.processProfiles();
-
+      this.setState({ cachingDone: false });
+    }
+    if (prevProps.fetchedPerson && fetchedPerson) {
       if (this._isMounted) {
-        this.setState({ cachingDone: true }, () =>
-          this.props.getPerson(loggedUser.person.slug.split("-")[1])
-        );
+        if (
+          JSON.stringify(fetchedPerson) === JSON.stringify(loggedUser.person)
+        ) {
+          if (!this.state.cachingDone && !profilesProcessed) {
+            await this.props.processProfiles();
+
+            this.setState({ cachingDone: true });
+          }
+        }
+
+        if (
+          JSON.stringify(prevProps.fetchedPerson) !==
+          JSON.stringify(fetchedPerson)
+        ) {
+          this.props.getPerson(fetchedPerson.slug.split("-")[1]);
+        }
       }
     }
   };

From be22850482d260ccf2ab3ecf94a07261ff6cd5c2 Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Wed, 11 Nov 2020 15:08:20 +0100
Subject: [PATCH 174/175] Refresh infocard when modal closes

Now every time handleModalClose is called,
the infocard gets new data.
---
 src/components/molecules/modals/FollowModal/index.jsx       | 4 ++--
 src/components/organisms/sections/person/InfoCard/index.jsx | 6 ++++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/molecules/modals/FollowModal/index.jsx b/src/components/molecules/modals/FollowModal/index.jsx
index 81266d9..64cfac3 100644
--- a/src/components/molecules/modals/FollowModal/index.jsx
+++ b/src/components/molecules/modals/FollowModal/index.jsx
@@ -50,14 +50,14 @@ class FollowModal extends React.Component {
   // }
 
   componentDidUpdate = (prevProps, prevState) => {
-    const { loggedUser } = this.props;
+    const { loggedUser, fetchedPerson } = this.props;
 
     if (
       this.state.loading ||
       this.props.loggedUser.person !== prevProps.loggedUser.person
     ) {
       this.setState({
-        followers: loggedUser.person.follows,
+        followers: fetchedPerson.follows,
         anonymous: loggedUser.anonymous,
         loading: false,
       });
diff --git a/src/components/organisms/sections/person/InfoCard/index.jsx b/src/components/organisms/sections/person/InfoCard/index.jsx
index 99ce642..9238edc 100644
--- a/src/components/organisms/sections/person/InfoCard/index.jsx
+++ b/src/components/organisms/sections/person/InfoCard/index.jsx
@@ -36,6 +36,7 @@ import {
   unfollow,
   like,
   unlike,
+  getPerson,
 } from "../../../../../store/actions/personActions";
 //> Style Sheet
 import "./infocard.scss";
@@ -194,6 +195,10 @@ class InfoCard extends React.Component {
   };
 
   handleModalClose = () => {
+    const username = this.props.loggedUser.username;
+
+    this.props.getPerson(username);
+
     if (this.state.showToContinue) {
       this.setState({
         showToContinue: false,
@@ -612,6 +617,7 @@ const mapDispatchToProps = (dispatch) => {
     unfollow: (personToUnfollow) => dispatch(unfollow(personToUnfollow)),
     like: (personToLike) => dispatch(like(personToLike)),
     unlike: (personToUnlike) => dispatch(unlike(personToUnlike)),
+    getPerson: (personName) => dispatch(getPerson(personName)),
   };
 };
 //#endregion

From b04804760537e8176d5557e9be25593b0e855376 Mon Sep 17 00:00:00 2001
From: schettn <nicoschett@icloud.com>
Date: Wed, 11 Nov 2020 15:09:15 +0100
Subject: [PATCH 175/175] Remove console logs

All uncommented console logs have been removed.
---
 src/components/atoms/charts/Calendar3D/index.jsx             | 1 -
 .../molecules/modals/InstagramSelectorModal/index.jsx        | 3 ---
 src/components/organisms/sections/media/AIGallery/index.jsx  | 4 +---
 src/store/actions/generalActions.js                          | 2 --
 src/store/actions/personActions.js                           | 5 -----
 src/store/actions/userActions.js                             | 1 -
 src/store/reducers/personReducers.js                         | 1 -
 7 files changed, 1 insertion(+), 16 deletions(-)

diff --git a/src/components/atoms/charts/Calendar3D/index.jsx b/src/components/atoms/charts/Calendar3D/index.jsx
index 9d18d8f..e070fa1 100644
--- a/src/components/atoms/charts/Calendar3D/index.jsx
+++ b/src/components/atoms/charts/Calendar3D/index.jsx
@@ -136,7 +136,6 @@ class Calendar3D extends React.Component {
       datesLongest = "-";
     }
 
-    console.log(contribData);
     if (
       contribData.currentStreak &&
       contribData.currentStreak.totalDays != null
diff --git a/src/components/molecules/modals/InstagramSelectorModal/index.jsx b/src/components/molecules/modals/InstagramSelectorModal/index.jsx
index a505f7d..824dcc0 100644
--- a/src/components/molecules/modals/InstagramSelectorModal/index.jsx
+++ b/src/components/molecules/modals/InstagramSelectorModal/index.jsx
@@ -82,7 +82,6 @@ class InstagramSelectorModal extends React.Component {
   };
 
   updateList = (picture) => {
-    console.log("ohnonono", picture);
     const current = this.state.selection;
 
     if (current.filter((item) => item.url === picture.mediaLink).length > 0) {
@@ -140,8 +139,6 @@ class InstagramSelectorModal extends React.Component {
   };
 
   render() {
-    console.log(this.state);
-
     return (
       <>
         <MDBModal
diff --git a/src/components/organisms/sections/media/AIGallery/index.jsx b/src/components/organisms/sections/media/AIGallery/index.jsx
index edcac42..82db3af 100644
--- a/src/components/organisms/sections/media/AIGallery/index.jsx
+++ b/src/components/organisms/sections/media/AIGallery/index.jsx
@@ -56,9 +56,7 @@ class AIGallery extends React.Component {
     });
   };
 
-  componentDidUpdate = () => {
-    console.log("AAAAAAAAAAAAAAA", this.props.loggedUser);
-  };
+  componentDidUpdate = () => {};
 
   handleUploadClose = () => {
     if (this.state.showUpload) {
diff --git a/src/store/actions/generalActions.js b/src/store/actions/generalActions.js
index 66b9005..af15683 100644
--- a/src/store/actions/generalActions.js
+++ b/src/store/actions/generalActions.js
@@ -43,8 +43,6 @@ const getPersonsBrief = () => {
 
       const persons = await INTEL_SNEK.person.allBrief();
 
-      console.log(persons);
-
       dispatch({
         type: Action.GENERAL_PERSONS_BRIEF_FETCH_SUCCESS,
         payload: persons,
diff --git a/src/store/actions/personActions.js b/src/store/actions/personActions.js
index 7503507..669d6ff 100644
--- a/src/store/actions/personActions.js
+++ b/src/store/actions/personActions.js
@@ -110,8 +110,6 @@ const addMetaLink = (
       const state = getState();
       const personName = extractNameFromPersonSlug(state.user.user.person.slug);
 
-      console.log("OPTIONS", linkOptions);
-
       const link = await INTEL_SNEK.person.addMetaLink({
         personName,
         linkOptions: {
@@ -236,7 +234,6 @@ const deleteProfile = (id) => {
         payload: profiles,
       });
     } catch (ex) {
-      console.log("FAIL", Action.PERSON_META_LINK_DELETE_FAILURE);
       dispatch({
         type: Action.PERSON_META_LINK_DELETE_FAILURE,
         payload: {
@@ -263,8 +260,6 @@ const updateProfile = (
     try {
       dispatch({ type: Action.PERSON_PROFILE_UPDATE_REQUEST });
 
-      console.log(nextProfile, id);
-
       const profile = await INTEL_SNEK.person.updateProfile({
         profileId: id,
         toUpdate: {
diff --git a/src/store/actions/userActions.js b/src/store/actions/userActions.js
index 14c1f64..881e0eb 100644
--- a/src/store/actions/userActions.js
+++ b/src/store/actions/userActions.js
@@ -140,7 +140,6 @@ const register = (
           redemption_code: redemptionCode,
         },
       });
-      console.log(registration);
 
       if (registration.result === "OK") {
         dispatch({ type: Action.USER_PERSON_SIGNUP_SUCCESS });
diff --git a/src/store/reducers/personReducers.js b/src/store/reducers/personReducers.js
index 3ee232f..ff42602 100644
--- a/src/store/reducers/personReducers.js
+++ b/src/store/reducers/personReducers.js
@@ -116,7 +116,6 @@ const personReducer = (state = INIT_STATE, action) => {
     case Action.PERSON_TALK_DELETE_REQUEST:
       return state;
     case Action.PERSON_TALK_DELETE_SUCCESS:
-      console.log(action.payload);
       return {
         ...state,
         fetchedPerson: {