Feat: [前台]:完成编辑功能。拖拽功能部分完成

This commit is contained in:
fanxb 2019-07-17 17:33:00 +08:00
parent 4699c5a509
commit 7e491ab10e
5 changed files with 506 additions and 379 deletions

View File

@ -13,7 +13,37 @@ export default class AddModal extends React.Component {
}; };
} }
addOne = () => { submit = () => {
const { currentEditNode } = this.props;
if (currentEditNode == null) {
this.addOne();
} else {
this.editOne(currentEditNode);
}
};
/**
* 编辑一个节点
* @param {*} node
*/
editOne(node) {
const { addName, addValue } = this.state;
const body = {
name: addName,
url: addValue
};
httpUtil.post("/bookmark/updateOne", body).then(() => {
message.success("编辑成功");
node.name = addName;
node.url = addValue;
this.close();
});
}
/**
* 新增一个节点
*/
addOne() {
const { currentAddFolder, addToTree, closeModal } = this.props; const { currentAddFolder, addToTree, closeModal } = this.props;
const path = currentAddFolder == null ? "" : currentAddFolder.path + "." + currentAddFolder.bookmarkId; const path = currentAddFolder == null ? "" : currentAddFolder.path + "." + currentAddFolder.bookmarkId;
if (this.state.addType === 2) { if (this.state.addType === 2) {
@ -40,7 +70,7 @@ export default class AddModal extends React.Component {
closeModal(); closeModal();
}); });
} }
}; }
close = () => { close = () => {
const { closeModal } = this.props; const { closeModal } = this.props;
@ -49,8 +79,9 @@ export default class AddModal extends React.Component {
}; };
render() { render() {
const { isShowModal } = this.props; const { isShowModal, currentEditNode } = this.props;
const { addType, addName, addValue } = this.state; const { addType, addName, addValue } = this.state;
const type = currentEditNode == null ? "add" : "edit";
const formItemLayout = { const formItemLayout = {
labelCol: { labelCol: {
xs: { span: 4 }, xs: { span: 4 },
@ -72,21 +103,23 @@ export default class AddModal extends React.Component {
fileList: [] fileList: []
}; };
return ( return (
<Modal destroyOnClose title="新增" visible={isShowModal} onCancel={this.close} footer={false}> <Modal destroyOnClose title={type === "add" ? "新增" : "编辑"} visible={isShowModal} onCancel={this.close} footer={false}>
<Form {...formItemLayout}> <Form {...formItemLayout}>
<Form.Item label="类别"> {type === "add" ? (
<Radio.Group defaultValue={0} onChange={e => this.setState({ addType: e.target.value })}> <Form.Item label="类别">
<Radio value={0}>书签</Radio> <Radio.Group defaultValue={0} onChange={e => this.setState({ addType: e.target.value })}>
<Radio value={1}>文件夹</Radio> <Radio value={0}>书签</Radio>
<Radio value={2}>上传书签html</Radio> <Radio value={1}>文件夹</Radio>
</Radio.Group> <Radio value={2}>上传书签html</Radio>
</Form.Item> </Radio.Group>
{addType < 2 ? ( </Form.Item>
) : null}
{addType < 2 || type === "edit" ? (
<Form.Item label="名称"> <Form.Item label="名称">
<Input type="text" onChange={e => this.setState({ addName: e.target.value })} value={addName} /> <Input type="text" onChange={e => this.setState({ addName: e.target.value })} value={addName} />
</Form.Item> </Form.Item>
) : null} ) : null}
{addType === 0 ? ( {(addType === 0 && type === "add") || (type === "edit" && currentEditNode.type === 0) ? (
<Form.Item label="URL"> <Form.Item label="URL">
<Input type="text" value={addValue} onChange={e => this.setState({ addValue: e.target.value })} /> <Input type="text" value={addValue} onChange={e => this.setState({ addValue: e.target.value })} />
</Form.Item> </Form.Item>
@ -100,7 +133,7 @@ export default class AddModal extends React.Component {
</Upload> </Upload>
) : null} ) : null}
<div style={{ textAlign: "center", paddingTop: "1em" }}> <div style={{ textAlign: "center", paddingTop: "1em" }}>
<Button type="primary" onClick={this.addOne}> <Button type="primary" onClick={this.submit}>
提交 提交
</Button> </Button>
</div> </div>

View File

@ -1,6 +1,6 @@
import httpUtil from "../../../util/httpUtil"; import httpUtil from "../../../util/httpUtil";
import React from "react"; import React from "react";
import { Modal, Button, Tooltip, Tree } from "antd"; import { Modal, Button, Tooltip, Tree, message } from "antd";
import styles from "./index.module.less"; import styles from "./index.module.less";
import IconFont from "../../../components/IconFont"; import IconFont from "../../../components/IconFont";
const { TreeNode } = Tree; const { TreeNode } = Tree;
@ -44,6 +44,16 @@ export function onCheck(keys, data) {
}); });
} }
/**
* 编辑一个节点
* @param {*} node 节点对象
* @param {*} e
*/
function editNode(node, e) {
e.stopPropagation();
this.setState({ isShowModal: true, currentEditNode: node });
}
/** /**
* 渲染树节点中节点内容 * 渲染树节点中节点内容
* @param {*} item * @param {*} item
@ -66,6 +76,7 @@ export function renderNodeContent(item) {
/> />
) : null} ) : null}
{item.type === 1 ? <Button size="small" type="primary" icon="plus" shape="circle" onClick={this.addOne.bind(this, item)} /> : null} {item.type === 1 ? <Button size="small" type="primary" icon="plus" shape="circle" onClick={this.addOne.bind(this, item)} /> : null}
<Button size="small" type="primary" icon="edit" shape="circle" onClick={editNode.bind(this, item)} />
<Button size="small" type="danger" icon="delete" shape="circle" onClick={deleteOne.bind(this, item)} /> <Button size="small" type="danger" icon="delete" shape="circle" onClick={deleteOne.bind(this, item)} />
</div> </div>
); );
@ -179,3 +190,77 @@ function deleteTreeData(treeData, set) {
} }
} }
} }
export function onDragEnter(info) {
// console.log(info);
}
/**
* 节点拖拽
* @param {*} info
*/
export function onDrop(info) {
const { treeData } = this.state;
const target = info.node.props.dataRef;
if (!info.dropToGap && target.type === "0") {
message.error("只能移动到文件夹中");
return;
}
const current = info.dragNode.props.dataRef;
const body = {
bookmarkId: current.bookmarkId,
sourcePath: current.path,
targetPath: "",
//-1 表示排在最后
sort: -1
};
const currentBelowList = current.path === "" ? treeData : getBelowList(treeData, current);
currentBelowList.splice(currentBelowList.indexOf(current), 1);
if (info.dropToGap) {
body.targetPath = target.path;
const targetBelowList = target.path === "" ? treeData : getBelowList(treeData, target);
const index = targetBelowList.indexOf(target);
if (info.dropPosition > index) {
body.sort = target.sort + 1;
insertToArray(current, index + 1, targetBelowList);
} else {
body.sort = target.sort;
insertToArray(current, index, targetBelowList);
}
current.sort = body.sort;
} else {
body.targetPath = target.path + "." + target.bookmarkId;
if (target.children) {
target.children.push(current);
}
}
this.setState({ treeData: [...treeData] });
}
/**
* 获取node所属list
* @param {*} tree 树结构
* @param {*} node node
*/
function getBelowList(treeList, node) {
for (let i in treeList) {
let item = treeList[i];
if (item.type === 1) {
if (item.path + "." + item.bookmarkId === node.path) {
return item.children;
} else if (item.children) {
return getBelowList(item.children, node);
}
}
}
}
function insertToArray(item, index, arr) {
const length = arr.length;
let i = length;
for (; i > index; i--) {
arr[i] = arr[i - 1];
arr[i].sort++;
}
arr[i] = item;
}

View File

@ -1,151 +1,160 @@
import React from "react"; import React from "react";
import { Tree, Empty, Button } from "antd"; import { Tree, Empty, Button } from "antd";
import MainLayout from "../../../layout/MainLayout"; import MainLayout from "../../../layout/MainLayout";
import httpUtil from "../../../util/httpUtil"; import httpUtil from "../../../util/httpUtil";
import styles from "./index.module.less"; import styles from "./index.module.less";
import { batchDelete, renderTreeNodes, onExpand, closeAll, onCheck } from "./function.js"; import { batchDelete, renderTreeNodes, onExpand, closeAll, onCheck, onDragEnter, onDrop } from "./function.js";
import AddModal from "./AddModal"; import AddModal from "./AddModal";
export default class OverView extends React.Component { export default class OverView extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
treeData: [], treeData: [],
isEdit: false, isEdit: false,
isLoading: true, isLoading: true,
checkedKeys: [], checkedKeys: [],
expandKeys: [], expandKeys: [],
// ///
isShowModal: false, isShowModal: false,
currentAddFolder: null currentAddFolder: null,
}; currentEditNode: null
} };
}
/**
* 初始化第一级书签 /**
*/ * 初始化第一级书签
componentDidMount() { */
httpUtil componentDidMount() {
.get("/bookmark/currentUser/path?path=") httpUtil
.then(res => { .get("/bookmark/currentUser/path?path=")
this.setState({ treeData: res, isLoading: false }); .then(res => {
}) this.setState({ treeData: res, isLoading: false });
.catch(() => this.setState({ isLoading: false })); })
} .catch(() => this.setState({ isLoading: false }));
}
/**
* 异步加载 /**
*/ * 异步加载
loadData = e => */
new Promise(resolve => { loadData = e =>
const item = e.props.dataRef; new Promise(resolve => {
const newPath = item.path + "." + item.bookmarkId; const item = e.props.dataRef;
httpUtil.get("/bookmark/currentUser/path?path=" + newPath).then(res => { const newPath = item.path + "." + item.bookmarkId;
item.children = res; httpUtil.get("/bookmark/currentUser/path?path=" + newPath).then(res => {
this.setState({ treeData: [...this.state.treeData] }); item.children = res;
resolve(); this.setState({ treeData: [...this.state.treeData] });
}); resolve();
}); });
});
/**
* 节点选择 /**
* @param {*} key * 节点选择
* @param {*} e * @param {*} key
*/ * @param {*} e
treeNodeSelect(key, e) { */
if (e.nativeEvent.delegateTarget.name === "copy") { treeNodeSelect(key, e) {
return; if (e.nativeEvent.delegateTarget && e.nativeEvent.delegateTarget.name === "copy") {
} return;
const { expandKeys } = this.state; }
const item = e.node.props.dataRef; const { expandKeys } = this.state;
if (item.type === 0) { const item = e.node.props.dataRef;
window.open(item.url); if (item.type === 0) {
} else { window.open(item.url);
const id = item.bookmarkId.toString(); } else {
const index = expandKeys.indexOf(id); const id = item.bookmarkId.toString();
index === -1 ? expandKeys.push(id) : expandKeys.splice(index, 1); const index = expandKeys.indexOf(id);
this.setState({ expandKeys: [...expandKeys] }); index === -1 ? expandKeys.push(id) : expandKeys.splice(index, 1);
} this.setState({ expandKeys: [...expandKeys] });
} }
}
/**
* 将新增的数据加入到state中 /**
*/ * 将新增的数据加入到state中
addToTree = node => { */
const { currentAddFolder, treeData } = this.state; addToTree = node => {
if (currentAddFolder === null) { const { currentAddFolder, treeData } = this.state;
treeData.push(node); if (currentAddFolder === null) {
} else { treeData.push(node);
//children } else {
if (currentAddFolder.children) { //children
currentAddFolder.children.push(node); if (currentAddFolder.children) {
this.setState({ treeData: [...treeData] }); currentAddFolder.children.push(node);
} this.setState({ treeData: [...treeData] });
} }
}; this.setState({ currentAddFolder: null });
}
/** };
* 关闭新增书签弹窗
*/ /**
closeAddModal = () => { * 关闭新增书签弹窗
this.setState({ isShowModal: false }); */
}; closeAddModal = () => {
this.setState({ isShowModal: false, currentAddFolder: null, currentEditNode: null });
/** };
* 新增书签
*/ /**
addOne = (item, e) => { * 新增书签
e.stopPropagation(); */
this.setState({ currentAddFolder: item, isShowModal: true }); addOne = (item, e) => {
}; e.stopPropagation();
this.setState({ currentAddFolder: item, isShowModal: true });
render() { };
const { isLoading, isEdit, treeData, expandKeys, checkedKeys, isShowModal, currentAddFolder } = this.state;
return ( render() {
<MainLayout> const { isLoading, isEdit, treeData, expandKeys, checkedKeys, isShowModal, currentAddFolder, currentEditNode } = this.state;
<div className={styles.main}> return (
<div className={styles.header}> <MainLayout>
<div className={styles.left}> <div className={styles.main}>
<span className={styles.myTree}>我的书签树</span> <div className={styles.header}>
{isEdit ? <Button size="small" type="primary" icon="plus" shape="circle" onClick={this.addOne.bind(this, null)} /> : null} <div className={styles.left}>
{expandKeys.length > 0 ? ( <span className={styles.myTree}>我的书签树</span>
<Button type="primary" size="small" onClick={closeAll.bind(this)}> {isEdit ? <Button size="small" type="primary" icon="plus" shape="circle" onClick={this.addOne.bind(this, null)} /> : null}
收起 {expandKeys.length > 0 ? (
</Button> <Button type="primary" size="small" onClick={closeAll.bind(this)}>
) : null} 收起
</div> </Button>
<div className={styles.right}> ) : null}
{isEdit ? ( </div>
<React.Fragment> <div className={styles.right}>
<Button size="small" type="danger" onClick={batchDelete.bind(this)}> {isEdit ? (
删除选中 <React.Fragment>
</Button> <Button size="small" type="danger" onClick={batchDelete.bind(this)}>
</React.Fragment> 删除选中
) : null} </Button>
<Button size="small" type="primary" onClick={() => this.setState({ isEdit: !isEdit })}> </React.Fragment>
{isEdit ? "完成" : "编辑"} ) : null}
</Button> <Button size="small" type="primary" onClick={() => this.setState({ isEdit: !isEdit })}>
</div> {isEdit ? "完成" : "编辑"}
</div> </Button>
<Tree </div>
showIcon </div>
checkedKeys={checkedKeys} <Tree
onCheck={onCheck.bind(this)} showIcon
expandedKeys={expandKeys} checkedKeys={checkedKeys}
loadData={this.loadData} onCheck={onCheck.bind(this)}
onExpand={onExpand.bind(this)} expandedKeys={expandKeys}
defaultExpandParent loadData={this.loadData}
checkable={isEdit} onExpand={onExpand.bind(this)}
onSelect={this.treeNodeSelect.bind(this)} checkable={isEdit}
onDoubleClick={this.copyUrl} onSelect={this.treeNodeSelect.bind(this)}
blockNode draggable
> onDragEnter={onDragEnter.bind(this)}
{renderTreeNodes.call(this, treeData)} onDrop={onDrop.bind(this)}
</Tree> blockNode
{isLoading === false && treeData.length === 0 ? <Empty description="还没有数据" /> : null} >
<AddModal isShowModal={isShowModal} currentAddFolder={currentAddFolder} closeModal={this.closeAddModal} addToTree={this.addToTree} /> {renderTreeNodes.call(this, treeData)}
</div> </Tree>
</MainLayout> {isLoading === false && treeData.length === 0 ? <Empty description="还没有数据" /> : null}
); <AddModal
} isShowModal={isShowModal}
} currentAddFolder={currentAddFolder}
currentEditNode={currentEditNode}
closeModal={this.closeAddModal}
addToTree={this.addToTree}
/>
</div>
</MainLayout>
);
}
}

View File

@ -1,153 +1,153 @@
import React from "react"; import React from "react";
import IconFont from "../../../components/IconFont"; import IconFont from "../../../components/IconFont";
import { Button, Input, message } from "antd"; import { Button, Input, message } from "antd";
import { LoginLayout, REGISTER_TYPE, RESET_PASSWORD_TYPE } from "../../../layout/LoginLayout"; import { LoginLayout, REGISTER_TYPE, RESET_PASSWORD_TYPE } from "../../../layout/LoginLayout";
import styles from "./index.module.less"; import styles from "./index.module.less";
import axios from "../../../util/httpUtil"; import axios from "../../../util/httpUtil";
export default class Register extends React.Component { export default class Register extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
console.log(props); console.log(props);
let type = props.location.pathname.split("/").reverse()[0]; let type = props.location.pathname.split("/").reverse()[0];
this.state = { this.state = {
current: type === "register" ? REGISTER_TYPE : RESET_PASSWORD_TYPE, current: type === "register" ? REGISTER_TYPE : RESET_PASSWORD_TYPE,
username: "", username: "",
email: "", email: "",
password: "", password: "",
repassword: "", repassword: "",
authCode: "", authCode: "",
authCodeText: "获取验证码", authCodeText: "获取验证码",
isCountDown: false isCountDown: false
}; };
} }
componentWillUnmount() { componentWillUnmount() {
if (this.timer != null) { if (this.timer != null) {
clearInterval(this.timer); clearInterval(this.timer);
} }
} }
/** /**
* 获取验证码 * 获取验证码
*/ */
getCode = () => { getCode = () => {
if (this.state.isCountDown) { if (this.state.isCountDown) {
return; return;
} }
axios.get("/user/authCode?email=" + this.state.email).then(() => { let count = 60;
message.success("发送成功,请注意查收(检查垃圾箱)"); this.setState({ authCodeText: `${count}s后重试`, isCountDown: true });
let count = 60; axios.get("/user/authCode?email=" + this.state.email).then(() => {
this.setState({ authCodeText: `${count}s后重试`, isCountDown: true }); message.success("发送成功,请注意查收(检查垃圾箱)");
this.timer = setInterval(() => { this.timer = setInterval(() => {
count--; count--;
if (count === 0) { if (count === 0) {
this.setState({ isCountDown: false, authCodeText: "获取验证码" }); this.setState({ isCountDown: false, authCodeText: "获取验证码" });
clearInterval(this.timer); clearInterval(this.timer);
return; return;
} }
this.setState({ authCodeText: `${count}s后重试` }); this.setState({ authCodeText: `${count}s后重试` });
}, 1000); }, 1000);
}); });
}; };
changeData = e => { changeData = e => {
this.setState({ [e.target.name]: e.target.value }); this.setState({ [e.target.name]: e.target.value });
}; };
/** /**
* 提交表单 * 提交表单
*/ */
submit = () => { submit = () => {
const { current, username, email, password, repassword, authCode } = this.state; const { current, username, email, password, repassword, authCode } = this.state;
if (password !== repassword) { if (password !== repassword) {
message.error("两次密码不一致"); message.error("两次密码不一致");
return; return;
} }
let form = { username, email, password, authCode }; let form = { username, email, password, authCode };
if (current === REGISTER_TYPE) { if (current === REGISTER_TYPE) {
axios axios
.put("/user", form) .put("/user", form)
.then(() => { .then(() => {
message.success("注册成功"); message.success("注册成功");
setTimeout(() => this.props.history.replace("/public/login"), 500); setTimeout(() => this.props.history.replace("/public/login"), 500);
}) })
.catch(error => message.error(error)); .catch(error => message.error(error));
} else { } else {
delete form.username; delete form.username;
axios axios
.post("/user/resetPassword", form) .post("/user/resetPassword", form)
.then(() => { .then(() => {
message.success("操作成功"); message.success("操作成功");
console.log(this.location); console.log(this.location);
setTimeout(() => this.props.history.replace("/public/login"), 500); setTimeout(() => this.props.history.replace("/public/login"), 500);
}) })
.catch(error => message.error(error)); .catch(error => message.error(error));
} }
}; };
render() { render() {
const { current, username, email, password, repassword, authCode, authCodeText, isCountDown } = this.state; const { current, username, email, password, repassword, authCode, authCodeText, isCountDown } = this.state;
return ( return (
<LoginLayout type={current}> <LoginLayout type={current}>
<div className={styles.main}> <div className={styles.main}>
{current === REGISTER_TYPE ? ( {current === REGISTER_TYPE ? (
<Input <Input
type="text" type="text"
size="large" size="large"
name="username" name="username"
value={username} value={username}
onChange={this.changeData} onChange={this.changeData}
addonBefore={<IconFont type="icon-person" style={{ fontSize: "0.3rem" }} />} addonBefore={<IconFont type="icon-person" style={{ fontSize: "0.3rem" }} />}
placeholder="用户名" placeholder="用户名"
/> />
) : null} ) : null}
<Input <Input
type="email" type="email"
size="large" size="large"
name="email" name="email"
value={email} value={email}
onChange={this.changeData} onChange={this.changeData}
addonBefore={<IconFont type="icon-mail" style={{ fontSize: "0.3rem" }} />} addonBefore={<IconFont type="icon-mail" style={{ fontSize: "0.3rem" }} />}
placeholder="邮箱" placeholder="邮箱"
/> />
<Input <Input
type="password" type="password"
size="large" size="large"
name="password" name="password"
value={password} value={password}
onChange={this.changeData} onChange={this.changeData}
addonBefore={<IconFont type="icon-password" style={{ fontSize: "0.3rem" }} />} addonBefore={<IconFont type="icon-password" style={{ fontSize: "0.3rem" }} />}
placeholder="密码" placeholder="密码"
/> />
<Input <Input
type="password" type="password"
size="large" size="large"
name="repassword" name="repassword"
value={repassword} value={repassword}
onChange={this.changeData} onChange={this.changeData}
addonBefore={<IconFont type="icon-password" style={{ fontSize: "0.3rem" }} />} addonBefore={<IconFont type="icon-password" style={{ fontSize: "0.3rem" }} />}
placeholder="重复密码" placeholder="重复密码"
/> />
<Input <Input
type="text" type="text"
size="large" size="large"
name="authCode" name="authCode"
value={authCode} value={authCode}
onChange={this.changeData} onChange={this.changeData}
addonBefore={<IconFont type="icon-yanzhengma54" style={{ fontSize: "0.3rem" }} />} addonBefore={<IconFont type="icon-yanzhengma54" style={{ fontSize: "0.3rem" }} />}
addonAfter={ addonAfter={
<span style={{ cursor: isCountDown ? "" : "pointer" }} onClick={this.getCode}> <span style={{ cursor: isCountDown ? "" : "pointer" }} onClick={this.getCode}>
{authCodeText} {authCodeText}
</span> </span>
} }
placeholder="验证码" placeholder="验证码"
/> />
<Button type="primary" className={styles.submit} onClick={this.submit} block> <Button type="primary" className={styles.submit} onClick={this.submit} block>
{current === REGISTER_TYPE ? "注册" : "重置密码"} {current === REGISTER_TYPE ? "注册" : "重置密码"}
</Button> </Button>
</div> </div>
</LoginLayout> </LoginLayout>
); );
} }
} }

View File

@ -1,60 +1,60 @@
import { notification } from "antd"; import { notification } from "antd";
import axios from "axios"; import axios from "axios";
//定义http实例 //定义http实例
const instance = axios.create({ const instance = axios.create({
baseURL: "/bookmark/api", baseURL: "/bookmark/api",
timeout: 15000 timeout: 15000
}); });
//实例添加请求拦截器 //实例添加请求拦截器
instance.interceptors.request.use( instance.interceptors.request.use(
req => { req => {
req.headers["jwt-token"] = window.token; req.headers["jwt-token"] = window.token;
return req; return req;
}, },
error => { error => {
console.log(error); console.log(error);
} }
); );
//实例添加响应拦截器 //实例添加响应拦截器
instance.interceptors.response.use( instance.interceptors.response.use(
function(res) { function(res) {
const data = res.data; const data = res.data;
if (data.code === 1) { if (data.code === 1) {
return data.data; return data.data;
} else if (data.code === -2) { } else if (data.code === -2) {
return Promise.reject(data.message); return Promise.reject(data.message);
} else { } else {
showError(data); showError(data);
return Promise.reject(data.message); return Promise.reject(data.message);
} }
}, },
function(error) { function(error) {
console.log(error); console.log(error);
showError(error.response); showError(error.response);
return Promise.reject(JSON.stringify(error)); return Promise.reject(JSON.stringify(error));
} }
); );
function showError(response) { function showError(response) {
let description, let description,
message = "出问题啦"; message = "出问题啦";
if (response) { if (response) {
description = response.message; description = response.message;
if (response.code === -1) { if (response.code === -1) {
let redirect = encodeURIComponent(window.location.pathname + window.location.search); let redirect = encodeURIComponent(window.location.pathname + window.location.search);
window.reactHistory.replace("/public/login?redirect=" + redirect); window.reactHistory.replace("/public/login?redirect=" + redirect);
} }
} else { } else {
description = "无网络连接"; description = "无网络连接";
} }
notification.open({ notification.open({
message, message,
description, description,
duration: 2 duration: 2
}); });
} }
export default instance; export default instance;