Migrate intelv2 aa1 to implement 2

.env.template

@@ -1,2 +1,8 @@
 REACT_APP_ANONYMOUS_USER=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
-REACT_APP_VERSION=$npm_package_version
+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

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",
@@ -18,14 +19,15 @@
     "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",
+    "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": {
@@ -40,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%",

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">
@@ -76,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>

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

src/Routes.js

@@ -8,11 +8,10 @@ import { Route, Switch } from "react-router-dom";
 //> Components
 import {
   HomePage,
-  ProfilePage,
+  PersonPage,
   CompanyPage,
   TalkPage,
   SettingsPage,
-  TempPage,
 } from "./components/pages";
 //#endregion
 
@@ -26,7 +25,7 @@ class Routes extends React.Component {
         <Route
           exact
           path="/u/:username"
-          component={(props) => <ProfilePage {...props} />}
+          component={(props) => <PersonPage {...props} />}
         />
         <Route
           exact
@@ -35,14 +34,9 @@ class Routes extends React.Component {
         />
         <Route
           exact
-          path="/t/:username/:uid"
+          path="/t/:uid"
           component={(props) => <TalkPage {...props} />}
         />
-        <Route
-          exact
-          path="/temp"
-          component={(props) => <TempPage {...props} />}
-        />
         <Route
           exact
           path="/redirect"
@@ -58,6 +52,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>;

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
+ */

src/components/atoms/Project/index.jsx

@@ -35,27 +35,25 @@ class Project extends React.Component {
               />
               <small>
                 @
-                {repo.owner.username ? (
+                {repo.owner ? (
                   repo.owner.username
                 ) : (
                   <span className="text-muted">unknown</span>
                 )}
               </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>

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/generalActions";
 //> 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.general.allPersonBrief,
 });
 
 const mapDispatchToProps = (dispatch) => {
   return {
-    allsearchItems: () => dispatch(getUserSearchItems()),
+    allsearchItems: () => dispatch(getPersonsBrief()),
   };
 };
 //#endregion

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();