Merge pull request #24 from PubNubDevelopers/dev

tool developer docs completed

src/routes.js

@@ -4,10 +4,10 @@ import ToolboxApp from "tools/ToolboxApp";
 // @mui/icons-material
 import { VpnKey } from "@mui/icons-material";
 
-// app routes
+// tool routes
 import routesPushDebug from "tools/PushDebug/routesPushDebug";
-import routesAuthAdmin from "tools/AuthAdmin/routesAuthAdmin"
 import routesObjectAdmin from "tools/ObjectAdmin/routesObjectAdmin";
+import routesAuthAdmin from "tools/AuthAdmin/routesAuthAdmin"
 
 var routes = [
   {
@@ -20,13 +20,21 @@ var routes = [
     parent: ToolboxApp,
     index: 0,
   },
+
   {divider: true,},
   routesPushDebug,
-  {divider: true,},
-  routesAuthAdmin,
+
   {divider: true,},
   routesObjectAdmin,
+
   {divider: true,},
+  routesAuthAdmin,
+
+  // copy/past these next two items and leave one for the next tools contributor
+  // {divider: true,},
+  // routes_AppName_,
+
+  // ignore this - it's just a placeholder for future stuffs
   // {
   //   title: "Documentation",
   // },

src/tools/AuthAdmin/AuthAdminProvider.js

@@ -1,6 +1,6 @@
 import { createContext, useContext, useState } from 'react'
 
-const Context = createContext()
+const Context = createContext();
 
 export const AuthAdminProvider = ({ children }) => {
 

src/tools/AuthAdmin/routesAuthAdmin.js

@@ -14,14 +14,14 @@ var routesAuthAdmin = {
   state: "appNameCollapse",
   views: [
     {
-      path: "/parse-token",
+      path: "/auth/parse-token",
       name: "ParseToken",
       component: ParseToken,
       parent: AuthAdminProvider,
       layout: "/admin",
     },
     {
-      path: "/grant-token",
+      path: "/auth/grant-token",
       name: "Grant Token",
       component: GrantToken,
       parent: AuthAdminProvider,

src/tools/ObjectAdmin/ObjectAdminProvider.js

@@ -1,6 +1,6 @@
 import { createContext, useContext, useState } from 'react'
 
-const Context = createContext()
+const Context = createContext();
 
 export const ObjectAdminProvider = ({ children }) => {
 

src/tools/PresConfig/PresConfigProvider.js

@@ -1,6 +1,6 @@
 import { createContext, useContext, useState } from 'react'
 
-const Context = createContext()
+const Context = createContext();
 
 export const AppNameProvider = ({ children }) => {
 

src/tools/PushDebug/PushDebugProvider.js

@@ -1,6 +1,6 @@
 import { createContext, useContext, useState, useRef } from 'react'
 
-const Context = createContext()
+const Context = createContext();
 
 export const PushDebugProvider = ({ children }) => {
 

src/tools/PushDebug/README.md

@@ -10,13 +10,13 @@ After years of talking about how great it would be have a tool to automate much
 
 Subscribe to a channel (subscribes to `-pndebug`, automatically), enter the proper payload, publish and receive the message and feedback from PubNub and the push vendor systems (APNs and FCM).
 
-![Push Test](docs/pnpush-pushtest.png)
+![Push Test](assets/pnpush-pushtest.png)
 
 ## Manage Device
 
 Enter a device token and required push parameters (push type, environment, bundle id) and list the channels registered to that device and add and remove channels, as needed.
 
-![Manage Device](docs/pnpush-inspectdevice.png)
+![Manage Device](assets/pnpush-inspectdevice.png)
 
 ## Manage Channel
 

src/tools/PushDebug/routesPushDebug.js

@@ -15,21 +15,21 @@ var routesPushDebug = {
   state: "pushDebugCollapse",
   views: [
     {
-      path: "/push-test",
+      path: "/push/push-test",
       name: "Push Test",
       component: PushTest,
       parent: PushDebugProvider,
       layout: "/admin",
     },
     {
-      path: "/manage-device",
+      path: "/push/manage-device",
       name: "Manage Device",
       component: ManageDevice,
       parent: PushDebugProvider,
       layout: "/admin",
     },
     {
-      path: "/manage-channel",
+      path: "/push/manage-channel",
       name: "Manage Channel",
       component: ManageChannel,
       parent: PushDebugProvider,

src/tools/_AppName_/README.md

@@ -13,4 +13,4 @@ This page does xyz and will make your life more interesting because la di da...
 
 ## Page 2
 
-This page does xyz and will make your life more interesting because la di da...
+This page does xyz and will make your life more interesting because bing botta boom...

src/tools/_AppName_/_AppName_Provider.js

@@ -1,23 +1,30 @@
 // import { createContext, useContext, useState } from 'react'
 
-// const Context = createContext()
+// const Context = createContext();
 
-// export const AppNameProvider = ({ children }) => {
+// export const _AppName_Provider = ({ children }) => {
 
-//   const [stateVar1, setStateVar1] = useState();
-//   const [stateVar2, setStateVar2] = useState();
+//   // Page1 state
+//   const [foo, setFoo] = useState();
+//   const [bar, setBar] = useState();
+
+//   // Page2 state
+//   const [bing, setBing] = useState();
 
 //   // provide data/functions to context users
-//   ////////////////////////////////////////
-//   const useAuthAdminData = {
-//     // ManageDevice State
-//     stateVar1, setStateVar1,
-//     stateVar2, setStateVar2,
+//   //////////////////////////////////////
+//   const use_AppName_Data = {
+//     // Page1 State
+//     foo, setFoo,
+//     bar, setBar,
+
+//     // Page2 State
+//     bing, setBing,
 //   }
 
-//   return <Context.Provider value={useAppNameData}> {children} </Context.Provider>
+//   return <Context.Provider value={use_AppName_Data}> {children} </Context.Provider>
 // }
 
-// export const useAppNameData = () => {
+// export const use_AppName_Data = () => {
 //     return useContext(Context)
 // }

src/tools/_AppName_/pages/Page1.js

@@ -40,17 +40,17 @@
 
 // // core components
 // import { useKeySetData } from "../../KeySetProvider";
-// import { useAppNameData } from "../AppNameProvider";
+// import { useAppNameData } from "../_AppName_Provider";
 
 // const Page1 = () => {
 //   const keySetContext = useKeySetData();
-//   const useAppNameContext = useAppNameData();
+//   const _appName_Context = use_AppName_Data();
 
 //   console.log("Page1 keySetContext: ", keySetContext);
-//   console.log("Page1 pushDebugContext: ", useAppNameContext);
+//   console.log("Page1 _appName_Context: ", use_AppName_Context);
 
-//   const [stateVar1, setStateVar1] = useState(pushDebugContext.stateVar1);
-//   const [stateVar2, setStateVar2] = useState(pushDebugContext.stateVar2);
+//   const [foo, setFoo] = useState(_appName_Context.foo);
+//   const [bar, setBar] = useState(_appName_Context.bar);
 
 
 //   return (
@@ -261,7 +261,7 @@
 //                     </h4>
 //                   </div>
 //                   </Col>
-//                   <Col>{appNameContext.token}</Col>
+//                   <Col>{_appNameContext_.token}</Col>
 //                 </Row>
 //                 <Row>
 //                   <Col lg="2">
@@ -271,41 +271,41 @@
 //                     </h4>
 //                   </div>
 //                   </Col>
-//                   <Col>{appNameContext.pushType}</Col>
+//                   <Col>{_appNameContext_.pushType}</Col>
 //                 </Row>
-//                 <Row hidden={appNameContext.pushType !== "apns2"}>
+//                 <Row hidden={_appNameContext_.pushType !== "apns2"}>
 //                   <Col lg="2">
 //                   <div className="col">
 //                     <h4 className="mb-0">
 //                       &nbsp;&nbsp;&nbsp;&nbsp;Environment:
 //                     </h4>
 //                   </div>
 //                   </Col>
-//                   <Col>{appNameContext.environment}</Col>
+//                   <Col>{_appNameContext_.environment}</Col>
 //                 </Row>
-//                 <Row hidden={appNameContext.pushType !== "apns2"}>
+//                 <Row hidden={_appNameContext_.pushType !== "apns2"}>
 //                   <Col lg="2">
 //                   <div className="col">
 //                     <h4 className="mb-0">
 //                       &nbsp;&nbsp;&nbsp;&nbsp;Topic:
 //                     </h4>
 //                   </div>
 //                   </Col>
-//                   <Col>{appNameContext.topic}</Col>
+//                   <Col>{_appNameContext_.topic}</Col>
 //                 </Row>
 //                 <p></p>
 //                 <Row>
 //                   <div className="col">
 //                     <h3 className="mb-0">
-//                       Registered Channels: {appNameContext.registeredChannels.length}
+//                       Registered Channels: {_appNameContext_.registeredChannels.length}
 //                     </h3>
 //                   </div>
 //                 </Row>
 //                 </CardHeader>
 //                 <CardBody>
 //                   <div className="pl-lg-4">
 //                     <Table className="align-items-center table-flush" responsive >
-//                       <XyzRows channels={appNameContext.registeredChannels} handleRemoveChannel={handleRemoveChannel}/>
+//                       <Rows channels={_appNameContext_.registeredChannels} handleRemoveChannel={handleRemoveChannel}/>
 //                     </Table>
 //                   </div>
 //               </CardBody>
@@ -320,7 +320,7 @@
 // export default Page1;
 
 
-// function XyzRows(props) {
+// function Rows(props) {
 //   const channels = props.channels;
 
 //   const rows = channels.map((ch, index) =>

src/tools/_AppName_/routes_AppName_.js

@@ -1,34 +1,39 @@
 // @mui/icons-material
+//////////////////////
 // look for icon names here: https://mui.com/components/material-icons/ 
 //   and replace "ExtensionIcon" with that icon name
+
 // import ExtensionIcon from '@mui/icons-material/Extension';
 
-// app pages
+// tool components
+//////////////////
+
+// import _AppName_Provider from "./_AppName_Provider.js"
 // import Page1 from "pages/Page1.js";
 // import Page2 from "pages/Page2.js";
 
-// var routesAppName = {
+// var routes_AppName_ = {
 //   collapse: true,
-//   name: "App Name",
+//   name: "_App Name_",
 //   icon: ExtensionIcon,
 //   iconColor: "Primary",
-//   state: "appNameCollapse",
+//   state: "_appName_Collapse",
 //   views: [
 //     {
-//       path: "/page1",
+//       path: "/_topic_/page1",
 //       name: "Page 1",
 //       component: Page1,
-//       parent: AppNameProvider,
+//       parent: _AppName_Provider,
 //       layout: "/admin",
 //     },
 //     {
-//       path: "/page2",
+//       path: "/_topic_/page2",
 //       name: "Page 2",
 //       component: Page2,
-//       parent: AppNameProvider,
+//       parent: _AppName_Provider,
 //       layout: "/admin",
 //     },
 //   ]
 // };
 
-// export default routesAppName;
+// export default routes_AppName_;