0.11.11 • Published 2 years ago

olive-pathway v0.11.11

Weekly downloads
-
License
-
Repository
-
Last release
2 years ago

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()
0.10.9

2 years ago

0.10.1

2 years ago

0.10.2

2 years ago

0.10.4

2 years ago

0.10.5

2 years ago

0.10.6

2 years ago

0.10.7

2 years ago

0.10.8

2 years ago

0.10.0

2 years ago

0.11.8

2 years ago

0.11.9

2 years ago

0.11.0

2 years ago

0.11.1

2 years ago

0.11.2

2 years ago

0.11.4

2 years ago

0.10.10

2 years ago

0.11.5

2 years ago

0.10.11

2 years ago

0.11.6

2 years ago

0.10.12

2 years ago

0.11.7

2 years ago

0.11.10

2 years ago

0.11.11

2 years ago

0.7.10

2 years ago

0.8.1

2 years ago

0.8.0

2 years ago

0.8.3

2 years ago

0.8.2

2 years ago

0.9.0

2 years ago

0.9.2

2 years ago

0.9.1

2 years ago

0.6.23

3 years ago

0.7.2

2 years ago

0.7.1

2 years ago

0.7.4

2 years ago

0.7.3

2 years ago

0.7.0

2 years ago

0.7.6

2 years ago

0.7.5

2 years ago

0.7.8

2 years ago

0.7.7

2 years ago

0.6.21

3 years ago

0.6.20

3 years ago

0.6.22

3 years ago

0.6.7

3 years ago

0.6.6

3 years ago

0.6.9

3 years ago

0.6.8

3 years ago

0.6.10

3 years ago

0.6.12

3 years ago

0.6.11

3 years ago

0.6.18

3 years ago

0.6.19

3 years ago

0.6.14

3 years ago

0.6.13

3 years ago

0.6.16

3 years ago

0.5.25

3 years ago

0.5.24

3 years ago

0.6.3

3 years ago

0.6.2

3 years ago

0.6.5

3 years ago

0.6.4

3 years ago

0.6.1

3 years ago

0.6.0

3 years ago

0.5.10

3 years ago

0.5.11

3 years ago

0.5.18

3 years ago

0.5.19

3 years ago

0.5.16

3 years ago

0.5.17

3 years ago

0.5.14

3 years ago

0.5.15

3 years ago

0.5.12

3 years ago

0.5.13

3 years ago

0.5.6

3 years ago

0.5.8

3 years ago

0.5.7

3 years ago

0.5.9

3 years ago

0.5.21

3 years ago

0.5.22

3 years ago

0.5.20

3 years ago

0.5.23

3 years ago

0.5.5

3 years ago

0.5.4

3 years ago

0.5.3

3 years ago

0.5.2

3 years ago

0.5.1

3 years ago

0.4.1

3 years ago

0.4.0

3 years ago

0.3.14

3 years ago

0.3.13

3 years ago

0.3.12

3 years ago

0.3.11

3 years ago

0.3.10

3 years ago

0.3.9

3 years ago

0.3.8

3 years ago

0.3.7

3 years ago

0.3.6

3 years ago

0.3.5

3 years ago

0.3.4

3 years ago

0.3.3

3 years ago

0.3.2

3 years ago

0.3.1

3 years ago

0.3.0

3 years ago

0.2.1

3 years ago

0.2.0

3 years ago

0.1.20

3 years ago

0.1.19

3 years ago

0.1.18

3 years ago

0.1.17

3 years ago

0.1.16

3 years ago

0.1.15

3 years ago

0.1.14

3 years ago

0.1.13

3 years ago

0.1.12

3 years ago

0.1.11

3 years ago

0.1.10

3 years ago

0.1.9

3 years ago