I'm new to React so please bear with my naming conventions:
How can I use the same name of 2 props from two different 3rd party components?
import { useWallet} from "#solana/wallet-adapter-react";
import { useMoralis } from "react-moralis";
export const SendOneLamportToRandomAddress = () => {
const { publicKey, sendTransaction } = useWallet();
const { publicKey } = useMoralis();
}
It looks as if {publicKey as pK} won't work and neither does {pK : publicKey}
What am I missing?
thanks
Related
import { PrismaClient } from '#prisma/client';
export const prisma = new PrismaClient();
As you may know this issue was being worked on here.
In the mean time what you could do to proceed with your tests is to use dependency injection with a mocked prisma client and to move the deconstruction line
const { PrismaClient } = pkg;
to where your class or function uses it inside an if, i.e:
class MyClass {
prisma: Prisma.PrismaClient
def constructor(props) {
if (!props?.prisma) {
const { PrismaClient } = Prisma
this.prisma = new PrismaClient({
log: ['error']
})
} else {
this.prisma = props.prisma
}
}
}
I know its not ideal but hopefully this does the trick.
to mock the PrismaClient you could mock it using jest-mock-extended like so
const mockPrisma = mockDeep<OriginalPrismaClient>();
I need help to export the constants. I am getting different errors when i try to search for this on google or other related topics at stackoverflow.
This is my Printer.jsx
import React, { useRef, useState } from "react";
// export individual features (can export var, let,
// const, function, class)
export let ePosDev = new window.epson.ePOSDevice();
export const ePosDevice = useRef();
export const printer = useRef();
export function connectFunction() {
ePosDevice.current = ePosDev;
ePosDev.connect("192.168.1.254", 8080, (data) => {
if (data === "OK") {
ePosDev.createDevice(
"local_printer",
ePosDev.DEVICE_TYPE_PRINTER,
{ crypto: true, buffer: false },
(devobj, retcode) => {
if (retcode === "OK") {
printer.current = devobj;
} else {
throw retcode;
}
}
);
} else {
throw data;
}
}); };
I need to add the const connect to the App.js so that if the App is starting the connection is also starting. The second is that i need to add the const print to ReactB.js-file so if content of ReactB.js-page is loading the print-request should be send.
Thanks for your help! Stuck at this since 5 hours and dont know how to deal with this problems.
It seems your main issue stems around how to export constants. I recommend checking out MDN for more info: https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export
Below is an excerpt on named exports that is relevant to your scenario.
// export features declared earlier
export { myFunction, myVariable };
// export individual features (can export var, let,
// const, function, class)
export let myVariable = Math.sqrt(2);
export function myFunction() { ... };
So for your example, it would just be a matter of adding declaring the const with export const connect = value; or adding export { connect }; after it is declared.
I am using the composition api plugin for vue2 (https://github.com/vuejs/composition-api) to reuse composables in my app.
I have two components that reuse my modalTrigger.js composable, where I'd like to declare some sort of shared state (instead of using a bloated vuex state management).
So in my components I do something like:
import modalTrigger from '../../../../composables/modalTrigger';
export default {
name: 'SearchButton',
setup(props, context) {
const { getModalOpenState, setModalOpenState } = modalTrigger();
return {
getModalOpenState,
setModalOpenState,
};
},
};
And in my modalTrigger I have code like:
import { computed, ref, onMounted } from '#vue/composition-api';
let modalOpen = false; // needs to be outside to be accessed from multiple components
export default function () {
modalOpen = ref(false);
const getModalOpenState = computed(() => modalOpen.value);
const setModalOpenState = (state) => {
console.log('changing state from: ', modalOpen.value, ' to: ', state);
modalOpen.value = state;
};
onMounted(() => {
console.log('init trigger');
});
return {
getModalOpenState,
setModalOpenState,
};
}
This works, but only because I declare the modalOpen variable outside of the function.
If I use this:
export default function () {
const modalOpen = ref(false); // <------
const getModalOpenState = computed(() => modalOpen.value);
...
It is not reactive because the modalTrigger is instantiated twice, both with it's own reactive property.
I don't know if that is really the way to go, it seems, that I am doing something wrong.
I also tried declaring the ref outside:
const modalOpen = ref(false);
export default function () {
const getModalOpenState = computed(() => modalOpen.value);
But this would throw an error:
Uncaught Error: [vue-composition-api] must call Vue.use(plugin) before using any function.
So what would be the correct way to achieve this?
I somehow expected Vue to be aware of the existing modalTrigger instance and handling duplicate variable creation itself...
Well, anyway, thanks a lot in advance for any hints and tipps.
Cheers
Edit:
The complete header.vue file:
<template>
<header ref="rootElement" :class="rootClasses">
<button #click="setModalOpenState(true)">SET TRUE</button>
<slot />
</header>
</template>
<script>
import { onMounted, computed } from '#vue/composition-api';
import subNavigation from '../../../../composables/subNavigation';
import mobileNavigation from '../../../../composables/mobileNavigation';
import search from '../../../../composables/searchButton';
import { stickyNavigation } from '../../../../composables/stickyNav';
import metaNavigation from '../../../../composables/metaNavigation';
import modalTrigger from '../../../../composables/modalTrigger';
export default {
name: 'Header',
setup(props, context) {
const { rootElement, rootClasses } = stickyNavigation(props, context);
mobileNavigation();
subNavigation();
search();
metaNavigation();
const { getModalOpenState, setModalOpenState } = modalTrigger();
onMounted(() => {
console.log('Header: getModalOpenState: ', getModalOpenState.value);
setModalOpenState(true);
console.log('Header: getModalOpenStat: ', getModalOpenState.value);
});
return {
rootClasses,
rootElement,
getModalOpenState,
setModalOpenState,
};
},
};
</script>
The composition API is setup somewhere else where there are Vue components mounted a bit differently than you normally would.
So I can't really share the whole code,but it has this inside:
import Vue from 'vue';
import CompositionApi from '#vue/composition-api';
Vue.use(CompositionApi)
The composition API and every other composable works just fine...
I'm wondering if it's possible to evaluate a templateLiteral as a variable name and then use it to reference an import.
So far this is my code:
//These are redux action types
import * as fileTypeOneActions from "./fileTypeOne/actionTypes"
import * as fileTypeTwoActions from "./fileTypeTwo/actionTypes"
import * as fileTypeThreeActions from "./fileTypeThree/actionTypes"
export const updateApiResponse = (reducer, apiResponse) => {
//reducer can be"fileTypeOne", "fileTypeTwo", or "fileTypeThree" as arguments
const reducerKey = eval(`${reducer}Actions`)
return {
type: reducerKey.UPDATE_API_RESPONSE,
apiResponse: apiResponse,
}
}
Based on the string passed as 'reducer' argument, I want to reference the correct import and return correct redux action type as such. Any ideas?
the eval statement above is not working.
//These are redux action types
import * as fileTypeOneActions from "./fileTypeOne/actionTypes"
import * as fileTypeTwoActions from "./fileTypeTwo/actionTypes"
import * as fileTypeThreeActions from "./fileTypeThree/actionTypes"
const reducerMap = {
1:fileTypeOneActions,
2:fileTypeTwoActions,
3:fileTypeThreeActions
}
export const updateApiResponse = (reducer, apiResponse) => {
//reducer can be"fileTypeOne", "fileTypeTwo", or "fileTypeThree" as arguments
//const reducerKey = eval(`${reducer}Actions`)
const reducerKey = reducerMap(reducer) // reducer can be 1,2,3 or any other key
return {
type: reducerKey.UPDATE_API_RESPONSE,
apiResponse: apiResponse,
}
}
try to avoid eval. It's too dangerous.
Slightly different version that maps better to the input you have:
//These are redux action types
import * as fileTypeOneActions from "./fileTypeOne/actionTypes"
import * as fileTypeTwoActions from "./fileTypeTwo/actionTypes"
import * as fileTypeThreeActions from "./fileTypeThree/actionTypes"
const actions = {
fileTypeOneActions,
fileTypeTwoActions,
fileTypeThreeActions
};
export const updateApiResponse = (reducer, apiResponse) => {
const reducerKey = actions[`${reducer}Actions`];
return {
type: reducerKey.UPDATE_API_RESPONSE,
apiResponse: apiResponse,
}
}
Using an object as a map is the way to go. I don't see how this isn't dynamic (as claimed in your comment to the other answer).
I have a backend that calculates work shifts.
I am trying to post some required user input with a module in services/shifts.
The getAll method works fine, but posting throws an error
TypeError: _services_shifts__WEBPACK_IMPORTED_MODULE_2__.default.postData is not a function
Shiftservice module:
import axios from 'axios'
const baseUrl = '...'
const getAll = () => {
const request = axios.get(baseUrl)
return request.then(response => response.data)
}
const postData = newObject => {
const request = axios.post(baseUrl, newObject)
return request.then(response => response.data)
}
export default {getAll, postData}
I have a button that triggers the following calling code on click:
import shiftService from './services/shifts'
const postData = (event) => {
event.preventDefault()
const sampleObject = {
sampleField: sample
}
shiftService
.postData(sampleObject)
.then(returnedData => {
console.log(returnedData)
})
}
When execution reaches shiftService.postData, the error is thrown.
I am really confused since I am basically copying some older project of mine which works, but here I just don't find the problem. Thank you in advance for helping a newcomer!
Modules provide special export default (“the default export”) syntax to make the “one thing per module” way look better.There may be only one export default per file.And we may neglect the name of the class in the following example.
//Module1
export default class{
}
And then import it without curly braces with any name:
//Module2
import anyname from './Module1'
Your scenario is different having two functions.You can either export default one function
export default getAll
and normal export the other function.
export postData
and when importing
import{ default as getAll,postData} from './yourModule'
OR
Remove default here in Shiftservice module and export normally:
import axios from 'axios'
const baseUrl = '...'
const getAll = () => {
const request = axios.get(baseUrl)
return request.then(response => response.data)
}
const postData = newObject => {
const request = axios.post(baseUrl, newObject)
return request.then(response => response.data)
}
export {getAll, postData}
Importing in your module
import {getAll,PostData} from './Module1'
or
import * as shiftService from './Module1'
and then use shiftServer.postData().....
Okay, I am embarrassed of the solution. I was just editing an earlier version of shiftService from a wrong folder, and the imported service only had the get method in it...
So my code actually works if placed correctly. Thank you for your time, and thanks for sharing alternative ways that must work aswell.
I think its becuse your declaring the function as arrow functions
and export it this way:
export default {getAll, postData}
you need to declare them as a normal functions
function postData(){
}
that should work