I am using Meteor 1.5 and I am trying to subscribe to an i18n collection using these packages :
TAP:i18n
TAP:i18n-db
I ran meteor create --full <appname> to have the full scaffolded app.
Then I removed insecure and autopublish packages and added aldeed:simple-schema, audit-argument-checks and mdg:validated-method as recommended security mesures.
// imports/startup/server/fixtures.js
import { Meteor } from 'meteor/meteor';
import { Links } from '../../api/links/links.js';
Meteor.startup(() => {
// if the Links collection is empty
if (Links.find().count() === 0) {
const data = [
{
title: 'Do the Tutorial',
url: 'https://www.meteor.com/try',
i18n: {
'fr': {
title: 'FR Do the Tutorial',
},
},
createdAt: new Date(),
},
{
...
},
];
data.forEach(link => Links.insert(link));
}
});
// imports/api/links/links.js
import { Mongo } from 'meteor/mongo';
export const Links = new TAPi18n.Collection('links');
// imports/api/links/server/publications.js
import { Meteor } from 'meteor/meteor';
import { TAPi18n } from 'meteor/tap:i18n';
import { Links } from '../links.js';
TAPi18n.publish('links.all', function () {
return Links.i18nFind();
});
// client/main.js
import { TAPi18n } from 'meteor/tap:i18n';
import '/imports/startup/client';
import '/imports/startup/both';
Meteor.startup(function() {
TAPi18n.setLanguage('en');
});
// imports/ui/components/info/info.js
import { Links } from '/imports/api/links/links.js';
import { Meteor } from 'meteor/meteor';
import { TAPi18n } from 'meteor/tap:i18n';
import './info.html';
Template.info.onCreated(function () {
TAPi18n.subscribe('links.all');
});
Template.info.helpers({
links() {
return Links.find({});
},
});
...
In Chrome console using Meteor Dev-Tool, I can see this :
Chrome Meteor Dev-Tool screenshot
Basically it says unsubscribed from links.all (unrecognized subscription)
In the server console, I can see this :
Meteor Server Console
I did some work to include check statement in links.js above but even when I check all fields, the app can't subscribe to the publication.
Any idea or help would be much appreciated.
The packages are not mandatory for me if there is a better example/repo somewhere I can actually look at.
I thought you could not mix them up together. Use either TAP:i18n-db or TAP:i18n.
For examples have a look at the git repositories:
https://github.com/TAPevents/tap-i18n
https://github.com/TAPevents/tap-i18n-db
There are several examples you can have a look and decide to use only one of the packages.
Related
Here, I use both isValidAddress and isValidSeed from utils. isValidSeed throws an error, but isValidAddress does not after being used in a similar fashion.
I get no other errors in the code.
if(process.argv.length < 3) {
console.log("Usage: node dist/index <r-address>")
process.exit(1)
}
import { XrplClient } from "xrpl-client"
import { derive, utils, XRPL_Account } from "xrpl-accountlib"
const client = new XrplClient("wss://s.altnet.rippletest.net:51233")
const main =async () => {
const data = await client.send({
id: 1,
command: "account_info",
account: process.argv[2]
})
console.log(data)
//checking isValidAddress usage
if(!utils.isValidAddress(data.account_data.Account)) {
console.log("Invalid r-address")
process.exit(1)
}
console.log("Valid r-address")
//checking isValidSeed usage
if(!utils.isValidSeed(process.argv[2])) {
console.log("Invalid Seed")
process.exit(1)
}
}
main()
which version of the xrpl-accountlib library do you use?
There was a fix regarding the isValidSeed method around December 2021:
Make sure to use the latest version of the xrpl-accountlib.
I have been fiddling with moving a tutorial I did in Vue to Nuxt. I have been able to get everything working, however I feel I'm not doing it the "proper way". I have added the Nuxt axios module, but wasnt able to get it working, so I ended up just using the usual axios npm module. Here is my store:
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(Vuex)
Vue.use(VueAxios, axios)
export const state = () => ({
events: []
})
export const mutations = {
setEvents: (state, events) => {
state.events = events
}
}
export const actions = {
loadEvents: async context => {
let uri = 'http://localhost:4000/events';
const response = await axios.get(uri)
context.commit('setEvents', response.data)
}
}
I would like to know how to re-write this store using the #nuxtjs/axios module. I also didnt think I'd need to import vuex here, but if I dont, my app doesn't work.
Thanks for any help!
Using the #nuxtjs/axios module, you can configure axios inside your nuxt.config.js:
// nuxt.config.js
export default {
modules: [
'#nuxtjs/axios',
],
axios: {
// proxy: true
}
}
You can use it inside your store (or components) with this.$axios
// In store
{
actions: {
async getIP ({ commit }) {
const ip = await this.$axios.$get('http://icanhazip.com')
commit('SET_IP', ip)
}
}
}
I am using React Native to build an app that relies on MongoDB Stitch for authentication. More often than not, the app crashes because the client object has not yet loaded when I use it in the following line of code. The error I get is the infamous TypeError: undefined is not an object followed by evaluating 'client.auth.user'.
import React from 'react';
import { View, Text } from 'react-native';
import { Stitch } from 'mongodb-stitch-react-native-sdk';
const APP_ID = '<my app ID>';
const client = Stitch.hasAppClient(APP_ID)
? Stitch.getAppClient(APP_ID)
: Stitch.initializeDefaultAppClient(APP_ID);
const { user } = client.auth;
const Home = () => {
return (
<View style={styles.home}>
<Text>HOME</Text>
<Text>Hi {user.profile.data.email}</Text>
</View>
);
};
export default Home;
const styles = {
home: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center'
}
};
The example provided with the MongoDB Stitch NPM package uses componentDidMount (see here), but I am trying to make this work using Hooks. I have tried useEffect, a bunch of if statements, async/await, placing the object in state with useState; No luck.
So yeah, you can use useEffect hook to instantiate the client and get the user info.
useEffect(() => {
_loadClient();
}, []);
const [client,setClient] = useState({});
const [user,setUser] = useState({});
_loadClient() {
Stitch.initializeDefaultAppClient('<your-client-app-id>').then(client => {
setClient(client);
if(client.auth.isLoggedIn) {
setUser( client.auth.user)
}
});
}
That should do it.
I would like to implement a custom Toaster component into my NuxtJs application by this method this.$toast.show({}) What is the best way of approaching this? Sadly I can't find any documentation on this.
Sorry, I arrive one year late...
I had the same proplem. Here is my code:
The index of my plugin (index.js ; Nofification.vue is a classical Vue component):
import Notifications from './Notifications.vue'
const NotificationStore = {
state: [], // here the notifications will be added
settings: {
overlap: false,
horizontalAlign: 'center',
type: 'info',
timeout: 5000,
...
},
setOptions(options) {
this.settings = Object.assign(this.settings, options)
},
removeNotification(timestamp) {
...
},
addNotification(notification) {
...
},
notify(notification) {
...
},
}
const NotificationsPlugin = {
install(Vue, options) {
const app = new Vue({
data: {
notificationStore: NotificationStore,
},
methods: {
notify(notification) {
this.notificationStore.notify(notification)
},
},
})
Vue.prototype.$notify = app.notify
Vue.notify = app.notify
Vue.prototype.$notifications = app.notificationStore
Vue.component('Notifications', Notifications)
if (options) {
NotificationStore.setOptions(options)
}
},
}
export default NotificationsPlugin
Here I call my plugin and inject it in Nuxt:
import Notifications from '~/components/NotificationPlugin'
Vue.use(Notifications)
export default (context, inject) => {
inject('notify', Vue.notify)
}
In my case, I use it in another plugin (nuxtjs axios).
import NOTIFICATIONS from '~/constants/notifications'
export default function ({ error, $axios, app }) {
// Using few axios helpers (https://axios.nuxtjs.org/helpers):
$axios.onError((axiosError) => {
// eslint-disable-next-line no-console
console.log('Axios: An error occured! ', axiosError, axiosError.response)
if (process.server) {
...
} else {
app.$notify({
message: 'Mon message',
timeout: NOTIFICATIONS.DEFAULT_TIMEOUT,
icon: 'tim-icons icon-spaceship',
horizontalAlign: NOTIFICATIONS.DEFAULT_ALIGN_HORIZONTAL,
verticalAlign: NOTIFICATIONS.DEFAULT_ALIGN_VERTICAL,
type: 'success',
})
console.log('PRINT ERROR')
return Promise.resolve(true)
}
})
}
As I injected it, I think I could have done export default function ({ error, $axios, app, $notify }) { and directly use $notify (and not the app.$notify).
If you want a better understanding, feel free to consult #nuxtjs/toast which works the same way:
https://github.com/nuxt-community/community-modules/blob/master/packages/toast/plugin.js
And the matching Vue component:
https://github.com/shakee93/vue-toasted/blob/master/src/index.js
Good luck, this is not easy stuff. I'll try to add something easier to understand in the docs!
you can find in this package https://www.npmjs.com/package/vue-toasted
installation
npm install vue-toasted --save
make a file as name toast.js in plugin folder
toast.js
import Vue from 'vue';
import Toasted from 'vue-toasted';
Vue.use(Toasted)
add this plugin to nuxt.config.js
plugins: [
{ src: '~/plugins/toast', ssr: false },
],
now you able to use in your methods like this
this.$toasted.show('hello i am your toast')
hope this helps
A Meteor/React noob here, going through the Meteor-React tutorial and got stuck on step 3. My problem is that the data is not being displayed in the browser, although it exists in the db.
Here is my imports/ui/App.jsx:
import React, { Component, PropTypes } from 'react';
import { createContainer } from 'meteor/react-meteor-data';
import { Tasks } from '../api/tasks.js';
import Task from './Task.jsx';
class App extends Component {
renderTasks() {
return this.props.tasks.map((task) => (
<Task key={task._id} task={task} />
));
}
render() {
return (
<div className="container">
<header>
<h1>Todo List</h1>
</header>
<ul>
{this.renderTasks()}
</ul>
</div>
);
}
}
App.propTypes = {
tasks: PropTypes.array.isRequired,
};
export default createContainer(() => {
return {
tasks: Tasks.find({}).fetch(),
};
}, App);
No errors show up in console.
Basically this.props.tasks returns empty array. But db.tasks.find({}) in console shows records. Without changing much around, if I hardcode Tasks records, they display alright, so the issue isn't with Task component. Anyone can help here? Would much appreciate.
client/main.jsx:
import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
import App from '../imports/ui/App.jsx';
Meteor.startup(() => {
render(<App />, document.getElementById('render-target'));
});
package.json:
{
"name": "simple-todos",
"private": true,
"scripts": {
"start": "meteor run"
},
"dependencies": {
"meteor-node-stubs": "~0.2.0",
"react": "^15.1.0",
"react-addons-pure-render-mixin": "^15.1.0",
"react-dom": "^15.1.0"
}
}
npm version 3.3.12
node version 5.6.0
As of your description from, it seems that your database is not accessible on both server & client. May be you forgot to add the reference of your database in the server side. try to import your tasks main.js file of your server.
Make sure your server/main.js has the following line:
import '../imports/api/tasks.js';