Learning pathway components for react

Reputation Point

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 (
    <ReputationPoint
      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

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 (
    <Badge
      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

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.

  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 (
    <Pathway
      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.

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