Skip to content

Commit

Permalink
React 18 upgraded
Browse files Browse the repository at this point in the history
  • Loading branch information
@JoseLuisGJ
JoseLuisGJ committed Jul 6, 2024
1 parent 1c95476 commit e9952ef
Show file tree
Hide file tree
Showing 5 changed files with 92 additions and 178 deletions.
12 changes: 6 additions & 6 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@
"gpxparser": "^3.0.8",
"mapbox-gl": "^3.2.0",
"mixpanel-figma": "^2.0.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-dropzone": "^14.2.2",
"viewport-mercator-project": "^7.0.1"
},
Expand Down Expand Up @@ -45,10 +45,10 @@
"webpack": "^4.41.4",
"webpack-cli": "^3.3.6"
},
"engines" : {
"npm" : ">=8.19.4 <10.5.2",
"node" : ">=18.20.2 <20.12.2"
},
"engines": {
"npm": ">=8.19.4 <10.5.2",
"node": ">=18.20.2 <20.12.2"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
Expand Down
84 changes: 45 additions & 39 deletions src/app/components/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,47 +91,53 @@ const App = ({}) => {

// This is how we read messages sent from the plugin controller
window.onmessage = event => {
const { type, message, storage } = event.data.pluginMessage;
if (type === "map-drawed") {
console.log(`Figma Says: ${message}`);
}
if (type === "components-response") {
setFigmaComponents(message);
}
if (type === "sending-editor") {
setEditor(storage);
}

let notifyStorage = false;
if (
type === "fetched username" &&
storage != undefined &&
storage != "ergum"
event.data &&
event.data.pluginMessage &&
typeof event.data.pluginMessage === "object"
) {
setUsername(storage);
console.log("setUsername --->", storage);
notifyStorage = true;
}
if (
type === "fetched custom style" &&
storage != undefined &&
storage != "ckg6ps8s62b5e19nrr67wqw9u"
) {
setCustomStyleID(storage);
console.log("setCustomStyleID --->", storage);
notifyStorage = true;
}
if (notifyStorage) {
parent.postMessage(
{
pluginMessage: {
type: "notify-storage",
user: username,
style: customStyleID
}
},
"*"
);
const { type, message, storage } = event.data.pluginMessage;
if (type === "map-drawed") {
console.log(`Figma Says: ${message}`);
}
if (type === "components-response") {
setFigmaComponents(message);
}
if (type === "sending-editor") {
setEditor(storage);
}

let notifyStorage = false;
if (
type === "fetched username" &&
storage != undefined &&
storage != "ergum"
) {
setUsername(storage);
console.log("setUsername --->", storage);
notifyStorage = true;
}
if (
type === "fetched custom style" &&
storage != undefined &&
storage != "ckg6ps8s62b5e19nrr67wqw9u"
) {
setCustomStyleID(storage);
console.log("setCustomStyleID --->", storage);
notifyStorage = true;
}
if (notifyStorage) {
parent.postMessage(
{
pluginMessage: {
type: "notify-storage",
user: username,
style: customStyleID
}
},
"*"
);
}
}
};
}, []);
Expand Down
122 changes: 21 additions & 101 deletions src/app/components/geocoder-control.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,42 +14,44 @@ type GeocoderControlProps = Omit<
> & {
mapboxAccessToken: string;
marker?: boolean | Omit<MarkerProps, "longitude" | "latitude">;

position: ControlPosition;

onLoading?: (e: object) => void;
onResults?: (e: object) => void;
onResult?: (e: object) => void;
onError?: (e: object) => void;
};

/* eslint-disable complexity,max-statements */
export default function GeocoderControl(props: GeocoderControlProps) {
const [marker, setMarker] = useState(null);

export default function GeocoderControl({
mapboxAccessToken,
marker = true, // Default value set here
position,
onLoading = () => {}, // Default function
onResults = () => {}, // Default function
onResult = () => {}, // Default function
onError = () => {}, // Default function
...props
}: GeocoderControlProps) {
const [markerState, setMarker] = useState(null);
const geocoder = useControl<MapboxGeocoder>(
() => {
const ctrl = new MapboxGeocoder({
...props,
marker: false,
accessToken: props.mapboxAccessToken
accessToken: mapboxAccessToken
});
ctrl.on("loading", props.onLoading);
ctrl.on("results", props.onResults);
ctrl.on("loading", onLoading);
ctrl.on("results", onResults);
ctrl.on("result", evt => {
props.onResult(evt);

onResult(evt);
const { result } = evt;
const location =
result &&
(result.center ||
(result.geometry?.type === "Point" && result.geometry.coordinates));
if (location && props.marker) {
// @ts-ignore
if (location && marker) {
setMarker(
<Marker
// @ts-ignore
{...props.marker}
{...(marker === true ? {} : marker)}
longitude={location[0]}
latitude={location[1]}
/>
Expand All @@ -58,93 +60,11 @@ export default function GeocoderControl(props: GeocoderControlProps) {
setMarker(null);
}
});
ctrl.on("error", props.onError);
ctrl.on("error", onError);
return ctrl;
},
{
position: props.position
}
{ position }
);

// @ts-ignore (TS2339) private member
if (geocoder._map) {
if (
geocoder.getProximity() !== props.proximity &&
props.proximity !== undefined
) {
geocoder.setProximity(props.proximity);
}
if (
geocoder.getRenderFunction() !== props.render &&
props.render !== undefined
) {
geocoder.setRenderFunction(props.render);
}
if (
geocoder.getLanguage() !== props.language &&
props.language !== undefined
) {
geocoder.setLanguage(props.language);
}
if (geocoder.getZoom() !== props.zoom && props.zoom !== undefined) {
geocoder.setZoom(props.zoom);
}
if (geocoder.getFlyTo() !== props.flyTo && props.flyTo !== undefined) {
geocoder.setFlyTo(props.flyTo);
}
if (
geocoder.getPlaceholder() !== props.placeholder &&
props.placeholder !== undefined
) {
geocoder.setPlaceholder(props.placeholder);
}
if (
geocoder.getCountries() !== props.countries &&
props.countries !== undefined
) {
geocoder.setCountries(props.countries);
}
if (geocoder.getTypes() !== props.types && props.types !== undefined) {
geocoder.setTypes(props.types);
}
if (
geocoder.getMinLength() !== props.minLength &&
props.minLength !== undefined
) {
geocoder.setMinLength(props.minLength);
}
if (geocoder.getLimit() !== props.limit && props.limit !== undefined) {
geocoder.setLimit(props.limit);
}
if (geocoder.getFilter() !== props.filter && props.filter !== undefined) {
geocoder.setFilter(props.filter);
}
if (geocoder.getOrigin() !== props.origin && props.origin !== undefined) {
geocoder.setOrigin(props.origin);
}
// Types missing from @types/mapbox__mapbox-gl-geocoder
// if (geocoder.getAutocomplete() !== props.autocomplete && props.autocomplete !== undefined) {
// geocoder.setAutocomplete(props.autocomplete);
// }
// if (geocoder.getFuzzyMatch() !== props.fuzzyMatch && props.fuzzyMatch !== undefined) {
// geocoder.setFuzzyMatch(props.fuzzyMatch);
// }
// if (geocoder.getRouting() !== props.routing && props.routing !== undefined) {
// geocoder.setRouting(props.routing);
// }
// if (geocoder.getWorldview() !== props.worldview && props.worldview !== undefined) {
// geocoder.setWorldview(props.worldview);
// }
}
return marker;
// Additional logic for updating geocoder properties
return markerState;
}

const noop = () => {};

GeocoderControl.defaultProps = {
marker: true,
onLoading: noop,
onResults: noop,
onResult: noop,
onError: noop
};
10 changes: 6 additions & 4 deletions src/app/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './components/App';
import * as React from "react";
import * as ReactDOMClient from "react-dom/client";
import App from "./components/App";

ReactDOM.render(<App />, document.getElementById('react-page'));
const container = document.getElementById("react-page");
const root = ReactDOMClient.createRoot(container);
root.render(<App />);
42 changes: 14 additions & 28 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4763,15 +4763,6 @@ promise-inflight@^1.0.1:
resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=

prop-types@^15.6.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
dependencies:
loose-envify "^1.4.0"
object-assign "^4.1.1"
react-is "^16.8.1"

prop-types@^15.8.1:
version "15.8.1"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
Expand Down Expand Up @@ -4893,15 +4884,13 @@ randomfill@^1.0.3:
randombytes "^2.0.5"
safe-buffer "^5.1.0"

react-dom@^16.13.1:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f"
integrity sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==
react-dom@^18.3.1:
version "18.3.1"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"
prop-types "^15.6.2"
scheduler "^0.19.1"
scheduler "^0.23.2"

react-dropzone@^14.2.2:
version "14.2.2"
Expand All @@ -4912,7 +4901,7 @@ react-dropzone@^14.2.2:
file-selector "^0.6.0"
prop-types "^15.8.1"

react-is@^16.13.1, react-is@^16.8.1:
react-is@^16.13.1:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
Expand All @@ -4925,14 +4914,12 @@ react-map-gl@^7.1.7:
"@maplibre/maplibre-gl-style-spec" "^19.2.1"
"@types/mapbox-gl" ">=1.0.0"

react@^16.13.1:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==
react@^18.3.1:
version "18.3.1"
resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"
prop-types "^15.6.2"

read-pkg-up@^7.0.1:
version "7.0.1"
Expand Down Expand Up @@ -5249,13 +5236,12 @@ saxes@^3.1.9:
dependencies:
xmlchars "^2.1.1"

scheduler@^0.19.1:
version "0.19.1"
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
scheduler@^0.23.2:
version "0.23.2"
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3"
integrity sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"

schema-utils@^1.0.0:
version "1.0.0"
Expand Down

0 comments on commit e9952ef

Please sign in to comment.