generated from project-error/npwd-app-template
-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #19 from npwd-community/add-vite
add vite
- Loading branch information
Showing
13 changed files
with
957 additions
and
2,673 deletions.
There are no files selected for viewing
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -15,5 +15,5 @@ ui_page 'web/dist/index.html' | |
|
|
||
| files { | ||
| 'web/dist/index.html', | ||
| 'web/dist/*.js', | ||
| } | ||
| 'web/dist/**/*', | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"/> | ||
| <link rel="icon" type="image/svg+xml" href="/vite.svg"/> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | ||
| <title>NPWD QB Garage</title> | ||
| </head> | ||
| <body> | ||
| <div id="root"></div> | ||
| <script type="module" src="/src/index.tsx"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,93 +1,94 @@ | ||
| import React, { useEffect, useState } from 'react'; | ||
| import { NuiProvider } from 'react-fivem-hooks'; | ||
| import { useHistory } from 'react-router-dom'; | ||
| import React, {useEffect, useState} from 'react'; | ||
| import {useHistory} from 'react-router-dom'; | ||
| import styled from 'styled-components'; | ||
| import { Header } from './styles/header.styles'; | ||
| import { IPhoneSettings } from '@project-error/npwd-types'; | ||
| import { i18n } from 'i18next'; | ||
| import { IconButton, Theme, StyledEngineProvider, ThemeProvider, Typography } from '@mui/material'; | ||
| import { ArrowBack } from '@mui/icons-material'; | ||
| import { GarageItem } from './types/garage'; | ||
| import { MockGarage } from './utils/constants'; | ||
| import { buildRespObj } from './utils/misc'; | ||
| import { VehicleList } from './components/VehicleList'; | ||
| import {Header} from './styles/header.styles'; | ||
| import {IPhoneSettings} from '@project-error/npwd-types'; | ||
| import {i18n} from 'i18next'; | ||
| import {IconButton, Theme, StyledEngineProvider, Typography} from '@mui/material'; | ||
| import {ArrowBack} from '@mui/icons-material'; | ||
| import {GarageItem} from './types/garage'; | ||
| import {MockGarage} from './utils/constants'; | ||
| import {buildRespObj} from './utils/misc'; | ||
| import {VehicleList} from './components/VehicleList'; | ||
| import fetchNui from './utils/fetchNui'; | ||
| import { ServerPromiseResp } from './types/common'; | ||
| import {ServerPromiseResp} from './types/common'; | ||
| import {RecoilEnv, RecoilRoot} from "recoil"; | ||
|
|
||
| RecoilEnv.RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED = false; | ||
|
|
||
| const Container = styled.div<{ isDarkMode: any }>` | ||
| flex: 1; | ||
| padding: 1.5rem; | ||
| display: flex; | ||
| box-sizing: border-box; | ||
| flex-direction: column; | ||
| overflow: auto; | ||
| max-height: 100%; | ||
| background-color: #fafafa; | ||
| ${({ isDarkMode }) => | ||
| isDarkMode && | ||
| ` | ||
| flex: 1; | ||
| padding: 1.5rem; | ||
| display: flex; | ||
| box-sizing: border-box; | ||
| flex-direction: column; | ||
| overflow: auto; | ||
| max-height: 100%; | ||
| background-color: #fafafa; | ||
| ${({isDarkMode}) => | ||
| isDarkMode && | ||
| ` | ||
| background-color: #212121; | ||
| `} | ||
| `; | ||
|
|
||
| interface AppProps { | ||
| theme: Theme; | ||
| i18n: i18n; | ||
| settings: IPhoneSettings; | ||
| theme: Theme; | ||
| i18n: i18n; | ||
| settings: IPhoneSettings; | ||
| } | ||
|
|
||
| const App = (props: AppProps) => { | ||
| const history = useHistory(); | ||
| const [vehicles, setVehicles] = useState<GarageItem[] | undefined>([]); | ||
| const [mappedVeh, setMappedVeh] = useState<any>(null); | ||
| const history = useHistory(); | ||
| const [vehicles, setVehicles] = useState<GarageItem[] | undefined>([]); | ||
| const [mappedVeh, setMappedVeh] = useState<any>(null); | ||
|
|
||
| const isDarkMode = props.theme.palette.mode === 'dark'; | ||
| const isDarkMode = 'dark' | ||
|
|
||
| useEffect(() => { | ||
| fetchNui<ServerPromiseResp<GarageItem[]>>( | ||
| 'npwd:qb-garage:getVehicles', | ||
| null, | ||
| buildRespObj(MockGarage) | ||
| ).then((resp) => { | ||
| setVehicles(resp.data); | ||
| }); | ||
| }, []); | ||
| useEffect(() => { | ||
| fetchNui<ServerPromiseResp<GarageItem[]>>( | ||
| 'npwd:qb-garage:getVehicles', | ||
| null, | ||
| buildRespObj(MockGarage) | ||
| ).then((resp) => { | ||
| setVehicles(resp.data); | ||
| }); | ||
| }, []); | ||
|
|
||
|
|
||
| useEffect(() => { | ||
| if (vehicles) { | ||
| const mappedVehicles = vehicles?.reduce((vehs: any, vehicle: any) => { | ||
| if (!vehs[vehicle.type]) vehs[vehicle.type] = []; | ||
| vehs[vehicle.type].push(vehicle); | ||
| return vehs; | ||
| }, {}); | ||
| useEffect(() => { | ||
| if (vehicles) { | ||
| const mappedVehicles = vehicles?.reduce((vehs: any, vehicle: any) => { | ||
| if (!vehs[vehicle.type]) vehs[vehicle.type] = []; | ||
| vehs[vehicle.type].push(vehicle); | ||
| return vehs; | ||
| }, {}); | ||
|
|
||
| setMappedVeh(mappedVehicles); | ||
| } | ||
| }, [vehicles]); | ||
| setMappedVeh(mappedVehicles); | ||
| } | ||
| }, [vehicles]); | ||
|
|
||
| return ( | ||
| <StyledEngineProvider injectFirst> | ||
| <ThemeProvider theme={props.theme}> | ||
| <Container isDarkMode={isDarkMode}> | ||
| <Header> | ||
| <IconButton color="primary" onClick={() => history.goBack()}> | ||
| <ArrowBack /> | ||
| </IconButton> | ||
| <Typography fontSize={24} color="primary" fontWeight="bold"> | ||
| Garage | ||
| </Typography> | ||
| </Header> | ||
| {mappedVeh && <VehicleList isDarkMode={isDarkMode} vehicles={mappedVeh} />} | ||
| </Container> | ||
| </ThemeProvider> | ||
| </StyledEngineProvider> | ||
| ); | ||
| return ( | ||
| <StyledEngineProvider injectFirst> | ||
| <Container isDarkMode={isDarkMode}> | ||
| <Header> | ||
| <IconButton color="primary" onClick={() => history.goBack()}> | ||
| <ArrowBack/> | ||
| </IconButton> | ||
| <Typography fontSize={24} color="primary" fontWeight="bold"> | ||
| Garage | ||
| </Typography> | ||
| </Header> | ||
| {mappedVeh && <VehicleList isDarkMode={true} vehicles={mappedVeh}/>} | ||
| </Container> | ||
| </StyledEngineProvider> | ||
| ); | ||
| }; | ||
|
|
||
| const WithProviders: React.FC<AppProps> = (props) => ( | ||
| <NuiProvider> | ||
| <App {...props} /> | ||
| </NuiProvider> | ||
| <RecoilRoot override key="npwd_qb_garage"> | ||
| <App {...props} /> | ||
| </RecoilRoot> | ||
| ); | ||
|
|
||
| export default WithProviders; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| import { MutableRefObject, useEffect, useRef } from 'react'; | ||
|
|
||
| interface NuiMessageData<T = unknown> { | ||
| method: string; | ||
| data: T; | ||
| app: string; | ||
| } | ||
|
|
||
| type NuiHandlerSignature<T> = (data: T) => void; | ||
|
|
||
| /** | ||
| * A hook that manage events listeners for receiving data from the client scripts | ||
| * @param app | ||
| * @param action The specific `action` that should be listened for. | ||
| * @param handler The callback function that will handle data relayed by this hook | ||
| * | ||
| * @example | ||
| * useNuiEvent<{visibility: true, wasVisible: 'something'}>('setVisible', (data) => { | ||
| * // whatever logic you want | ||
| * }) | ||
| * | ||
| **/ | ||
|
|
||
| export const useNuiEvent = <T = any>(app: string, action: string, handler: (data: T) => void) => { | ||
| const savedHandler: MutableRefObject<NuiHandlerSignature<T>> = useRef(); | ||
|
|
||
| // When handler value changes set mutable ref to handler val | ||
| useEffect(() => { | ||
| savedHandler.current = handler; | ||
| }, [handler]); | ||
|
|
||
| useEffect(() => { | ||
| const eventListener = (event: MessageEvent<NuiMessageData<T>>) => { | ||
| const { method: eventAction, app: tgtApp, data } = event.data; | ||
|
|
||
| if (savedHandler.current && savedHandler.current.call) { | ||
| if (eventAction === action && tgtApp === app) { | ||
| savedHandler.current(data); | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| window.addEventListener('message', eventListener); | ||
| // Remove Event Listener on component cleanup | ||
| return () => window.removeEventListener('message', eventListener); | ||
| }, [action, app]); | ||
| }; |
Oops, something went wrong.