We Keep Coding

VueFire this.$databaseBind(...).then is not a function

I'm trying to use returned promise from VueFire method $databaseBind (here is the VueFire doc), but unfortunately and I don't know why I have an error this.$databaseBind(...).then() is not a function.
I know that we can have this error when we try call then on non promise value, but $databaseBind should return a promise.
reproduction in codesandbox https://codesandbox.io/s/strange-borg-y41d0u?file=/src/App.vue
Here is my main.js
import { createApp } from "vue";
import App from "./App.vue";
import { VueFire, VueFireDatabaseOptionsAPI } from "vuefire";
createApp(App)
.use(VueFire, {
modules: [VueFireDatabaseOptionsAPI()],
})
.mount("#app");
package.json
{
"name": "happy-new-year",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.8.3",
"firebase": "^9.15.0",
"vue": "^3.2.13",
"vuefire": "^3.0.0"
},
"devDependencies": {
"#babel/core": "^7.12.16",
"#babel/eslint-parser": "^7.12.16",
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-eslint": "~5.0.0",
"#vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3"
},
}
firebase.js
import { initializeApp } from "firebase/app";
import { getDatabase } from "firebase/database";
import "firebase/database";
import "firebase/storage";
import "firebase/auth";
const config = {};
export const fb = initializeApp(config);
export const db = getDatabase(fb);
and usage
<template>
<div>{{ testObject.$value }}</div>
</template>
<script>
import { ref } from "firebase/database";
import { db } from "#/plugins/firebase";
export default {
name: "App",
data() {
return {
testObject: {},
};
},
mounted() {
this.$databaseBind("testObject", ref(db, path)).then();
},
};
</script>
Do somebody have any suggestion? Thanks a lot!

There was an inner bug of VueFire. They have fixed it already.
https://github.com/vuejs/vuefire/issues/1275

React: How to find a dep inside a node module component for a hook?

React 16.8 | Typescript 3.5
I want to run useEffect to update an array inside App() every time a QR scanner inside a node module imported to the app updates one of its fields.
Alternatively, I would like to receive the data from 'onScan'.
How do you import and use as a dep elements of node module components? There's a page within a file called 'SendPage.jsx' which runs a useState hook called 'setTo()' to update a value 'to'. I'm looking to intercept that 'to' value and use it inside App().
These are my dependencies in node modules. Specifically, inside the "#burner-wallet/modern-ui" there's
"#burner-wallet/assets": "^1.0.0",
"#burner-wallet/core": "^1.0.0",
"#burner-wallet/exchange": "^1.0.0",
"#burner-wallet/modern-ui": "^1.0.9",
"#types/node": "12.0.4",
"#types/react": "*",
"#types/react-dom": "16.8.4",
"#types/react-router-dom": "^4.3.3",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "^3.2.0",
"typescript": "3.5.1",
"universal-cookie": "^4.0.4"
},
This is the package.json inside the "#burner-wallet/modern-ui" module space:
"name": "#burner-wallet/modern-ui",
"version": "1.0.9",
"license": "MIT",
"main": "dist/ModernUI.js",
"types": "dist/ModernUI.d.ts",
"scripts": {
"build": "tsc",
"start-local": "tsc -w",
"start-basic": "tsc -w"
},
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.4.4",
"#babel/plugin-proposal-object-rest-spread": "^7.4.4",
"#babel/preset-typescript": "^7.3.3"
},
"publishConfig": {
"registry": "https://registry.npmjs.org/"
},
"repository": {
"type": "git",
"url": "https://github.com/burner-wallet/burner-wallet-2.git",
"directory": "packages/modern-ui"
},
"dependencies": {
"#burner-wallet/types": "^1.0.2",
"#burner-wallet/ui-core": "^1.0.2",
"#types/clipboard": "^2.0.1",
"#types/color": "^3.0.0",
"#types/ethereumjs-util": "^5.2.0",
"#types/qrcode.react": "^0.8.2",
"#types/react": "*",
"#types/react-qr-reader": "^2.1.2",
"#types/react-router-dom": "^4.3.4",
"#types/styled-components": "4.1.8",
"clipboard": "^2.0.4",
"color": "^3.1.2",
"ethereumjs-util": "^6.1.0",
"qrcode.react": "^0.9.3",
"react-qr-reader": "^2.2.1",
"styled-components": "^5.0.1"
}
}
My app.tsx file:
import React, { useContext, useEffect, useState } from 'react';
import styled from 'styled-components';
import ScanContext from './scancontext';
import { setLocally, getLocallyStoredQRs } from './localstorage';
// import { xdai, dai, eth } from '#burner-wallet/assets';
import { xdai} from '#burner-wallet/assets';
import BurnerCore, { HistoryEvent } from '#burner-wallet/core';
import { InjectedSigner, LocalSigner } from '#burner-wallet/core/signers';
import { InfuraGateway, InjectedGateway, XDaiGateway, } from '#burner-wallet/core/gateways';
import Exchange, { Uniswap, XDaiBridge } from '#burner-wallet/exchange';
import ModernUI from '#burner-wallet/modern-ui';
import { HistoryProps } from '#burner-wallet/core/History';
const core = new BurnerCore({
signers: [new InjectedSigner(), new LocalSigner()],
gateways: [
new InjectedGateway(),
new InfuraGateway(process.env.REACT_APP_INFURA_KEY),
new XDaiGateway(),
],
// TODO use Sai
// assets: [xdai, dai, eth],
assets: [xdai],
});
const exchange = new Exchange({
pairs: [new XDaiBridge(), new Uniswap('dai')],
});
const QRCardsSpace = styled.div`
padding-bottom: 100px;
`;
function App() {
const [newQRs, setQR] = useState('');
// const storedCookieQRs: string[] = getLocallyStoredQRs();
const appUI = <ModernUI
title="Vincenz Burner Wallet"
core={core}
plugins={[exchange]}
/>
useEffect(() => {
// This will be where the addresses are assigned when read
console.log("useEffect");
console.log("newQRs" , newQRs);
var latestToAddress = "0x4f0f4m";
const QRData = [latestToAddress];
setQR(latestToAddress);
setLocally(QRData);
}, [appUI]); // Set here the conditional change to the QR data
return (
<div>
{appUI}
<QRCardsSpace>
<ScanContext />
</QRCardsSpace>
</div>
) };
export default App;

mobx observer suddenly not rerendering when observable changes

My app stopped updating on observable changes and I'm going crazy trying to figure out why. The code below shows only "Counter: 5" on the screen even though the console shows that it is updating. The relevant parts of package.json are:
{
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
},
"dependencies": {
"mobx": "^6.0.4",
"mobx-react": "^7.0.5",
"react": "17.0.0",
"react-dom": "17.0.0",
"react-icons": "^4.1.0",
"react-router-dom": "^5.2.0",
"typescript": "^4.0.3",
},
"devDependencies": {
"babel-preset-mobx": "^2.0.0",
"react-app-rewire-yaml": "^1.1.0",
"react-scripts": "^4.0.1"
}
}
import React from "react";
import ReactDOM from "react-dom";
import "./index.css"
import { inject, observer, Provider } from "mobx-react";
import { observable } from "mobx";
class TestModel
{
#observable counter = 5;
start() {
setInterval(() => {this.counter++; console.log(this.counter)}, 1000);
}
}
#inject("testModel")
#observer
class TestPage extends React.Component<{testModel?: TestModel}>
{
render() {
return <div><h1>Counter: {this.props.testModel.counter}</h1></div>
}
}
const theTestModel = new TestModel();
theTestModel.start();
ReactDOM.render(
<Provider testModel={theTestModel}>
<TestPage />
</Provider>,
document.getElementById("root")
);
EDIT:
Turns out I needed to call makeObservable(this) in the constructor of my TestModel, plus I had to pull out the side effect into an action context like this:
#action incrementCounter = () => {
this.counter++;
console.log(this.counter)
}
start() {
setInterval(this.incrementCounter, 1000);
}

Since mobx#6.0.0 decorators are not enough. You have to make your class observable manually with makeObservable as well.
import { observable, makeObservable } from "mobx";
class TestModel {
#observable counter = 5;
constructor() {
makeObservable(this);
}
start() {
setInterval(() => {this.counter++; console.log(this.counter)}, 1000);
}
}

redux-form is not showing its all props values

i want to use all eventHandler of redux-form as show in sameple output image but its not coming as a props so i facing undefine error now what i can do to solve the issue
i have imported reducers in index.js file of src folder and create store
package.json
{
"name": "reactjs",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.11.0",
"#material-ui/icons": "^4.9.1",
"prop-types": "^15.7.2",
"react": "^16.11.0",
"react-dom": "^16.11.0",
"react-router-dom": "^5.2.0",
"react-scripts": "3.2.0",
"react-transition-group": "^4.4.1",
"redux-form": "^8.3.6"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
}
reducers/index.js
import { reducer } from 'redux-form';
import { combineReducers } from "redux";
export default combineReducers({
reducer
})
TouristRegistration.js
import React, { Component } from 'react';
import { reduxForm, Field } from "redux-form";
import { Button } from "#material-ui/core"
import RegistrationField from "./ReaperComponent"
class TutiorsRegistrationForm extends Component {
handlenextpage = () => {
this.props.nextPage()
}
render() {
return (
<form>
<Field
type="text"
name="FirstName"
component={RegistrationField}
/>
<Button
color="primary"
variant="contained"
type="submit"
>Next
</Button>
</form>
);
}
}
const validate = (value) => {
const errors = {}
if (!value.FirstName) {
errors.FirstName = "Required"
}
console.log("error " + JSON.stringify(errors));
return errors;
}
export default reduxForm({
validate: validate,
form: 'TutiorsRegistrationForm'
})(TutiorsRegistrationForm);
RegistrationField.js
import React from 'react';
import { TextField } from "#material-ui/core"
const ReaperComponent = (props) => {
console.log("props " + JSON.stringify(props));
return (
<TextField />
);
}
export default ReaperComponent;
output
of instructor
output in my case
props {"input":{"name":"FirstName","value":""},"meta":{"active":false,"asyncValidating":false,"autofilled":false,"dirty":false,"form":"TutiorsRegistrationForm","invalid":false,"pristine":true,"submitting":false,"submitFailed":false,"touched":false,"valid":true,"visited":false}}

Redux action creator getting "TypeError: dispatch(...) is not a function" (code attached)?

Any ideas why I am getting the following this "dispatch is not a function" error in my listEventsActionCreator function when it calls "dispatch(listEventsRequestedAction())" ???
If I comment out the lines in this method after the dispatch it actually then works which is strange.
Using react-create-app, with redux, typescript, thunk.
ERROR:
TypeError: dispatch(...) is not a function
CODE:
export function listEventsRequestedAction() {
return {
type: PlannerEventTypes.LIST_EVENTS_REQUESTED
}
}
export const listEventsReceivedAction = (events:PlannerEvent[]) => {
return {
type: PlannerEventTypes.LIST_EVENTS_RECEIVED,
events
}
}
export const listEventsErrorAction = (err:any) => {
return {
type: PlannerEventTypes.LIST_EVENTS_ERROR,
error: err
}
}
export const listEventsActionCreator = () => {
return (dispatch: any) => {
dispatch(listEventsRequestedAction()) // <== ERROR: TypeError: dispatch(...) is not a function
(API.graphql(graphqlOperation(listEvents)) as Promise<any>).then((results:any) => {
const events = results.data.listEvents.items
dispatch(listEventsReceivedAction(events))
}).catch((err:any) => {
// console.log("ERROR")
dispatch(listEventsErrorAction(err))
})
}
}
package.json
{
"name": "planner",
"version": "0.1.0",
"private": true,
"dependencies": {
"#types/graphql": "^14.0.7",
"#types/react-redux": "^6.0.10",
"aws-amplify": "^1.1.19",
"aws-amplify-react": "^2.3.0",
"date-fns": "^1.30.1",
"eslint": "^5.9.0",
"konva": "^2.5.1",
"moment": "^2.22.2",
"moment-timezone": "^0.5.23",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-draggable": "^3.0.5",
"react-konva": "^16.6.31",
"react-moment": "^0.8.4",
"react-redux": "^5.1.1",
"react-scripts-ts": "3.1.0",
"redux": "^4.0.1",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0"
},
"scripts": {
"start": "react-scripts-ts start",
"build": "react-scripts-ts build",
"test": "react-scripts-ts test --env=jsdom",
"eject": "react-scripts-ts eject"
},
"devDependencies": {
"#types/jest": "^23.3.10",
"#types/node": "^10.12.10",
"#types/react": "^16.7.10",
"#types/react-dom": "^16.0.11",
"#types/redux-logger": "^3.0.7",
"typescript": "^3.2.1"
}
}
index.tsx
import * as React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { applyMiddleware, createStore } from 'redux'
import App from './App'
import './index.css'
import rootReducer from './reducers/index'
import registerServiceWorker from './registerServiceWorker'
import { createLogger } from 'redux-logger'
import thunkMiddleware from 'redux-thunk'
const loggerMiddleware = createLogger()
const store = createStore (
rootReducer,
applyMiddleware(
thunkMiddleware, // lets us dispatch() functions
loggerMiddleware // neat middleware that logs actions
)
)
render(
<Provider store={store}>
<App testStr='test' />
</Provider>
,document.getElementById('root') as HTMLElement
);
registerServiceWorker();

The problem is because of the syntax that you followed. You don't have a semicolon after dispatch(listEventsRequestedAction()) and since you follow it up with (API.graphql(graphqlOperation(listEvents) as Promise<any>) while compiling it is evaluted as dispatch(listEventsRequestedAction())(API.graphql(graphqlOperation(listEvents) as Promise<any>) and hence it gives you the error.
Adding a semicolon after dispatch(listEventsRequestedAction()) would work
export const listEventsActionCreator = () => {
return (dispatch: any) => {
dispatch(listEventsRequestedAction());
(API.graphql(graphqlOperation(listEvents)) as Promise<any>).then((results:any) => {
const events = results.data.listEvents.items
dispatch(listEventsReceivedAction(events))
}).catch((err:any) => {
// console.log("ERROR")
dispatch(listEventsErrorAction(err))
})
}
}
P.S. The semicolon is not required in Javascript and would not cause a
js error on its own. It could however cause an error if concatenating
with other scripts.