Learning pathway components for react

Reputation Point

``jsx
import React from "react";

import { ReputationPoint } from "olive-pathway";
import "olive-pathway/dist/olive-pathway.css";

function App() {
const activities = {
data: [
{
id: "6284ccad9ca1a52174fe3d34", // id that represents name
name: "Access Contents",
type: "Bundle",
},
{
id: "6284ccad9ca1a52174fe3d35",
name: "Start Online Course",
type: "Courses",
},
{
id: "6284ccad9ca1a52174fe3d36",
name: "Purchase B2C Course",
type: "Courses",
},
],
activityTypes: [
{
// labelKey and valueKey can be changed according to the data
labelKey: "label",
valueKey: "value",
type: "Courses",
data: [
{ label: "ABC Course", value: "6284ccad9ca1a52174fe3d41" },
{ label: "XYZ Course", value: "6284ccad9ca1a52174fe3d42" },
{ label: "123 Course", value: "6284ccad9ca1a52174fe3d43" },
],
},
{
// labelKey and valueKey can be changed according to the data
labelKey: "label",
valueKey: "value",
type: "Bundle",
data: [
{ label: "123 Bundle", value: "6284ccad9ca1a52174fe3d44" },
{ label: "456 Bundle", value: "6284ccad9ca1a52174fe3d45" },
{ label: "789 Bundle", value: "6284ccad9ca1a52174fe3d46" },
],
},
],
};

return (
activities={activities}
token="your_auth_token"
apiurl="your_api_url"
/>
);
}
`

- While creating a reputation point if just activity type is selected without activity contents then the given point maps to all of the contents of that activity.
- If activity content also selected with the activity thye then the given point only maps the corresponding activity content of selected activity type.
- Multiple activities can be added inside single reputation point with + Add Activity
- And multiple reputation points can be added with + Add Next

Badge

`jsx
import React from "react";

import { Badge } from "olive-pathway";
import "olive-pathway/dist/olive-pathway.css";

function App() {
const activities = {
badgeName: "Badge",
data: [
{
id: "6284ccad9ca1a52174fe3d34", // id that represents name
name: "Access Contents",
type: "Courses",
},
{
id: "6284ccad9ca1a52174fe3d35",
name: "Start Online Course",
type: "Courses",
},
{
id: "6284ccad9ca1a52174fe3d36",
name: "Login",
type: "Bundle",
},
{
id: "REPUTATION_POINT", // must be same and compulsory
name: "Reputation Point",
type: "REPUTATION_POINT",
},
{
id: "BADGE", // must be same
name: "Badge",
type: "BADGE",
},
{
id: "EVENT", // must be same
name: "Event",
type: "EVENT",
},
],
activityTypes: [
{
// labelKey and valueKey can be changed according to the data
labelKey: "label",
valueKey: "value",
type: "Courses",
data: [
{ label: "ABC Course", value: "6284ccad9ca1a52174fe3d41" },
{ label: "XYZ Course", value: "6284ccad9ca1a52174fe3d42" },
{ label: "123 Course", value: "6284ccad9ca1a52174fe3d43" },
],
},
{
// labelKey and valueKey can be changed according to the data
labelKey: "label",
valueKey: "value",
type: "Bundle",
data: [
{ label: "123 Bundle", value: "6284ccad9ca1a52174fe3d44" },
{ label: "456 Bundle", value: "6284ccad9ca1a52174fe3d45" },
{ label: "789 Bundle", value: "6284ccad9ca1a52174fe3d46" },
],
},
],
};

return (
activities={activities}
token="your_auth_token"
apiurl="your_api_url"
/>
);
}
`

There are 3 (Diamond, Gold and Silver) badges available initially. If the requirement are different then the user can update those initial badges.

- While creating a badge reputation point is mandatory. If your software doesn't have the concept of reputation point then just input the values and ignore.
- If the user inputs 4 in reputation point then the 4 reputation point maps to the correspoding single badge.
- Claim Manula is for the manual claim of reputation point or other activities.
- If just activity type is selected without activity contents then the given badge quanity maps to all of the contents of that activity.
- If activity content also selected with the activity thye then the given badge quanity only maps the corresponding activity content of selected activity type.
- Quantity refers to the number of badges will be given once the rule/activitiy is fullfilled.
- Multiple activity type/contents can be added inside single activity with + Add Activity Type
- And multiple activities can be added with + Add Next Activity
- _On sorting the hierarchy or deleting the badge, all of the activities of all of the badges will be cleared_.

Learning Pathway

`jsx
import React from "react";

import { Pathway } from "olive-pathway";
import "olive-pathway/dist/olive-pathway.css";

function App() {
const courses = {
// labelKey and valueKey can be changed according to the data
labelKey: "label",
valueKey: "value",
data: [
{
label: "course0",
value: "course0",
},
{
label: "course1",
value: "course1",
},
],
};

const vouchers = {
// labelKey and valueKey can be changed according to the data
labelKey: "title",
valueKey: "code",
data: [
{ title: "Voucher1", code: "12gddeg" },
{ title: "Voucher2", code: "45432fdgfs" },
],
};

const jobs = {
// labelKey and valueKey can be changed according to the data
labelKey: "positionTitle",
valueKey: "_id",
data: [
{ _id: "603f3958bf8fa1d223f1f1c9", positionTitle: "Node Developer" },
{ _id: "603f3958bf8fa1d223f1f110", positionTitle: "React Developer" },
],
};

const events = {
labelKey: "name",
valueKey: "_id",
data: [
{ _id: "603f3958bf8fa1d223f1f1d7", name: "IT Expo" },
{ _id: "603f3958bf8fa1d223f1f1e8", name: "Myconnect Product Launch" },
],
};

/ For Pathway Components /
const data = [
{
key: "C_S", // For Courses or similar data
data: courses,
component: {
name: "Course",
rules: ["isStarted", "isCompleted", "progress"],
},
},
{
key: "D_C", // For Document or similar data
component: { name: "Document", rules: ["isCompleted"] },
},
];

`

Not required to send 'data' on accolades and recommendations if the component has already that key and data.

`jsx
const options = {
closeOffCanvasOnEsc: false,

/ For Pathway Accolades such as Credit, Voucher Code, Course /
accolades: [
{
key: "C_R",
name: "Credit",
},
{
key: "V_C",
name: "Voucher Code",
data: vouchers,
},
{
key: "C_S",
name: "Course",
data: courses,
},
{
key: "BADGE",
name: "Badge",
},
],

/ For Pathway Recommendations such as Job, Course, Events /
recommendations: [
{
key: "J_B",
name: "Job",
data: jobs,
},
{
key: "E_V",
name: "Event",
data: events,
},
{
key: "C_S",
name: "Course",
data: courses,
},
],
};

return (
token="your_auth_token"
apiurl="your_api_url"
options={options}
data={data}
/>
);
}
`

Olive pathway package has exported the usePathway hook with gotToTable hook function which clears the store and returns back to the table.

`jsx
import { usePathway } from "olive-pathway";
---
const { gotToTable } = usePathway()

``