I'm trying to build a crud vuejs3 application (book store), and in the update operation I didn't figure out how to get the document id in order to update the book details, following are some of my code snippets where I'm currently working on:
UpdateDcoment.js
const updatingDoc = (collection, id) => {
const isPending = ref(false);
const error = ref(null);
let documentRef = db.collection(collection).doc(id);
const handleUpdateDoc = async (updates) => {
isPending.value = true;
error.value = null;
try {
const response = await documentRef.update(updates);
isPending.value = false;
console.log("update was successfully!", response);
return response;
} catch (err) {
err.value = err.message;
console.log(err.value);
error.value = err.message;
isPending.value = false;
}
};
return { error, isPending, handleUpdateDoc };
};
export default updatingDoc;
BookDetails.vue
<template>
<div>
<div v-if="document" class="book-detail-view">
<div class="book-cover">
<img :src="document.coverUrl" :alt="`${document.title} book cover`" />
</div>
<div class="book-details">
<h4 class="book-title">
{{ document.title }}
</h4>
<div class="book-description">
<p>{{ document.description }}</p>
</div>
<div class="book-author">
<p>{{ `Author: ${document.author}` }}</p>
</div>
<div v-if="currentAuthenticatedUser">
<button v-if="!isDeleting" #click="handleDelete">
Delete the book
</button>
<button v-else disabled>processing...</button>
<router-link :to="{ path: `/books/${document.id}/update` }">
Update here
</router-link>
</div>
</div>
</div>
<div v-else class="error">{{ error }}</div>
</div>
</template>
<script>
import { computed } from "#vue/runtime-core";
import getDocument from "../../controllers/getDocument";
import getUser from "../../controllers/getUser";
import deleteDocument from "../../controllers/deleteDocument";
import getStoredBook from "../../controllers/userStorage";
import { useRouter } from "vue-router";
export default {
props: ["id"],
setup(props) {
const { error, document } = getDocument("books", props.id);
const { user } = getUser();
const { removeDoc, isDeleting } = deleteDocument("books", props.id);
const { handleDeleteCover } = getStoredBook();
const router = useRouter();
const currentAuthenticatedUser = computed(() => {
return (
document.value && user.value && user.value.uid === document.value.userId
);
});
const handleDelete = async () => {
await handleDeleteCover(document.value.filePath);
await removeDoc();
router.push({ name: "home" });
};
return {
document,
error,
currentAuthenticatedUser,
handleDelete,
isDeleting,
};
},
};
</script>
UpdateBook.vue
<template>
<form #submit.prevent="handleSubmit">
<h4>Update book:</h4>
<input type="text" required placeholder="book name" v-model="title" />
<input type="text" required placeholder="author name" v-model="author" />
<textarea
required
placeholder="book description"
v-model="overview"
></textarea>
<label for="bookCover">Upload the cover book</label>
<input type="file" id="bookCover" #change="handleAddCoverBook" />
<label for="book">Upload the book</label>
<input type="file" id="book" #change="handleAddBook" />
<button v-if="!isPending">Update</button>
<button v-else disabled>Updating...</button>
<div v-if="fileError" class="error">{{ fileError }}</div>
</form>
</template>
<script>
import { ref } from "vue";
import userStorage from "#/controllers/userStorage";
import getUser from "#/controllers/getUser";
import { createdAtTime } from "#/firebase/firebaseConfig";
import { useRouter } from "vue-router";
import updatingDoc from "#/controllers/updateDocument";
export default {
setup() {
const { url1, url2, handleUploadBook, bookCoverPath, bookPath } =
userStorage();
const { user } = getUser();
const { error, isPending, handleUpdateDoc } = updatingDoc(
"books",
document.id
);
const router = useRouter();
const title = ref("");
const author = ref("");
const overview = ref("");
const bookCover = ref(null);
const book = ref(null);
const fileError = ref(null);
const handleSubmit = async () => {
if (bookCover.value) {
// Truthy value will show 'uploading...' text whenever the adding books process is processing
isPending.value = true;
await handleUploadBook(bookCover.value, book.value);
// log the result of the event listener wherever the upload was successful
console.log("book uploaded successfully", url1.value, url2.value);
const response = await handleUpdateDoc({
title: title.value,
author: author.value,
description: overview.value,
createdAt: createdAtTime(),
userId: user.value.uid,
userName: user.value.displayName,
coverUrl: url1.value,
bookUrl: url2.value,
bookCover: bookCoverPath.value,
book: bookPath.value,
});
// Truthy value will remove 'uploading...' text whenever the adding books process is finished
isPending.value = false;
if (!error.value) {
console.log("updating process successful");
router.push({ name: "BookDetail", params: { id: response.id } });
}
}
};
// Upload Cover Book
const bookCoverTypes = ["image/png", "image/jpg", "image/jpeg"];
const handleAddCoverBook = (e) => {
const newBookCover = e.target.files[0];
if (newBookCover && bookCoverTypes.includes(newBookCover.type)) {
bookCover.value = newBookCover;
fileError.value = null;
} else {
bookCover.value = null;
fileError.value = "Please add a cover book (png, jpg or jpeg)";
}
};
// Upload book
const bookTypes = ["application/pdf", "application/epub"];
const handleAddBook = (e) => {
const newBook = e.target.files[0];
if (newBook && bookTypes.includes(newBook.type)) {
book.value = newBook;
fileError.value = null;
} else {
book.value = null;
fileError.value = "Please add a book (pdf or epub)";
}
};
return {
title,
author,
overview,
handleSubmit,
handleAddCoverBook,
handleAddBook,
fileError,
isPending,
};
},
};
</script>
I'm trying to get the document id from the bookDetails.vue and then use it inside the updateBook.vue but whenever I hit the update button in the UpdateBook.vue I have the following log:
No document to update: projects/books-store-71c7f/databases/(default)/documents/books/pVIg6OytEKE4nEUE8uqd
I appreciate your hints and help guys!
SOLVED!
So, the trick was to use the params for the current URL in order to get the document id and update the document fields:
here I passing the router-link to redirect to update form:
<router-link
:to="{ name: 'UpdateBook', params: { id: document.id } }"
>
Update here
</router-link>
And here inside the setup() of the updateBook.vue component I use params to access the document id:
const router = useRouter();
// Get the current document id from the route id
const id = router.currentRoute.value.params.id;
// And here I pass the document id as parameter
const { error, isPending, handleUpdateDoc } = updatingDoc("books", id);
Related
I'm trying to save the input values in the Pinia store, but the state is not updating. So I want onSubmit function to save the input values in a store.
My code :
Create.vue
<script setup>
import { reactive } from "vue";
import { useCounterStore } from '#/stores/counter';
const counter = useCounterStore();
const form = reactive({
first: "",
second: "",
email: ""
});
const onSubmit = (e) => {
e.preventDefault();
counter.$patch({ firstName: form.first.value });
counter.$patch({ secondName: form.second.value });
counter.$patch({ email: form.email.value });
}
</script>
<template>
<form #submit="onSubmit">
{{ counter.getFirst + 'MYFIRST' }} {{ counter.getSecond + 'MYSECOND' }} {{ counter.getEmail + 'MYEMAIL' }}
<div class="row mt-4">
<div class="col-6">
<label for="exampleFormControlInput1" class="form-label">First</label>
<input v-model="form.first" type="text" class="form-control" id="exampleFormControlInput1"
placeholder="First name">
</div> <div class="col-6">
<label for="exampleFormControlInput1" class="form-label">Second</label>
<input v-model="form.second" type="text" class="form-control" id="exampleFormControlInput1"
placeholder="Second name">
</div>
<div class="col-6 mt-2">
<label for="exampleFormControlInput1" class="form-label">Email</label>
<input v-model="form.email" type="email" class="form-control" id="exampleFormControlInput1"
placeholder="name#example.com">
</div>
<div class="col-12 mt-3">
<button #click="onSubmit" type="button" class="btn btn-dark push- right">Create</button>
<button type="button" class="btn btn-dark">All users</button>
</div>
</div>
</form>
</template>
Pinia store: counter.js
import { ref, computed, reactive } from 'vue'
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', () => {
const count = ref(0);
let firstName = ref('');
let secondName = ref('');
let email = ref('');
const getFirst = computed(() => firstName.value)
const getSecond = computed(() => secondName.value)
const getEmail = computed(() => email.value)
function increment() {
count.value++
}
return { count, getFirst, getSecond, getEmail, increment }
})
i am not sure how your store look like... but it should by something like:
`
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
state: () => {
return { count: 0 }
}
})`
in your component, change the name of the store instance, lets say counterStore.
const counterStore = useCounterStore();
and now you can access the state by name:
counterStore.counter++
while this will work, it is not the best practice...
you should use actions to manipulate the state...
export const useCounterStore = defineStore('counter', {
state: () => {
return { count: 0 }
},
actions: {
increment() {
this.count++
},
},
})
and then you can call the action like a regular method:
counterStore.increment()
I think you're in the process of learning Vue, don't give up!
Give a feedback in comment and put your post on "solved" status if this help you.
The solution :
In store file :
import { defineStore } from 'pinia';
export const useAuthStore = defineStore('auth', {
state: () => ({
loginForm: {
firstName: '',
secondName: '',
email: ''
}
})
});
In Create.vue :
<script setup>
import { reactive } from "vue";
import { useAuthStore } from '#/stores/auth';
const authstore = useAuthStore();
const form = reactive({
first: "",
second: "",
email: ""
});
...
const onSubmit = (e) => {
e.preventDefault();
authStore.loginForm.firstName = form.first;
authStore.loginForm.secondName = form.second;
authStore.loginForm.email = form.email;
}
...
<script/>
I'm currently trying using utterances, which is a github-based open source for comments.
I'm using utterances in my SSG page. Therefore, I'm using client side rendering for getting the utterances component.
Here is the code.
// blog/[id].tsx
/* eslint-disable react/no-danger */
import axios from 'axios';
import { dateFormat } from '_Utils/Helper';
import MarkdownRenderer from '_Components/MarkdownRenderer';
import Comment from '_Components/Comment';
import styles from './blog.module.scss';
const Article = ({ article }: any) => {
return (
<div className={styles.container}>
<div className={styles.header}>
<p className={styles.tag}>{article.data.attributes.tag.data.attributes.tag}</p>
<h1>{article.data.attributes.title}</h1>
<p className={styles.publishedDate}>Published at {dateFormat(article.data.attributes.publishedAt)}</p>
</div>
<main
>
<MarkdownRenderer markdown={article.data.attributes.content} />
<Comment />
</main>
</div>
);
};
export async function getStaticPaths() {
const articlePaths: any = await axios.get(`${process.env.NEXT_PUBLIC_BASE_URL}/api/articles/?populate[0]=*`);
const paths = articlePaths.data.data.map((path: any) => ({
params: { id: `${path.id}` },
}));
return { paths, fallback: false };
}
export async function getStaticProps(ctx: any) {
const { params } = ctx;
const { id } = params;
const article = await axios.get(
`${process.env.NEXT_PUBLIC_BASE_URL}/api/articles/${id}?populate[1]=tag&populate[0]=thumbnail`
);
return {
props: { article: article.data },
};
}
export default Article;
// Comment
const Comment = () => {
return (
<section
style={{ height: '350px', width: '100%' }}
ref={(elem) => {
if (!elem) {
return;
}
const scriptElem = document.createElement('script');
scriptElem.src = 'https://utteranc.es/client.js';
scriptElem.async = true;
scriptElem.setAttribute('repo', 'usernamechiho/Cobb-dev-blog');
scriptElem.setAttribute('issue-term', 'title');
scriptElem.setAttribute('theme', 'github-light');
scriptElem.setAttribute('label', 'comment');
scriptElem.crossOrigin = 'anonymous';
elem.appendChild(scriptElem);
}}
/>
);
};
export default Comment;
and the result
I was wondering why it happens and tried dynamic import with ssr: false.
However, there was nothing but the same.
Is there anything I can look for to get through this?
When I delete one of the notes, it deletes from the DB. And to see the effect, I need to reload the page every time I delete a note.
How do I see the not deleted notes without reloading the page?
Here's the code for my page:
export default function Home(notes) {
const [notesData, setNotesData] = useState(notes);
const deleteNote = async (note) => {
const res = await fetch(`http://localhost:3000/api/${note}`, {
method: "DELETE",
});
};
return (
<div>
<h1>Notes:</h1>
{notesData.notes.map((note) => {
return (
<div className="flex">
<p>{note.title}</p>
<p onClick={() => deleteNote(note.title)}>Delete</p>
</div>
);
})}
</div>
);
}
export async function getServerSideProps() {
const res = await fetch(`http://localhost:3000/api`);
const { data } = await res.json();
return { props: { notes: data } };
}
If you're fetching the data with getServerSideProps you need to recall that in order to get the updated data like this :
import { useRouter } from 'next/router';
const router = useRouter()
const refreshData = () => router.replace(router.asPath);
But also you can store the data from getServerSideProps in a state and render that state and trigger a state update after a note is deleted like this :
export default function Home(notes) {
const [notesData, setNotesData] = useState(notes);
const deleteNote = async (note) => {
const res = await fetch(`http://localhost:3000/api/${note}`, {
method: "DELETE",
});
};
return (
<div>
<h1>Notes:</h1>
{notesData.notes.map((note) => {
return (
<div className="flex">
<p>{note.title}</p>
<p onClick={() => deleteNote(note.title).then(()=>{
const res = await fetch(`http://localhost:3000/api`);
const { data } = await res.json();
setNotesData(data)
})
}>Delete</p>
</div>
);
})}
</div>
);
}
export async function getServerSideProps() {
const res = await fetch(`http://localhost:3000/api`);
const { data } = await res.json();
return { props: { notes: data } };
}
How can I add an image from NextJS to Strapi Media library? I Try to upload the image from the NextJS frontend, the image will be uploaded to my Strapi Media library and my Cloudinary account but the image will not be associated/linked to that particular post
Here is my code
path: components/ImageUpload.js
import { useState } from "react";
import { API_URL } from "../config/index";
import styles from "#/styles/FormImage.module.css";
export default function ImageUpload({ sportNewsId, imageUploaded }) {
const [image, setImage] = useState(null);
const handleFilechange = (e) => {
console.log(e.target.files);
setImage(e.target.files[0]);
};
const handleSubmit = async (e) => {
e.preventDefault();
const formData = new FormData();
formData.append("files", image);
formData.append("ref", "sports");
formData.append("refid", sportNewsId);
formData.append("field", "image");
const res = await fetch(`${API_URL}/upload`, {
method: "POST",
body: formData,
});
if (res.ok) {
imageUploaded();
}
};
return (
<div className={styles.form}>
<h4>Upload Sport News Image</h4>
<form onSubmit={handleSubmit}>
<div className={styles.file}>
<input type="file" onChange={handleFilechange} />
<input type="submit" value="Upload" className="btn" />
</div>
</form>
</div>
);
}
path:pages/news/edit/[id].js
import Link from "next/link";
import { useState } from "react";
import Image from "next/image";
import { useRouter } from "next/router";
import moment from "moment";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import Layout from "#/components/Layout";
import { API_URL } from "#/config/index";
import styles from "#/styles/FormEdit.module.css";
import Modal from "#/components/Modal";
import ImageUpload from "#/components/ImageUpload";
export default function EditNews({ sportNews }) {
const [values, setValues] = useState({
name: sportNews.name,
detail: sportNews.detail,
date: sportNews.date,
time: sportNews.time,
});
const [previewImage, setPreviewImage] = useState(
sportNews.image ? sportNews.image.formats.thumbnail.url : null
);
const [showModal, setShowModal] = useState(false);
const router = useRouter();
const { name, detail, date, time } = values;
const handleSubmit = async (e) => {
e.preventDefault();
const emptyFieldCheck = Object.values(values).some(
(element) => element === ""
);
if (emptyFieldCheck) {
toast.error("Please fill all input field");
}
const response = await fetch(`${API_URL}/sports/${sportNews.id}`, {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(values),
});
if (!response.ok) {
toast.error("something went wrong!!!");
} else {
const sport = await response.json();
router.push(`/news/${sport.slug}`);
}
};
const imageUploaded = async (e) => {
const res = await fetch(`${API_URL}/sports/${sportNews.id}`);
const data = await res.json();
console.log("showing =>", data);
console.log(setPreviewImage);
setPreviewImage(data.image[0].formats.thumbnail.url);
setShowModal(false);
};
const handleInputchange = (e) => {
const { name, value } = e.target;
setValues({ ...values, [name]: value });
};
return (
<Layout title="Add New Sport News">
<Link href="/news">Go Back</Link>
<h2>Add Sport News</h2>
<ToastContainer />
<form onSubmit={handleSubmit} className={styles.form}>
<div className={styles.grid}>
<div>
<label htmlFor="name">Name</label>
<input
name="name"
id="name"
type="text"
value={name}
onChange={handleInputchange}
/>
</div>
<div>
<label htmlFor="date">Date</label>
<input
name="date"
id="date"
type="date"
value={moment(date).format("yyyy-MM-DD")}
onChange={handleInputchange}
/>
</div>
<div>
<label htmlFor="time">Time</label>
<input
name="time"
id="time"
type="text"
value={time}
onChange={handleInputchange}
/>
</div>
</div>
<div>
<label htmlFor="detail">Detail</label>
<textarea
name="detail"
id="detail"
type="text"
value={detail}
onChange={handleInputchange}
/>
</div>
<input className="btn" type="submit" value="Add News" />
</form>
{/* {console.log(previewImage)} */}
{previewImage ? (
<Image src={previewImage} height={100} width={180} />
) : (
<div>
<p>No Image Available</p>
</div>
)}
<div>
<button onClick={() => setShowModal(true)} className="btn-edit">
Update Image
</button>
</div>
<Modal show={showModal} onClose={() => setShowModal(false)}>
<ImageUpload sportNewsId={sportNews.id} imageUploaded={imageUploaded} />
</Modal>
</Layout>
);
}
export async function getServerSideProps({ params: { id } }) {
const res = await fetch(`${API_URL}/sports/${id}`);
const sportNews = await res.json();
return {
props: { sportNews },
};
}
this is the error message it is showing.
how do I resolve this error, any assistance will be appreciated
Thanks a lot
For a formData you have to add a header :
'Content-Type': 'multipart/form-data'
I have been struggling during hours to find this. I am uploading a file directly from an entry and not with the /upload route but it might work the same way. Using axios for the post method here is an example :
const form = new FormData();
const postData = {
name: 'test2',
};
form.append('files.image', file);
form.append('data', JSON.stringify(postData));
await axios
.post(getStrapiURL('/ingredients'), form, {
headers: {
'Content-Type': 'multipart/form-data',
},
})
.then((response) => {
// Handle success.
console.log('Well done!');
console.log('Data: ', response.data);
})
.catch((error) => {
// Handle error.
console.log('An error occurred:', error.response);
});
From my observation, the problem is on the setPreviewImage line remove the [0] array brackets from the image in order to access the Cloudinary thumbnail Url you will get from the Strapi API after each image upload.
The function below should make it work
const imageUploaded = async (e) => {
const res = await fetch(`${API_URL}/sports/${sportNews.id}`);
const data = await res.json();
console.log("showing =>", data);
console.log(setPreviewImage);
setPreviewImage(data.image.formats.thumbnail.url);
setShowModal(false);
};
I have a todo list, where I want add some fields:
name
description
I also have two other fields to add:
icon
logo
My image is stored in firebase storage, on this level is worked well. My problem is that when I try to update the card, it only updated the name and description, but the field url remains empty. I am developing on react js and using hooks.
Where do I have an issue? How can I resolve it?
here is an example of my code
const Menu = ({ add, updateCard, contactId }) => {
const [name, setName] = useState('');
const [description, setDescription] = useState('');
const [uploadFile, setUploadFile] = useState(null);
const [url, setImageUrl] = useState('');
const handleChange = useCallback(({ target }) => {
const { name, value } = target;
switch (name) {
case 'name':
setName(value);
break;
case 'description':
setDescription(value);
break;
case 'icon':
setUploadFile(target.files[0]);
break;
case 'logo':
setUploadFile(target.files[0]);
break;
default:
return;
}
}, []);
const resset = () => {
setName('');
setDescription('');
};
const handleSubmit = e => {
e.preventDefault();
resset();
};
useEffect(() => {
if (uploadFile?.name) {
AsynchRoneUploadFile();
}
async function AsynchRoneUploadFile() {
const storageRef = app.storage().ref('Logo');
const fileRef = storageRef.child(uploadFile?.name);
try {
await fileRef.put(uploadFile);
setImageUrl(await fileRef.getDownloadURL());
} catch (e) {
console.log(e.message);
}
}
}, [handleChange, updateCard, uploadFile]);
const buttonName = (add && 'Creat') || (updateCard && 'Update');
return (
<>
<form onSubmit={handleSubmit}>
<Form
handleChange={handleChange}
name={name}
description={description}
/>
<UploadBar onHandlechange={handleChange} />
<button
className={s.btn}
type="submit"
onClick={() =>
(add && add({ name, description, url })) ||
(updateCard &&
updateCard({
contactId,
name,
description,
url,
}))
}
>
{buttonName}
</button>
</form>
</>
);
};