Updated to use new createnewproject endpoint. Updated search card.

Author: mbaghel

config/dev.js

@@ -10,7 +10,7 @@ module.exports = {
   CONNECT_WEBSITE_URL: "https://connect.topcoder-dev.com",
 
   API: {
-    V5: "https://api.topcoder-dev.com/v5", //"http://localhost:3131/api/v5",
+    V5: "http://localhost:3131/api/v5", // "https://api.topcoder-dev.com/v5",
     V3: "https://api.topcoder-dev.com/v3",
   },
 };

src/assets/images/world-map-dotted.svg

@@ -1,17 +1,44 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import "./styles.module.scss";
 import IconEarthSearch from "../../../../assets/images/icon-earth-search.svg";
-import CenteredSpinner from "components/CenteredSpinner";
+import WorldMapDotted from "../../../../assets/images/world-map-dotted.svg";
+import WorldMapSearch1 from "../../../../assets/images/world-map-search1.svg";
+import WorldMapSearch2 from "../../../../assets/images/world-map-search2.svg";
 
 function SearchCard() {
+  const [searchState, setSearchState] = useState(null);
+
+  useEffect(() => {
+    let timer2;
+    const timer1 = setTimeout(() => {
+      setSearchState("state1");
+      timer2 = setTimeout(() => {
+        setSearchState("state2");
+      }, 500);
+    }, 500);
+
+    return () => {
+      clearTimeout(timer1);
+      clearTimeout(timer2);
+    };
+  }, []);
+
   return (
     <div styleName="search-card">
       <div styleName="heading">
         <IconEarthSearch />
         <h3>Search..</h3>
         <p>Matching the criteria with 1.5 million members around the world..</p>
       </div>
-      <CenteredSpinner />
+      <div styleName="map-container">
+        {!searchState ? (
+          <WorldMapDotted />
+        ) : searchState === "state1" ? (
+          <WorldMapSearch1 />
+        ) : (
+          <WorldMapSearch2 />
+        )}
+      </div>
     </div>
   );
 }

src/assets/images/world-map-search1.svg

@@ -31,3 +31,14 @@
     color: #555555;
   }
 }
+
+.map-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  width: 100%;
+
+  svg {
+    width: 90%;
+  }
+}

src/assets/images/world-map-search2.svg

@@ -177,7 +177,7 @@ export const postMembers = (teamId, handles, emails) => {
  * @returns {Promise<object>} project object
  */
 export const postProject = () => {
-  const url = `${config.API.V5}/projects/`;
+  const url = `${config.API.V5}/taas-teams/createTeamRequest`;
 
   const bodyObj = {
     name: `project-${Date()}`,
@@ -186,16 +186,3 @@ export const postProject = () => {
 
   return axios.post(url, bodyObj);
 };
-
-/**
- * Get skills
- *
- * @param {string|number} page page number
- *
- * @returns {Promise<object[]>} array of skill items
- */
-export const getSkills = (page) => {
-  const query = `page=${page}&perPage=100`;
-
-  return axios.get(`${config.API.V5}/taas-teams/skills?${query}`);
-};