Skip to content

Commit

Permalink
complete journey
Browse files Browse the repository at this point in the history
  • Loading branch information
@zerihunMoges @Endalebob
zerihunMoges authored and Endalebob committed Jun 26, 2023
1 parent fff5e80 commit 65a8d82
Show file tree
Hide file tree
Showing 4 changed files with 183 additions and 127 deletions.
262 changes: 146 additions & 116 deletions src/components/my-journey/Journey.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useEffect, useState } from "react";
import Stepper from "./Stepper";
import Stepper, { areAllSubStepsTrue } from "./Stepper";
import Task from "./Task";
import Contests from "./Contests";
import { useDispatch, useSelector } from "react-redux";
Expand All @@ -8,6 +8,9 @@ import { setSelectedContest } from "<@>/store/contest/contest-slice";
import Modal from "../common/Modal";
import ContestDetail from "./ContestDetail";
import { useWindowWidth } from "../common/WindowWidth";
import { useGetStepsQuery } from "<@>/store/journey/journey-api";
import { SubSteps } from "<@>/types/Journey/SubSteps";
import Error from "../common/Error";

const Journey: React.FC = () => {
const [activeStep, setActiveStep] = useState(0);
Expand All @@ -18,93 +21,15 @@ const Journey: React.FC = () => {
const windowWidth = useWindowWidth();
const largeScreen = 1024;
const modalOpen = windowWidth! < largeScreen && selectedContest !== null;

const steps = [
{
isCompleted: true,
stepName: "Setup Profile",
subSteps: [
{
isCompleted: true,
subStepName: "Sign Up",
description:
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus, dignissimos reiciendis. Pariatur et placeat at deleniti, laboriosam consequuntur. Porro dolorem cum unde praesentium. Temporibus in veritatis nemo perspiciatis fuga quia!",
},
{
isCompleted: true,
subStepName: "Codeforce profile",
description:
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus, dignissimos reiciendis. Pariatur et placeat at deleniti, laboriosam consequuntur. Porro dolorem cum unde praesentium. Temporibus in veritatis nemo perspiciatis fuga quia!",
},
{
isCompleted: true,
subStepName: "Github profile",
description:
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus, dignissimos reiciendis. Pariatur et placeat at deleniti, laboriosam consequuntur. Porro dolorem cum unde praesentium. Temporibus in veritatis nemo perspiciatis fuga quia!",
},
{
isCompleted: true,
subStepName: "Leetcode profile",
description:
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus, dignissimos reiciendis. Pariatur et placeat at deleniti, laboriosam consequuntur. Porro dolorem cum unde praesentium. Temporibus in veritatis nemo perspiciatis fuga quia!",
},
],
},
{
isCompleted: false,
stepName: "Participate in A2SV Contest",
subSteps: [
{
isCompleted: false,
subStepName: "Participate in Your first A2SV contest",
description:
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus, dignissimos reiciendis. Pariatur et placeat at deleniti, laboriosam consequuntur. Porro dolorem cum unde praesentium. Temporibus in veritatis nemo perspiciatis fuga quia!",
},
{
isCompleted: false,
subStepName: "Participate in Your second A2SV contest",
description:
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus, dignissimos reiciendis. Pariatur et placeat at deleniti, laboriosam consequuntur. Porro dolorem cum unde praesentium. Temporibus in veritatis nemo perspiciatis fuga quia!",
},
],
},
{
isCompleted: false,
stepName: "Resume",
subSteps: [
{
isCompleted: false,
subStepName: "Upload your resume",
description:
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus, dignissimos reiciendis. Pariatur et placeat at deleniti, laboriosam consequuntur. Porro dolorem cum unde praesentium. Temporibus in veritatis nemo perspiciatis fuga quia!",
},
],
},
{
isCompleted: false,
stepName: "Ready to Apply",
subSteps: [
{
isCompleted: false,
subStepName: "Apply to join A2SV community",
description:
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus, dignissimos reiciendis. Pariatur et placeat at deleniti, laboriosam consequuntur. Porro dolorem cum unde praesentium. Temporibus in veritatis nemo perspiciatis fuga quia!",
},
],
},
{
isCompleted: false,
stepName: "Waitlist",
subSteps: [
{
isCompleted: false,
subStepName: "Apply to join A2SV community",
description:
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus, dignissimos reiciendis. Pariatur et placeat at deleniti, laboriosam consequuntur. Porro dolorem cum unde praesentium. Temporibus in veritatis nemo perspiciatis fuga quia!",
},
],
},
];
const {
data: response,
isLoading,
isSuccess,
isError,
error,
} = useGetStepsQuery({});
const stepsError = error as any;
const steps = response?.value;

return (
<div className="grid grid-cols-2 lg:grid-cols-4 w-full">
Expand All @@ -113,36 +38,141 @@ const Journey: React.FC = () => {
selectedContest != null ? `lg:col-span-2` : `lg:col-span-3`
} col-span-4 flex flex-col lg:border-r p-4 pt-8 lg:min-h-screen`}
>
<div className="flex flex-col p-2">
<Stepper steps={steps} setActiveStep={setActiveStep} />
</div>
{isLoading ? (
<div className="animate-pulse w-full">
<div className="flex flex-col p-2 w-full gap-8">
<div className="grid grid-cols-4 justify-items-start w-full max-w-[68rem] gap-2 text-xs md:text-sm lg:text-base">
<div className="flex flex-col w-full gap-2">
<div className="w-full h-3 bg-slate-200 rounded-md"></div>
<div className="flex gap-1 items-center">
<div className="w-4 h-4 rounded-full bg-slate-200"></div>
<div className="w-[60%] h-3 bg-slate-200 rounded-md"></div>
</div>
</div>

<div className="flex flex-col p-4 mt-4">
<p className="font-bold text-lg lg:text-2xl ">
{steps[activeStep].stepName}
</p>
<div className="flex flex-col p-4 gap-4">
{steps[activeStep]?.subSteps.map((subStep, index) => {
const stepInprogress =
!steps[activeStep].isCompleted &&
(activeStep === 0 || steps[activeStep - 1].isCompleted);
return (
<Task
key={index}
isCompleted={subStep.isCompleted}
title={subStep.subStepName}
description={subStep.description}
active={
!subStep.isCompleted &&
(index === 0 ||
steps[activeStep].subSteps[index - 1].isCompleted) &&
stepInprogress
}
/>
);
})}
<div className="flex flex-col w-full gap-2">
<div className="w-full h-3 bg-slate-200 rounded-md"></div>
<div className="flex gap-1 items-center">
<div className="w-4 h-4 rounded-full bg-slate-200"></div>
<div className="w-[60%] h-3 bg-slate-200 rounded-md"></div>
</div>
</div>

<div className="flex flex-col w-full gap-2">
<div className="w-full h-3 bg-slate-200 rounded-md"></div>
<div className="flex gap-1 items-center">
<div className="w-4 h-4 rounded-full bg-slate-200"></div>
<div className="w-[60%] h-3 bg-slate-200 rounded-md"></div>
</div>
</div>

<div className="flex flex-col w-full gap-2">
<div className="w-full h-3 bg-slate-200 rounded-md"></div>
<div className="flex gap-1 items-center">
<div className="w-4 h-4 rounded-full bg-slate-200"></div>
<div className="w-[60%] h-3 bg-slate-200 rounded-md"></div>
</div>
</div>
</div>

<div className="flex flex-col p-4 mt-4">
<div className="max-w-sm h-3 bg-slate-200 rounded-sm"></div>

<div className="flex flex-col p-4 gap-4">
<div className="flex p-2 rounded-md max-w-[44rem] h-fit">
<div className="flex items-start m-4">
<div className="w-6 h-6 rounded-full bg-slate-200"></div>
</div>

<div className="flex flex-col gap-3 p-2 w-full">
<div className="w-[30%] h-3 bg-slate-200 rounded-sm"></div>
<div className="flex flex-col gap-1">
<div className="w-full h-3 bg-slate-200 rounded-sm"></div>
<div className="w-[90%] h-3 bg-slate-200 rounded-sm"></div>
<div className="w-full h-3 bg-slate-200 rounded-sm"></div>
</div>
</div>
</div>
<div className="flex p-2 rounded-md max-w-[44rem] h-fit">
<div className="flex items-start m-4">
<div className="w-6 h-6 rounded-full bg-slate-200"></div>
</div>

<div className="flex flex-col gap-3 p-2 w-full">
<div className="w-[30%] h-3 bg-slate-200 rounded-sm"></div>
<div className="flex flex-col gap-1">
<div className="w-full h-3 bg-slate-200 rounded-sm"></div>
<div className="w-[90%] h-3 bg-slate-200 rounded-sm"></div>
<div className="w-full h-3 bg-slate-200 rounded-sm"></div>
</div>
</div>
</div>
<div className="flex p-2 rounded-md max-w-[44rem] h-fit">
<div className="flex items-start m-4">
<div className="w-6 h-6 rounded-full bg-slate-200"></div>
</div>

<div className="flex flex-col gap-3 p-2 w-full">
<div className="w-[30%] h-3 bg-slate-200 rounded-sm"></div>
<div className="flex flex-col gap-1">
<div className="w-full h-3 bg-slate-200 rounded-sm"></div>
<div className="w-[90%] h-3 bg-slate-200 rounded-sm"></div>
<div className="w-full h-3 bg-slate-200 rounded-sm"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
) : isSuccess ? (
<>
<div className="flex flex-col p-2">
<Stepper steps={steps} setActiveStep={setActiveStep} />
</div>

<div className="flex flex-col p-4 mt-4">
<p className="font-semibold text-lg ">
{steps[activeStep].stepName}
</p>
<div className="flex flex-col p-4 gap-4">
{steps[activeStep]?.subSteps.map(
(subStep: SubSteps, index: number) => {
const stepInprogress =
!areAllSubStepsTrue(steps[activeStep]) &&
(activeStep === 0 ||
areAllSubStepsTrue(steps[activeStep - 1]));
return (
<Task
key={index}
isCompleted={subStep.constraintSpecification === "true"}
title={subStep.subStepName}
description={subStep.description}
active={
!(subStep.constraintSpecification === "true") &&
(index === 0 ||
steps[activeStep].subSteps[index - 1]
.constraintSpecification === "true") &&
stepInprogress
}
/>
);
}
)}
</div>
</div>
</>
) : isError ? (
<>
{error &&
stepsError.data?.error?.map((err: any, index: number) => {
return <Error message={err.errorMessage} />;
})}{" "}
{error && !stepsError.data && <Error message="Unknown Error" />}
</>
) : (
<></>
)}
</div>

<div
Expand Down
32 changes: 25 additions & 7 deletions src/components/my-journey/Stepper.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from "react";
import React, { useEffect } from "react";
import CheckBox from "./CheckBox";
import Connector from "./Connector";
import { SubSteps } from "<@>/types/Journey/SubSteps";
Expand All @@ -12,7 +12,25 @@ interface StepperProps {
steps: Step[];
setActiveStep: (step: number) => void;
}
export function areAllSubStepsTrue(step: any): boolean {
return step.subSteps.every(
(subStep: any) => subStep.constraintSpecification === "true"
);
}

const Stepper: React.FC<StepperProps> = ({ steps, setActiveStep }) => {
useEffect(() => {
for (let index = 0; index < steps.length; index++) {
const curStep = steps[index];

if (
!areAllSubStepsTrue(curStep) &&
(index === 0 || areAllSubStepsTrue(steps[index - 1]))
) {
setActiveStep(index);
}
}
}, []);
return (
<div
className={`justify-items-start flex-grow max-w-[68rem] gap-2 text-xs md:text-sm lg:text-base`}
Expand All @@ -31,9 +49,9 @@ const Stepper: React.FC<StepperProps> = ({ steps, setActiveStep }) => {
<div className="w-full flex items-center">
<Connector
fill={
step.isCompleted ||
(!step.isCompleted &&
(index === 0 || steps[index - 1].isCompleted))
areAllSubStepsTrue(step) ||
(!areAllSubStepsTrue(step) &&
(index === 0 || areAllSubStepsTrue(steps[index - 1])))
? true
: false
}
Expand All @@ -43,10 +61,10 @@ const Stepper: React.FC<StepperProps> = ({ steps, setActiveStep }) => {
<div className="mt-1">
<CheckBox
stepper
isCompleted={step.isCompleted}
isCompleted={areAllSubStepsTrue(step)}
active={
!step.isCompleted &&
(index === 0 || steps[index - 1].isCompleted)
!areAllSubStepsTrue(step) &&
(index === 0 || areAllSubStepsTrue(steps[index - 1]))
}
/>
</div>
Expand Down
14 changes: 11 additions & 3 deletions src/store/journey/journey-api.ts
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,22 @@
import { getCookie } from "<@>/utils/cookie";
import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/dist/query/react";

const BASE_URL = "https://a2sv-community-portal-api.onrender.com/api";
export const stepApiSlice = createApi({
reducerPath: "step",
baseQuery: fetchBaseQuery({
baseUrl: "https://a2sv-community-portal-api.onrender.com/api/steps",
baseUrl: BASE_URL,
prepareHeaders: (headers) => {
const token = getCookie("token");
if (token) {
headers.set("authorization", `bearer ${token}`);
}
return headers;
},
}),
endpoints(builder) {
return {
getSteps: builder.query({
query: () => "",
query: () => "/steps",
}),
};
},
Expand Down
2 changes: 1 addition & 1 deletion src/types/Journey/SubSteps.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
export interface SubSteps {
isCompleted: boolean;
constraintSpecification: string;
subStepName: string;
description: string;
}

2 comments on commit 65a8d82

@vercel
Copy link

@vercel vercel bot commented on 65a8d82 Jun 26, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

t-web-project-vcxi – ./

t-web-project-vcxi-git-main-endalebob.vercel.app
t-web-project-vcxi.vercel.app
t-web-project-vcxi-endalebob.vercel.app

@vercel
Copy link

@vercel vercel bot commented on 65a8d82 Jun 26, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

t-web-project-v583 – ./

t-web-project-v583.vercel.app
t-web-project-v583-endalebob.vercel.app
t-web-project-v583-git-main-endalebob.vercel.app

Please sign in to comment.