Should I export singleton class for consumption in React? - javascript

I have an AuthService class that provides all the api calls and handles authentication for those calls, so its a nice modular service. It is not a React component and not used in any render calls. It handles fetch calls mostly. In many other classes now, I use a single global instance of this class, and import it at the top.
I don't think a context is the right approach because it's not an object type or used in renders. I use the instance in componentDidMount() and useEffect().
an example:
//at the bottom, outside curly braces defining AuthService
export const Auth = new AuthService();
a consumer:
import React, { Component } from "react";
import ReactDOM from "react-dom";
import { useState, useEffect } from 'react';
import CommentList from "./CommentList";
import CommentForm from "./CommentForm";
import Comment from "./Comment";
import AuthService from './AuthService';
import { Auth } from './AuthService';
export default function CommentBox(props) {
const [comments, setComments] = useState([]);
// const Auth = new AuthService();
const [formText, setFormText] = useState('');
const [update, setUpdate] = useState(false);
useEffect(() => {
Auth.fetch('/comments/get_comment_for_bill/' + props.id + '/').then((data) => {
if (typeof data[0] !== 'undefined') {
setComments(data);
} else {
setComments([]);
}
setUpdate(false);
});
return () => {
return;
}
}, [props, update]);
return (
<div >
<CommentList comments={comments}/>
<CommentForm id={props.id} formText={formText} setFormText={setFormText} setUpdate={setUpdate}
onChange={e => {
setFormText(e.target.value);
}} />
</div>
);
}

I think the best approach to using singletons in React is by attaching it to the window object. Just make sure you first attach the singleton to an object, which in turn is attached to the window object - to avoid polluting your window namespace. You would do this attaching in your startup script only once:
index.js
var window.app = {}
window.app.authentication = (function() {
function authenticateUser(userId) {
}
return {
authenticateUser: authenticateUser
}
})();
Then in some other module where you want to use it:
Login.js
window.app.authentication.authenticateUser("johndoe");

It's just fine. There's nothing wrong. But why use same instance for everything?
new AuthService()
I would recommend you to export AuthService. Then, whenever you'll need to use that service, define a new instance and use:
const Auth = new AuthService()
// now, use Auth
It's just a personal choice.

Related

Access data from onmessage function from a websocket in Reactjs

I have established a websocket connect from my server to my client machine. I have parsed the data into an object and would like to access the data for representation on my front end.
import './App.css';
import { w3cwebsocket as W3CWebSocket } from "websocket";
import { Component } from 'react';
const client = new W3CWebSocket('ws://xyz:9080/user');
class App extends Component {
componentDidMount() {
client.open = () => {
console.log("Connected");
};
client.onmessage = (e) => {
const object = JSON.parse(e.data);
console.log(object.Snapshot);
}
client.onclose = () => {
console.log("Closed...");
}
}
render() {
return (<div className="App">
<h2>{ object }</h2>
</div>
);
}
}
export default App;
I want to access my object variable from the on message function and use it as a variable in my render function. How do I approach this?
You need to add local state to your class. State is a fairly foundational part of react and how it is able to reactively rerender components, so it sounds like you need to spend some time reading the docs to familiarize yourself with the basics.
That said, I'll provide an updated version of your code for demonstration purposes. Note that you used client.open when you meant client.onopen, so I've made that correction below:
import "./App.css";
import { w3cwebsocket as W3CWebSocket } from "websocket";
import { Component } from "react";
const client = new W3CWebSocket("ws://xyz:9080/user");
class App extends Component {
constructor(props) {
super(props);
this.state = { object: "" };
}
componentDidMount() {
client.onopen = () => {
console.log("Connected");
};
client.onmessage = (e) => {
const object = JSON.parse(e.data);
this.setState({ object: object });
console.log(object.Snapshot);
};
client.onclose = () => {
console.log("Closed...");
};
}
render() {
return (
<div className="App">
<h2>{this.state.object}</h2>
</div>
);
}
}
export default App;
Also, since it seems that you're probably just starting out with react, I would strongly recommend that instead of the old-style class-based components, you use learn to use hooks and functional components, which is just an overall much cleaner and easier to reason about way to write react code. We could rewrite your code as follows using the useState and useEffect hooks in an App function:
import "./App.css";
import { w3cwebsocket as W3CWebSocket } from "websocket";
import { useEffect, useState } from "react";
export default function App() {
const [object, setObject] = useState("");
useEffect(() => {
const client = new W3CWebSocket("ws://xyz:9080/user");
client.onopen = () => {
console.log("Connected");
};
client.onmessage = (e) => {
const newObj = JSON.parse(e.data);
setObject(newObj);
console.log(newObj.Snapshot);
};
client.onclose = () => {
console.log("Closed...");
};
return () => client.OPEN && client.close();
}, []);
return (
<div className="App">
<h2>{object}</h2>
</div>
);
}
Note per the docs that useEffect with an empty dependency array is more or less equivalent to componentDidMount. Note also that even though client is defined in a local scope, it won't be garbage-collected, because it is referenced in the cleanup closure (the return value of the arrow function passed to useEffect).
Finally, note that I haven't used the websocket package before, so I don't know if your usage is correct or optimal. This answer is about how to manage state in react, not how to use websocket in a react application.

How to reach a Context API method inside of a helper function?

I created a file which would contain helper functions for querying the database. My problem is that I have to get my access token through the Context API but I can't call the useContext hook outside of a functional component. I could place the functions inside one, but I don't need the component, it would be unused. What is the best practice here?
import React, { useContext } from "react";
import axios from "axios";
import { AuthContext } from "../../contexts/auth-context.js";
import { mongoQuery } from "../xhr/QueryMongo";
const { getAccessToken } = useContext(AuthContext);
export async function fetchUserData(userId) {
const sRealmApp = "...";
const CancelTokenLogin = axios.CancelToken;
const sourceLogin = CancelTokenLogin.source();
let token = await getAccessToken("users");
const userQuery = `query {user (query:{_id:"${userId}"}) {name, role, residence }}`;
let queryResult = await mongoQuery(token, sRealmApp, userQuery, sourceLogin);
if (queryResult.data.data !== null && queryResult.data.data.user !== null) {
return queryResult.data.data.user;
} else return false;
//other similar helper functions....
}
(Why I'm creating a new file: I'm refactoring my code because I have a file which has 400 lines of code, but it's not a big project. So I decided to extract code which connects to the database because it's not directly linked to the component.)
You can always provide the context as a parameter for your helper function.
helperFunction.js
fetchUserData(userId, token) {
... rest of code
}
Component.js
Then get the token from your component using useContext
import React, {useContext, useEffect} from 'react';
import context from 'location of context';
import fetchUserData from 'location of helper function';
const Component = () => {
const userId = 123; // Not sure where you are getting this, but for example.
const {getToken} = useContext(context);
useEffect(() => {
fetchUserData(userId, getToken());
}, []);
return (JSX)
};
Although, I don't think this is the best approach. I've done this before and it makes testing a nightmare. Creating a customHook would be a better approach imo.

Infinite loop (react firebase firestore reactfire)

I have the following react component that creates a new document ref and then subscribes to it with the useFirestoreDocData hook.
This hook for some reason triggers an infinite rerender loop in the component.
Can anyone see what might cause the issue?
import * as React from 'react';
import { useFirestore, useFirestoreDocData, useUser } from 'reactfire';
import 'firebase/firestore';
import 'firebase/auth';
import { useEffect, useState } from 'react';
import { Link, useHistory } from 'react-router-dom';
interface ICreateGameProps {
}
interface IGameLobbyDoc {
playerOne: string;
playerTwo: string | null;
}
const CreateGame: React.FunctionComponent<ICreateGameProps> = (props) => {
const user = useUser();
const gameLobbyDocRef = useFirestore()
.collection('GameLobbies')
.doc()
//This for some reason triggers an infinite loop
const { status, data } = useFirestoreDocData<IGameLobbyDoc>(gameLobbyDocRef);
const [newGameId, setNewGameId] = useState('')
const history = useHistory();
useEffect(() => {
async function createGameLobby() {
const gl: IGameLobbyDoc = {
playerOne: user.data.uid,
playerTwo:null
}
if (user.data.uid) {
const glRef = await gameLobbyDocRef.set(gl)
setNewGameId(gameLobbyDocRef.id)
}
}
createGameLobby()
return () => {
gameLobbyDocRef.delete();
}
}, [])
return <>
<h2>Gameid : {newGameId}</h2>
<p>Waiting for second player to join...</p>
<Link to="/">Go Back</Link>
</>
};
export default CreateGame;
The problem is when you're calling doc() without arguments:
firestore creates new document ref each time with new auto-generated id.
you pass this reference to the useFirestoreDocData that is responsible for creating and observing this document.
useFirestoreDocData makes request to the server to inform about new draft document.
server responds to this request with ok-ish response (no id conflicts, db is accessible, etc...).
created observer updates status of the created document
that triggers rerender (since the document data has updated).
on new rerender .doc() creates new document ref
gives it to the useFirestoreDocData and...
I believe you've got the idea.
To break out of this unfortunate loop we should ensure the .doc() call happens only once on the first render and the ref created by the it doesn't change on each rerender. That's exactly what useRef is for:
...
const gameLobbyDocRef = React.useRef(useFirestore()
.collection('GameLobbies')
.doc())
const { status, data } = useFirestoreDocData<IGameLobbyDoc>(gameLobbyDocRef.current);
...

How to share a class instance across a react application?

How to share a class instance across a react application?
I need to use an external library which requires me to instantiate it and use that instance in the application to access various methods/properties,
const instance = new LibraryModule(someInitData);
I am using react functional components in my project. I don't want to re-create instance every time I need to use it (can be thought of a singleton).
How can I share the same instance with all of my components?
Imports are already global, you just need to import the module:
class LibraryModule {
x = 5;
}
const instance = new LibraryModule();
export default instance;
import instance from "./MyLibrary";
import Component from "./Component";
console.log(instance.x);
const App = () => {
useEffect(() => {
console.log(`from App, called last`, instance.x);
}, []);
return <Component />;
};
import instance from "./MyLibrary";
const Component = () => {
useEffect(() => {
instance.x = 10;
console.log(`from component`, instance.x);
}, []);
return <>Component</>;
};
it seems like you are looking for some sort of Dependency Injection,
a thing that isn't really in the react way.
I'd suggest to use the Context Api.
https://reactjs.org/docs/hooks-reference.html#usecontext
import React from 'react';
export const LibraryModuleContext = React.createContext(new LibraryModule);
import React from 'react';
import { LibraryModuleContext } from './library-module';
const App = () => (
<LibraryModuleContextt.Provider>
<Toolbar />
</LibraryModuleContext.Provider>
)
and then later in your code
import React from 'react';
import { LibraryModuleContext } from './library-module';
const FooComponent = () => {
const LibraryModule = useContext(LibraryModuleContext);
return (
<div>Hello {LibraryModule.x}</div>
);
};

How to use React's context API outside of react's component scope : ReactJS

I am using react's context API for storing USER_TOKEN for authentication purposes.
Also I am maintaining a common fetch function in a separate module where I want to use this USER_TOKEN.
And Its obvious that I cannot use this USER_TOKEN inside this module as it is not a react component.
Is there any way I can use this USER_TOKEN inside this fetch function.
I am storing USER_TOKEN into a context API variable after successful sign-in. Yes I know we could pass the variable from context whenever we call this function. But the thing is , Any change in the future will have to change it in all places. So I was wondering If there is only one place where I can do this. Basically the idea is sending this token along with all the API requests, so trying to maintain a common place.
Help would be appreciated
Fetch Module
export module FetchModule {
export async function fetch(obj: any) {
let url = obj.url;
let type = obj.type ? obj.type.toUpperCase() : "GET";
let options: any = {};
options.method = type;
let idToken = obj.token;// Want to retrieve this USER_TOKEN from react's context API
if (idToken) {
options.headers["USER_TOKEN"] = idToken;
}
options.headers = { ...options.headers, ...obj.headers };
const response = await fetch(url, options);
return await response.json();
}
}
create a folder named: Context in the src/components folder
in this folder that you have created (Context ) create a file named index.js
in the index.js file write:
import React, { Component } from 'react';
const AppContext = React.createContext();
export class Provider extends Component {
state = {
token: ''
};
setToken = (token) => {
this.state.token = token;
this.setState();
};
render() {
return (
<AppContext.Provider value = {{
token: this.state.token,
actions: {
setToken: this.setToken
}
}}>
{this.props.children}
</AppContext.Provider>
);
}
}
exoprt const Consumer = AppContext.Consumer;
export const AppContextObject = AppContext;
in the src/index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from "./compomemts/Context/";
import App from './App';
ReactDOM.render(
<Provider>
<App />
</Provider>
, document.getElementById("root")
);
let's say you have login component, in it write down:
import React, { PureComponent } from 'react';
import { Consumer, AppContextObject } from "../Context";
class Login extends PureComponent {
render() {
return (
<Consumer>
{(actions, token) => (
<button className="enter" id="enter-id" onClick={(event) => {
if(token === undifined) {
newToken = 'get the token from your system';
actions.setToken(newToken);
}
}} >
connect
</button>
)}
</Consumer>
)
}
}
Login.contextType = AppContextObject; // This part is important to access context values
SuperAdminContextObject

Categories