I'm struggling with some issue. I've create frontend and backend parts of my decodeencode app (Next.js as a Frontend and Node.js Express as a Backend). I've already done encode functionality and create new message with cipher. The only one thing I have to do is to make decode functionality on a frontend.
To decode message you just have to send {text, secretkeyword} to backend and after that you will recieve encrypted version of text. For data sending I'm using React Query library.
Here below code of my react query services:
import axios from "axios"
const API_URL = 'https://node-test-mongo.herokuapp.com'
axios.defaults.baseURL = API_URL
export interface ICrypt {
title: string
text: string
secretkeyword: string
}
export interface IDecode {
text: string
secretkeyword: string
}
export const CryptoService = {
async getAll() {
return axios.get('/api/blog');
},
async create(data: ICrypt) {
return axios.post('/api/blog/encode', data, {
headers: {'Content-Type': 'application/json'}
});
},
async decode(text: string, secretkeyword: string) {
return axios.get<IDecode>('/api/blog/decode')
},
}
Here below my custom hook useDecode.ts
import { useQuery } from "react-query";
import { CryptoService, IDecode } from "../app/services/crypto.service";
export const useDecode = (text: string, secretkeyword: string) => {
const { data: crypto } = useQuery(
['decode', text, secretkeyword],
() => CryptoService.decode(text, secretkeyword),
{
onError: (error: any) => {
alert(error.message)
},
select: ({data}): IDecode => data,
enabled: !!secretkeyword
}
)
return {crypto}
}
And here way how I use it inside my List.tsx element:
import { ListProps } from "./List.props";
import styles from "./List.module.css";
import { P, Button } from '../'
import React, { useState } from "react";
import { useQuery } from "react-query";
import { CryptoService, IDecode } from "../../app/services/crypto.service";
import { useDecode } from "../../hooks/useDecode";
export const List = ({ children, className, ...props }: ListProps): JSX.Element => {
//const {crypto} = useDecode(text, secretkeyword)
const { data: crypto } = useQuery('decode', (data ) => CryptoService.decode(text, secretkeyword), {
onSuccess: () => {
alert(data);
}
})
const [data, setData] = useState<IDecode>({
text: '',
secretkeyword: ''
} as IDecode)
const showPopup = (text: any, secretkeyword: any) => {
alert(crypto)
}
const { isLoading, data: response, isFetching } = useQuery('crypto', () => CryptoService.getAll())
return (
<div
className={styles.ul}
{...props}
>
{isLoading ? (
<div>Loading ...</div>
) : response?.data.blogs.length ? (
<div>
{response.data.blogs.map((blog: any) => (
<ul key={blog._id}>
<li className={styles.li} >
<P className={styles.title} size='l'>{blog.title}</P>
<P size='l'>{blog.text} </P>
<Button onClick={() => showPopup(blog.text, blog.secretkeyword)} appearance="ghost">DECODE</Button>
</li>
</ul>
))}
{isFetching && <div className="mt-5">Loading data ...</div>}
</div>
) : (<div>Elements not found ...</div>)}
</div>
)
};
the problem is that I don't really know, how to put (text, secretkeyword) into useDecode hook.
I will be really appreciate for some help. Thank you in advance! :)
