How to close Realm when I export it and use it with Promise? - react-native

I have 2 questions.
#1:
I found this code on the internet and tried to study it, all this code will be in a .js file, and when I call all the functions in the main .js, the app works fine, but I was reading in the docs that I need to close Ream after use it, and I was trying to do it, but I can’t use realm.close() anywhere, can someone explain how to implement closure please? Sorry for my English, I really tried to explain this.
import Realm from "realm";
export const TODOLIST_SCHEMA = "TodoList";
export const TODO_SCHEMA = "Todo";
export const TodoListSchema = {
name: TODO_SCHEMA,
primaryKey: "_id",
properties: {
_id: "int",
title: { type: "string", indexed: true },
description: "string",
done: { type: "bool", default: false },
}
};
export const TodoSchema = {
name: TODOLIST_SCHEMA,
primaryKey: "_id",
properties: {
_id: "int",
title: "string",
description: "string",
creationDate: "date",
todos: { type: "list", objectType: TODO_SCHEMA },
},
};
const databaseOptions = {
path: "todoList.realm",
schema: [TodoListSchema, TodoSchema],
schemaVersion: 0,
}
export const insertNewTodoList = newTodoList => new Promise((resolve, reject) => {
Realm.open(databaseOptions).then(realm => {
realm.write(() => {
realm.create(TODOLIST_SCHEMA, newTodoList);
resolve(newTodoList);
});
}).catch((error) => reject(error));
});
export const updateTodoList = todoList => new Promise((resolve, reject) => {
Realm.open(databaseOptions).then(realm => {
realm.write(() => {
let updatingTodoList = realm.objectForPrimaryKey(TODOLIST_SCHEMA, todoList._id);
updatingTodoList.title = todoList.title;
updatingTodoList.description = todoList.description;
resolve();
});
}).catch((error) => reject(error));
});
export const deleteTodoList = todoListId => new Promise((resolve, reject) => {
Realm.open(databaseOptions).then(realm => {
realm.write(() => {
let deletingTodoList = realm.objectForPrimaryKey(TODOLIST_SCHEMA, todoListId);
realm.delete(deletingTodoList);
resolve();
});
}).catch((error) => reject(error));
});
export const deleteAllTodoList = () => new Promise((resolve, reject) => {
Realm.open(databaseOptions).then(realm => {
realm.write(() => {
let allTodoList = realm.objects(TODOLIST_SCHEMA);
realm.delete(allTodoList);
resolve();
});
}).catch((error) => reject(error));
});
export const queryAllTodoList = () => new Promise((resolve, reject) => {
Realm.open(databaseOptions).then(realm => {
realm.write(() => {
let allTodoList = realm.objects(TODOLIST_SCHEMA);
resolve(allTodoList);
});
}).catch((error) => reject(error));
});
export default new Realm(databaseOptions);
2#
From the previous code I modified the options to make it simpler and it works fine in a simple CRUD of notes, but I wanted to know if it is poorly structured and it should be 2 schematics as above.
export const NOTELIST_SCHEMA = "NotaList";
export const NoteListSchema = {
name: NOTELIST_SCHEMA,
primaryKey: "_id",
properties: {
_id: "int",
title: "string",
description: "string",
creationDate: "date",
}
};
const databaseOptions = {
path: "NotaList.realm",
schema: [NoteListSchema],
schemaVersion: 0,
}

Related

Unknown action type in Nuxt Vuex store

I have a problem calling the action from vuex. Everytime I try to access the loginUser action I get an error 'unknown action type' from vuex. maybe I'm not calling it the right way. Please tell me what's wrong with my code.
store: user.js
import axios from 'axios'
export const state = () => ({
users: [],
loggedIn: false,
})
export const getters = {
getLoggedIn: (state) => { return state.loggedIn },
}
export const actions = {
loginUser({ commit }, payload){
if(state.loggedIn){
console.log("you're already logged in!")
}else{
return new Promise(async(resolve, reject) => {
const { data } = await axios.post('/api/users/login-admin', {
login: payload.login,
password: payload.password
})
if(data.success){
commit("loggedIn", true)
resolve()
}else{
commit("loggedIn", false)
reject('an error has ocurred')
}
return data.success
}).catch(err => alert(errCodes(err.code)))
}
},
}
export const mutations = {
setLoggedIn(state, payload) {
state.loggedIn = payload
}
}
login.vue
computed: {
...mapGetters(['getCount'] , {user: 'getLoggedIn'}),
...mapActions([
'loginUser'
]),
},
methods: {
onSubmit: function(){
this.$store.dispatch({
type: 'loginUser',
email: this.login,
pass: this.pass
}).then(()=>{
this.$router.push('../admin_2065')
this.onReset()
}).catch(e => console.log(e))
},
onReset(){
this.login = ''
this.pass = ''
this.$nextTick().then(() => {
this.ready = true
})
}
},
error:
any help will be appreciated, thanks.
mapActions should be inside the methods option and add the namespace user/ :
computed: {
...mapGetters(['getCount'] , {user: 'getLoggedIn'}),
},
methods: {
...mapActions([
'user/loginUser'
]),
onSubmit: function(){
this['user/loginUser']({
email: this.login,
pass: this.pass
}).then(()=>{
this.$router.push('../admin_2065')
this.onReset()
}).catch(e => console.log(e))
},
onReset(){
this.login = ''
this.pass = ''
this.$nextTick().then(() => {
this.ready = true
})
}
},

Vuejs Vuex sometimes initial state not working Error: [Vue warn]: Error in render: "TypeError: Cannot read property 'Any_Variable' of undefined"

Other pages are working fine. Only facing issue with this file. May be I am coding wrong.
Store file is included in app.js file as other pages are working I have not included it.
Here Sometimes I get undefined MDU_Number. Sometimes it work fine. I am new to vue js.
Image of error that I am receving:
This is my vue template
<div class="card-body">
<div class="form-group row">
<label class="col-sm-4 col-form-label">MDU Number</label>
<div class="col">
<input
name="MDU_Number"
:value="mduprofile.MDU_Number"
#input="updateMDUNumber"
type="text"
class="form-control"
placeholder="Enter MDU Number Ex:GJXXCHXXXX"
required
/>
</div>
</div>
</div>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
data() {
return {
};
},
created() {
this.fetchForMDU();
},
destroyed() {
this.resetState();
},
computed: {
...mapGetters("MDUSingle", [
"loading",
"country",
"area",
"product",
"mduprofile",
]),
},
methods: {
...mapActions("MDUSingle", [
"resetState",
"fetchForMDU",
"storeMDU",
"setMDUNumber",
]),
submitForm() {
this.storeMDU()
.then(() => {
this.resetState();
this.$eventHub.$emit(
"create-success",
"Created",
"MDU created successfully"
);
})
.catch((error) => {
console.log(error);
});
},
updateMDUNumber(e) {
this.setMDUNumber(e.target.value);
},
},
};
</script>
This is store file name single.js and I have included it in app.js file
MDU_Number should go for null value but it goes for undefined. So I think it is not initialized properly. There are many other variables but for simplicity purpose I have included only one.
What can be the issue?
function initialState() {
return {
mduprofile: {
MDU_Number: null,
},
country: [],
area: [],
product: [],
loading: false
};
}
const getters = {
country: state => state.country,
area: state => state.area,
product: state => state.product,
loading: state => state.loading,
mduprofile: state => state.mduprofile
}
const actions = {
fetchForMDU({ commit }) {
return new Promise((resolve, reject) => {
axios.get('/get/detail/for/mdu')
.then((response) => {
let detail = response.data;
commit('setCountryAll', detail.country);
commit('setStateAll', detail.state);
commit('setProductAll', detail.product);
}).catch(error => {
reject(error);
}).finally(() => {
resolve();
});
});
},
storeMDU({ commit, state, dispatch }) {
commit('setLoading', true);
dispatch('Alert/resetState', null, { root: true });
return new Promise((resolve, reject) => {
let params = _.cloneDeep(state.mduprofile);
axios.post('/save-mdu-profile', params)
.then((response) => {
resolve();
})
.catch(error => {
commit('setLoading', false);
let message = error.response.data.message || error.message;
let errors = error.response.data.errors;
dispatch('Alert/setAlert',
{ message: message, errors: errors, color: danger },
{ root: true });
reject(error);
}).finally(() => {
commit('setLoading', false);
});
});
},
fetchData({ commit }, value) {
axios.get('/mdu/profile/' + value)
.then((response) => {
commit('setAll', response.data.mdu);
}).catch(error => {
}).finally(() => {
});
},
updateMDU({ commit, state, dispatch }) {
commit('setLoading', true);
dispatch('Alert/setAlert', null, { root: true });
return new Promise((resolve, reject) => {
let params = _.cloneDeep(state.mduprofile);
axios.put('/update-mdu-profile/' + params.MDU_Id, params)
.then((response) => {
resolve();
}).catch(error => {
let message = error.response.data.message || error.message;
let errors = error.response.data.errors;
dispatch('Alert/setAlert',
{ message: message, errors: errors, color: danger },
{ root: true });
commit('setLoading', false);
reject(error);
}).finally(() => {
commit('setLoading', false);
});
});
},
resetState({ commit }) {
commit('resetState');
},
setMDUNumber({ commit }, value) {
commit('setMDUNumber', value);
}
}
const mutations = {
resetState(state) {
state = Object.assign(state, initialState());
},
setLoading(state, loading) {
state.loading = loading;
},
setCountryAll(state, items) {
state.country = items
},
setStateAll(state, items) {
state.area = items;
},
setProductAll(state, items) {
state.product = items;
},
setAll(state, items) {
state.mduprofile = items;
},
setMDUNumber(state, value) {
state.mduprofile.MDU_Number = value;
},
setCountry(state, value) {
state.mduprofile.Country = value;
},
setState(state, value) {
state.mduprofile.State = value;
},
setProduct(state, value) {
state.mduprofile.Product = value;
}
}
export default {
namespaced: true,
state: initialState,
getters,
actions,
mutations
}
Try checking somewhere where you change this values, if you don't catch error properly you may encounter empty states.

how is consept of vuex, if i manage many table is will be only one store.js

i really don't understand concept in vuex, example bellow i only handle one "todo table" there is many code there, i can not imagine if i handle other table like product,order,profile etc
is will write also in store.js
or there is other way if i want to handle many table
example code using vuex, only for one table
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)
axios.defaults.baseURL = 'http://localhost:8000/api'
export const store = new Vuex.Store({
state:{
token: localStorage.getItem('access_token') || null,
filter: 'all',
todos: [
]
},
getters:{
loggedIn(state){
return state.token !== null
},
remaining(state) {
return state.todos.filter(todo => !todo.completed).length
},
anyRemaining(state,getters) {
return getters.remaining != 0
},
todosFiltered(state) {
if (state.filter == 'all') {
return state.todos
} else if (state.filter == 'active') {
return state.todos.filter(todo => !todo.completed)
} else if (state.filter == 'completed') {
return state.todos.filter(todo => todo.completed)
}
return state.todos
},
showClearCompletedButton(state) {
return state.todos.filter(todo => todo.completed).length > 0
}
},
mutations:{//harus dengan nama mutations
addTodo(state,todo){
state.todos.push({
id:todo.id,
title:todo.title,
completed:false,
editing:false
})
},
updateTodo(state, todo){
const index = state.todos.findIndex((item) => item.id == todo.id)
state.todos.splice(index, 1, {
'id': todo.id,
'title': todo.title,
'completed': todo.completed,
'editing': todo.editing,
})
},
deleteTodo(state,id){
const index = state.todos.findIndex((item) => item.id == id)
state.todos.splice(index, 1)
},
allChecked(state,checked){
state.todos.forEach(todo => (todo.completed = checked))
},
updateFilter(state, filter){
state.filter = filter
},
clearCompleted(state){
state.todos = state.todos.filter(todo => !todo.completed)
},
retreiveTodos(state,todos){
state.todos = todos
},
retrieveToken(state,token){
state.token = token
},
destroyToken(state){
state.token = null
},
clearTodos(state) {
state.todos = []
},
},
actions:{
clearTodos(context) {
context.commit('clearTodos')
},
register(context, data) {
return new Promise((resolve, reject) => {
axios.post('/register', {
name: data.name,
email: data.email,
password: data.password,
})
.then(response => {
resolve(response)
})
.catch(error => {
reject(error)
})
})
},
destroyToken(context){
if(context.getters.loggedIn){
localStorage.removeItem('access_token')
context.commit('destroyToken')
}
},
retrieveToken(context,credentials){
return new Promise((resolve,reject) => {
axios.post('/login',{
email: credentials.email,
password: credentials.password,
})
.then(response => {
const token = response.data.data[0].token;
localStorage.setItem('access_token',token)// hasil token di simpan di local storage
context.commit('retrieveToken',token)
resolve(response)
})
.catch(error => {console.log(error)
reject(error)
})
})
},
retreiveTodos(context){
axios.defaults.headers.common['Authorization'] = 'Bearer ' + context.state.token
axios.get('/todos')
.then(response => {
context.commit('retreiveTodos',response.data)
})
.catch(error => {console.log(error)})
},
addTodo(context,todo){
axios.post('/todos',{
title: todo.title,
completed: false
})
.then(response => {
context.commit('addTodo',response.data)
})
.catch(error => {console.log(error)})
},
updateTodo(context, todo){
axios.patch('/todos/' + todo.id,{
title: todo.title,
completed: todo.completed
})
.then(response => {
context.commit('updateTodo',response.data)
})
.catch(error => {console.log(error)})
},
deleteTodo(context,id){
axios.delete('/todos/' + id)
.then(response => {
context.commit('deleteTodo',id)
})
.catch(error => {console.log(error)})
},
allChecked(context,checked){
axios.patch('/todosCheckAll',{
completed: checked
})
.then(response => {
context.commit('allChecked',checked)
})
.catch(error => {console.log(error)})
},
updateFilter(context, filter){
context.commit('updateFilter',filter)
},
clearCompleted(context){
const completed = context.state.todos
.filter(todo => todo.completed)
.map(todo => todo.id)
axios.delete('/todosDeleteCompleted',{
data:{
todos:completed
}
})
.then(response => {
context.commit('clearCompleted')
})
.catch(error => {console.log(error)})
}
}
})

React Native inserting data to a nested array

I want to add data to the "key" in "title" and "data" in the menu array. I add the title in the menu array like this in the code below. How can I add data to the key in the data array?
constructor(props) {
menu :[
{
title: '',
data: [
{key:'', value:''},
]
}] }
_getDATA = async () => {
try {
let rsp = await getSSS()
rsp = await rsp.json()
this.setState({
SSS: rsp.cikti
}, () => {
this.state.SSS.map((item, index) => {
this.setState(prevState => ({
menu: [...prevState.menu, {"title": item.SSS_Title}]
}))
})
constructor(props) {
menu :[
{
title: '',
data: [
{key:'', value:''},
]
}] }
_getDATA = async () => {
try {
let rsp = await getSSS()
rsp = await rsp.json()
this.setState({
SSS: rsp.cikti
}, () => {
this.state.SSS.map((item, index) => {
this.setState(prevState => ({
menu: [...prevState.menu, {"title": item.SSS_Title, data: [...item.SSS_data]}]
}))
})

Could not retrieve data from realm object

I want to know about fetching data from a realm object consist of schema data
db.js-Page where realm database defined
..........................................
export const tableProjectSchema = {
name: TABLE_PROJECT,
primaryKey: 'id',
indexed:'true',
properties: {
id: 'int',
project_id: 'int',
project_name: 'string'
}
};
...................................................
export const getProject = newProject => new Promise((resolve, reject) =>
{
Realm.open(databaseOptions).then(realm => {
realm.readOnly(() => {
let allProjects = realm.objects(TABLE_PROJECT);
resolve(allProjects);
});
}).catch(
(error) => reject(error));
});
sample.js - Here imported db.js and calling function getProject() from this page.
render() {
let Projects=Database.getProject();
console.log("table object"+Projects);
...................
}
I want to fetch project_name from the object 'Projects' in sample.js.
log out:
table object[object Object]
Modified getProject() method.
export const getProject = newProject => new Promise((resolve, reject) =>
{
Realm.open(databaseOptions).then(realm => {
let allProjects = realm.objects(TABLE_PROJECT);
resolve(allProjects);
}).catch(
(error) => reject(error));
});
Fetched data from object using
Database.getProject().then((projects) =>
console.log(projects.forEach(project => console.log(`Project name:
${project.project_name}`)))).catch((error) => { console.log(`Error in
fetching projects: ${error}`) });