Merge pull request #827 from crane-cloud/ch/integrate-activity-api

chore: integrate activity feed endpoint in users dashboard

src/components/FeaturedProjectsSection/FeaturedProjectsSection.module.css

@@ -7,4 +7,13 @@
 
 .viewMoreButton {
     width: 100%;
+}
+
+.noActivity {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 40vh;
+    text-align: center;
 }

src/components/FeaturedProjectsSection/index.jsx

@@ -1,40 +1,88 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import styles from "./FeaturedProjectsSection.module.css";
 import NewProjectCard from "../NewProjectCard";
 import PrimaryButton from "../PrimaryButton";
+import Spinner from "../Spinner";
 
 const projects = [
   {
-    name: "My Project 1",
+    name: "NextJs Boilerplate",
     description:
-      "This is my description description description description description description description description",
+      "A robust and scalable boilerplate for building Next.js applications, featuring best practices and industry standards for modern web development.",
     number: 1,
+    organisation: "Company",
+    type: "Charity",
   },
   {
-    name: "My Project 2",
-    description: "This is my description",
+    name: "NodeJs Rate Limiting",
+    description:
+      "An implementation of rate limiting in a Node.js application to manage traffic and prevent abuse, ensuring smooth and secure performance.",
     number: 2,
+    organisation: "Startup",
+    type: "Personal",
+  },
+  {
+    name: "Go Playground",
+    description:
+      "An interactive Go programming environment for testing and experimenting with Go code snippets, designed for learning and quick prototyping.",
+    number: 3,
+    organisation: "Final Year Project",
+    type: "Student",
+  },
+  {
+    name: "Python Scripts",
+    description:
+      "A collection of Python scripts for automating various tasks and processes, enhancing productivity and efficiency in everyday operations.",
+    number: 4,
+    organisation: "Startup",
+    type: "Personal",
   },
-  { name: "My Project 3", description: "This is my description", number: 3 },
-  { name: "My Project 4", description: "This is my description", number: 3 },
 ];
 
 const FeaturedProjectsSection = () => {
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setLoading(false);
+    }, 3000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
   return (
     <div className={styles.featuredProjects}>
       <h2>Featured Projects</h2>
-      {projects.map((project, index) => (
-        <NewProjectCard
-          key={index}
-          name={project.name}
-          description={project.description}
-          number={project.number}
-          showFollowButton
-          showFollowers={true}
-        />
-      ))}
+      {loading ? (
+        <div className={styles.noActivity}>
+          <div className={styles.NoResourcesMessage}>
+            <div className={styles.SpinnerWrapper}>
+              <Spinner size="big" />
+            </div>
+          </div>
+        </div>
+      ) : (
+        <>
+          {projects?.map((project, index) => (
+            <NewProjectCard
+              key={index}
+              name={project.name}
+              description={project.description}
+              organization={project.organisation}
+              type={project.type}
+              number={project.number}
+              showFollowButton
+              showFollowers={true}
+            />
+          ))}
+        </>
+      )}
 
-      <PrimaryButton className={styles.viewMoreButton}>View More</PrimaryButton>
+      {!loading && (
+        <PrimaryButton className={styles.viewMoreButton}>
+          View More
+        </PrimaryButton>
+      )}
     </div>
   );
 };

src/components/FeaturedUsersSection/FeaturedUsersSection.module.css

@@ -7,4 +7,13 @@
 
 .viewMoreButton {
     width: 100%;
+}
+
+.noActivity {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 40vh;
+    text-align: center;
 }

src/components/FeaturedUsersSection/index.jsx

@@ -1,31 +1,53 @@
-import React from "react";
+import React, { useEffect } from "react";
 import styles from "./FeaturedUsersSection.module.css";
 import NewUserCard from "../NewUserCard";
 import PrimaryButton from "../PrimaryButton";
-
-const users = [
-  { name: "User 1", followers: 120, projects: 10, apps: 5 },
-  { name: "User 2", followers: 90, projects: 8, apps: 3 },
-  { name: "User 3", followers: 150, projects: 12, apps: 7 },
-  { name: "User 4", followers: 120, projects: 10, apps: 4 },
-  { name: "User 5", followers: 100, projects: 9, apps: 5 },
-];
+import { useDispatch, useSelector } from "react-redux";
+import getUsersList from "../../redux/actions/users";
+import Spinner from "../Spinner";
 
 const FeaturedUsersSection = () => {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch(getUsersList(null, null, 1, null));
+  }, [dispatch]);
+
+  const { isFetching, users, isFetched } = useSelector(
+    (state) => state.usersListReducer
+  );
+
   return (
     <div className={styles.featuredUsers}>
-      <h2>Featured Users</h2>
-      {users.map((user, index) => (
-        <NewUserCard
-          key={index}
-          name={user.name}
-          followers={user.followers}
-          projects={user.projects}
-          apps={user.apps}
-        />
-      ))}
+      <h2>Suggested Users</h2>
+
+      {isFetching && !isFetched ? (
+        <div className={styles.noActivity}>
+          <div className={styles.NoResourcesMessage}>
+            <div className={styles.SpinnerWrapper}>
+              <Spinner size="big" />
+            </div>
+          </div>
+        </div>
+      ) : (
+        <>
+          {users?.slice(0, 7).map((user, index) => (
+            <NewUserCard
+              key={index}
+              userID={user.id}
+              name={user.name}
+              organisation={user.organisation}
+              age={user.age}
+            />
+          ))}
+        </>
+      )}
 
-      <PrimaryButton className={styles.viewMoreButton}>View More</PrimaryButton>
+      {!isFetching && (
+        <PrimaryButton className={styles.viewMoreButton}>
+          View More
+        </PrimaryButton>
+      )}
     </div>
   );
 };

src/components/NewAppCard/NewAppCard.module.css

@@ -0,0 +1,111 @@
+.projectCard {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #ffff;
+    padding: 20px;
+    border-radius: 8px;
+    margin: 10px 0;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.cardContent {
+    display: flex;
+    flex-direction: column;
+}
+
+.title {
+    font-size: 1em;
+    font-weight: 600;
+    margin: 0;
+    /* color: var(--primary-color); */
+}
+
+/* .title:hover {
+    cursor: pointer;
+    text-decoration: underline;
+    transform: scale(1.05);
+} */
+
+.description {
+    color: var(--primary-color);
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    min-height: 2.3em;
+    margin: 5px 0 0 0;
+    text-decoration: underline;
+}
+
+.description:hover {
+    cursor: pointer;
+}
+
+.numberBox {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background-color: #fafae5;
+    padding: 2px;
+    border-radius: 8px;
+    min-width: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.numberBox:hover {
+    cursor: pointer;
+}
+
+.number {
+    font-size: 1em;
+}
+
+.cardExtras {
+    display: flex;
+    padding-top: 0.3rem;
+}
+
+.membersIcon {
+    width: 1rem;
+    height: 1rem;
+}
+
+.memberCount {
+    padding-left: 0.5rem;
+}
+
+.stats {
+    display: flex;
+    flex-direction: column;
+    margin: 10px 0;
+}
+
+.statItem {
+    background-color: #f0f0f0;
+    border-radius: 8px;
+    padding: 5px 10px;
+    display: flex;
+    align-items: center;
+}
+
+.statItem p,
+.statItem span {
+    margin: 0;
+    font-size: 0.9em;
+}
+
+.cardSummary {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+}
+
+.appUrl {
+    text-decoration: none;
+    color: var(--primary-color);
+}

src/components/NewAppCard/index.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+import styles from "./NewAppCard.module.css";
+
+const NewAppCard = ({ name, url, image, port }) => {
+  return (
+    <div className={styles.projectCard}>
+      <div className={styles.cardContent}>
+        <h3 className={styles.title}>{name}</h3>
+        <p className={styles.description}>
+          <a href={url} target="_blank" rel="noopener noreferrer" className={styles.appUrl}>
+            {url}
+          </a>
+        </p>
+
+        <div className={styles.cardExtras}>
+          <div className={styles.cardSummary}>
+            <div className={styles.statItem}>
+              <span>Image: {image}</span>
+            </div>
+            <div className={styles.statItem}>
+              <span>Port: {port}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NewAppCard;