React Custom hook - useQueryString

markdown Custom hook for simple get and set QueryString [demo](tps://codesandbox.io/s/react-custom-hooks-usequerystring-vmc2g) install package `react-router-dom` ```js // src/index.js import { StrictMode } from "react"; import ReactDOM from "react-dom"; + import { BrowserRouter as Router } from "react-router-dom"; import App from "./App"; const rootElement = document.getElementById("root"); ReactDOM.render( + + , rootElement ); ``` Add useQueryString.js ``` // src/hooks/useQueryString.js import React from "react"; import { useLocation, useHistory } from "react-router-dom"; import { shallowEqual } from "react-redux"; const useQueryString = () => { const location = useLocation(); const history = useHistory(); const { search } = location; const [value, setValue] = React.useState({}); React.useEffect(() => { let qs = Object.fromEntries(new URLSearchParams(search)); if (!shallowEqual(qs, value)) { setValue(qs); } }, [search]); // eslint-disable-line react-hooks/exhaustive-deps return { value, set: (params) => history.push({ pathname: location.pathname, search: new URLSearchParams({ ...value, ...params }).toString() }) }; }; export default useQueryString; ``` I use shallowEqual function check queryString is changed. ``` // shallowEqual.js in react-redux function is(x, y) { if (x === y) { return x !== 0 || y !== 0 || 1 / x === 1 / y; } else { return x !== x && y !== y; } } export default function shallowEqual(objA, objB) { if (is(objA, objB)) return true; if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) { return false; } var keysA = Object.keys(objA); var keysB = Object.keys(objB); if (keysA.length !== keysB.length) return false; for (var i = 0; i < keysA.length; i++) { if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) { return false; } } return true; } ``` ## How to use useQueryString() ``` const qs = useQueryString(); ``` #### set value to url ``` qs.set({"name": "value"}); qs.set({"age": "19"}); ``` #### get value ``` console.log(qs.value.name); console.log(qs.value.age); ``` ## References * [QueryString - Wikipedia](https://en.wikipedia.org/wiki/Query_string) * [React 中優雅使用網址參數 Query String - Jul 7, 2020 · Ryan Hsu](https://medium.com/itsoktomakemistakes/react-%E4%B8%AD%E5%84%AA%E9%9B%85%E4%BD%BF%E7%94%A8%E7%B6%B2%E5%9D%80%E5%8F%83%E6%95%B8-query-string-540bacd08486) * [React Router, why useLocation and useHistory might return undefined](https://flaviocopes.com/react-router-uselocation-usehistory-undefined/) * [React Router](https://reactrouter.com/web/guides/quick-start) * [React Redux](https://react-redux.js.org/)

ValueObject as Entity ID, EntityTypeConfiguration Sample

markdown 問題：https://stackoverflow.com/questions/53328201/ef-core-non-primitive-type-value-object-as-primary-key 參考來源：https://github.com/dotnet/efcore/issues/13669 ``` public class User { public UserId Id { get; set; } public Credentials Credentials { get; set; } } public class UserId { private UserId() { } private UserId(long id) { Id = id; } public long Id { get; private set; } public static implicit operator long(UserId beaconId) { return beaconId.Id; } public static implicit operator UserId(long id) { return new UserId(id); } public override bool Equals(object obj) { if (obj == null) { return false; } var userId = (UserId) obj; return this.Id == userId.Id; } public override int GetHashCode() { return Id.GetHashCode(); } } public class TestDbContext: DbContext { public TestDbContext(DbContextOptions options): base(options) { } public DbSet Users { get; set; } protected override void OnModelCreating(ModelBuilder modelBuilder) { var userModelBuilder = modelBuilder.Entity(); userModelBuilder.Property(x => x.Id).HasConversion(x => x.Id, value => new UserId(value)).HasColumnName("Id").IsRequired(); userModelBuilder.OwnsOne(x => x.Credentials, c => { c.Property(x => x.Email); c.Property(x => x.Password); }); } } ```

dotnet core get k8s self POD name

markdown k8s 中的 dotnet core 應用取得 POD name 三種方式取得的結果相同 ``` class Program { static async Task Main(string[] args) { Console.WriteLine("MachineName:"+Environment.MachineName); Console.WriteLine("HostName:"+ System.Net.Dns.GetHostName()); Console.WriteLine("ENV K8S_POD_NAME:"+Environment.GetEnvironmentVariable("K8S_POD_NAME")); await Task.Run(() =〉 Thread.Sleep(Timeout.Infinite)); } } ``` result on dotnet 3.1.11-alpine3.12 ``` MachineName:mqsend-7d9579cc47-kld6v HostName:mqsend-7d9579cc47-kld6v ENV K8S_POD_NAME:mqsend-7d9579cc47-kld6v ``` ENV需要在deployment時額外加入參考 ``` spec: containers: - env: - name: K8S_POD_NAME valueFrom: fieldRef: fieldPath: metadata.name ``` ref - https://kubernetes.io/docs/tasks/inject-data-application/environment-variable-expose-pod-information/#use-container-fields-as-values-for-environment-variablesƒ

Adding Git-Bash to the new Windows Terminal

markdown 在 Terminal 按下 `ctrl` + `,`，會開啟 `settings.json` ``` { "$schema": "https://aka.ms/terminal-profiles-schema", "defaultProfile": "{00000000-0000-0000-ba54-000000000001}", "profiles": { "defaults": { // Put settings here that you want to apply to all profiles }, "list": [ // put one of the configuration below right here ] } } ``` 在 list 的區段中加入，依據正確git安裝路徑取消`commandline`和`icon`的註解 ``` { "guid": "{00000000-0000-0000-ba54-000000000002}", //"commandline": "%PROGRAMFILES%/git/usr/bin/bash.exe -i -l", //"commandline": "%USERPROFILE%/AppData/Local/Programs/Git/git-bash.exe -l -i", "commandline": "%USERPROFILE%/AppData/Local/Programs/Git/bin/sh.exe --login", //"commandline": "%USERPROFILE%/AppData/Local/Programs/Git/bin/bash.exe -l -i", //"commandline": "%USERPROFILE%/scoop/apps/git/current/usr/bin/bash.exe -l -i", //"icon": "%PROGRAMFILES%/Git/mingw64/share/git/git-for-windows.ico", "icon": "%USERPROFILE%/AppData/Local/Programs/Git/mingw64/share/git/git-for-windows.ico", // "icon": "%USERPROFILE%/apps/git/current/usr/share/git/git-for-windows.ico", "name": "Bash", "startingDirectory": "%USERPROFILE%" } ``` # Reference # [Adding Git-Bash to the new Windows Terminal](https://stackoverflow.com/questions/56839307/adding-git-bash-to-the-new-windows-terminal)