Skip to content

Commit

Permalink
refactor: remove address suggestion feature for making the demo simpl…
Browse files Browse the repository at this point in the history
…er to follow
  • Loading branch information
yunusemredilber committed Nov 18, 2024
1 parent 965bc82 commit 0bb66f3
Show file tree
Hide file tree
Showing 8 changed files with 5 additions and 239 deletions.
46 changes: 3 additions & 43 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ <h2>What we have (1)</h2>
<h2>What we have (2)</h2>
<p>A few controlled form components like this:</p>
<pre>
<code class="language-typescript" data-line-numbers="1-26|14|16-20">
<code class="language-typescript" data-line-numbers="1-26|15-21">
const Select = ({
id, label, options, value, onChange,
}) =&gt; {
Expand Down Expand Up @@ -136,50 +136,10 @@ <h2>What we have (3)</h2>
</code>
</pre>
</section>
<section>
<h2>What we have (4)</h2>
<p>One More: Address Suggestion Chips</p>
<pre>
<code class="language-typescript" data-line-numbers="1-26|5-6|12-16|18-27">
const AddressSuggestions = () =&gt; {
const { city, address, updateField } = useForm();

// We will track this one as well:
const filteredSuggestions = getFilteredSuggestions(city.value);

return (
&lt;div className=&quot;address-suggestions-wrapper&quot;&gt;
&lt;h4&gt;Auto Complete Suggestions&lt;/h4&gt;
&lt;ul style={{ width: filteredSuggestions.length &lt; 10 ? 300 : 1000 }}&gt;
{filteredSuggestions.map((suggestion) =&gt; {
{(() =&gt; {
increaseRenderCount(&quot;suggestion-element&quot;);
return null;
})()}
return (
&lt;li
key={suggestion.address}
onClick={() =&gt; {
autoFillAddressFromSuggestion({
suggestion, updateField,
});
}}
&gt;
{getMatchingTextPartsAsMarked(suggestion.address, address.value)}
&lt;/li&gt;
);
})}
&lt;/ul&gt;
&lt;/div&gt;
);
};
</code>
</pre>
</section>
</section>
<section>
<div class="side-by-side text-align-start">
<iframe data-src="/react-compiler-presentation/non-compiled" data-preload width="700" height="600"></iframe>
<iframe data-src="/react-compiler-presentation/non-compiled" data-preload width="700" height="500"></iframe>
<div class="fragment margin-inline-start" style="max-width: 300px;">
<h5>Issues</h5>
<ul class="small-list">
Expand Down Expand Up @@ -293,7 +253,7 @@ <h5>Issues</h5>
<h1>That's it ? 🤔</h1>
</section>
<section>
<iframe data-src="/react-compiler-presentation/compiled" data-preload width="700" height="600"></iframe>
<iframe data-src="/react-compiler-presentation/compiled" data-preload width="700" height="500"></iframe>
</section>
<section>
<h3>🤯 What did the compiler do?</h3>
Expand Down
2 changes: 0 additions & 2 deletions src/app.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
import { Form } from "./components/form";
import { FormProvider } from "./contexts/form";
import { AddressSuggestions } from "./components/address-suggestions";

export const App = () => {
return (
<FormProvider>
<Form />
<AddressSuggestions />
</FormProvider>
);
};
42 changes: 0 additions & 42 deletions src/components/address-suggestions/helpers.tsx

This file was deleted.

42 changes: 0 additions & 42 deletions src/components/address-suggestions/index.tsx

This file was deleted.

2 changes: 1 addition & 1 deletion src/components/form/helpers.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { DISTRICT_LIST } from "../../data/location";
import { increaseRenderCount } from "../../util/render-stats-data";

export function getDistrictList(cityId?: number | null) {
increaseRenderCount("get-district-list");
increaseRenderCount("filter-district-list");

if (!cityId) {
return DISTRICT_LIST;
Expand Down
79 changes: 0 additions & 79 deletions src/data/location.ts
Original file line number Diff line number Diff line change
Expand Up @@ -69,9 +69,6 @@ export const DISTRICT_LIST = [
{ value: 26, label: "Paris 1", cityId: 5 },
{ value: 27, label: "Paris 2", cityId: 5 },
{ value: 28, label: "Paris 3", cityId: 5 },
{ value: 29, label: "Paris 4", cityId: 5 },
{ value: 30, label: "Paris 5", cityId: 5 },
{ value: 31, label: "New York Manhattan", cityId: 6 },
{ value: 32, label: "New York Brooklyn", cityId: 6 },
{ value: 33, label: "New York Queens", cityId: 6 },
{ value: 34, label: "New York Bronx", cityId: 6 },
Expand All @@ -85,7 +82,6 @@ export const DISTRICT_LIST = [
{ value: 42, label: "Moscow Khamovniki", cityId: 8 },
{ value: 43, label: "Moscow Presnensky", cityId: 8 },
{ value: 44, label: "Moscow Basmanny", cityId: 8 },
{ value: 45, label: "Moscow Tagansky", cityId: 8 },
{ value: 46, label: "Rome Centro Storico", cityId: 9 },
{ value: 47, label: "Rome Trastevere", cityId: 9 },
{ value: 48, label: "Rome Ostia", cityId: 9 },
Expand All @@ -95,78 +91,3 @@ export const DISTRICT_LIST = [
{ value: 52, label: "Madrid Salamanca", cityId: 10 },
{ value: 53, label: "Madrid Chamberi", cityId: 10 },
];

export const ADDRESS_SUGGESTIONS: {
address: string;
cityId: number;
districtId: number;
}[] = [
{ address: "Tokat Merkez - Cumhuriyet Sokak", cityId: 1, districtId: 7 },
{ address: "Tokat Merkez - Ataturk Bulvari", cityId: 1, districtId: 7 },
{ address: "Tokat Merkez - Ataturk Caddesi", cityId: 1, districtId: 7 },
{ address: "Zorlu Center - Levent", cityId: 2, districtId: 55 },
{ address: "Kanyon - Levent", cityId: 2, districtId: 55 },
{ address: "Istinye Park - Sariyer", cityId: 2, districtId: 4 },
{ address: "Fatih Sultan Mehmet Bridge - Sariyer", cityId: 2, districtId: 4 },
{ address: "Bosphorus Bridge - Uskudar", cityId: 2, districtId: 5 },
{ address: "Maiden Tower - Uskudar", cityId: 2, districtId: 5 },
{ address: "Galata Tower - Beyoglu", cityId: 2, districtId: 6 },
{ address: "Taksim Square - Beyoglu", cityId: 2, districtId: 6 },
{ address: "Hagia Sophia - Fatih", cityId: 2, districtId: 3 },
{ address: "Grand Bazaar - Fatih", cityId: 2, districtId: 3 },
{ address: "Brandenburg Gate - Berlin Mitte", cityId: 3, districtId: 16 },
{ address: "Reichstag - Berlin Mitte", cityId: 3, districtId: 16 },
{
address: "East Side Gallery - Berlin Friedrichshain",
cityId: 3,
districtId: 19,
},
{
address: "Oberbaum Bridge - Berlin Friedrichshain",
cityId: 3,
districtId: 19,
},
{ address: "London Eye - London Westminster", cityId: 4, districtId: 21 },
{ address: "Big Ben - London Westminster", cityId: 4, districtId: 21 },
{ address: "Camden Market - London Camden", cityId: 4, districtId: 22 },
{ address: "Regent's Park - London Camden", cityId: 4, districtId: 22 },
{
address: "Kensington Palace - London Kensington",
cityId: 4,
districtId: 23,
},
{ address: "Hyde Park - London Kensington", cityId: 4, districtId: 23 },
{ address: "Islington - London Islington", cityId: 4, districtId: 24 },
{ address: "Angel - London Islington", cityId: 4, districtId: 24 },
{ address: "Hackney Empire - London Hackney", cityId: 4, districtId: 25 },
{ address: "Victoria Park - London Hackney", cityId: 4, districtId: 25 },
{ address: "Louvre Museum - Paris 1", cityId: 5, districtId: 26 },
{ address: "Notre-Dame Cathedral - Paris 1", cityId: 5, districtId: 26 },
{ address: "Centre Pompidou - Paris 3", cityId: 5, districtId: 28 },
{ address: "Hotel de Ville - Paris 3", cityId: 5, districtId: 28 },
{ address: "Eiffel Tower - Paris 7", cityId: 5, districtId: 31 },
{ address: "Champs-Elysees - Paris 8", cityId: 5, districtId: 32 },
{ address: "Brooklyn Bridge - New York Brooklyn", cityId: 6, districtId: 32 },
{ address: "Prospect Park - New York Brooklyn", cityId: 6, districtId: 32 },
{ address: "Central Park - New York Manhattan", cityId: 6, districtId: 31 },
{
address: "Empire State Building - New York Manhattan",
cityId: 6,
districtId: 31,
},
{ address: "Queensbridge Park - New York Queens", cityId: 6, districtId: 33 },
{ address: "Flushing Meadows - New York Queens", cityId: 6, districtId: 33 },
{ address: "Bronx Zoo - New York Bronx", cityId: 6, districtId: 34 },
{ address: "Yankee Stadium - New York Bronx", cityId: 6, districtId: 34 },
{
address: "Staten Island Ferry - New York Staten Island",
cityId: 6,
districtId: 35,
},
{
address: "Snug Harbor Cultural Center - New York Staten Island",
cityId: 6,
districtId: 35,
},
{ address: "Shinjuku Gyoen - Tokyo Shinjuku", cityId: 7, districtId: 36 },
];
27 changes: 0 additions & 27 deletions src/styles/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -81,30 +81,3 @@ h1 {
font-size: 0.8em;
color: #666;
}

.address-suggestions-wrapper {
overflow: scroll;
}

.address-suggestions-wrapper ul {
all: unset;
list-style-type: none;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
gap: 4px;
width: 1000px;
height: 200px;
}

.address-suggestions-wrapper li {
all: unset;
display: inline;
font-size: 0.9em;
word-break: break-word;
padding: 2px;
border: 1px solid #333;
border-radius: 4px;
background-color: white;
height: fit-content;
}
4 changes: 1 addition & 3 deletions src/util/render-stats-data.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
export const renderStatsData = {
"get-district-list": 0,
"get-filtered-suggestions": 0,
"filter-district-list": 0,
"select-option": 0,
"suggestion-element": 0,
};

const renderStatsEl = document.querySelector("#render-stats > ul")!;
Expand Down

0 comments on commit 0bb66f3

Please sign in to comment.