mjalg/reactjs-code
02
1Filename,Content
2index.tsx,"/* eslint-disable react/jsx-filename-extension */3import React from 'react';4import { createRoot } from 'react-dom/client';5import navigationService from '@common/navigation/NavigationService';6import App from './App';7import('./store');8 9const container = document.getElementById('root');10const root = createRoot(container);11root.render(<App />);12 13//@ts-ignore14if (module?.hot) {15 //@ts-ignore16 module.hot.accept(function (err) {17 console.log('An error occurred while accepting new version: ', err);18 });19}20 21window.onpopstate = () => {22 navigationService.goBack();23};24"
25App.tsx,"/* eslint-disable import/no-named-as-default */26/* eslint-disable no-useless-constructor */27/* eslint-disable import/no-named-as-default-member */28/* eslint-disable import/extensions */29import React from 'react';30import { Provider } from 'react-redux';31import BasePropTypes from '@common/models/BasePropTypes';32import { routeManager } from '@protolibrary/core';33import storeConfiguration from './store';34import './assets/css/tooltip.css';35import './assets/fonts/style.scss';36import './assets/colors/style.scss';37import './assets/css/main.scss';38import 'prototable/index.css';39 40import { ThemeApp } from './ThemeApp';41import { ErrorBoundary } from 'react-error-boundary';42import ErrorFallback from '@common/error/ErrorFallback';43import LocalStorage from '@common/storage/Storage';44 45class App extends React.Component<BasePropTypes, { theme: any }> {46 constructor(props: BasePropTypes) {47 super(props);48 }49 50 UNSAFE_componentWillMount(): void {51 routeManager.generateRoutes('', {}, {}, '', {});52 LocalStorage.delete('x-app-version');53 }54 55 render(): React.ReactNode {56 return (57 // eslint-disable-next-line react/jsx-filename-extension58 59 <ErrorBoundary60 FallbackComponent={ErrorFallback}61 onReset={details => {62 // Reset the state of your app so the error doesn't happen again63 }}64 onError={(error, componentStack) => {65 // Do something with the runtime error66 }}67 >68 <Provider store={storeConfiguration}>69 <ThemeApp />70 <div id=""portal-root"" style={{ position: 'relative' }} />71 </Provider>72 </ErrorBoundary>73 );74 }75}76 77export default App;78"
79ThemeApp.tsx,"import ProtoContextProvider from '@common/hocs/ProtoContext';80import { ConnectedRouter } from '@protolibrary/core';81import React, { useEffect, useState } from 'react';82import AppMain from './AppMain';83import storeConfiguration from './store';84import { DARK_THEME, LIGHT_THEME } from './themes';85import { default as ProtoProvider } from '@protoweb/provider';86import { Route } from 'react-router-dom';87import { useStore } from '@core/states';88import Block from '@protoweb/block';89import NewVersionModal from '@common/modals/NewVersionModal';90import appState from '@core/states/AppState';91 92interface Props {}93 94export const ThemeApp = (props: Props) => {95 const { theme, newVersion } = useStore('appState');96 const [showModal, setShowModal] = useState(false);97 useEffect(() => {98 if (newVersion) {99 setShowModal(true);100 }101 }, [newVersion]);102 103 return (104 <Block105 className={theme === 'LIGHT' ? 'proto-light-theme' : 'proto-dark-theme'}106 style={{ flexDirection: 'row', flex: 1, width: '100%', position: 'relative' }}107 >108 <ProtoProvider theme={theme === 'LIGHT' ? LIGHT_THEME : DARK_THEME}>109 <ProtoContextProvider>110 <ConnectedRouter store={storeConfiguration}>111 <Route component={AppMain} />112 </ConnectedRouter>113 </ProtoContextProvider>114 </ProtoProvider>115 <NewVersionModal116 show={showModal}117 onClose={() => {118 setShowModal(false);119 appState.update({ newVersion: false });120 }}121 />122 </Block>123 );124};125"
126store.tsx,"import { configure, addAjaxEnricher, routeReducer } from '@protolibrary/core';127import setupAxiosInterceptors from './core/configuration/axios';128import ajaxEnricher from './core/configuration/enricher';129 130setupAxiosInterceptors();131addAjaxEnricher(ajaxEnricher);132const storeConfiguration = configure({ routing: routeReducer }, []);133 134export default storeConfiguration;135"
136UserCreateUpdate.tsx,"import InputLayout from '@common/components/input-layout';137import PageHeader from '@common/components/page-header';138import RemoteSelect from '@common/components/remote-select';139import navigationService from '@common/navigation/NavigationService';140import { NavigationOperationType } from '@common/navigation/NavigationTypes';141import toastManager from '@common/toast/ToastManager';142import { TextField, Form, Col, Container, Row, Button } from '@protolibrary/components';143import { email, required } from '@protoweb/utils';144import roleService from '@services/RoleService';145import userService, { User } from '@services/UserService';146import { useLocationParams } from '@utils/LocationUtils';147import React, { useEffect, useState } from 'react';148import PasswordInput from '@common/components/password-input';149 150const UserCreateUpdate = props => {151 const { operationType, id } = useLocationParams(props);152 const [data, setData] = useState<User>(null);153 const refForm = React.useRef(null);154 155 const handleOnSubmit = () => {156 const values = refForm.current.getValues();157 158 if (operationType === NavigationOperationType.CREATE) {159 const request: User = {160 userName: values.userName,161 firstName: values.firstName,162 lastName: values.lastName,163 roleIds: values.roleIds,164 email: values.email,165 };166 167 userService.post(request, { password: values.password }).then(res => {168 toastManager.show('success', 'Kullanıcı basariyla olusturuldu');169 navigationService.push('/system-management/user-management');170 });171 } else if (operationType === NavigationOperationType.UPDATE) {172 const request: User = {173 id: data?.id,174 userName: data?.userName,175 firstName: values.firstName,176 lastName: values.lastName,177 email: values.email,178 roleIds: values.roleIds,179 };180 userService.put(request).then(res => {181 toastManager.show('success', 'Kullanıcı başarıyla guncellendi');182 navigationService.push('/system-management/user-management');183 });184 }185 };186 187 useEffect(() => {188 operationType === NavigationOperationType.UPDATE &&189 userService.get(id).then(res => {190 setData(res);191 refForm.current.setValues(res);192 });193 }, []);194 195 return (196 <Container fluid>197 <Form ref={refForm} onSubmit={handleOnSubmit}>198 <PageHeader199 backButton200 title={201 operationType === NavigationOperationType.CREATE202 ? 'Kullanıcı Olustur'203 : 'Kullanıcı Güncelle'204 }205 >206 <Button type=""submit"" text=""Kaydet"" className=""proto-button-secondary"" />207 </PageHeader>208 {operationType === NavigationOperationType.CREATE ? (209 <Row>210 <Col xs={12} md={12} lg={4} xl={4}>211 <InputLayout label=""Kullanıcı Adı"">212 <TextField name=""userName"" validations={[required('')]} />213 </InputLayout>214 </Col>215 <Col xs={12} md={12} lg={4} xl={4}>216 <InputLayout label=""Parola"">217 <PasswordInput name=""password"" validations={[required('')]} />218 </InputLayout>219 </Col>220 </Row>221 ) : null}222 <Row>223 <Col xs={12} md={12} lg={4} xl={4}>224 <InputLayout label=""Ad"">225 <TextField name=""firstName"" validations={[required('')]} />226 </InputLayout>227 </Col>228 <Col xs={12} md={12} lg={4} xl={4}>229 <InputLayout label=""Soyad"">230 <TextField name=""lastName"" validations={[required('')]} />231 </InputLayout>232 </Col>233 <Col xs={12} md={12} lg={4} xl={4}>234 <InputLayout label=""Email"">235 <TextField name=""email"" validations={[required(''), email('')]} />236 </InputLayout>237 </Col>238 </Row>239 <Row>240 <Col xs={12} md={12} lg={4} xl={4}>241 <InputLayout label=""Yetkili Roller"">242 <RemoteSelect243 placeholder=""Seciniz""244 name=""roleIds""245 mode=""multi""246 validations={[required('')]}247 service={roleService.getList}248 />249 </InputLayout>250 </Col>251 </Row>252 </Form>253 </Container>254 );255};256 257export default UserCreateUpdate;258import React from 'react';259import BasePropTypes from '@common/models/BasePropTypes';260import { Block, BackgroundImage, Label } from '@protolibrary/components';261 262import COLORS from '@resources/colors';263interface LoginPropTypes extends BasePropTypes {264 fromCaptcha: boolean;265}266 267const WelcomePage: React.FC<LoginPropTypes> = () => {268 return (269 <BackgroundImage270 path=""/public/images/login_background.jpg""271 className=""""272 style={{273 backgroundSize: 'cover',274 justifyContent: 'space-between',275 display: 'flex',276 flex: 1,277 flexDirection: 'row',278 }}279 >280 <Block style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>281 <Block style={{ padding: 75 }}>282 <Block style={{ flexDirection: 'row' }}>283 <Label284 style={{285 element: {286 fontSize: 32,287 fontWeight: 400,288 color: COLORS.BLACK,289 fontFamily: 'Poppins',290 },291 }}292 text=""Proto""293 />294 <Label295 style={{296 container: {297 paddingLeft: 10,298 },299 element: {300 fontSize: 32,301 fontWeight: 600,302 color: COLORS.BLACK,303 fontFamily: 'Poppins',304 },305 }}306 text=""Yazilim""307 />308 </Block>309 <Label310 text=""UYGULAMASINA HOŞGELDİNİZ""311 style={{312 container: {313 display: 'flex',314 justifyContent: 'center',315 },316 element: {317 fontSize: 30,318 fontWeight: 275,319 color: COLORS.BLACK,320 fontFamily: 'Poppins',321 },322 }}323 />324 </Block>325 </Block>326 </BackgroundImage>327 );328};329 330export default WelcomePage;331import React from 'react';332import { Button, Col, Container, Form, Row } from '@protolibrary/components';333import PageHeader from '@common/components/page-header';334import InputLayout from '@common/components/input-layout';335import PasswordInput from '@common/components/password-input';336import { required } from '@protoweb/utils';337import userService from '@services/UserService';338import toastManager from '@common/toast/ToastManager';339import { useLocationParams } from '@utils/LocationUtils';340import navigationService from '@common/navigation/NavigationService';341 342const ResetPassword = props => {343 const { id, userName, fullName } = useLocationParams(props);344 const refForm = React.useRef(null);345 346 const handleOnSubmit = () => {347 const values = refForm.current.getValues();348 userService.resetPassword(id, { newPassword: values.newPassword }).then(_ => {349 toastManager.show('success', 'Şifre başarıyla sıfırlandı.');350 navigationService.push('/system-management/user-management');351 });352 };353 354 return (355 <Container fluid>356 <Form ref={refForm} onSubmit={handleOnSubmit}>357 <PageHeader title={`${fullName} (${userName}) Kullanıcı Şifresi Sıfırla`}>358 <Button type=""submit"" text=""Kaydet"" className=""proto-button-secondary"" />359 </PageHeader>360 <Row>361 <Col xs={12} md={12} lg={4} xl={4}>362 <InputLayout label=""Yeni Şifre"">363 <PasswordInput364 name=""newPassword""365 placeholder=""Yeni Şifre""366 validations={[required('')]}367 />368 </InputLayout>369 </Col>370 </Row>371 </Form>372 </Container>373 );374};375 376export default ResetPassword;377import InputLayout from '@common/components/input-layout';378import PageHeader from '@common/components/page-header';379import toastManager from '@common/toast/ToastManager';380import { Form, Col, Container, Row, Button } from '@protolibrary/components';381import { required } from '@protoweb/utils';382import userService, { ChangePasswordData } from '@services/UserService';383import React from 'react';384import PasswordInput from '@common/components/password-input';385 386const ChangePassword = props => {387 const refForm = React.useRef(null);388 389 const handleOnSubmit = () => {390 const values = refForm.current.getValues();391 const request: ChangePasswordData = {392 oldPassword: values.oldPassword,393 newPassword: values.newPassword,394 newPasswordValidation: values.newPasswordValidation,395 };396 397 userService.changePassword(request).then(res => {398 toastManager.show('success', 'Şifre başarıyla değiştirildi.');399 });400 };401 402 return (403 <Container fluid>404 <Form ref={refForm} onSubmit={handleOnSubmit}>405 <PageHeader title=""Şifre Değiştir"">406 <Button type=""submit"" text=""Kaydet"" className=""proto-button-secondary"" />407 </PageHeader>408 <Row>409 <Col xs={12} md={12} lg={4} xl={4}>410 <InputLayout label=""Eski Şifre"">411 <PasswordInput412 name=""oldPassword""413 placeholder=""Eski Şifre""414 validations={[required('')]}415 />416 </InputLayout>417 </Col>418 <Col xs={12} md={12} lg={4} xl={4}>419 <InputLayout label=""Yeni Şifre"">420 <PasswordInput421 name=""newPassword""422 placeholder=""Yeni Şifre""423 validations={[required('')]}424 />425 </InputLayout>426 </Col>427 <Col xs={12} md={12} lg={4} xl={4}>428 <InputLayout label=""Yeni Şifre Tekrar"">429 <PasswordInput430 name=""newPasswordValidation""431 placeholder=""Yeni Şifre Tekrar""432 validations={[required('')]}433 />434 </InputLayout>435 </Col>436 </Row>437 </Form>438 </Container>439 );440};441 442export default ChangePassword;443import { Container } from '@protolibrary/components';444import React from 'react';445import Countdown from '../../components/countdown';446 447const DashBoard = () => {448 return (449 <Container style={{ backgroundColor: 'transparent' }}>450 <Container>451 <Countdown452 title=""Under Construction""453 footerText=""We will let you know when it is ready!""454 timeTillDate=""2024-02-15 00:00:00""455 />456 </Container>457 </Container>458 );459};460 461export default DashBoard;462import React from 'react';463import BasePropTypes from '@common/models/BasePropTypes';464import {465 Block,466 Form,467 Icon,468 TextField,469 BackgroundImage,470 Label,471 Checkbox,472} from '@protolibrary/components';473import Button from '@protoweb/button';474import authService from '@services/AuthService';475import PasswordInput from '@common/components/password-input';476import COLORS from '@resources/colors';477import { LOGO } from '../../layout/assets/icons';478import useLocalization from '@hooks/useLocalization';479 480interface LoginPropTypes extends BasePropTypes {481 fromCaptcha: boolean;482}483 484const Login: React.FC<LoginPropTypes> = () => {485 const formRef = React.useRef<any>();486 const { t } = useLocalization();487 488 const handleOnSubmit = (_, formValues): void => {489 let values = { userName: formValues?.userName, password: formValues?.password };490 authService.login(values, formValues?.rememberMe);491 };492 493 const textfieldStyle = () => {494 return {495 container: {496 height: 60,497 position: 'relative',498 cursor: 'pointer',499 },500 element: {501 paddingLeft: 20,502 height: 60,503 cursor: 'pointer',504 borderRadius: 8,505 background: 'white',506 borderWidth: 1,507 borderStyle: 'solid',508 borderColor: COLORS.GRAY,509 fontSize: 16,510 },511 };512 };513 514 return (515 <Block className=""flex-row"">516 <BackgroundImage517 path=""/public/images/loginx1.jpg""518 className=""""519 style={{520 backgroundSize: 'cover',521 justifyContent: 'space-between',522 display: 'flex',523 flex: 1,524 flexDirection: 'row',525 }}526 >527 <Block style={{ flex: 1, justifyContent: 'flex-end' }}></Block>528 </BackgroundImage>529 530 <Block className=""login__container"">531 <Block532 style={{533 justifyContent: 'space-between',534 padding: 30,535 paddingLeft: 66,536 paddingRight: 66,537 paddingTop: 200,538 display: 'flex',539 flex: 1,540 width: 500,541 margin: 'auto',542 }}543 >544 <Block>545 <Form onSubmit={handleOnSubmit} ref={formRef}>546 <Block547 className=""flex flex-1 justify-content-center""548 style={{ width: 259, height: 89, marginBottom: 100, fontSize: 48, margin: 'auto' }}549 >550 <Icon551 className=""flex justify-content-center""552 style={{553 container: {554 marginBottom: 39,555 marginLeft: -30,556 cursor: 'pointer',557 width: 280,558 height: 80,559 },560 element: { width: 150, height: 50, cursor: 'pointer' },561 }}562 icon={LOGO}563 />564 </Block>565 <Block style={{ marginBottom: 10 }}>566 <TextField567 name=""userName""568 placeholder={t('login_form_username_placeholder')}569 style={textfieldStyle()}570 />571 </Block>572 <Block style={{ marginBottom: 25 }}>573 <PasswordInput574 className=""login-password""575 name=""password""576 placeholder={t('login_form_password_placeholder')}577 style={textfieldStyle()}578 />579 </Block>580 <Block581 style={{582 flexDirection: 'row',583 display: 'flex',584 alignItems: 'center',585 marginBottom: 70,586 }}587 >588 <Checkbox name={'rememberMe'} />589 <Label590 text={t('login_form_remember_me')}591 style={{592 element: {593 lineHeight: '21px',594 fontWeight: '400',595 fontSize: 14,596 color: '#444444',597 },598 }}599 />600 </Block>601 <Button602 text={t('login_form_submit')}603 type=""submit""604 fullWidth605 style={{606 element: {607 background: COLORS.PRIMARY,608 minHeight: 60,609 },610 container: {611 border: '1px solid',612 borderColor: COLORS.WHITE,613 },614 text: {615 color: COLORS.WHITE,616 fontSize: 20,617 fontWeight: 600,618 lineHeight: '28px',619 },620 }}621 />622 </Form>623 </Block>624 </Block>625 </Block>626 </Block>627 );628};629 630export default Login;631 632"
633AppMain.tsx,"import ErrorManager from '@common/error/ErrorManager';634import * as React from 'react';635import { useSelector } from 'react-redux';636import { Route, Switch } from 'react-router-dom';637import 'react-tippy/dist/tippy.css';638import { ToastContainer } from 'react-toastify';639import 'react-toastify/dist/ReactToastify.css';640import Loader from './components/Loader';641import { useStore } from '@core/states';642import DashBoard from './pages/authenticated/Dashboard';643import OrderPage from './pages/authenticated/order-management';644import NewOrderPage from './pages/authenticated/order-management/pages/NewOrder';645import Login from './pages/guest/Login';646import navigationService from '@common/navigation/NavigationService';647import 'primeflex/primeflex.css';648import 'react-toastify/dist/ReactToastify.css';649import './assets/css/custom.css';650import './assets/css/main.scss';651import './assets/css/tooltip.css';652import GenericModal from '@components/GenericModal';653import Layout from './layout';654import TaskManagement from './pages/authenticated/task-management';655import RoleManagement from './pages/authenticated/role-management';656import UserManagement from './pages/authenticated/user-management';657import UserCreateUpdate from './pages/authenticated/user-management/pages/UserCreateUpdate';658import CreateUpdateTask from './pages/authenticated/task-management/pages/CreateUpdateTask';659import CreateUpdateRole from './pages/authenticated/role-management/pages/CreateUpdateRole';660import authState from '@core/states/AuthState';661import accountService from '@services/Account';662import NAVIGATION_PATHS from '@common/navigation/NavigationPaths';663import OrderDetail from './pages/authenticated/order-management/pages/OrderDetail';664import OrderVehicleDetail from './pages/authenticated/order-management/pages/OrderVehicleDetail';665import ChangePassword from './pages/authenticated/user-management/pages/ChangePassword';666import ResetPassword from './pages/authenticated/user-management/pages/ResetPassword';667import en from 'public/lang/en.json';668import tr from 'public/lang/tr.json';669import LocalizedStrings from '@localization/LocalizedStrings';670import CustomerManagement from './pages/authenticated/customer-management';671import CustomerCreateUpdate from './pages/authenticated/customer-management/pages/CustomerCreateUpdate';672import ProjectManagement from './pages/authenticated/project-management';673import ProjectCreateUpdate from './pages/authenticated/project-management/pages/ProjectCreateUpdate';674 675export interface AppMainPropTypes {676 authenticated: boolean;677 isLoading: boolean;678 location: any;679}680 681function AppMain({ location }: AppMainPropTypes) {682 const isAuthenticated = useSelector<any, string>(state => state.authState.authenticated);683 const modalStore = useStore('modalState');684 const { open, type, closeAction, confirmAction } = modalStore;685 const { open: loaderOpen } = useStore('loaderState');686 687 React.useEffect(() => {688 const lastRoute = sessionStorage.getItem('routePath');689 accountService.getInfo().then(res => {690 authState.update({ authenticated: true, roles: res.roles, fullName: res.fullName });691 let routeParameters = sessionStorage.getItem('routeParameters');692 693 if (routeParameters && typeof routeParameters === 'string') {694 routeParameters = JSON.parse(routeParameters);695 }696 navigationService.push(697 lastRoute || NAVIGATION_PATHS.SYSTEM_MANAGEMENT.ORDER.BASE,698 routeParameters,699 );700 });701 }, [isAuthenticated]);702 703 React.useEffect(() => {704 new LocalizedStrings({ EN: en, TR: tr });705 }, []);706 707 return (708 <>709 {loaderOpen && <Loader />}710 {open && (711 <GenericModal type={type} show={open} close={closeAction} confirmAction={confirmAction} />712 )}713 {isAuthenticated ? (714 <Layout>715 <Switch>716 <Route exact path=""/dashboard"" component={DashBoard} />717 <Route718 exact719 path={NAVIGATION_PATHS.SYSTEM_MANAGEMENT.ORDER.BASE}720 component={OrderPage}721 />722 <Route723 exact724 path={NAVIGATION_PATHS.SYSTEM_MANAGEMENT.ORDER.DETAIL}725 component={OrderDetail}726 />727 <Route728 exact729 path={NAVIGATION_PATHS.SYSTEM_MANAGEMENT.ORDER.VEHICLE_DETAIL}730 component={OrderVehicleDetail}731 />732 <Route733 exact734 path={NAVIGATION_PATHS.SYSTEM_MANAGEMENT.ORDER.CREATE}735 component={NewOrderPage}736 />737 <Route738 exact739 path={NAVIGATION_PATHS.SYSTEM_MANAGEMENT.TASK_MANAGEMENT.BASE}740 component={TaskManagement}741 />742 <Route743 exact744 path={NAVIGATION_PATHS.SYSTEM_MANAGEMENT.TASK_MANAGEMENT.CREATE_UPDATE}745 component={CreateUpdateTask}746 />747 <Route748 exact749 path={NAVIGATION_PATHS.SYSTEM_MANAGEMENT.USER_MANAGEMENT.BASE}750 component={UserManagement}751 />752 <Route753 exact754 path={NAVIGATION_PATHS.SYSTEM_MANAGEMENT.USER_MANAGEMENT.CREATE_UPDATE}755 component={UserCreateUpdate}756 />757 <Route758 exact759 path={NAVIGATION_PATHS.SYSTEM_MANAGEMENT.USER_MANAGEMENT.CHANGE_PASSWORD}760 component={ChangePassword}761 />762 <Route763 exact764 path={NAVIGATION_PATHS.SYSTEM_MANAGEMENT.USER_MANAGEMENT.RESET_PASSWORD}765 component={ResetPassword}766 />767 <Route768 exact769 path={NAVIGATION_PATHS.SYSTEM_MANAGEMENT.ROLE_MANAGEMENT.BASE}770 component={RoleManagement}771 />772 <Route773 exact774 path={NAVIGATION_PATHS.SYSTEM_MANAGEMENT.ROLE_MANAGEMENT.CREATE_UPDATE}775 component={CreateUpdateRole}776 />777 <Route778 exact779 path={NAVIGATION_PATHS.SYSTEM_MANAGEMENT.CUSTOMER_MANAGEMENT.BASE}780 component={CustomerManagement}781 />782 <Route783 exact784 path={NAVIGATION_PATHS.SYSTEM_MANAGEMENT.CUSTOMER_MANAGEMENT.CREATE_UPDATE}785 component={CustomerCreateUpdate}786 />787 <Route788 exact789 path={NAVIGATION_PATHS.SYSTEM_MANAGEMENT.PROJECT_MANAGEMENT.BASE}790 component={ProjectManagement}791 />792 <Route793 exact794 path={NAVIGATION_PATHS.SYSTEM_MANAGEMENT.PROJECT_MANAGEMENT.CREATE_UPDATE}795 component={ProjectCreateUpdate}796 />797 </Switch>798 </Layout>799 ) : (800 <Switch>801 <Route exact path=""/"" component={Login} />802 <Route exact path=""/login"" component={Login} />803 <Route exact path=""/guest"" component={Login} />804 </Switch>805 )}806 <ToastContainer />807 <ErrorManager />808 </>809 );810}811 812export default AppMain;813"
814