Skip to content

Commit

Permalink
Merge pull request #54 from grandeurdev/nodejs-support
Browse files Browse the repository at this point in the history
Nodejs support complete, with example and readme.
  • Loading branch information
moizhusnain authored Apr 10, 2023
2 parents 6fa38bd + 16125af commit edb75c3
Show file tree
Hide file tree
Showing 33 changed files with 2,572 additions and 1,535 deletions.
Binary file modified .DS_Store
Binary file not shown.
2 changes: 1 addition & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ typings/
.yarn-integrity

# dotenv environment variables file
.env

.env.test

# parcel-bundler cache (https://parceljs.org/)
Expand Down
90 changes: 56 additions & 34 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
Grandeur client for browsers. Check full docs at https://docs.grandeur.dev

[![NPM](https://img.shields.io/npm/v/grandeur-js.svg)](https://www.npmjs.com/package/grandeur-js)
[![Downloads/week](https://img.shields.io/npm/dw/grandeur-js.svg)](https://npmjs.org/package/grandeur-js.svg)
[![License](https://img.shields.io/npm/l/grandeur-js.svg)](https://github.com/grandeurtech/js-sdk/blob/master/package.json)
[![NPM](https://img.shields.io/npm/v/grandeur-js.svg)](https://www.npmjs.com/package/grandeur-js) [![Downloads/week](https://img.shields.io/npm/dw/grandeur-js.svg)](https://npmjs.org/package/grandeur-js.svg) [![License](https://img.shields.io/npm/l/grandeur-js.svg)](https://github.com/grandeurtech/js-sdk/blob/master/package.json)

Here is how you can integrate Grandeur in your project.

### React
## React

Just simply download the package from npm and use it in your react project

```bash
Expand All @@ -27,14 +26,14 @@ import ReactDOM from "react-dom";
import App from "./app";

// and Import Grandeur Component
import { Grandeur } from "grandeur-js/react";
import {Grandeur} from "grandeur-js/react";

// Render app
const page = (
<Grandeur apiKey="YOUR-APIKEY" secretKey="SECRET-KEY" credentials={credentials}>
{/* Your app code*/}
<App />
</Grandeur>
<Grandeur apiKey="YOUR-APIKEY" secretKey="SECRET-KEY" credentials={credentials}>
{/* Your app code*/}
<App />
</Grandeur>
);

// Finally render
Expand All @@ -48,41 +47,42 @@ Then inside your `app.js`
// The App Component

// Libraries
import React, { Component } from "react";
import React, {Component} from "react";

// Import Grandeur HOC
import { withGrandeur } from "grandeur-js/react";
import {withGrandeur} from "grandeur-js/react";

// Component
class App extends Component {
// Constructor
constructor(props) {
super(props);

// State of the Component
this.state = {};
}

componentDidMount() {
// Component is Mounted
// get reference to the grandeur
// through props. Which can be used to
// access all the features of Grandeur
var project = this.props.grandeur;
}

// Render
render() {
// Render the Component
return <p>Hello World</p>;
}
// Constructor
constructor(props) {
super(props);

// State of the Component
this.state = {};
}

componentDidMount() {
// Component is Mounted
// get reference to the grandeur
// through props. Which can be used to
// access all the features of Grandeur
var project = this.props.grandeur;
}

// Render
render() {
// Render the Component
return <p>Hello World</p>;
}
}

// Export the Component after wrapping in HOC
export default withGrandeur(App);
```

### Browser
## Browser

Just simply drop the link of JavaScript SDK in a script tag inside your web app using our [CDN](https://unpkg.com/grandeur-js).

```html
Expand All @@ -100,4 +100,26 @@ This will give you access to the global `Grandeur` object, through which you can
var project = grandeur.init("API-KEY", "SECRET-KEY");
```

Check full sdk references from [documentation](https://docs.grandeur.dev/references/client-sdk/installation). Or check full [examples](https://github.com/grandeurdev/js-sdk/tree/master/examples).
Check full sdk references from [documentation](https://docs.grandeur.dev/references/client-sdk/installation). Or check full [examples](https://github.com/grandeurdev/js-sdk/tree/master/examples).

## Node.js

After downloading the package from npm, you can use it in your node project.

```js
import grandeur from "grandeur-js";
```

This will give you access to the global `Grandeur` object, through which you can initialize the SDK and get a reference to your project as shown below

```javascript
// The init the SDK with API key
// and get reference to your project
var project = grandeur.init("API-KEY", "SECRET-KEY");
```

For User Authorization, generate a token from Grandeur Dahsboard and use as shown below.

```js
var response = await project.auth().token("AUTH_TOKEN");
```
2 changes: 2 additions & 0 deletions dist/grandeur-cjs.js

Large diffs are not rendered by default.

10 changes: 10 additions & 0 deletions dist/grandeur-cjs.js.LICENSE.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
/*
* [hi-base32]{@link https://github.com/emn178/hi-base32}
*
* @version 0.5.0
* @author Chen, Yi-Cyuan [emn178@gmail.com]
* @copyright Chen, Yi-Cyuan 2015-2018
* @license MIT
*/

/*! noble-hashes - MIT License (c) 2022 Paul Miller (paulmillr.com) */
2 changes: 1 addition & 1 deletion dist/grandeur-react.js

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions dist/grandeur-react.js.LICENSE.txt
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@
* @license MIT
*/

/*! noble-hashes - MIT License (c) 2022 Paul Miller (paulmillr.com) */

/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */

/**
Expand Down
2 changes: 1 addition & 1 deletion dist/grandeur.js

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions dist/grandeur.js.LICENSE.txt
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,6 @@
* @license MIT
*/

/*! noble-hashes - MIT License (c) 2022 Paul Miller (paulmillr.com) */

/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
16 changes: 3 additions & 13 deletions distributions/react.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,7 @@ const GrandeurContext = React.createContext(null);
// Default Grandeur Provider Component
export function Grandeur(props) {
// Pass the plugins to sdk
grandeur.extend
? grandeur.extend(props.extensions ? props.extensions : {})
: null;
grandeur.extend ? grandeur.extend(props.extensions ? props.extensions : {}) : null;

// init
var project = grandeur.init(props.apiKey, props.secretKey);
Expand All @@ -39,15 +37,7 @@ export function Grandeur(props) {
grandeur: project,
};

return (
<GrandeurContext.Provider value={state.grandeur}>
{props.children}
</GrandeurContext.Provider>
);
return <GrandeurContext.Provider value={state.grandeur}>{props.children}</GrandeurContext.Provider>;
}

export const withGrandeur = (Component) => (props) => (
<GrandeurContext.Consumer>
{(grandeur) => <Component {...props} grandeur={grandeur} />}
</GrandeurContext.Consumer>
);
export const withGrandeur = (Component) => (props) => <GrandeurContext.Consumer>{(grandeur) => <Component {...props} grandeur={grandeur} />}</GrandeurContext.Consumer>;
Binary file modified examples/.DS_Store
Binary file not shown.
16 changes: 13 additions & 3 deletions examples/create-react-app/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

126 changes: 60 additions & 66 deletions examples/create-react-app/src/components/Devices/Devices.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,84 +7,78 @@ import ButtonOn from "../../buttonOn.svg";
import { useNavigate } from "react-router-dom";

function Device(props) {
const deviceID = "DeviceID";
const navigate = useNavigate();
const [deviceName, setDeviceNameState] = useState("");
const [data, setButtonState] = useState(0);
const deviceID = "DeviceID";
const navigate = useNavigate();
const [deviceName, setDeviceNameState] = useState("");
const [data, setButtonState] = useState(0);

useEffect(() => {
displayDevice();
useEffect(() => {
displayDevice();

async function displayDevice() {
var res = await props.grandeur.auth().isAuthenticated();
async function displayDevice() {
var res = await props.grandeur.auth().isAuthenticated();

// Then if the user isn't authorized then show the login screen
if (res.code === "AUTH-UNAUTHORIZED") {
navigate("/", { replace: true });
}
// Then if the user isn't authorized then show the login screen
if (res.code === "AUTH-UNAUTHORIZED") {
navigate("/", { replace: true });
}

var devices = props.grandeur.devices();
var devices = props.grandeur.devices();

// Get device name
var { device } = await devices.device(deviceID).get("name");
// Get device name
var { device } = await devices.device(deviceID).get("name");

if (device.name) setDeviceNameState(device.name);
if (device.name) setDeviceNameState(device.name);

var { data } = await devices
.device(deviceID)
.data()
.get("led");
var { data } = await devices
.device(deviceID)
.data()
.get("led");

data ? setButtonState(data) : setButtonState(0);
data ? setButtonState(data) : setButtonState(0);

devices
.device(deviceID)
.data()
.on("led", (path, state) => {
setButtonState(state);
});
}
});
devices
.device(deviceID)
.data()
.on("led", (path, state) => {
setButtonState(state);
});
}
});

async function updateState() {
// Use the devices class of sdk to report the upgrade
await props.grandeur
.devices()
.device(deviceID)
.data()
.set("led", data ? 0 : 1);
}
async function updateState() {
// Use the devices class of sdk to report the upgrade
await props.grandeur
.devices()
.device(deviceID)
.data()
.set("led", data ? 0 : 1);
}

return (
<>
<Header></Header>
<div className="flex w-screen h-screen bg-gray-50 justify-center items-center">
<div
id="device"
className="h-96 w-96 flex flex-col justify-center items-center content-around"
>
{!deviceName ? (
<div id="device-loading" className="w-20 h-auto">
<img src={Loading} alt="ReactLogo" />
</div>
) : (
<div id="device-button" onClick={updateState}>
<div className="h-44 w-44 bg-gray-400 drop-shadow-lg rounded-2xl flex items-center justify-center cursor-pointer">
<img src={!data ? ButtonOff : ButtonOn} alt="" />
</div>
return (
<>
<Header></Header>
<div className="flex w-screen h-screen bg-gray-50 justify-center items-center">
<div id="device" className="h-96 w-96 flex flex-col justify-center items-center content-around">
{!deviceName ? (
<div id="device-loading" className="w-20 h-auto">
<img src={Loading} alt="ReactLogo" />
</div>
) : (
<div id="device-button" onClick={updateState}>
<div className="h-44 w-44 bg-gray-400 drop-shadow-lg rounded-2xl flex items-center justify-center cursor-pointer">
<img src={!data ? ButtonOff : ButtonOn} alt="" />
</div>

<div
className="text-gray-900 font-sans text-md font-bold mt-10 text-center"
id="device-name"
>
{!deviceName ? "Device" : deviceName}
</div>
</div>
)}
</div>
</div>
</>
);
<div className="text-gray-900 font-sans text-md font-bold mt-10 text-center" id="device-name">
{!deviceName ? "Device" : deviceName}
</div>
</div>
)}
</div>
</div>
</>
);
}

export default withGrandeur(Device);
Loading

0 comments on commit edb75c3

Please sign in to comment.