2020-2-capstone-design2 / 2017110269

Go to a project
Toggle navigation Toggle navigation pinning
MinsoftK
4d12ff93 1 parent 988e90ac

기존의 project 업로드

Expand all
Inline Side-by-side
Showing 210 changed files with 3673 additions and 0 deletions
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
test
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Available Scripts
In the project directory, you can run:
### `yarn start`
Runs the app in the development mode.<br />
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
The page will reload if you make edits.<br />
You will also see any lint errors in the console.
### `yarn test`
Launches the test runner in the interactive watch mode.<br />
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
### `yarn build`
Builds the app for production to the `build` folder.<br />
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.<br />
Your app is ready to be deployed!
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
### `yarn eject`
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
## Learn More
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
To learn React, check out the [React documentation](https://reactjs.org/).
### Code Splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
### Analyzing the Bundle Size
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
### Making a Progressive Web App
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
### Advanced Configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
### Deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
### `yarn build` fails to minify
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
[0821/130724.166:ERROR:process_info.cc(359)] UncheckedAllocate
This diff could not be displayed because it is too large.
{
"name": "newsjuicer",
"version": "0.1.0",
"private": true,
"dependencies": {
"@ant-design/icons": "^4.2.1",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"ant-design": "^1.0.0",
"antd": "^4.5.4",
"axios": "^0.19.2",
"connected-react-router": "^6.8.0",
"draft-js": "^0.11.6",
"mysql": "^2.18.1",
"qs": "^6.9.4",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-draft-wysiwyg": "^1.14.5",
"react-easy-panzoom": "^0.4.4",
"react-notifications": "^1.6.0",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1",
"sequelize": "^6.3.3",
"styled-components": "^5.1.1"
},
"proxy": "http://localhost:5000",
"scripts": {
"start": "cross-env NODE_PATH=src react-scripts start",
"build": "cross-env NODE_PATH=src react-scripts build",
"test": "cross-env NODE_PATH=src react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"cross-env": "^7.0.2"
}
}
No preview for this file type
No preview for this file type
No preview for this file type
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/mathbank.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/mathbank.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<!-- <link rel="stylesheet" type="text/css" href="https://tikzjax.com/v1/fonts.css"/>
<title>Mathmatical Graph Bank</title>
<script src="https://tikzjax.com/v1/tikzjax.js"></script> -->
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type='text/javascript'>
$(function(){
var iFrames = $('iframe');
function iResize() {
for (var i = 0, j = iFrames.length; i < j; i++) {
iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
}
if ($.browser.safari || $.browser.opera) {
iFrames.load(function(){
setTimeout(iResize, 0);
});
for (var i = 0, j = iFrames.length; i < j; i++) {
var iSource = iFrames[i].src;
iFrames[i].src = '';
iFrames[i].src = iSource;
}
} else {
iFrames.load(function() {
this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
});
}
});
</script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
\ No newline at end of file
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
.trigger {
font-size: 18px;
line-height: 64px;
padding: 0 24px;
cursor: pointer;
transition: color 0.3s;
}
.trigger:hover {
color: #1890ff;
}
.logo {
height: 32px;
background: rgba(255, 255, 255, 0.2);
margin: 16px;
}
.site-layout .site-layout-background {
background: #fff;
}
\ No newline at end of file
import React,{useState, useEffect} from 'react';
import { Route, Redirect, withRouter, Switch} from 'react-router-dom';
import { Home, Html, Mathcha, Tikz, Login} from './Container';
import {isauth} from './Container/Login';
//import {ConnectedRouter} from 'connected-react-router';
const authentication = () => {}
function App() {
return (
<div>
<Switch>
<Route exact path="/" component={Login}/>
<Route path="/Home" component={Home}/>
</Switch>
</div>
);
}
//history를 쓰는 경우는 Link
export default withRouter(App);
.site-layout .site-layout-background {
background: #fff;
}
[data-theme="dark"] .site-layout .site-layout-background {
background: #141414;
}
/*
.ant-menu-item.ant-menu-item-only-child.ant-menu-item:link {
background-color: red;
}
.ant-menu-item.ant-menu-item-only-child.ant-menu-item:visited {
background-color: red;
}
*/
.logout {
position: absolute;
right:15px;
top:15px;
text-align: center;
justify-content: center;
}
\ No newline at end of file
This diff is collapsed. Click to expand it.
import React, { useState, useEffect } from 'react';
import { Modal, Upload, message, Form, InputNumber, Button , Select ,Row, Col} from 'antd';
import { InboxOutlined, LockOutlined, SaveTwoTone } from '@ant-design/icons';
import { saveFileAndQno } from 'lib/api/html';
import { checkQno } from '../lib/api/html';
const { Option} = Select;
//파일 업로드
//업로드 폼에서의 로직
const fetchSaveData = async (data) => {
try{
console.log(data);
const result = await saveFileAndQno(data);
if(result.status===200){
return result.data;
}
}catch(e){
console.log(e);
message.warn(e.message);
}
}
const fetchCheckQno = async(qno) => {
try{
const result = await checkQno(qno);
if(result.status===200){
console.log(result);
message.info("사용 가능한 문항 번호 입니다.");
return true;
}else{
message.info("존재 하지 않는 문항 번호 입니다.");
return false;
}
}catch(e){
console.log(e);
message.info("존재 하지 않는 문항 번호 입니다.");
return false;
}
}
const Html = ({ visible, onCancel, callback }) => {
const [fields,setFields] =useState([]);
const [qno, setQno] = useState(null);
const [upload,setUpload]=useState(false);
const [fileList, setFileList]=useState([]);
const [qnoCheck,setQnoCheck] =useState(false);
const changeNumber = (value) => {
setQno(value);
setFields([...fields, {name:['qno'],value:value}]);
};
useEffect(()=>{
if(!visible){
let initFields = [
{name:['qno'],value:null},
{name:['typeSol'],value:null},
{name:['typeQue'],value:null},
{name:['creator'],value:null},
];
setQno(null);
setFields(initFields);
setFileList([]);
}
},[visible]);
const props = {
multiple:false,
//data: { qno: qno },
accept:'.html',
onRemove: file => {
const index = fileList.indexOf(file);
const newFileList = fileList.slice();
newFileList.splice(index, 1);
return {
fileList: newFileList,
};
},
beforeUpload: file => {
console.log(file);
if(file.name.indexOf('.html')>0)
{
setFileList([file]);
}else {
setFileList([]);
message.info("Html 형식의 파일이 아닙니다.");
}
return false;
},
};
const onOk = () => {
setUpload(true)
};
const normFile = e => {
console.log('Upload event:', e);
if (Array.isArray(e)) {
return e;
}
return e && e.fileList;
};
const onClickQno = async(e)=>{
e.preventDefault();
//번호가 호출 성공시 setQnoCheck(true);
if(qno){
const _checkQno= await fetchCheckQno(qno);
setQnoCheck(_checkQno);
}
};
const onFinish = async values => {
console.log(qnoCheck);
if(!qnoCheck){
message.warning("문제 번호를 확인해 주세요.")
return;
}else{
const creator = sessionStorage.getItem('id');
console.log('Received values of form: ', values);
const formData = new FormData();
formData.append('qno', values.qno);
formData.append('typeSol', values.typeSol);
formData.append('typeQue', values.typeQue);
formData.append('html', values.html[0]);
formData.append('creator', creator);
const result = await fetchSaveData(formData);
console.log(result);
if(result){
message.info(result.message);
let initFields = [
{name:['qno'],value:null},
{name:['typeSol'],value:null},
{name:['typeQue'],value:null},
{name:['creator'],value:null},
];
setQno(null);
setFields(initFields);
setFileList([]);
onCancel();
callback({status:'SAVE_OK'});
}else{
callback({status:'SAVE_FAIL'})
}
}
};
const onChangeTypeSol = (value) => {
console.log(value);
setFields([...fields, {name:['typeSol'],value:value}]);
}
const onChangeTypeQue = (value) => {
console.log(value);
setFields([...fields, {name:['typeQue'],value:value}])
}
const formItemLayout = {
labelCol: { span: 6 },
wrapperCol: { span: 14 },
};
return (
<Modal
placement={'bottom'}
closable={true}
height={'75%'}
visible={visible}
okText={'저장'}
cancelText={'이전'}
onCancel={onCancel}
footer={null}
>
<Form name="validate_other"
{...formItemLayout}
onFinish={onFinish}
fields={[{name:['html'],value:fileList},...fields]}
>
<Form.Item
name="qno"
label="문제 번호"
rules={[
{
required: true,
message: '저장할 html의 문항번호를 입력해 주세요.',
},
]}>
<Row>
<Col>
<InputNumber
min={0}
max={10000}
value={qno}
onChange={changeNumber}>
</InputNumber>
</Col>
<Col>
<Button onClick={onClickQno}>번호 확인</Button>
</Col>
</Row>
</Form.Item>
<Form.Item
name="typeSol"
label="문제 타입"
rules={[
{
required: true,
message: '저장할 html의 문제 타입을 선택해 주세요.',
},
]}>
<Select onChange={onChangeTypeSol}>
<Option value="오지선다형">오지선다형</Option>
<Option value="단답형">단답형</Option>
<Option value="계산식">계산식</Option>
</Select>
</Form.Item>
<Form.Item
name="typeQue"
label="문제/풀이 구분"
rules={[
{
required: true,
message: '저장할 html의 문제/풀이 구분을 선택해 주세요.',
},
]}>
<Select onChange={onChangeTypeQue}>
<Option value="문제">문제</Option>
<Option value="풀이">풀이</Option>
</Select>
</Form.Item>
<Form.Item label="파일 업로드">
<Form.Item
name="html"
valuePropName="fileList"
getValueFromEvent={normFile}
noStyle
rules={[
{
required: true,
message: '파일을 드래그하거나 선택해 주세요.',
},
]}>
<Upload.Dragger name="files" {...props} >
<p className="ant-upload-drag-icon">
<InboxOutlined />
</p>
<p className="ant-upload-text">Click or drag file to this area to upload</p>
<p className="ant-upload-hint">Support for a single or bulk upload.</p>
</Upload.Dragger>
</Form.Item>
</Form.Item>
<Form.Item style={{alignContent:'middle'}} wrapperCol={{ span: 12, offset: 6 }}>
<Button type="primary" htmlType="submit">
저장
</Button>
</Form.Item>
</Form>
</Modal>
);
};
export default Html;
import React,{useState} from 'react';
import LoginForm from '../component/LoginForm';
import { getLoginInfo } from '../lib/api/login';
import {Redirect, withRouter} from "react-router-dom";
const fetchLogInfo= async(data) =>{
try{
const result = await getLoginInfo(data);
if(result.status ===200){
console.log("서버 데이터와 일치: "+ result.data ); // result의 반환값 확인
return true;
}
} catch(e){
console.log(e);
alert("id와 비밀번호를 확인해주세요!");
return false;
}
}
const Login = () => {
const [authenticated,setAuthenticated] = useState(false);
const onFinish = async (values)=> {
console.log('Received values of form: ', values);
const isAuth = await fetchLogInfo(values);
sessionStorage.setItem("isAuth", isAuth); //세션 스토리지 저장
sessionStorage.setItem("id",values.userid);
setAuthenticated(isAuth);
}
if(authenticated){
// history.push('/Home');
return <Redirect to="/Home"/>
}else{
return <LoginForm onFinish={onFinish} >
</LoginForm>
}
};
export default withRouter(Login);
import React, { useState, useEffect } from 'react';
import { Upload, message,Form, InputNumber, Button, Select, Modal,Row,Col} from 'antd';
import { InboxOutlined } from '@ant-design/icons';
import {saveFileAndQno,getMathData} from 'lib/api/mathCha';
import {checkQno} from '../lib/api/mathCha';
const {Option} =Select;
const fetchSaveData = async (data) => {
try{
const result = await saveFileAndQno(data);
console.log(result);
if(result.status===200){
return result.data;
}
}catch(e){
console.log(e);
message.warning(e.message);
}
}
const fetchCheckQno = async(qno) => {
try{
const result = await checkQno(qno);
if(result.status===200){
console.log(result);
message.info("사용 가능한 문항 번호 입니다.");
return true;
}else{
message.info("존재 하지 않는 문항 번호 입니다.");
return false;
}
}catch(e){
console.log(e);
message.info("존재 하지 않는 문항 번호 입니다.");
return false;
}
}
const Mathcha = ({ visible, onCancel, callback }) => {
const [fields,setFields] =useState([]);
const [qno, setQno] = useState(null);
const [upload,setUpload]=useState(false);
const [fileList, setFileList]=useState([]);
const [qnoCheck,setQnoCheck] = useState(false);
const changeNumber = (value) => {
setQno(value);
setFields([...fields, {name:['qno'],value:value}]);
};
useEffect(()=>{
if(!visible){
let initFields = [
{name:['qno'],value:null},
{name:['typeSol'],value:null},
{name:['typeQue'],value:null},
{name:['creator'],value:null},
];
setQno(null);
setFields(initFields);
setFileList([]);
}
},[visible]);
const props = {
multiple:false,
//data: { qno: qno },
accept:'.mathcha',
onRemove: file => {
const index = fileList.indexOf(file);
const newFileList = fileList.slice();
newFileList.splice(index, 1);
return {
fileList: newFileList,
};
},
beforeUpload: file => {
console.log(file);
if(file.name.indexOf('.mathcha')>0)
{
setFileList([file]);
}else {
setFileList([]);
message.info("MathCha 형식의 파일이 아닙니다.");
}
return false;
},
};
const onOk = () => {
setUpload(true)
};
const normFile = e => {
console.log('Upload event:', e);
if (Array.isArray(e)) {
return e;
}
return e && e.fileList;
};
const onClickQno = async(e)=>{
e.preventDefault();
//번호가 호출 성공시 setQnoCheck(true);
if(qno){
const _checkQno= await fetchCheckQno(qno);
setQnoCheck(_checkQno);
}
};
const onFinish = async values => {
console.log(qnoCheck);
if(!qnoCheck){
message.warning("문제 번호를 확인해 주세요.")
return;
}else{
const creator = sessionStorage.getItem('id');
console.log('Received values of form: ', values);
const formData = new FormData();
formData.append('qno', values.qno);
formData.append('typeSol', values.typeSol);
formData.append('typeQue', values.typeQue);
formData.append('math', values.math[0]);
formData.append('creator', creator);
const result = await fetchSaveData(formData);
console.log(result);
if(result){
message.info(result.message);
let initFields = [
{name:['qno'],value:null},
{name:['typeSol'],value:null},
{name:['typeQue'],value:null},
{name:['creator'],value:null},
];
setQno(null);
setFields(initFields);
setFileList([]);
onCancel();
callback({status:'SAVE_OK'});
}else{
callback({status:'SAVE_FAIL'})
}
}
};
const onChangeTypeSol = (value) => {
console.log(value);
setFields([...fields, {name:['typeSol'],value:value}]);
}
const onChangeTypeQue = (value) => {
console.log(value);
setFields([...fields, {name:['typeQue'],value:value}])
}
const formItemLayout = {
labelCol: { span: 6 },
wrapperCol: { span: 14 },
};
return (
<Modal
placement={'bottom'}
closable={true}
height={'75%'}
visible={visible}
okText={'저장'}
cancelText={'이전'}
onCancel={onCancel}
footer={null}
>
<Form name="validate_other"
{...formItemLayout}
onFinish={onFinish}
fields={[{name:['math'],value:fileList},...fields]}
>
<Form.Item
name="qno"
label="문제 번호"
rules={[
{
required: true,
message: '저장할 html의 파일의 문항번호를 입력해 주세요.',
},
]}><Row>
<Col>
<InputNumber
min={0}
max={10000}
value={qno}
onChange={changeNumber}>
</InputNumber>
</Col>
<Col>
<Button onClick={onClickQno}>번호 확인</Button>
</Col>
</Row>
</Form.Item>
<Form.Item
name="typeSol"
label="문제 타입"
rules={[
{
required: true,
message: '저장할 html의 문제 타입을 선택해 주세요.',
},
]}>
<Select onChange={onChangeTypeSol}>
<Option value="오지선다형">오지선다형</Option>
<Option value="단답형">단답형</Option>
<Option value="계산식">계산식</Option>
</Select>
</Form.Item>
<Form.Item
name="typeQue"
label="문제/풀이 구분"
rules={[
{
required: true,
message: '저장할 html의 문제/풀이 구분을 선택해 주세요.',
},
]}>
<Select onChange={onChangeTypeQue}>
<Option value="문제">문제</Option>
<Option value="풀이">풀이</Option>
</Select>
</Form.Item>
<Form.Item label="파일 업로드">
<Form.Item
name="math"
valuePropName="fileList"
getValueFromEvent={normFile}
noStyle
rules={[
{
required: true,
message: '파일을 드래그하거나 선택해 주세요.',
},
]}>
<Upload.Dragger name="files" {...props} >
<p className="ant-upload-drag-icon">
<InboxOutlined />
</p>
<p className="ant-upload-text">Click or drag file to this area to upload</p>
<p className="ant-upload-hint">Support for a single or bulk upload.</p>
</Upload.Dragger>
</Form.Item>
</Form.Item>
<Form.Item wrapperCol={{ span: 12, offset: 6 }}>
<Button type="primary" htmlType="submit">
저장
</Button>
</Form.Item>
</Form>
</Modal>
);
};
export default Mathcha;
.trigger {
font-size: 18px;
line-height: 64px;
padding: 0 24px;
cursor: pointer;
transition: color 0.3s;
}
.trigger:hover {
color: #1890ff;
}
.logo {
height: 32px;
background: rgba(255, 255, 255, 0.2);
margin: 16px;
}
.site-layout .site-layout-background {
background: #fff;
}
div.demo-editor.rdw-editor-main {
border: 1px solid #f1f1f1;
height: 65vh;
}
\ No newline at end of file
import React, { useState, useEffect, useCallback } from 'react';
import { Drawer, message } from 'antd';
import { UploadOutlined, RetweetOutlined } from '@ant-design/icons';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import { getTexToSvg, checkQno, saveFileAndQno } from '../lib/api/tikz'; // Request api
import TikzForm from '../component/tikzForm';
const fetchTexToSvg = async (data) => {
// getTexToSvg api를 이용하기 위한 const
try {
const result = await getTexToSvg({ tex: data });
if (result.status === 200) {
console.log(result.status);
console.log(result.data);
return result.data;
}
} catch (e) {
console.log(e);
//Notification. 추가해서 변환상태 알려주기
return null;
}
};
const fetchSaveData = async (data) => {
try{
const result = await saveFileAndQno(data);
console.log(result);
if(result.status===200){
return result.data;
}
}catch(e){
console.log(e);
message.warning(e.message);
}
}
/* 문항번호 체크 */
const fetchCheckQno = async(qno) => {
try{
const result = await checkQno(qno);
if(result.status===200){
console.log(result);
message.info("사용 가능한 문항 번호 입니다.");
return true;
}else{
message.info("존재 하지 않는 문항 번호 입니다.");
return false;
}
}catch(e){
console.log(e);
message.info("존재 하지 않는 문항 번호 입니다.");
return false;
}
}
const _tikzcode= "% 예시 (x축, y축, 반지름이 1cm인 원의 그림) %\n\
% 오른쪽의 변환 버튼을 눌러보세요! %\n\n\
\\documentclass{article}\n\
\\usepackage{tikz}\n\
\\begin{document}\n\n\n\
\\begin{tikzpicture}\n\
\\draw (-1.5,0) -- (1.5,0);\n\
\\draw (0,-1.5) -- (0,1.5);\n\
\\draw (0,0) circle (1cm);\n\
\\end{tikzpicture}\n\n\n\
\\end{document}";
const Tikz = ({ onLeave, visible, callback, selectItem, mode }) => {
const [fields,setFields] =useState([]);
const [qno, setQno] = useState(null);
const [number, setNumber] = useState(null); //문항번호를 저장하는 state
const [inputText, setinputText] = useState(_tikzcode); //tikz code를 저장하는 state
const [svg, setSvg] = useState(null); //변환된 svg 데이터를 저장하는 state
const [qnoCheck,setQnoCheck] = useState(false);
const [tikzcode,setTikzCode] = useState(_tikzcode);
//svg
//onclickevent : Tikz 변환하기 Button의 onClick Event
//onChangeTikz : TextArea 컴포넌트의 onChange event
//onFinish : Form data를 제출하기 위한 event
useEffect(()=> {
if(mode==='preview'&&selectItem){
console.log(selectItem);
let initFields = [
{name:['qno'],value:selectItem.qno},
{name:['typeSol'],value:selectItem.typeSol},
{name:['typeQue'],value:selectItem.typeQue},
{name:['creator'],value:selectItem.creator},
];
setQno(selectItem.qno);
setTikzCode(selectItem.tex);
setFields(initFields);
setSvg(null);
}
},[mode, selectItem]);
useEffect(()=>{
if(mode === 'new'){
let initFields = [
{name:['qno'],value:null},
{name:['typeSol'],value:null},
{name:['typeQue'],value:null},
{name:['creator'],value:null},
];
setQno(null);
setTikzCode(_tikzcode);
setFields(initFields);
setSvg(null);
}
},[mode]);
const onClickEvent = (e) => {
if(inputText){
callbackSVG(inputText);
}
if (inputText === null) {
console.log(inputText);
alert(
//data에 null이 입력된 경우
'Code 값을 입력해주세요!'
);
} else {
console.log(inputText);
callbackSVG(inputText);
}
};
const onChangeQno = (value) => {
console.log(value);
setQno(value);
setFields([...fields, {name:['qno'],value:value}]);
};
/*
useEffect(()=>{
if(!visible ){
let initFields = [
{name:['qno'],value:null},
{name:['typeSol'],value:null},
{name:['typeQue'],value:null},
{name:['creator'],value:null},
];
setQno(null);
setTikzCode(tikzcode);
setFields(initFields);
}
},[visible,mode]);
*/
const callbackSVG = useCallback(async () => {
const result = await fetchTexToSvg(inputText);
setSvg(result); //api로 받아온 result를 svg state에 저장
}, [inputText]);
const onChangeTikz = (e) => {
if (e) {
setinputText(e.target.value);
} else setinputText(null);
};
const onSaveEvent = () => {
try {
//서버에 저장이 확인 됐을때 200, 500(오류) http status
const result = alert('전송이 성공적으로 완료됐습니다.');
} catch (e) {
//서버에 저장 오류가 났을때
console.log(e);
alert(e);
}
};
const onClickQno = async(e)=>{
e.preventDefault();
//번호가 호출 성공시 setQnoCheck(true);
if(qno){
const _checkQno= await fetchCheckQno(qno);
setQnoCheck(_checkQno);
}
};
const onFinish = async(values) => {
console.log(values);
console.log(qnoCheck);
if(!qnoCheck){
message.warning("문제 번호를 확인해 주세요.")
return;
}else{
const creator = sessionStorage.getItem('id');
console.log('Received values of form: ', values);
const result = await fetchSaveData({...values, creator});
console.log(result);
if(result){
message.info(result.message);
let initFields = [
{name:['qno'],value:null},
{name:['typeSol'],value:null},
{name:['typeQue'],value:null},
{name:['creator'],value:null},
];
setFields(initFields);
onLeave();
callback({status:'SAVE_OK'});
setQno(null);
}else{
callback({status:'SAVE_FAIL'})
}
}
};
const onChangeTypeSol = (value) => {
console.log(value);
setFields([...fields, {name:['typeSol'],value:value}]);
}
const onChangeTypeQue = (value) => {
console.log(value);
setFields([...fields, {name:['typeQue'],value:value}])
}
return (
<Drawer
title={'Tikz Editor'}
placement={'bottom'}
closable={true}
height={'90vh'}
onClose={onLeave}
visible={visible}>
<TikzForm
svg={svg}
onClickEvent={onClickEvent}
onChangeTikz={onChangeTikz}
onSaveEvent={onSaveEvent}
onFinish={onFinish}
tikzcode={tikzcode}
fields={fields}
onClickQno={onClickQno}
onChangeQno={onChangeQno}
onChangeTypeSol={onChangeTypeSol}
onChangeTypeQue={onChangeTypeQue}
qno={qno}>
</TikzForm>
</Drawer>
);
};
export default Tikz;
//<Transform value={tikzHtml}></Transform>
export { default as Home } from './Home';
export { default as Html } from './Html';
export { default as Mathcha } from './Mathcha';
export { default as Tikz } from './Tikz';
export { default as Login} from './Login';
import React from 'react';
import { Menu, Dropdown, Button } from 'antd';
//import Scroll from '../component/Slider';
// 화살표 함수에서 {} 가 들어가는 경우에는 처리해야 되는 루틴이 있을때 return 값만 있을때는 () or 생략도 가능하다.
//
//기본적인 도형들을 그리는 도형상수
const draw = () => (
<Menu>
<Menu.Item>
<button onclick="">Triangle</button>
</Menu.Item>
<Menu.Item>
<a
target="_blank"
rel="noopener noreferrer"
href="http://www.taobao.com/">
Rectangle
</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
pentagon
</a>
</Menu.Item>
<Menu.Item danger>도형 디자인</Menu.Item>
</Menu>
);
//기본적인 그래프를 그리는 그래프 상수
const graph = () => (
<Menu>
<Menu.Item>
<a
target="_blank"
rel="noopener noreferrer"
href="http://www.alipay.com/">
2차함수
</a>
</Menu.Item>
<Menu.Item>
<a
target="_blank"
rel="noopener noreferrer"
href="http://www.taobao.com/">
3차함수
</a>
</Menu.Item>
<Menu.Item danger>함수 디자인</Menu.Item>
</Menu>
);
// x축 y축을 그리게 만드는 상수
const grid = () => (
<Menu>
<Menu.Item>
<a
target="_blank"
rel="noopener noreferrer"
href="http://www.alipay.com/">
2차원
</a>
</Menu.Item>
<Menu.Item>
<a
target="_blank"
rel="noopener noreferrer"
href="http://www.taobao.com/">
3차원
</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
3rd menu item
</a>
</Menu.Item>
<Menu.Item danger>좌표축 디자인</Menu.Item>
</Menu>
);
// 수학 공식들을 선택하는 상수
const MathFunction = () => (
<Menu>
<Menu.Item>
<a
target="_blank"
rel="noopener noreferrer"
href="http://www.alipay.com/"></a>
</Menu.Item>
<Menu.Item>
<a
target="_blank"
rel="noopener noreferrer"
href="http://www.taobao.com/">
2nd menu item
</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
3rd menu item
</a>
</Menu.Item>
<Menu.Item danger>a danger item</Menu.Item>
</Menu>
);
//위의 상수 값들을 집어넣어 Dropdowm 메뉴 바들을 구성해준다.
const DropMenu = () => (
//위의 상수 값들을 집어넣어 Dropdowm 메뉴 바들을 구성해준다. const DropMenu
<div style={{ display: 'inline-block' }}>
<Dropdown overlay={draw} placement="bottomLeft" arrow>
<Button>Draw</Button>
</Dropdown>
<Button>Graph</Button>
<Dropdown overlay={grid} placement="bottomRight" arrow>
<Button>Grid</Button>
</Dropdown>
<Dropdown overlay={MathFunction} arrow>
<Button>Function</Button>
</Dropdown>
</div>
);
export default DropMenu;
//<Scroll> </Scroll>
\ No newline at end of file
import React from 'react';
import { Form, Input, Button, Checkbox, Row, Col } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import {HeartOutlined} from '@ant-design/icons';
const LoginForm = ({onFinish},) => {
return (
<Form name="normal_login" className="login-form" initialValues={{remember: true, }} onFinish={onFinish}>
<Row justify="center" style={{marginTop:'80px'}}>
<HeartOutlined />
</Row>
<Row justify="center" style={{marginTop:'20px'}}>
<Col>
<Form.Item name="userid" rules={[{required: true, message: 'id를 입력해주세요.', },]}>
<Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="User id" />
</Form.Item>
</Col>
</Row>
<Row justify="center" style={{marginTop:'10px'}}>
<Col>
<Form.Item name="userpwd" rules={[{required: true, message: '비밀번호를 입력해주세요.'},]}>
<Input prefix={<LockOutlined className="site-form-item-icon" />} type="password" placeholder="Password"/>
</Form.Item>
</Col>
</Row>
<Row justify="center" style={{marginTop:'10px'}}>
<Col>
<Form.Item name="remember" valuePropName="checked" noStyle>
<Checkbox>Remember me</Checkbox>
</Form.Item>
</Col>
</Row>
<Row justify="center" style={{marginTop:'10px'}}>
<Col>
<Form.Item>
<Button type="primary" htmlType="submit" className="login-form-button">
로그인하기
</Button>
</Form.Item>
</Col>
</Row>
</Form>
);
}
export default LoginForm;
\ No newline at end of file
import React, { useState } from 'react';
import tikz from '../lib/api/tikz';
function Transform({ value }) {
const [transData,settransData]=useState(value);
return (
<tikz value={value}/>
);
}
//side effect를 사용하기 위해서 useState 함수들을 선언하고 useEffect를 선언해서
// Clean Up을 한다.
export default Transform;
//iframe 부분
/* <iframe
id="iframe"
scrolling="yes"
srcDoc={value}
style={{
width: '100%',
height: '100%',
border: 'none'
}}>
</iframe>
*/
//useEffect 부분
{/*}
useEffect(() => {
if (value) {
setData(value);
console.log({value});
}
return () => {
setData(null);
};
}, [value]);
{*/}
//iframe 부분
{/*}
return (
<iframe
id="iframe"
scrolling="no"
srcDoc={data}
style={{
width: '100%',
height: '100%',
border: 'none',
pointerEvents: 'none',
}}
/>
);
}
{*/}
//side effect를 사용하기 위해서 useState 함수들을 선언하고 useEffect를 선언해서
// Clean Up을 한다.
import React, { Children, Component } from 'react';
import { createPortal } from 'react-dom';
export class IFrame extends Component {
constructor(props) {
super(props);
this.setContentRef = (node) => {
this.contentRef = node?.contentWindow?.document.body;
};
}
bindIFrameMousemove(iframe) {
iframe.contentWindow.addEventListener('mousemove', function (event) {
var clRect = iframe.getBoundingClientRect();
var evt = new CustomEvent('mousemove', { bubbles: true, cancelable: false });
evt.clientX = event.clientX;
evt.clientY = event.clientY;
iframe.dispatchEvent(evt);
});
// iframe 안을 클릭했을 때, 해당 popup 창을 Click 한 것과 같은 효과를 준다.
iframe.contentWindow.addEventListener('click', function (event) {
var evt = new CustomEvent('click', { bubbles: true, cancelable: false });
iframe.dispatchEvent(evt);
});
// dragging 하다가 mouse button을 up 하는 이벤트를 iframe 밖으로 전달.
iframe.contentWindow.addEventListener('mouseup', function (event) {
var clRect = iframe.getBoundingClientRect();
var evt = new CustomEvent('mouseup', { bubbles: true, cancelable: false });
evt.clientX = event.clientX;
evt.clientY = event.clientY;
iframe.dispatchEvent(evt);
});
}
componentDidMount() {
this.bindIFrameMousemove(document.getElementById('iFrame'));
}
render() {
const { children, ...props } = this.props;
return (
<iframe id="iFrame" {...props} ref={this.setContentRef}>
{this.contentRef && createPortal(Children.only(children), this.contentRef)}
</iframe>
);
}
}
.transfer_tiks {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.transfer_tiks .transfer_tiks_text {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 150%;
left: 50%;
margin-left: -60px;
}
.transfer_tiks .transfer_tiks_text::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
.transfer_tiks:hover .transfer_tiks_text {
visibility: visible;
}
\ No newline at end of file
import React,{Flagment} from 'react';
import { Drawer, Input, Button, Menu, Form, Col, Row, AutoComplete, Tooltip, Select } from 'antd';
import { UploadOutlined, RetweetOutlined } from '@ant-design/icons';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import { PanZoom } from 'react-easy-panzoom';
import { InputNumber } from 'antd';
import { IFrame } from './iframe';
import './tikzForm.css';
const { TextArea } = Input;
const {Option} = Select;
const TikzForm = ({ svg, onClickEvent, onChangeTikz, onFinish, onChangeQno, onClickQno, tikzcode, fields, qno, onChangeTypeSol,onChangeTypeQue}) => {
//svg
//onclickevent : Tikz 변환하기 Button의 onClick Event
//onChangeTikz : TextArea 컴포넌트의 onChange event
//onFinish : Form data를 제출하기 위한 event
//onSaveEvent : Tikz 등록하기의 버튼 event
console.log(fields);
return (
<Form onFinish={onFinish} fields={[...fields]}>
<Form.Item
name="qno"
label="문제 번호"
rules={[
{
required: true,
message: '문항번호를 입력해 주세요.',
},
]}><Row>
<Col>
<InputNumber
min={0}
max={10000}
value={qno}
onChange={onChangeQno}>
</InputNumber>
</Col>
<Col>
<Button onClick={onClickQno}>번호 확인</Button>
</Col>
</Row>
</Form.Item>
<Form.Item
name="typeSol"
label="문제 타입"
wrapperCol={{span: 2 }}
rules={[
{
required: true,
message: '문제 타입을 선택해 주세요.',
},
]}>
<Select onChange={onChangeTypeSol}>
<Option value="오지선다형">오지선다형</Option>
<Option value="단답형">단답형</Option>
<Option value="계산식">계산식</Option>
</Select>
</Form.Item>
<Form.Item
name="typeQue"
label="문제/풀이 구분"
rules={[
{
required: true,
message: '문제/풀이 구분을 선택해 주세요.',
},
]}
wrapperCol={{span: 2 }}
>
<Select onChange={onChangeTypeQue}>
<Option value="문제">문제</Option>
<Option value="풀이">풀이</Option>
</Select>
</Form.Item>
<Row justify="space-between" align="middle">
<Col span={11}>
<Form.Item name="tikzCode" rules={[{ required: true, message: 'tikz 코드를 입력해 주세요.' }]} initialValue={tikzcode}>
<TextArea
style={{ width: '44vw', height: '70vh' }}
onChange={onChangeTikz}
/>
</Form.Item>
</Col>
<Col span={2} style={{textAlign:'center'}} >
<Tooltip title={'tikz 미리보기'}>
<Button type="ghost" icon={<RetweetOutlined />} onClick={onClickEvent}></Button>
</Tooltip>
</Col>
<Col span={11} >
<IFrame
style={{
width: '44vw',
height: '70vh',
marginTop: '-15px',
border: '1px solid #d9d9d9',
}}>
<PanZoom
style={{
display: 'block',
outline: 'none',
width: '44vw',
height: '70vh',
margin: '0px',
}}>
<div dangerouslySetInnerHTML={{ __html: svg }} />
</PanZoom>
</IFrame>
</Col>
</Row>
<Form.Item>
<Button type="primary" htmlType="submit">
저장하기
</Button>
</Form.Item>
</Form>
);
};
export default TikzForm;
import { Upload, Button, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import reqwest from 'reqwest';
class Demo extends React.Component {
state = {
fileList: [],
uploading: false,
};
handleUpload = () => {
const { fileList } = this.state;
const formData = new FormData();
fileList.forEach((file) => {
formData.append('files[]', file);
});
this.setState({
uploading: true,
});
// You can use any AJAX library you like
reqwest({
url: 'https://localhost:5000/user',
method: 'post',
processData: false,
data: formData,
success: () => {
this.setState({
fileList: [],
uploading: false,
});
message.success('upload successfully.');
},
error: () => {
this.setState({
uploading: false,
});
message.error('upload failed.');
},
});
};
render() {
const { uploading, fileList } = this.state;
const props = {
onRemove: (file) => {
this.setState((state) => {
const index = state.fileList.indexOf(file);
const newFileList = state.fileList.slice();
newFileList.splice(index, 1);
return {
fileList: newFileList,
};
});
},
beforeUpload: (file) => {
this.setState((state) => ({
fileList: [...state.fileList, file],
}));
return false;
},
fileList,
};
return (
<>
<Upload {...props}>
<Button>
<UploadOutlined /> Select File
</Button>
</Upload>
<Button
type="primary"
onClick={this.handleUpload}
disabled={fileList.length === 0}
loading={uploading}
style={{ marginTop: 16 }}>
{uploading ? 'Uploading' : 'Start Upload'}
</Button>
</>
);
}
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { createBrowserHistory } from 'history';
import { BrowserRouter,Router } from 'react-router-dom';
const history = createBrowserHistory();
//<BrowserRouter history={history}></BrowserRouter>
ReactDOM.render(
<BrowserRouter history={history}>
<App />
</BrowserRouter>
,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
import axios from 'axios';
import qs from 'qs';
export const checkFiles = (data, whatUpload) => {
const options = {
method: 'POST',
headers: { 'content-type': 'application/x-www-form-urlencoded' },
data: qs.stringify(data),
url: 'http://localhost:5000/{whatUpload}',
};
return axios(options);
};
//export const tikz = (id) => tikz.post(`/users?id=${id != null ? id : ''}`);
//export const testAdd = (name, tel) => client.post('/users/add', { name, tel });
import axios from 'axios';
const client = axios.create();
client.defaults.baseURL = '';
client.defaults.withCredentials = true;
export default client;
import client from './client';
export const feedbackFind = () => client.get('/commenter');
export const feedbackAdd = (nickname, comment) =>
client.post('/commenter/add', { nickname, comment });
import axios from 'axios';
const hostMath = "http://ai.natmal.com:7070";
export const checkQno = (qno) => axios.get(`${hostMath}/checkQno?qno=${qno}`);
export const saveFileAndQno = (formData) =>
{
return axios({
method: 'post',
url: '/upload/html',
data: formData,
headers: {
'Content-Type': 'multipart/form-data',
},
});
}
export const getData = (user, pageSize, currentPage,orderWhat,orderKind) => axios.post('/tikzs',{user, pageSize, currentPage,orderWhat,orderKind});
import axios from 'axios';
import qs from 'qs';
export const getLoginInfo = (data) =>
{
const options = {
method: 'POST',
headers: { 'content-type': 'application/x-www-form-urlencoded' },
data: qs.stringify(data),
url:'http://ai.natmal.com:7070/checkUser',
};
return axios(options);
}
//export const tikz = (id) => tikz.post(`/users?id=${id != null ? id : ''}`);
//export const testAdd = (name, tel) => client.post('/users/add', { name, tel });
import axios from 'axios';
import qs from 'qs';
export const matchInfo = (data) =>
{
const options = {
method: 'GET',
headers: { 'content-type': 'application/x-www-form-urlencoded' },
data: qs.stringify(data),
url:'http://localhost:5000/users',
};
return axios(options);
}
//export const tikz = (id) => tikz.post(`/users?id=${id != null ? id : ''}`);
//export const testAdd = (name, tel) => client.post('/users/add', { name, tel });
import axios from 'axios';
const hostMath = 'http://ai.natmal.com:7070';
export const checkQno = (qno) => axios.get(`${hostMath}/checkQno?qno=${qno}`);
export const saveFileAndQno = (formData) =>
{
console.log(formData);
return axios({
method: 'post',
url: '/upload/math',
data: formData,
headers: {
'Content-Type': 'multipart/form-data',
},
});
}
//export const getMathData = (user, pageSize, currentPage,orderWhat) => axios.post('/tikzs',{user, pageSize, currentPage,ordeWhat});
import client from './client';
export const testFind = (id) => client.get(`/users?id=${id != null ? id : ''}`);
export const testAdd = (name, tel) => client.post('/users/add', { name, tel });
export const testEdit = (id, name, tel) =>
client.post('/users/edit', { id, name, tel });
export const testDelete = (id) => client.get('/users/delete?id=' + id);
import axios from 'axios';
import qs from 'qs';
export const getTexToSvg = (data) =>
{
const options = {
method: 'POST',
headers: { 'content-type': 'application/x-www-form-urlencoded' },
data: qs.stringify(data),
url:'http://ai.natmal.com:9292',
};
return axios(options);
}
const hostMath = "http://ai.natmal.com:7070";
export const checkQno = (qno) => axios.get(`${hostMath}/checkQno?qno=${qno}`);
export const saveFileAndQno = (data) => axios.post('/upload/tikz',{...data});
export const removeItem = (id) => axios.get(`/tikzs/removeItem?id=${id}`);
export const removeItems = (ids) => axios.post("/tikzs/removeItems",{ids});
//export const getData = (user, pageSize, currentPage,orderWhat) => axios.post('/tikzs',{user, pageSize, currentPage,ordeWhat});
//export const tikz = (id) => tikz.post(`/users?id=${id != null ? id : ''}`);
//export const testAdd = (name, tel) => client.post('/users/add', { name, tel });
// This optional code is used to register a service worker.
// register() is not called by default.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on subsequent visits to a page, after all the
// existing tabs open on the page have been closed, since previously cached
// resources are updated in the background.
// To learn more about the benefits of this model and instructions on how to
// opt-in, read https://bit.ly/CRA-PWA
const isLocalhost = Boolean(
window.location.hostname === 'localhost' ||
// [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' ||
// 127.0.0.0/8 are considered localhost for IPv4.
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
);
export function register(config) {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
// The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
if (publicUrl.origin !== window.location.origin) {
// Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
return;
}
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if (isLocalhost) {
// This is running on localhost. Let's check if a service worker still exists or not.
checkValidServiceWorker(swUrl, config);
// Add some additional logging to localhost, pointing developers to the
// service worker/PWA documentation.
navigator.serviceWorker.ready.then(() => {
console.log(
'This web app is being served cache-first by a service ' +
'worker. To learn more, visit https://bit.ly/CRA-PWA'
);
});
} else {
// Is not localhost. Just register service worker
registerValidSW(swUrl, config);
}
});
}
}
function registerValidSW(swUrl, config) {
navigator.serviceWorker
.register(swUrl)
.then(registration => {
registration.onupdatefound = () => {
const installingWorker = registration.installing;
if (installingWorker == null) {
return;
}
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// At this point, the updated precached content has been fetched,
// but the previous service worker will still serve the older
// content until all client tabs are closed.
console.log(
'New content is available and will be used when all ' +
'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
);
// Execute callback
if (config && config.onUpdate) {
config.onUpdate(registration);
}
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log('Content is cached for offline use.');
// Execute callback
if (config && config.onSuccess) {
config.onSuccess(registration);
}
}
}
};
};
})
.catch(error => {
console.error('Error during service worker registration:', error);
});
}
function checkValidServiceWorker(swUrl, config) {
// Check if the service worker can be found. If it can't reload the page.
fetch(swUrl, {
headers: { 'Service-Worker': 'script' },
})
.then(response => {
// Ensure service worker exists, and that we really are getting a JS file.
const contentType = response.headers.get('content-type');
if (
response.status === 404 ||
(contentType != null && contentType.indexOf('javascript') === -1)
) {
// No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then(registration => {
registration.unregister().then(() => {
window.location.reload();
});
});
} else {
// Service worker found. Proceed as normal.
registerValidSW(swUrl, config);
}
})
.catch(() => {
console.log(
'No internet connection found. App is running in offline mode.'
);
});
}
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready
.then(registration => {
registration.unregister();
})
.catch(error => {
console.error(error.message);
});
}
}
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom/extend-expect';
This diff is collapsed. Click to expand it.
Copyright (c) 2014-present Matt Zabriskie
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
This diff is collapsed. Click to expand it.
# Upgrade Guide
### 0.15.x -> 0.16.0
#### `Promise` Type Declarations
The `Promise` type declarations have been removed from the axios typings in favor of the built-in type declarations. If you use axios in a TypeScript project that targets `ES5`, please make sure to include the `es2015.promise` lib. Please see [this post](https://blog.mariusschulz.com/2016/11/25/typescript-2-0-built-in-type-declarations) for details.
### 0.13.x -> 0.14.0
#### TypeScript Definitions
The axios TypeScript definitions have been updated to match the axios API and use the ES2015 module syntax.
Please use the following `import` statement to import axios in TypeScript:
```typescript
import axios from 'axios';
axios.get('/foo')
.then(response => console.log(response))
.catch(error => console.log(error));
```
#### `agent` Config Option
The `agent` config option has been replaced with two new options: `httpAgent` and `httpsAgent`. Please use them instead.
```js
{
// Define a custom agent for HTTP
httpAgent: new http.Agent({ keepAlive: true }),
// Define a custom agent for HTTPS
httpsAgent: new https.Agent({ keepAlive: true })
}
```
#### `progress` Config Option
The `progress` config option has been replaced with the `onUploadProgress` and `onDownloadProgress` options.
```js
{
// Define a handler for upload progress events
onUploadProgress: function (progressEvent) {
// ...
},
// Define a handler for download progress events
onDownloadProgress: function (progressEvent) {
// ...
}
}
```
### 0.12.x -> 0.13.0
The `0.13.0` release contains several changes to custom adapters and error handling.
#### Error Handling
Previous to this release an error could either be a server response with bad status code or an actual `Error`. With this release Promise will always reject with an `Error`. In the case that a response was received, the `Error` will also include the response.
```js
axios.get('/user/12345')
.catch((error) => {
console.log(error.message);
console.log(error.code); // Not always specified
console.log(error.config); // The config that was used to make the request
console.log(error.response); // Only available if response was received from the server
});
```
#### Request Adapters
This release changes a few things about how request adapters work. Please take note if you are using your own custom adapter.
1. Response transformer is now called outside of adapter.
2. Request adapter returns a `Promise`.
This means that you no longer need to invoke `transformData` on response data. You will also no longer receive `resolve` and `reject` as arguments in your adapter.
Previous code:
```js
function myAdapter(resolve, reject, config) {
var response = {
data: transformData(
responseData,
responseHeaders,
config.transformResponse
),
status: request.status,
statusText: request.statusText,
headers: responseHeaders
};
settle(resolve, reject, response);
}
```
New code:
```js
function myAdapter(config) {
return new Promise(function (resolve, reject) {
var response = {
data: responseData,
status: request.status,
statusText: request.statusText,
headers: responseHeaders
};
settle(resolve, reject, response);
});
}
```
See the related commits for more details:
- [Response transformers](https://github.com/axios/axios/commit/10eb23865101f9347570552c04e9d6211376e25e)
- [Request adapter Promise](https://github.com/axios/axios/commit/157efd5615890301824e3121cc6c9d2f9b21f94a)
### 0.5.x -> 0.6.0
The `0.6.0` release contains mostly bug fixes, but there are a couple things to be aware of when upgrading.
#### ES6 Promise Polyfill
Up until the `0.6.0` release ES6 `Promise` was being polyfilled using [es6-promise](https://github.com/jakearchibald/es6-promise). With this release, the polyfill has been removed, and you will need to supply it yourself if your environment needs it.
```js
require('es6-promise').polyfill();
var axios = require('axios');
```
This will polyfill the global environment, and only needs to be done once.
#### `axios.success`/`axios.error`
The `success`, and `error` aliases were deprecated in [0.4.0](https://github.com/axios/axios/blob/master/CHANGELOG.md#040-oct-03-2014). As of this release they have been removed entirely. Instead please use `axios.then`, and `axios.catch` respectively.
```js
axios.get('some/url')
.then(function (res) {
/* ... */
})
.catch(function (err) {
/* ... */
});
```
#### UMD
Previous versions of axios shipped with an AMD, CommonJS, and Global build. This has all been rolled into a single UMD build.
```js
// AMD
require(['bower_components/axios/dist/axios'], function (axios) {
/* ... */
});
// CommonJS
var axios = require('axios/dist/axios');
```
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff could not be displayed because it is too large.
export interface AxiosTransformer {
(data: any, headers?: any): any;
}
export interface AxiosAdapter {
(config: AxiosRequestConfig): AxiosPromise<any>;
}
export interface AxiosBasicCredentials {
username: string;
password: string;
}
export interface AxiosProxyConfig {
host: string;
port: number;
auth?: {
username: string;
password:string;
};
protocol?: string;
}
export type Method =
| 'get' | 'GET'
| 'delete' | 'DELETE'
| 'head' | 'HEAD'
| 'options' | 'OPTIONS'
| 'post' | 'POST'
| 'put' | 'PUT'
| 'patch' | 'PATCH'
| 'purge' | 'PURGE'
| 'link' | 'LINK'
| 'unlink' | 'UNLINK'
export type ResponseType =
| 'arraybuffer'
| 'blob'
| 'document'
| 'json'
| 'text'
| 'stream'
export interface AxiosRequestConfig {
url?: string;
method?: Method;
baseURL?: string;
transformRequest?: AxiosTransformer | AxiosTransformer[];
transformResponse?: AxiosTransformer | AxiosTransformer[];
headers?: any;
params?: any;
paramsSerializer?: (params: any) => string;
data?: any;
timeout?: number;
timeoutErrorMessage?: string;
withCredentials?: boolean;
adapter?: AxiosAdapter;
auth?: AxiosBasicCredentials;
responseType?: ResponseType;
xsrfCookieName?: string;
xsrfHeaderName?: string;
onUploadProgress?: (progressEvent: any) => void;
onDownloadProgress?: (progressEvent: any) => void;
maxContentLength?: number;
validateStatus?: ((status: number) => boolean) | null;
maxBodyLength?: number;
maxRedirects?: number;
socketPath?: string | null;
httpAgent?: any;
httpsAgent?: any;
proxy?: AxiosProxyConfig | false;
cancelToken?: CancelToken;
decompress?: boolean;
}
export interface AxiosResponse<T = any> {
data: T;
status: number;
statusText: string;
headers: any;
config: AxiosRequestConfig;
request?: any;
}
export interface AxiosError<T = any> extends Error {
config: AxiosRequestConfig;
code?: string;
request?: any;
response?: AxiosResponse<T>;
isAxiosError: boolean;
toJSON: () => object;
}
export interface AxiosPromise<T = any> extends Promise<AxiosResponse<T>> {
}
export interface CancelStatic {
new (message?: string): Cancel;
}
export interface Cancel {
message: string;
}
export interface Canceler {
(message?: string): void;
}
export interface CancelTokenStatic {
new (executor: (cancel: Canceler) => void): CancelToken;
source(): CancelTokenSource;
}
export interface CancelToken {
promise: Promise<Cancel>;
reason?: Cancel;
throwIfRequested(): void;
}
export interface CancelTokenSource {
token: CancelToken;
cancel: Canceler;
}
export interface AxiosInterceptorManager<V> {
use(onFulfilled?: (value: V) => V | Promise<V>, onRejected?: (error: any) => any): number;
eject(id: number): void;
}
export interface AxiosInstance {
(config: AxiosRequestConfig): AxiosPromise;
(url: string, config?: AxiosRequestConfig): AxiosPromise;
defaults: AxiosRequestConfig;
interceptors: {
request: AxiosInterceptorManager<AxiosRequestConfig>;
response: AxiosInterceptorManager<AxiosResponse>;
};
getUri(config?: AxiosRequestConfig): string;
request<T = any, R = AxiosResponse<T>> (config: AxiosRequestConfig): Promise<R>;
get<T = any, R = AxiosResponse<T>>(url: string, config?: AxiosRequestConfig): Promise<R>;
delete<T = any, R = AxiosResponse<T>>(url: string, config?: AxiosRequestConfig): Promise<R>;
head<T = any, R = AxiosResponse<T>>(url: string, config?: AxiosRequestConfig): Promise<R>;
options<T = any, R = AxiosResponse<T>>(url: string, config?: AxiosRequestConfig): Promise<R>;
post<T = any, R = AxiosResponse<T>>(url: string, data?: any, config?: AxiosRequestConfig): Promise<R>;
put<T = any, R = AxiosResponse<T>>(url: string, data?: any, config?: AxiosRequestConfig): Promise<R>;
patch<T = any, R = AxiosResponse<T>>(url: string, data?: any, config?: AxiosRequestConfig): Promise<R>;
}
export interface AxiosStatic extends AxiosInstance {
create(config?: AxiosRequestConfig): AxiosInstance;
Cancel: CancelStatic;
CancelToken: CancelTokenStatic;
isCancel(value: any): boolean;
all<T>(values: (T | Promise<T>)[]): Promise<T[]>;
spread<T, R>(callback: (...args: T[]) => R): (array: T[]) => R;
}
declare const Axios: AxiosStatic;
export default Axios;
module.exports = require('./lib/axios');
\ No newline at end of file
# axios // adapters
The modules under `adapters/` are modules that handle dispatching a request and settling a returned `Promise` once a response is received.
## Example
```js
var settle = require('./../core/settle');
module.exports = function myAdapter(config) {
// At this point:
// - config has been merged with defaults
// - request transformers have already run
// - request interceptors have already run
// Make the request using config provided
// Upon response settle the Promise
return new Promise(function(resolve, reject) {
var response = {
data: responseData,
status: request.status,
statusText: request.statusText,
headers: responseHeaders,
config: config,
request: request
};
settle(resolve, reject, response);
// From here:
// - response transformers will run
// - response interceptors will run
});
}
```
'use strict';
var utils = require('./../utils');
var settle = require('./../core/settle');
var buildFullPath = require('../core/buildFullPath');
var buildURL = require('./../helpers/buildURL');
var http = require('http');
var https = require('https');
var httpFollow = require('follow-redirects').http;
var httpsFollow = require('follow-redirects').https;
var url = require('url');
var zlib = require('zlib');
var pkg = require('./../../package.json');
var createError = require('../core/createError');
var enhanceError = require('../core/enhanceError');
var isHttps = /https:?/;
/*eslint consistent-return:0*/
module.exports = function httpAdapter(config) {
return new Promise(function dispatchHttpRequest(resolvePromise, rejectPromise) {
var resolve = function resolve(value) {
resolvePromise(value);
};
var reject = function reject(value) {
rejectPromise(value);
};
var data = config.data;
var headers = config.headers;
// Set User-Agent (required by some servers)
// Only set header if it hasn't been set in config
// See https://github.com/axios/axios/issues/69
if (!headers['User-Agent'] && !headers['user-agent']) {
headers['User-Agent'] = 'axios/' + pkg.version;
}
if (data && !utils.isStream(data)) {
if (Buffer.isBuffer(data)) {
// Nothing to do...
} else if (utils.isArrayBuffer(data)) {
data = Buffer.from(new Uint8Array(data));
} else if (utils.isString(data)) {
data = Buffer.from(data, 'utf-8');
} else {
return reject(createError(
'Data after transformation must be a string, an ArrayBuffer, a Buffer, or a Stream',
config
));
}
// Add Content-Length header if data exists
headers['Content-Length'] = data.length;
}
// HTTP basic authentication
var auth = undefined;
if (config.auth) {
var username = config.auth.username || '';
var password = config.auth.password || '';
auth = username + ':' + password;
}
// Parse url
var fullPath = buildFullPath(config.baseURL, config.url);
var parsed = url.parse(fullPath);
var protocol = parsed.protocol || 'http:';
if (!auth && parsed.auth) {
var urlAuth = parsed.auth.split(':');
var urlUsername = urlAuth[0] || '';
var urlPassword = urlAuth[1] || '';
auth = urlUsername + ':' + urlPassword;
}
if (auth) {
delete headers.Authorization;
}
var isHttpsRequest = isHttps.test(protocol);
var agent = isHttpsRequest ? config.httpsAgent : config.httpAgent;
var options = {
path: buildURL(parsed.path, config.params, config.paramsSerializer).replace(/^\?/, ''),
method: config.method.toUpperCase(),
headers: headers,
agent: agent,
agents: { http: config.httpAgent, https: config.httpsAgent },
auth: auth
};
if (config.socketPath) {
options.socketPath = config.socketPath;
} else {
options.hostname = parsed.hostname;
options.port = parsed.port;
}
var proxy = config.proxy;
if (!proxy && proxy !== false) {
var proxyEnv = protocol.slice(0, -1) + '_proxy';
var proxyUrl = process.env[proxyEnv] || process.env[proxyEnv.toUpperCase()];
if (proxyUrl) {
var parsedProxyUrl = url.parse(proxyUrl);
var noProxyEnv = process.env.no_proxy || process.env.NO_PROXY;
var shouldProxy = true;
if (noProxyEnv) {
var noProxy = noProxyEnv.split(',').map(function trim(s) {
return s.trim();
});
shouldProxy = !noProxy.some(function proxyMatch(proxyElement) {
if (!proxyElement) {
return false;
}
if (proxyElement === '*') {
return true;
}
if (proxyElement[0] === '.' &&
parsed.hostname.substr(parsed.hostname.length - proxyElement.length) === proxyElement) {
return true;
}
return parsed.hostname === proxyElement;
});
}
if (shouldProxy) {
proxy = {
host: parsedProxyUrl.hostname,
port: parsedProxyUrl.port
};
if (parsedProxyUrl.auth) {
var proxyUrlAuth = parsedProxyUrl.auth.split(':');
proxy.auth = {
username: proxyUrlAuth[0],
password: proxyUrlAuth[1]
};
}
}
}
}
if (proxy) {
options.hostname = proxy.host;
options.host = proxy.host;
options.headers.host = parsed.hostname + (parsed.port ? ':' + parsed.port : '');
options.port = proxy.port;
options.path = protocol + '//' + parsed.hostname + (parsed.port ? ':' + parsed.port : '') + options.path;
// Basic proxy authorization
if (proxy.auth) {
var base64 = Buffer.from(proxy.auth.username + ':' + proxy.auth.password, 'utf8').toString('base64');
options.headers['Proxy-Authorization'] = 'Basic ' + base64;
}
}
var transport;
var isHttpsProxy = isHttpsRequest && (proxy ? isHttps.test(proxy.protocol) : true);
if (config.transport) {
transport = config.transport;
} else if (config.maxRedirects === 0) {
transport = isHttpsProxy ? https : http;
} else {
if (config.maxRedirects) {
options.maxRedirects = config.maxRedirects;
}
transport = isHttpsProxy ? httpsFollow : httpFollow;
}
if (config.maxBodyLength > -1) {
options.maxBodyLength = config.maxBodyLength;
}
// Create the request
var req = transport.request(options, function handleResponse(res) {
if (req.aborted) return;
// uncompress the response body transparently if required
var stream = res;
// return the last request in case of redirects
var lastRequest = res.req || req;
// if no content, is HEAD request or decompress disabled we should not decompress
if (res.statusCode !== 204 && lastRequest.method !== 'HEAD' && config.decompress !== false) {
switch (res.headers['content-encoding']) {
/*eslint default-case:0*/
case 'gzip':
case 'compress':
case 'deflate':
// add the unzipper to the body stream processing pipeline
stream = stream.pipe(zlib.createUnzip());
// remove the content-encoding in order to not confuse downstream operations
delete res.headers['content-encoding'];
break;
}
}
var response = {
status: res.statusCode,
statusText: res.statusMessage,
headers: res.headers,
config: config,
request: lastRequest
};
if (config.responseType === 'stream') {
response.data = stream;
settle(resolve, reject, response);
} else {
var responseBuffer = [];
stream.on('data', function handleStreamData(chunk) {
responseBuffer.push(chunk);
// make sure the content length is not over the maxContentLength if specified
if (config.maxContentLength > -1 && Buffer.concat(responseBuffer).length > config.maxContentLength) {
stream.destroy();
reject(createError('maxContentLength size of ' + config.maxContentLength + ' exceeded',
config, null, lastRequest));
}
});
stream.on('error', function handleStreamError(err) {
if (req.aborted) return;
reject(enhanceError(err, config, null, lastRequest));
});
stream.on('end', function handleStreamEnd() {
var responseData = Buffer.concat(responseBuffer);
if (config.responseType !== 'arraybuffer') {
responseData = responseData.toString(config.responseEncoding);
if (!config.responseEncoding || config.responseEncoding === 'utf8') {
responseData = utils.stripBOM(responseData);
}
}
response.data = responseData;
settle(resolve, reject, response);
});
}
});
// Handle errors
req.on('error', function handleRequestError(err) {
if (req.aborted && err.code !== 'ERR_FR_TOO_MANY_REDIRECTS') return;
reject(enhanceError(err, config, null, req));
});
// Handle request timeout
if (config.timeout) {
// Sometime, the response will be very slow, and does not respond, the connect event will be block by event loop system.
// And timer callback will be fired, and abort() will be invoked before connection, then get "socket hang up" and code ECONNRESET.
// At this time, if we have a large number of request, nodejs will hang up some socket on background. and the number will up and up.
// And then these socket which be hang up will devoring CPU little by little.
// ClientRequest.setTimeout will be fired on the specify milliseconds, and can make sure that abort() will be fired after connect.
req.setTimeout(config.timeout, function handleRequestTimeout() {
req.abort();
reject(createError('timeout of ' + config.timeout + 'ms exceeded', config, 'ECONNABORTED', req));
});
}
if (config.cancelToken) {
// Handle cancellation
config.cancelToken.promise.then(function onCanceled(cancel) {
if (req.aborted) return;
req.abort();
reject(cancel);
});
}
// Send the request
if (utils.isStream(data)) {
data.on('error', function handleStreamError(err) {
reject(enhanceError(err, config, null, req));
}).pipe(req);
} else {
req.end(data);
}
});
};
'use strict';
var utils = require('./../utils');
var settle = require('./../core/settle');
var cookies = require('./../helpers/cookies');
var buildURL = require('./../helpers/buildURL');
var buildFullPath = require('../core/buildFullPath');
var parseHeaders = require('./../helpers/parseHeaders');
var isURLSameOrigin = require('./../helpers/isURLSameOrigin');
var createError = require('../core/createError');
module.exports = function xhrAdapter(config) {
return new Promise(function dispatchXhrRequest(resolve, reject) {
var requestData = config.data;
var requestHeaders = config.headers;
if (utils.isFormData(requestData)) {
delete requestHeaders['Content-Type']; // Let the browser set it
}
var request = new XMLHttpRequest();
// HTTP basic authentication
if (config.auth) {
var username = config.auth.username || '';
var password = config.auth.password ? unescape(encodeURIComponent(config.auth.password)) : '';
requestHeaders.Authorization = 'Basic ' + btoa(username + ':' + password);
}
var fullPath = buildFullPath(config.baseURL, config.url);
request.open(config.method.toUpperCase(), buildURL(fullPath, config.params, config.paramsSerializer), true);
// Set the request timeout in MS
request.timeout = config.timeout;
// Listen for ready state
request.onreadystatechange = function handleLoad() {
if (!request || request.readyState !== 4) {
return;
}
// The request errored out and we didn't get a response, this will be
// handled by onerror instead
// With one exception: request that using file: protocol, most browsers
// will return status as 0 even though it's a successful request
if (request.status === 0 && !(request.responseURL && request.responseURL.indexOf('file:') === 0)) {
return;
}
// Prepare the response
var responseHeaders = 'getAllResponseHeaders' in request ? parseHeaders(request.getAllResponseHeaders()) : null;
var responseData = !config.responseType || config.responseType === 'text' ? request.responseText : request.response;
var response = {
data: responseData,
status: request.status,
statusText: request.statusText,
headers: responseHeaders,
config: config,
request: request
};
settle(resolve, reject, response);
// Clean up request
request = null;
};
// Handle browser request cancellation (as opposed to a manual cancellation)
request.onabort = function handleAbort() {
if (!request) {
return;
}
reject(createError('Request aborted', config, 'ECONNABORTED', request));
// Clean up request
request = null;
};
// Handle low level network errors
request.onerror = function handleError() {
// Real errors are hidden from us by the browser
// onerror should only fire if it's a network error
reject(createError('Network Error', config, null, request));
// Clean up request
request = null;
};
// Handle timeout
request.ontimeout = function handleTimeout() {
var timeoutErrorMessage = 'timeout of ' + config.timeout + 'ms exceeded';
if (config.timeoutErrorMessage) {
timeoutErrorMessage = config.timeoutErrorMessage;
}
reject(createError(timeoutErrorMessage, config, 'ECONNABORTED',
request));
// Clean up request
request = null;
};
// Add xsrf header
// This is only done if running in a standard browser environment.
// Specifically not if we're in a web worker, or react-native.
if (utils.isStandardBrowserEnv()) {
// Add xsrf header
var xsrfValue = (config.withCredentials || isURLSameOrigin(fullPath)) && config.xsrfCookieName ?
cookies.read(config.xsrfCookieName) :
undefined;
if (xsrfValue) {
requestHeaders[config.xsrfHeaderName] = xsrfValue;
}
}
// Add headers to the request
if ('setRequestHeader' in request) {
utils.forEach(requestHeaders, function setRequestHeader(val, key) {
if (typeof requestData === 'undefined' && key.toLowerCase() === 'content-type') {
// Remove Content-Type if data is undefined
delete requestHeaders[key];
} else {
// Otherwise add header to the request
request.setRequestHeader(key, val);
}
});
}
// Add withCredentials to request if needed
if (!utils.isUndefined(config.withCredentials)) {
request.withCredentials = !!config.withCredentials;
}
// Add responseType to request if needed
if (config.responseType) {
try {
request.responseType = config.responseType;
} catch (e) {
// Expected DOMException thrown by browsers not compatible XMLHttpRequest Level 2.
// But, this can be suppressed for 'json' type as it can be parsed by default 'transformResponse' function.
if (config.responseType !== 'json') {
throw e;
}
}
}
// Handle progress if needed
if (typeof config.onDownloadProgress === 'function') {
request.addEventListener('progress', config.onDownloadProgress);
}
// Not all browsers support upload events
if (typeof config.onUploadProgress === 'function' && request.upload) {
request.upload.addEventListener('progress', config.onUploadProgress);
}
if (config.cancelToken) {
// Handle cancellation
config.cancelToken.promise.then(function onCanceled(cancel) {
if (!request) {
return;
}
request.abort();
reject(cancel);
// Clean up request
request = null;
});
}
if (!requestData) {
requestData = null;
}
// Send the request
request.send(requestData);
});
};
'use strict';
var utils = require('./utils');
var bind = require('./helpers/bind');
var Axios = require('./core/Axios');
var mergeConfig = require('./core/mergeConfig');
var defaults = require('./defaults');
/**
* Create an instance of Axios
*
* @param {Object} defaultConfig The default config for the instance
* @return {Axios} A new instance of Axios
*/
function createInstance(defaultConfig) {
var context = new Axios(defaultConfig);
var instance = bind(Axios.prototype.request, context);
// Copy axios.prototype to instance
utils.extend(instance, Axios.prototype, context);
// Copy context to instance
utils.extend(instance, context);
return instance;
}
// Create the default instance to be exported
var axios = createInstance(defaults);
// Expose Axios class to allow class inheritance
axios.Axios = Axios;
// Factory for creating new instances
axios.create = function create(instanceConfig) {
return createInstance(mergeConfig(axios.defaults, instanceConfig));
};
// Expose Cancel & CancelToken
axios.Cancel = require('./cancel/Cancel');
axios.CancelToken = require('./cancel/CancelToken');
axios.isCancel = require('./cancel/isCancel');
// Expose all/spread
axios.all = function all(promises) {
return Promise.all(promises);
};
axios.spread = require('./helpers/spread');
module.exports = axios;
// Allow use of default import syntax in TypeScript
module.exports.default = axios;
'use strict';
/**
* A `Cancel` is an object that is thrown when an operation is canceled.
*
* @class
* @param {string=} message The message.
*/
function Cancel(message) {
this.message = message;
}
Cancel.prototype.toString = function toString() {
return 'Cancel' + (this.message ? ': ' + this.message : '');
};
Cancel.prototype.__CANCEL__ = true;
module.exports = Cancel;
'use strict';
var Cancel = require('./Cancel');
/**
* A `CancelToken` is an object that can be used to request cancellation of an operation.
*
* @class
* @param {Function} executor The executor function.
*/
function CancelToken(executor) {
if (typeof executor !== 'function') {
throw new TypeError('executor must be a function.');
}
var resolvePromise;
this.promise = new Promise(function promiseExecutor(resolve) {
resolvePromise = resolve;
});
var token = this;
executor(function cancel(message) {
if (token.reason) {
// Cancellation has already been requested
return;
}
token.reason = new Cancel(message);
resolvePromise(token.reason);
});
}
/**
* Throws a `Cancel` if cancellation has been requested.
*/
CancelToken.prototype.throwIfRequested = function throwIfRequested() {
if (this.reason) {
throw this.reason;
}
};
/**
* Returns an object that contains a new `CancelToken` and a function that, when called,
* cancels the `CancelToken`.
*/
CancelToken.source = function source() {
var cancel;
var token = new CancelToken(function executor(c) {
cancel = c;
});
return {
token: token,
cancel: cancel
};
};
module.exports = CancelToken;
'use strict';
module.exports = function isCancel(value) {
return !!(value && value.__CANCEL__);
};
'use strict';
var utils = require('./../utils');
var buildURL = require('../helpers/buildURL');
var InterceptorManager = require('./InterceptorManager');
var dispatchRequest = require('./dispatchRequest');
var mergeConfig = require('./mergeConfig');
/**
* Create a new instance of Axios
*
* @param {Object} instanceConfig The default config for the instance
*/
function Axios(instanceConfig) {
this.defaults = instanceConfig;
this.interceptors = {
request: new InterceptorManager(),
response: new InterceptorManager()
};
}
/**
* Dispatch a request
*
* @param {Object} config The config specific for this request (merged with this.defaults)
*/
Axios.prototype.request = function request(config) {
/*eslint no-param-reassign:0*/
// Allow for axios('example/url'[, config]) a la fetch API
if (typeof config === 'string') {
config = arguments[1] || {};
config.url = arguments[0];
} else {
config = config || {};
}
config = mergeConfig(this.defaults, config);
// Set config.method
if (config.method) {
config.method = config.method.toLowerCase();
} else if (this.defaults.method) {
config.method = this.defaults.method.toLowerCase();
} else {
config.method = 'get';
}
// Hook up interceptors middleware
var chain = [dispatchRequest, undefined];
var promise = Promise.resolve(config);
this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {
chain.unshift(interceptor.fulfilled, interceptor.rejected);
});
this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {
chain.push(interceptor.fulfilled, interceptor.rejected);
});
while (chain.length) {
promise = promise.then(chain.shift(), chain.shift());
}
return promise;
};
Axios.prototype.getUri = function getUri(config) {
config = mergeConfig(this.defaults, config);
return buildURL(config.url, config.params, config.paramsSerializer).replace(/^\?/, '');
};
// Provide aliases for supported request methods
utils.forEach(['delete', 'get', 'head', 'options'], function forEachMethodNoData(method) {
/*eslint func-names:0*/
Axios.prototype[method] = function(url, config) {
return this.request(mergeConfig(config || {}, {
method: method,
url: url,
data: (config || {}).data
}));
};
});
utils.forEach(['post', 'put', 'patch'], function forEachMethodWithData(method) {
/*eslint func-names:0*/
Axios.prototype[method] = function(url, data, config) {
return this.request(mergeConfig(config || {}, {
method: method,
url: url,
data: data
}));
};
});
module.exports = Axios;
'use strict';
var utils = require('./../utils');
function InterceptorManager() {
this.handlers = [];
}
/**
* Add a new interceptor to the stack
*
* @param {Function} fulfilled The function to handle `then` for a `Promise`
* @param {Function} rejected The function to handle `reject` for a `Promise`
*
* @return {Number} An ID used to remove interceptor later
*/
InterceptorManager.prototype.use = function use(fulfilled, rejected) {
this.handlers.push({
fulfilled: fulfilled,
rejected: rejected
});
return this.handlers.length - 1;
};
/**
* Remove an interceptor from the stack
*
* @param {Number} id The ID that was returned by `use`
*/
InterceptorManager.prototype.eject = function eject(id) {
if (this.handlers[id]) {
this.handlers[id] = null;
}
};
/**
* Iterate over all the registered interceptors
*
* This method is particularly useful for skipping over any
* interceptors that may have become `null` calling `eject`.
*
* @param {Function} fn The function to call for each interceptor
*/
InterceptorManager.prototype.forEach = function forEach(fn) {
utils.forEach(this.handlers, function forEachHandler(h) {
if (h !== null) {
fn(h);
}
});
};
module.exports = InterceptorManager;
# axios // core
The modules found in `core/` should be modules that are specific to the domain logic of axios. These modules would most likely not make sense to be consumed outside of the axios module, as their logic is too specific. Some examples of core modules are:
- Dispatching requests
- Managing interceptors
- Handling config
'use strict';
var isAbsoluteURL = require('../helpers/isAbsoluteURL');
var combineURLs = require('../helpers/combineURLs');
/**
* Creates a new URL by combining the baseURL with the requestedURL,
* only when the requestedURL is not already an absolute URL.
* If the requestURL is absolute, this function returns the requestedURL untouched.
*
* @param {string} baseURL The base URL
* @param {string} requestedURL Absolute or relative URL to combine
* @returns {string} The combined full path
*/
module.exports = function buildFullPath(baseURL, requestedURL) {
if (baseURL && !isAbsoluteURL(requestedURL)) {
return combineURLs(baseURL, requestedURL);
}
return requestedURL;
};
'use strict';
var enhanceError = require('./enhanceError');
/**
* Create an Error with the specified message, config, error code, request and response.
*
* @param {string} message The error message.
* @param {Object} config The config.
* @param {string} [code] The error code (for example, 'ECONNABORTED').
* @param {Object} [request] The request.
* @param {Object} [response] The response.
* @returns {Error} The created error.
*/
module.exports = function createError(message, config, code, request, response) {
var error = new Error(message);
return enhanceError(error, config, code, request, response);
};
'use strict';
var utils = require('./../utils');
var transformData = require('./transformData');
var isCancel = require('../cancel/isCancel');
var defaults = require('../defaults');
/**
* Throws a `Cancel` if cancellation has been requested.
*/
function throwIfCancellationRequested(config) {
if (config.cancelToken) {
config.cancelToken.throwIfRequested();
}
}
/**
* Dispatch a request to the server using the configured adapter.
*
* @param {object} config The config that is to be used for the request
* @returns {Promise} The Promise to be fulfilled
*/
module.exports = function dispatchRequest(config) {
throwIfCancellationRequested(config);
// Ensure headers exist
config.headers = config.headers || {};
// Transform request data
config.data = transformData(
config.data,
config.headers,
config.transformRequest
);
// Flatten headers
config.headers = utils.merge(
config.headers.common || {},
config.headers[config.method] || {},
config.headers
);
utils.forEach(
['delete', 'get', 'head', 'post', 'put', 'patch', 'common'],
function cleanHeaderConfig(method) {
delete config.headers[method];
}
);
var adapter = config.adapter || defaults.adapter;
return adapter(config).then(function onAdapterResolution(response) {
throwIfCancellationRequested(config);
// Transform response data
response.data = transformData(
response.data,
response.headers,
config.transformResponse
);
return response;
}, function onAdapterRejection(reason) {
if (!isCancel(reason)) {
throwIfCancellationRequested(config);
// Transform response data
if (reason && reason.response) {
reason.response.data = transformData(
reason.response.data,
reason.response.headers,
config.transformResponse
);
}
}
return Promise.reject(reason);
});
};
'use strict';
/**
* Update an Error with the specified config, error code, and response.
*
* @param {Error} error The error to update.
* @param {Object} config The config.
* @param {string} [code] The error code (for example, 'ECONNABORTED').
* @param {Object} [request] The request.
* @param {Object} [response] The response.
* @returns {Error} The error.
*/
module.exports = function enhanceError(error, config, code, request, response) {
error.config = config;
if (code) {
error.code = code;
}
error.request = request;
error.response = response;
error.isAxiosError = true;
error.toJSON = function toJSON() {
return {
// Standard
message: this.message,
name: this.name,
// Microsoft
description: this.description,
number: this.number,
// Mozilla
fileName: this.fileName,
lineNumber: this.lineNumber,
columnNumber: this.columnNumber,
stack: this.stack,
// Axios
config: this.config,
code: this.code
};
};
return error;
};
'use strict';
var utils = require('../utils');
/**
* Config-specific merge-function which creates a new config-object
* by merging two configuration objects together.
*
* @param {Object} config1
* @param {Object} config2
* @returns {Object} New object resulting from merging config2 to config1
*/
module.exports = function mergeConfig(config1, config2) {
// eslint-disable-next-line no-param-reassign
config2 = config2 || {};
var config = {};
var valueFromConfig2Keys = ['url', 'method', 'data'];
var mergeDeepPropertiesKeys = ['headers', 'auth', 'proxy', 'params'];
var defaultToConfig2Keys = [
'baseURL', 'transformRequest', 'transformResponse', 'paramsSerializer',
'timeout', 'timeoutMessage', 'withCredentials', 'adapter', 'responseType', 'xsrfCookieName',
'xsrfHeaderName', 'onUploadProgress', 'onDownloadProgress', 'decompress',
'maxContentLength', 'maxBodyLength', 'maxRedirects', 'transport', 'httpAgent',
'httpsAgent', 'cancelToken', 'socketPath', 'responseEncoding'
];
var directMergeKeys = ['validateStatus'];
function getMergedValue(target, source) {
if (utils.isPlainObject(target) && utils.isPlainObject(source)) {
return utils.merge(target, source);
} else if (utils.isPlainObject(source)) {
return utils.merge({}, source);
} else if (utils.isArray(source)) {
return source.slice();
}
return source;
}
function mergeDeepProperties(prop) {
if (!utils.isUndefined(config2[prop])) {
config[prop] = getMergedValue(config1[prop], config2[prop]);
} else if (!utils.isUndefined(config1[prop])) {
config[prop] = getMergedValue(undefined, config1[prop]);
}
}
utils.forEach(valueFromConfig2Keys, function valueFromConfig2(prop) {
if (!utils.isUndefined(config2[prop])) {
config[prop] = getMergedValue(undefined, config2[prop]);
}
});
utils.forEach(mergeDeepPropertiesKeys, mergeDeepProperties);
utils.forEach(defaultToConfig2Keys, function defaultToConfig2(prop) {
if (!utils.isUndefined(config2[prop])) {
config[prop] = getMergedValue(undefined, config2[prop]);
} else if (!utils.isUndefined(config1[prop])) {
config[prop] = getMergedValue(undefined, config1[prop]);
}
});
utils.forEach(directMergeKeys, function merge(prop) {
if (prop in config2) {
config[prop] = getMergedValue(config1[prop], config2[prop]);
} else if (prop in config1) {
config[prop] = getMergedValue(undefined, config1[prop]);
}
});
var axiosKeys = valueFromConfig2Keys
.concat(mergeDeepPropertiesKeys)
.concat(defaultToConfig2Keys)
.concat(directMergeKeys);
var otherKeys = Object
.keys(config1)
.concat(Object.keys(config2))
.filter(function filterAxiosKeys(key) {
return axiosKeys.indexOf(key) === -1;
});
utils.forEach(otherKeys, mergeDeepProperties);
return config;
};
'use strict';
var createError = require('./createError');
/**
* Resolve or reject a Promise based on response status.
*
* @param {Function} resolve A function that resolves the promise.
* @param {Function} reject A function that rejects the promise.
* @param {object} response The response.
*/
module.exports = function settle(resolve, reject, response) {
var validateStatus = response.config.validateStatus;
if (!response.status || !validateStatus || validateStatus(response.status)) {
resolve(response);
} else {
reject(createError(
'Request failed with status code ' + response.status,
response.config,
null,
response.request,
response
));
}
};
'use strict';
var utils = require('./../utils');
/**
* Transform the data for a request or a response
*
* @param {Object|String} data The data to be transformed
* @param {Array} headers The headers for the request or response
* @param {Array|Function} fns A single function or Array of functions
* @returns {*} The resulting transformed data
*/
module.exports = function transformData(data, headers, fns) {
/*eslint no-param-reassign:0*/
utils.forEach(fns, function transform(fn) {
data = fn(data, headers);
});
return data;
};
'use strict';
var utils = require('./utils');
var normalizeHeaderName = require('./helpers/normalizeHeaderName');
var DEFAULT_CONTENT_TYPE = {
'Content-Type': 'application/x-www-form-urlencoded'
};
function setContentTypeIfUnset(headers, value) {
if (!utils.isUndefined(headers) && utils.isUndefined(headers['Content-Type'])) {
headers['Content-Type'] = value;
}
}
function getDefaultAdapter() {
var adapter;
if (typeof XMLHttpRequest !== 'undefined') {
// For browsers use XHR adapter
adapter = require('./adapters/xhr');
} else if (typeof process !== 'undefined' && Object.prototype.toString.call(process) === '[object process]') {
// For node use HTTP adapter
adapter = require('./adapters/http');
}
return adapter;
}
var defaults = {
adapter: getDefaultAdapter(),
transformRequest: [function transformRequest(data, headers) {
normalizeHeaderName(headers, 'Accept');
normalizeHeaderName(headers, 'Content-Type');
if (utils.isFormData(data) ||
utils.isArrayBuffer(data) ||
utils.isBuffer(data) ||
utils.isStream(data) ||
utils.isFile(data) ||
utils.isBlob(data)
) {
return data;
}
if (utils.isArrayBufferView(data)) {
return data.buffer;
}
if (utils.isURLSearchParams(data)) {
setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded;charset=utf-8');
return data.toString();
}
if (utils.isObject(data)) {
setContentTypeIfUnset(headers, 'application/json;charset=utf-8');
return JSON.stringify(data);
}
return data;
}],
transformResponse: [function transformResponse(data) {
/*eslint no-param-reassign:0*/
if (typeof data === 'string') {
try {
data = JSON.parse(data);
} catch (e) { /* Ignore */ }
}
return data;
}],
/**
* A timeout in milliseconds to abort a request. If set to 0 (default) a
* timeout is not created.
*/
timeout: 0,
xsrfCookieName: 'XSRF-TOKEN',
xsrfHeaderName: 'X-XSRF-TOKEN',
maxContentLength: -1,
maxBodyLength: -1,
validateStatus: function validateStatus(status) {
return status >= 200 && status < 300;
}
};
defaults.headers = {
common: {
'Accept': 'application/json, text/plain, */*'
}
};
utils.forEach(['delete', 'get', 'head'], function forEachMethodNoData(method) {
defaults.headers[method] = {};
});
utils.forEach(['post', 'put', 'patch'], function forEachMethodWithData(method) {
defaults.headers[method] = utils.merge(DEFAULT_CONTENT_TYPE);
});
module.exports = defaults;
# axios // helpers
The modules found in `helpers/` should be generic modules that are _not_ specific to the domain logic of axios. These modules could theoretically be published to npm on their own and consumed by other modules or apps. Some examples of generic modules are things like:
- Browser polyfills
- Managing cookies
- Parsing HTTP headers
'use strict';
module.exports = function bind(fn, thisArg) {
return function wrap() {
var args = new Array(arguments.length);
for (var i = 0; i < args.length; i++) {
args[i] = arguments[i];
}
return fn.apply(thisArg, args);
};
};
'use strict';
var utils = require('./../utils');
function encode(val) {
return encodeURIComponent(val).
replace(/%3A/gi, ':').
replace(/%24/g, '$').
replace(/%2C/gi, ',').
replace(/%20/g, '+').
replace(/%5B/gi, '[').
replace(/%5D/gi, ']');
}
/**
* Build a URL by appending params to the end
*
* @param {string} url The base of the url (e.g., http://www.google.com)
* @param {object} [params] The params to be appended
* @returns {string} The formatted url
*/
module.exports = function buildURL(url, params, paramsSerializer) {
/*eslint no-param-reassign:0*/
if (!params) {
return url;
}
var serializedParams;
if (paramsSerializer) {
serializedParams = paramsSerializer(params);
} else if (utils.isURLSearchParams(params)) {
serializedParams = params.toString();
} else {
var parts = [];
utils.forEach(params, function serialize(val, key) {
if (val === null || typeof val === 'undefined') {
return;
}
if (utils.isArray(val)) {
key = key + '[]';
} else {
val = [val];
}
utils.forEach(val, function parseValue(v) {
if (utils.isDate(v)) {
v = v.toISOString();
} else if (utils.isObject(v)) {
v = JSON.stringify(v);
}
parts.push(encode(key) + '=' + encode(v));
});
});
serializedParams = parts.join('&');
}
if (serializedParams) {
var hashmarkIndex = url.indexOf('#');
if (hashmarkIndex !== -1) {
url = url.slice(0, hashmarkIndex);
}
url += (url.indexOf('?') === -1 ? '?' : '&') + serializedParams;
}
return url;
};
'use strict';
/**
* Creates a new URL by combining the specified URLs
*
* @param {string} baseURL The base URL
* @param {string} relativeURL The relative URL
* @returns {string} The combined URL
*/
module.exports = function combineURLs(baseURL, relativeURL) {
return relativeURL
? baseURL.replace(/\/+$/, '') + '/' + relativeURL.replace(/^\/+/, '')
: baseURL;
};
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
No preview for this file type
No preview for this file type
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
No preview for this file type
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff could not be displayed because it is too large.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.