Подключил шрифты

This commit is contained in:
Дмитрий Савенко 2023-01-09 20:53:23 +03:00
parent 4c636c424a
commit c4d44e3855
28 changed files with 305 additions and 292 deletions

View File

@ -1,57 +1,29 @@
import React, { useEffect, useState } from 'react' import React, {useEffect, useState} from 'react'
import { useDispatch, useSelector } from 'react-redux' import {useSelector} from 'react-redux'
import { selectCurrentCandidate, auth } from '../../redux/outstaffingSlice' import {selectCurrentCandidate} from '../../redux/outstaffingSlice'
import { Link, useHistory, useParams } from 'react-router-dom' import {Link} from 'react-router-dom'
import calendarMale from '../../images/medium_male.png'
import rectangle from '../../images/rectangle_secondPage.png'
import CalendarComponent from './CalendarComponent'
import { currentMonth } from './calendarHelper'
import { Footer } from '../Footer/Footer'
import { fetchReportList } from '../../server/server' import CalendarComponent from './CalendarComponent'
import { getRole } from '../../redux/roleSlice' import {currentMonth} from './calendarHelper'
import {Footer} from '../Footer/Footer'
import rectangle from '../../images/rectangle_secondPage.png'
import './calendar.scss' import './calendar.scss'
const getDateParamString = ({ paramName, value }) => { const Calendar = ({onSelect}) => {
return value ? `${paramName}=${value}` : ''
}
const Calendar = ({ onSelect }) => { const candidateForCalendar = useSelector(selectCurrentCandidate);
const dispatch = useDispatch()
const candidateForCalendar = useSelector(selectCurrentCandidate)
const role = useSelector(getRole)
const { userId } = useParams()
const [month, setMonth] = useState('')
const [fromDate, setFromDate] = useState(null)
const [toDate, setToDate] = useState(null)
const history = useHistory() const [month, setMonth] = useState('');
// useEffect(() => {
// fetchReportList({
// link: `${
// process.env.REACT_APP_API_URL
// }/api/reports/index?user_id=${userId}${getDateParamString({
// paramName: 'fromDate',
// value: fromDate
// })}${getDateParamString({
// paramName: 'toDate',
// value: toDate
// })}`,
// history,
// role,
// logout: () => {}
// })
// }, [])
useEffect(() => { useEffect(() => {
setMonth(currentMonth) setMonth(currentMonth)
}, [month]) }, [month]);
const { name, skillsName, photo } = candidateForCalendar const {name, skillsName, photo} = candidateForCalendar;
const abbreviatedName = name && name.substring(0, name.lastIndexOf(' ')) const abbreviatedName = name && name.substring(0, name.lastIndexOf(' '));
return ( return (
<section className='calendar'> <section className='calendar'>
@ -61,12 +33,12 @@ const Calendar = ({ onSelect }) => {
</h2> </h2>
<div className='col-12 col-xl-12 d-flex justify-content-between align-items-center flex-column flex-sm-row'> <div className='col-12 col-xl-12 d-flex justify-content-between align-items-center flex-column flex-sm-row'>
<div className='calendar__info'> <div className='calendar__info'>
<img className='calendar__info-img' src={photo} alt='img' /> <img className='calendar__info-img' src={photo} alt='img'/>
<h3 className='calendar__info-name'>{abbreviatedName}</h3> <h3 className='calendar__info-name'>{abbreviatedName}</h3>
</div> </div>
<div className='calendar__title'> <div className='calendar__title'>
<h3 className='calendar__title-text'>{skillsName} разработчик</h3> <h3 className='calendar__title-text'>{skillsName} разработчик</h3>
<img className='calendar__title-img' src={rectangle} alt='img' /> <img className='calendar__title-img' src={rectangle} alt='img'/>
</div> </div>
<div> <div>
<Link to='/report'> <Link to='/report'>
@ -78,15 +50,15 @@ const Calendar = ({ onSelect }) => {
<div className='row'> <div className='row'>
<div className='col-12 col-xl-12'> <div className='col-12 col-xl-12'>
<CalendarComponent onSelect={onSelect} /> <CalendarComponent onSelect={onSelect}/>
<p className='calendar__hours'> <p className='calendar__hours'>
{month} : <span> 60 часов </span> {month} : <span> 60 часов </span>
</p> </p>
</div> </div>
</div> </div>
<Footer /> <Footer/>
</section> </section>
) )
} };
export default Calendar export default Calendar

View File

@ -1,9 +1,9 @@
.calendar { .calendar {
margin-bottom: 40px; margin-bottom: 40px;
font-family: 'LabGrotesque', sans-serif;
&__profile { &__profile {
color: #282828; color: #282828;
font-family: 'GT Eesti Pro Display';
font-size: 3.4em; font-size: 3.4em;
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
@ -29,7 +29,6 @@
height: 112px; height: 112px;
&-name { &-name {
font-family: 'GT Eesti Pro Display';
font-size: 2em; font-size: 2em;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
@ -53,7 +52,6 @@
&__title { &__title {
&-text { &-text {
font-family: 'GT Eesti Pro Display';
font-size: 2.7em; font-size: 2.7em;
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
@ -86,7 +84,6 @@
} }
&__hours { &__hours {
font-family: 'GT Eesti Pro Display';
font-size: 2.2em; font-size: 2.2em;
font-weight: 600; font-weight: 600;
font-style: normal; font-style: normal;
@ -96,7 +93,6 @@
margin-left: 68px; margin-left: 68px;
span { span {
font-family: 'GT Eesti Pro Display';
font-weight: 100; font-weight: 100;
font-style: normal; font-style: normal;
letter-spacing: normal; letter-spacing: normal;

View File

@ -7,12 +7,13 @@
padding-right: 54px; padding-right: 54px;
padding-top: 48px; padding-top: 48px;
padding-bottom: 94px; padding-bottom: 94px;
font-family: 'LabGrotesque', sans-serif;
&__header { &__header {
display: flex; display: flex;
h3 { h3 {
font-family: 'GT Eesti Pro Display';
font-size: 2.5em; font-size: 2.5em;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
@ -33,7 +34,6 @@
span { span {
color: #18586e; color: #18586e;
font-family: 'GT Eesti Pro Display';
font-size: 1.6em; font-size: 1.6em;
font-weight: 500; font-weight: 500;
font-style: normal; font-style: normal;
@ -62,7 +62,6 @@
p { p {
color: #398208; color: #398208;
font-family: 'GT Eesti Pro Display';
font-size: 25px; font-size: 25px;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
@ -87,7 +86,6 @@
border: 1px solid #c4c4c4; border: 1px solid #c4c4c4;
background-color: #ffffff; background-color: #ffffff;
margin-top: 20px; margin-top: 20px;
font-family: 'GT Eesti Pro Display';
font-size: 1.2em; font-size: 1.2em;
font-weight: 100; font-weight: 100;
font-style: normal; font-style: normal;

View File

@ -3,6 +3,7 @@
color: #f9f9f9; color: #f9f9f9;
} }
.outstaffing-block { .outstaffing-block {
margin-top: 60px; margin-top: 60px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -28,6 +29,7 @@
} }
&__img { &__img {
cursor: pointer;
min-width: 260px; min-width: 260px;
min-height: 120px; min-height: 120px;
background-color: #f9f9f9; background-color: #f9f9f9;

View File

@ -2,6 +2,7 @@
background: #F1F1F1; background: #F1F1F1;
height: 100%; height: 100%;
min-height: 100vh; min-height: 100vh;
font-family: 'LabGrotesque', sans-serif;
&__title { &__title {
font-weight: 700; font-weight: 700;

View File

@ -2,6 +2,7 @@
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-family: 'LabGrotesque', sans-serif;
&__head { &__head {
background: #E1FCCF; background: #E1FCCF;

View File

@ -2,6 +2,7 @@
background: #F1F1F1; background: #F1F1F1;
height: 100%; height: 100%;
min-height: 100vh; min-height: 100vh;
font-family: 'LabGrotesque', sans-serif;
// //
//&__container { //&__container {
// max-width: 1160px; // max-width: 1160px;

View File

@ -1,5 +1,5 @@
.calendar { .calendar {
font-family: 'LabGrotesque', sans-serif;
.profile__calendar { .profile__calendar {
margin-top: 20px; margin-top: 20px;
} }

View File

@ -1,16 +1,16 @@
import React, { useState } from 'react' import React, {useState} from 'react'
import { useSelector, useDispatch } from 'react-redux' import {useSelector, useDispatch} from 'react-redux'
import { fetchPost } from '../../server/server' import {fetchPost} from '../../server/server'
import {useHistory, useParams, Redirect, Link} from 'react-router-dom' import {useHistory, useParams, Redirect, Link} from 'react-router-dom'
import { Loader } from '../Loader/Loader' import {Loader} from '../Loader/Loader'
import {auth} from '../../redux/outstaffingSlice' import {auth} from '../../redux/outstaffingSlice'
import { getReportDate } from '../../redux/reportSlice' import {getReportDate} from '../../redux/reportSlice'
import { getRole } from '../../redux/roleSlice' import {getRole} from '../../redux/roleSlice'
import calendarIcon from '../../images/calendar_icon.png' import calendarIcon from '../../images/calendar_icon.png'
import ellipse from '../../images/ellipse.png' import ellipse from '../../images/ellipse.png'
import remove from '../../images/remove.png' import remove from '../../images/remove.png'
import addIcon from '../../images/addIcon.png' import addIcon from '../../images/addIcon.png'
import { currentMonthAndDay, getReports } from '../Calendar/calendarHelper' import {currentMonthAndDay, getReports} from '../Calendar/calendarHelper'
import './reportForm.scss' import './reportForm.scss'
import arrow from "../../images/right-arrow.png"; import arrow from "../../images/right-arrow.png";
@ -19,37 +19,37 @@ const getCreatedDate = (day) => {
return `${new Date(day).getFullYear()}-${new Date(day).getMonth() + 1}-${new Date(day).getDate()}` return `${new Date(day).getFullYear()}-${new Date(day).getMonth() + 1}-${new Date(day).getDate()}`
} else { } else {
const date = new Date(); const date = new Date();
const dd = String(date.getDate()).padStart(2, '0') const dd = String(date.getDate()).padStart(2, '0');
const mm = String(date.getMonth() + 1).padStart(2, '0') const mm = String(date.getMonth() + 1).padStart(2, '0');
const yyyy = date.getFullYear() const yyyy = date.getFullYear();
return `${yyyy}-${mm}-${dd}` return `${yyyy}-${mm}-${dd}`
} }
} };
const ReportForm = () => { const ReportForm = () => {
const dispatch = useDispatch() const dispatch = useDispatch();
const history = useHistory() const history = useHistory();
const reportDate = useSelector(getReportDate) const reportDate = useSelector(getReportDate);
const role = useSelector(getRole) const role = useSelector(getRole);
const [isFetching, setIsFetching] = useState(false) const [isFetching, setIsFetching] = useState(false);
const [reportSuccess, setReportSuccess] = useState(false) const [reportSuccess, setReportSuccess] = useState(false);
const [inputs, setInputs] = useState([ { task: '', hours_spent: '', minutes_spent: 0 } ]); const [inputs, setInputs] = useState([{task: '', hours_spent: '', minutes_spent: 0}]);
const [troublesInputValue, setTroublesInputValue] = useState(''); const [troublesInputValue, setTroublesInputValue] = useState('');
const [scheduledInputValue, setScheduledInputValue] = useState(''); const [scheduledInputValue, setScheduledInputValue] = useState('');
const addInput = () => { const addInput = () => {
setInputs((prev) => [...prev, { task: '', hours_spent: '', minutes_spent: 0 }]) setInputs((prev) => [...prev, {task: '', hours_spent: '', minutes_spent: 0}])
} };
const totalHours = inputs.reduce((a,b) => a + b.hours_spent, 0) const totalHours = inputs.reduce((a, b) => a + b.hours_spent, 0);
const deleteInput = (indexRemove) => { const deleteInput = (indexRemove) => {
if (indexRemove !== 0) { if (indexRemove !== 0) {
setInputs((prev) => prev.filter((el, index) => index !== indexRemove)) setInputs((prev) => prev.filter((el, index) => index !== indexRemove))
} }
} };
return ( return (
<section className='report-form'> <section className='report-form'>
@ -73,7 +73,7 @@ const ReportForm = () => {
{reportDate ? currentMonthAndDay(reportDate) : getCreatedDate()} {reportDate ? currentMonthAndDay(reportDate) : getCreatedDate()}
</div> </div>
<div className='report-form__task-list'> <div className='report-form__task-list'>
<img src={ellipse} alt='' /> <img src={ellipse} alt=''/>
<span>Какие задачи были выполнены?</span> <span>Какие задачи были выполнены?</span>
</div> </div>
</div> </div>
@ -93,37 +93,38 @@ const ReportForm = () => {
return ( return (
<form id={'input'} key={`input__${index}`} className='report-form__task-form'> <form id={'input'} key={`input__${index}`} className='report-form__task-form'>
<div className='report-form__task-number'> <div className='report-form__task-number'>
{index+1}. {index + 1}.
</div> </div>
<div className='report-form__task-input report-form__task-input--description'> <div className='report-form__task-input report-form__task-input--description'>
<input name='text' type='text' onChange={ e => setInputs(inputs.map( (input, inputIndex) => { <input name='text' type='text' onChange={e => setInputs(inputs.map((input, inputIndex) => {
return index === inputIndex return index === inputIndex
? { ? {
...input, ...input,
task: e.target.value task: e.target.value
} }
: input : input
}))} /> }))}/>
</div> </div>
<div className='report-form__task-input report-form__task-input--hours'> <div className='report-form__task-input report-form__task-input--hours'>
<input name='number' type='number' min='1' onChange={ e => setInputs(inputs.map( (input, inputIndex) => { <input name='number' type='number' min='1'
onChange={e => setInputs(inputs.map((input, inputIndex) => {
return index === inputIndex return index === inputIndex
? { ? {
...input, ...input,
hours_spent: Number(e.target.value) hours_spent: Number(e.target.value)
} }
: input : input
}))} /> }))}/>
</div> </div>
<div className='report-form__task-remove'> <div className='report-form__task-remove'>
<img onClick={() => deleteInput(index)} src={remove} alt='' /> <img onClick={() => deleteInput(index)} src={remove} alt=''/>
</div> </div>
</form> </form>
) )
})} })}
<div className='report-form__form-add'> <div className='report-form__form-add'>
<img onClick={addInput} src={addIcon} alt='' /> <img onClick={addInput} src={addIcon} alt=''/>
<span>Добавить еще </span> <span>Добавить еще </span>
</div> </div>
</div> </div>
@ -134,15 +135,15 @@ const ReportForm = () => {
<div className='col-12'> <div className='col-12'>
<div className='report-form__input-box'> <div className='report-form__input-box'>
<div className='report-form__troubles'> <div className='report-form__troubles'>
<img src={ellipse} alt='' /> <img src={ellipse} alt=''/>
<span>Какие сложности возникли?</span> <span>Какие сложности возникли?</span>
</div> </div>
<input type='text' value={troublesInputValue} onChange={e => setTroublesInputValue(e.target.value)} /> <input type='text' value={troublesInputValue} onChange={e => setTroublesInputValue(e.target.value)}/>
<div className='report-form__scheduled'> <div className='report-form__scheduled'>
<img src={ellipse} alt='' /> <img src={ellipse} alt=''/>
<span>Что планируется сделать завтра?</span> <span>Что планируется сделать завтра?</span>
</div> </div>
<input type='text' value={scheduledInputValue} onChange={e => setScheduledInputValue(e.target.value)} /> <input type='text' value={scheduledInputValue} onChange={e => setScheduledInputValue(e.target.value)}/>
</div> </div>
</div> </div>
</div> </div>
@ -164,19 +165,19 @@ const ReportForm = () => {
logout: () => dispatch(auth(false)) logout: () => dispatch(auth(false))
}).then((res) => }).then((res) =>
res.json().then((resJSON) => { res.json().then((resJSON) => {
if(res.status === 200) { if (res.status === 200) {
setReportSuccess(true) setReportSuccess(true);
setTimeout(()=> setReportSuccess(false),2000) setTimeout(() => setReportSuccess(false), 2000)
} }
setInputs( () => [] ) setInputs(() => []);
setTroublesInputValue(''); setTroublesInputValue('');
setScheduledInputValue(''); setScheduledInputValue('');
setIsFetching(false) setIsFetching(false);
setInputs(() => [ { task: '', hours_spent: '', minutes_spent: 0 } ]); setInputs(() => [{task: '', hours_spent: '', minutes_spent: 0}]);
}) })
) )
}}> }}>
{isFetching ? <Loader /> : 'Отправить'} {isFetching ? <Loader/> : 'Отправить'}
</button> </button>
<p className='report-form__footer-text'> <p className='report-form__footer-text'>
Всего за день : <span>{totalHours} часов</span> Всего за день : <span>{totalHours} часов</span>
@ -189,6 +190,6 @@ const ReportForm = () => {
</div> </div>
</section> </section>
) )
} };
export default ReportForm export default ReportForm

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -353,3 +353,44 @@
font-weight: bold; font-weight: bold;
font-style: normal; font-style: normal;
} }
@font-face {
font-family: 'LabGrotesque';
src: url('LabGrotesque-Regular.eot');
src: local('LabGrotesque-Regular'), local('LabGrotesque-Regular'),
url('LabGrotesque-Regular.eot?#iefix') format('embedded-opentype'),
url('LabGrotesque-Regular.woff2') format('woff2'), url('LabGrotesque-Regular.woff') format('woff'),
url('LabGrotesque-Regular.ttf') format('truetype');
font-weight: 400;
}
@font-face {
font-family: 'LabGrotesque';
src: url('LabGrotesque-Medium.eot');
src: local('LabGrotesque-Medium'), local('LabGrotesque-Medium'),
url('LabGrotesque-Medium.eot?#iefix') format('embedded-opentype'),
url('LabGrotesque-Medium.woff2') format('woff2'), url('LabGrotesque-Medium.woff') format('woff'),
url('LabGrotesque-Medium.ttf') format('truetype');
font-weight: 500;
}
@font-face {
font-family: 'LabGrotesque';
src: url('LabGrotesque-Bold.eot');
src: local('LabGrotesque-Bold'), local('LabGrotesque-Bold'),
url('LabGrotesque-Bold.eot?#iefix') format('embedded-opentype'),
url('LabGrotesque-Bold.woff2') format('woff2'), url('LabGrotesque-Bold.woff') format('woff'),
url('LabGrotesque-Bold.ttf') format('truetype');
font-weight: 700;
}
@font-face {
font-family: 'LabGrotesque';
src: url('LabGrotesque-Light.eot');
src: local('LabGrotesque-Light'), local('LabGrotesque-Light'),
url('LabGrotesque-Light.eot?#iefix') format('embedded-opentype'),
url('LabGrotesque-Light.woff2') format('woff2'), url('LabGrotesque-Light.woff') format('woff'),
url('LabGrotesque-Light.ttf') format('truetype');
font-weight: 300;
}

View File

@ -2,7 +2,7 @@ import React from 'react';
import {useSelector} from "react-redux"; import {useSelector} from "react-redux";
import {getProfileInfo} from "../redux/outstaffingSlice"; import {getProfileInfo} from "../redux/outstaffingSlice";
import {ProfileHeader} from "../components/Profile/ProfileHeader"; import {ProfileHeader} from "../components/Profile/ProfileHeader";
import {NavLink} from "react-router-dom"; import {Link} from "react-router-dom";
import {Footer} from "../components/Footer/Footer"; import {Footer} from "../components/Footer/Footer";
import reportsIcon from "../images/reports.png" import reportsIcon from "../images/reports.png"
@ -15,7 +15,7 @@ import rightArrow from "../images/arrowRight.png"
import '../components/Profile/profile.scss' import '../components/Profile/profile.scss'
export const Profile = () => { export const Profile = () => {
const profileInfo = useSelector(getProfileInfo) const profileInfo = useSelector(getProfileInfo);
return( return(
<div className='profile'> <div className='profile'>
<ProfileHeader/> <ProfileHeader/>
@ -23,74 +23,74 @@ export const Profile = () => {
<h2 className='profile__title'>Добрый день, <span>{profileInfo.fio}</span></h2> <h2 className='profile__title'>Добрый день, <span>{profileInfo.fio}</span></h2>
<div className='summary__info'> <div className='summary__info'>
<div className='summary__person'> <div className='summary__person'>
<img src={profileInfo.photo} className='summary__avatar' /> <img src={profileInfo.photo} className='summary__avatar' alt='avatar'/>
<p className='summary__name'>{profileInfo.fio} {profileInfo.specification}</p> <p className='summary__name'>{profileInfo.fio} {profileInfo.specification}</p>
</div> </div>
</div> </div>
<div className='profile__items'> <div className='profile__items'>
<NavLink to={'/ProfileCalendar'} className='item'> <Link to={'/ProfileCalendar'} className='item'>
<div className='item__about'> <div className='item__about'>
<img src={reportsIcon} /> <img src={reportsIcon} alt='report'/>
<h3>Ваша отчетность</h3> <h3>Ваша отчетность</h3>
</div> </div>
<div className='item__info'> <div className='item__info'>
<p><span>У вас 122 часа</span><br/> отработанных в этом месяце</p> <p><span>У вас 122 часа</span><br/> отработанных в этом месяце</p>
<div className='item__infoLink'> <div className='item__infoLink'>
<img src={rightArrow} /> <img src={rightArrow} alt='arrow'/>
</div> </div>
</div> </div>
</NavLink> </Link>
<NavLink to={'/summary'} className='item'> <Link to={'/summary'} className='item'>
<div className='item__about'> <div className='item__about'>
<img src={summaryIcon} /> <img src={summaryIcon} alt='summary'/>
<h3>Данные и резюме</h3> <h3>Данные и резюме</h3>
</div> </div>
<div className='item__info'> <div className='item__info'>
<p>Ваше резюме<br/><span>заполнено</span></p> <p>Ваше резюме<br/><span>заполнено</span></p>
<div className='item__infoLink'> <div className='item__infoLink'>
<img src={rightArrow} /> <img src={rightArrow} alt='arrow'/>
</div> </div>
</div> </div>
</NavLink> </Link>
<NavLink to={'/profile'} className='item'> <Link to={'/profile'} className='item'>
<div className='item__about'> <div className='item__about'>
<img src={timerIcon} /> <img src={timerIcon} alt='timer'/>
<h3>Трекер времени</h3> <h3>Трекер времени</h3>
</div> </div>
<div className='item__info'> <div className='item__info'>
<p>Сколько времени занимает<br/> выполнение задач</p> <p>Сколько времени занимает<br/> выполнение задач</p>
<div className='item__infoLink'> <div className='item__infoLink'>
<img src={rightArrow} /> <img src={rightArrow} alt='arrow'/>
</div> </div>
</div> </div>
</NavLink> </Link>
<NavLink to={'/profile'} className='item'> <Link to={'/profile'} className='item'>
<div className='item__about'> <div className='item__about'>
<img src={paymentIcon} /> <img src={paymentIcon} alt='payment'/>
<h3>Выплаты</h3> <h3>Выплаты</h3>
</div> </div>
<div className='item__info'> <div className='item__info'>
<p>У вас <span>подтвержден</span><br/> статус самозанятого</p> <p>У вас <span>подтвержден</span><br/> статус самозанятого</p>
<div className='item__infoLink'> <div className='item__infoLink'>
<img src={rightArrow} /> <img src={rightArrow} alt='arrow'/>
</div> </div>
</div> </div>
</NavLink> </Link>
<NavLink to={'/profile'} className='item'> <Link to={'/profile'} className='item'>
<div className='item__about'> <div className='item__about'>
<img src={settingIcon} /> <img src={settingIcon} alt='settings'/>
<h3>Настройки аккаунта</h3> <h3>Настройки аккаунта</h3>
</div> </div>
<div className='item__info'> <div className='item__info'>
<p>Перейдите чтобы начать<br/> редактирование</p> <p>Перейдите чтобы начать<br/> редактирование</p>
<div className='item__infoLink'> <div className='item__infoLink'>
<img src={rightArrow} /> <img src={rightArrow} alt='arrow'/>
</div> </div>
</div> </div>
</NavLink> </Link>
</div> </div>
</div> </div>
<Footer/> <Footer/>
</div> </div>
) )
} };

View File

@ -1,23 +1,23 @@
import { withAuthRedirect } from './authRedirect' import { withAuthRedirect } from './authRedirect'
export const fetchForm = withAuthRedirect(async (link, info) => { // export const fetchForm = withAuthRedirect(async (link, info) => {
try { // try {
const response = await fetch(link, { // const response = await fetch(link, {
method: 'POST', // method: 'POST',
headers: { // headers: {
// 'Access-Control-Request-Headers': 'authorization', // // 'Access-Control-Request-Headers': 'authorization',
Authorization: `Bearer ${localStorage.getItem('auth_token')}`, // Authorization: `Bearer ${localStorage.getItem('auth_token')}`,
Origin: `${process.env.REACT_APP_BASE_URL}`, // Origin: `${process.env.REACT_APP_BASE_URL}`,
'Content-Type': 'application/json' // 'Content-Type': 'application/json'
}, // },
body: JSON.stringify(info) // body: JSON.stringify(info)
}) // });
//
return response // return response
} catch (error) { // } catch (error) {
console.log('Query error', error) // console.log('Query error', error)
} // }
}) // });
export const fetchAuth = async ({ export const fetchAuth = async ({
username, username,
@ -25,7 +25,7 @@ export const fetchAuth = async ({
dispatch, dispatch,
catchError catchError
}) => { }) => {
const apiURL = process.env.REACT_APP_API_URL const apiURL = process.env.REACT_APP_API_URL;
try { try {
const response = await fetch(`${apiURL}/api/user/login`, { const response = await fetch(`${apiURL}/api/user/login`, {
method: 'POST', method: 'POST',
@ -39,27 +39,27 @@ export const fetchAuth = async ({
username, username,
password password
}) })
}) });
if (!response.ok) { if (!response.ok) {
catchError() catchError();
return response.statusText return response.statusText
} }
response.json().then((resJSON) => { response.json().then((resJSON) => {
localStorage.setItem('auth_token', resJSON.access_token) localStorage.setItem('auth_token', resJSON.access_token);
localStorage.setItem('id', resJSON.id) localStorage.setItem('id', resJSON.id);
localStorage.setItem('cardId', resJSON.card_id) localStorage.setItem('cardId', resJSON.card_id);
localStorage.setItem( localStorage.setItem(
'access_token_expired_at', 'access_token_expired_at',
resJSON.access_token_expired_at resJSON.access_token_expired_at
) );
dispatch(resJSON) dispatch(resJSON)
}) })
} catch (error) { } catch (error) {
console.error('Error occured: ', error) console.error('Error occured: ', error)
} }
} };
export const fetchReportList = withAuthRedirect(async (link) => { export const fetchReportList = withAuthRedirect(async (link) => {
try { try {
@ -72,14 +72,14 @@ export const fetchReportList = withAuthRedirect(async (link) => {
Authorization: `Bearer ${localStorage.getItem('auth_token')}` Authorization: `Bearer ${localStorage.getItem('auth_token')}`
} }
} }
) );
let data = await response.json() let data = await response.json();
return data return data
} catch (error) { } catch (error) {
console.log('Query error', error) console.log('Query error', error)
} }
}) });
export const fetchGet = withAuthRedirect(async (link) => { export const fetchGet = withAuthRedirect(async (link) => {
try { try {
@ -88,17 +88,17 @@ export const fetchGet = withAuthRedirect(async (link) => {
headers: { headers: {
Authorization: `Bearer ${localStorage.getItem('auth_token')}` Authorization: `Bearer ${localStorage.getItem('auth_token')}`
} }
}) });
let data = await response.json() let data = await response.json();
return data return data
} catch (error) { } catch (error) {
console.log('Query error', error) console.log('Query error', error)
} }
}) });
export const fetchPost = withAuthRedirect(async (link, body) => { export const fetchPost = withAuthRedirect(async (link, body) => {
console.log('i', body) console.log('i', body);
try { try {
const response = await fetch(link, { const response = await fetch(link, {
method: 'POST', method: 'POST',
@ -109,10 +109,10 @@ export const fetchPost = withAuthRedirect(async (link, body) => {
Origin: `${process.env.REACT_APP_BASE_URL}` Origin: `${process.env.REACT_APP_BASE_URL}`
}, },
body: JSON.stringify(body) body: JSON.stringify(body)
}) });
return response return response
} catch (error) { } catch (error) {
console.log('Query error', error) console.log('Query error', error)
} }
}) });