YSNHatenaBlog

主にアプリやWebサービス開発について

Material-UIのフォーム完成 & Firestoreへの登録

座標が取得できたときに、formikのsetValueで値を更新したらラベルと値が重なってしまう。 本当は初期値nullにしたかった

面数はSelectより type="number" の方がいいな...せっかく調べたが。 とりあえず入力画面こんな感じでできた。MVP。

f:id:yosuke403:20210129061213p:plain

firestoreへの追加。関係あるところだけ。

import { useFirestore } from 'react-redux-firebase'

const NewCourt: React.FC<Record<string, unknown>> = () => {
  const firestore = useFirestore()

  const formik = useFormik({
    ...
    onSubmit: async (values, { setSubmitting }) => {
      const data: Omit<Court, 'id'> = {
        address: values.address,
        price: values.price,
        nighter: values.nighter,
        surfaces: {},
        name: values.name,
        createdAt: firebase.firestore.Timestamp.now(),
        geo: new firebase.firestore.GeoPoint(values.latitude, values.longitude),
        url: values.url,
      }
      try {
        const ref = await firestore.collection('courts').add(data)
        router.push(`/courts/${ref.id}`)
      } catch (e) {
        alert(e)
      }
      setSubmitting(false)
  }
  ...
}

住所からジオコードを取得

クライアントサイドはGeocoding API使えそう。 https://developers.google.com/maps/documentation/javascript/geocoding

ライブラリ。TypeScript対応。Geocoding API対応。 https://www.npmjs.com/package/@googlemaps/google-maps-services-js TypeScript対応。Geocoding API対応。

API有効化。restrictionに設定。

403エラー。

{
   "error_message" : "API keys with referer restrictions cannot be used with this API.",
   "results" : [],
   "status" : "REQUEST_DENIED"
}

リファラ付きだと駄目らしいので別APIキーつくる。

f:id:yosuke403:20210128062326p:plain

これで取得できた。

material-uiのSelect

Selectが切り替わらない。Controlledにするとだめ。 TextFieldは大丈夫なんだけどな...

TextFieldで書いてもいいらしい。見た目も綺麗なのでこっちで。

<TextField id="select" label="Age" value="20" select>
  <MenuItem value="10">Ten</MenuItem>
  <MenuItem value="20">Twenty</MenuItem>
</TextField>

そもそもFormControlとは?

Provides context such as filled/focused/error/required for form inputs. Relying on the context provides high flexibility and ensures that the state always stays consistent across the children of the FormControl. This context is used by the following components: - FormLabel - FormHelperText - Input - InputLabel

上のコンポーネントに入力状態を与えるもの、という感じだろうか。

TypeScriptでの連番配列の作り方

Array.from(Array(10).keys())

「オムニ」は「全天候」という意味らしい。

Selectはvalueにtouchedを入れないと反映されないな...。とりあえずこれで。

<TextField
    error={
      formik.touched.surfaceOmni &&
      formik.errors.surfaceOmni !== undefined
    }
    id="surface-omni"
    label="人工芝面数"
    value={formik.touched.surfaceOmni && formik.values.surfaceOmni}
    helperText={formik.touched.surfaceOmni && formik.errors.surfaceOmni}
    onChange={formik.handleChange}
    onBlur={formik.handleBlur}
    className={classes.select}
    select
    >
    {Array.from(Array(surfaceMax + 1).keys()).map((num) => (
      <MenuItem key={`surface-omni-${num}`} value={num}>
        {num}
      </MenuItem>
    ))}
</TextField>

とりあえず選べるようになった。

※ 2021/01/28 訂正 これだとタッチするまでControlled Componentじゃなくなってしまうので、修正

 <TextField
    error={
      formik.touched.surfaceOmni &&
      formik.errors.surfaceOmni !== undefined
    }
    id="surface-omni"
    label="人工芝面数"
    value={formik.values.surfaceOmni}
    helperText={formik.touched.surfaceOmni && formik.errors.surfaceOmni}
    onChange={formik.handleChange}
    onBlur={formik.handleBlur}
    className={classes.select}
    name="surfaceOmni"
    select
>
    {Array.from(Array(surfaceMax + 1).keys()).map((num) => (
      <MenuItem key={`surface-omni-${num}`} value={num}>
        {num}
      </MenuItem>
    ))}
</TextField>

f:id:yosuke403:20210127055359p:plain
tennico

2021年目標

子供が泣くので朝活できないから、今年の目標でも書いてみる。

 

とりあえずやりかかっている個人PJを完了させてしまうのと、最近知識の定着を意識してインプットしたいと思ってたので、本を読んで満足して終わらないよう、認証資格を目標に置いてみようかと思う。

 

こんな感じで↓

・Tennico Webのリリース
・Tennico iOSのリリース
GCP Associated Cloud Engineer
GCP Professional Cloud Architectの取得


参考
https://future-architect.github.io/articles/20190530/
https://qiita.com/mksamba/items/67ea80dec1dbb1d9692d

material-uiのtable修正&cssの改行

tableうまくいってないので修正。

TableCellの改行がされてなさそう。 TableContainerが不要そうだったので外しつつ、table自体にmin-width指定してたのを外す。

const useStyles = makeStyles({
-  table: {
-    minWidth: 650,
+  labelCell: {
+    wordBreak: 'keep-all',
+  },
+  valueCell: {
+    whiteSpace: 'normal',
+    wordBreak: 'break-word',
   },
 })

CSSの改行まわり整理

  • whiteSpace - 改行やスペース・タブをそのまま表示するか、無視するかを指定。
  • wordBreak - 改行するかを判断
  • overflowWrap - 改行するかを判断
  • wordWrap - overflowWrapと同じだが、サポートしてないブラウザがあるため併記するらしい?(https://w3g.jp/blog/confusing_word-break_word-wrap)

wordBreakとoverflowWrapの使い分け。

https://developer.mozilla.org/ja/docs/Web/CSS/overflow-wrap

メモ: word-break とは対照的に、 overflow-wrap は単語全体があふれずに行内に配置できない場合にのみ、改行を生成します。

なるほど。word-breakはあふれずに配置できても改行させるかを判断できるものということ。 今回だとあふれた場合だけ改行してほしいので、overflow-wrapを使うのが正しそう。 URLがwrapされないのでその場合はoverflow-wrap: anywhereにしてみる。

rel="nofollow" リンク先に評価を渡したくないときなどに使う。ユーザが投稿できるリンクには置いたほうがよさそう。 https://mightyace.co.jp/2020/07/15/column41/

sponsored, ugcというのができたらしい。

materialize-cssがNext.jsと相性悪そうなのでmaterial-uiに乗り換える

materializecssのSelectを入れたい。 https://materializecss.com/select.html

selectは初期化が必要らしいのだが、next.jsからだと呼べない。 https://materializecss.com/select.html#initialization

materialize-cssっていうnpmがあるので入れてみたけど、importで怒られる。

ReferenceError: window is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window.

browser-default使うと表示されるけどlabelがなぜか避けてくれない。

<div className="input-field col s12">
    <select id="surface-hard" className="browser-default">
      <option value="" disabled selected>
        Choose your option
      </option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
    <label htmlFor="surface-hard">Materialize Select</label>
</div>

materialize-css自体はあまりメンテされてないんだな。2年前...。 https://www.npmjs.com/package/materialize-css

react-materializeっていうのもある。これはメンテされてそう。 https://github.com/react-materialize/react-materialize

Material-UIというのがあって、こっちはNext.js対応してそう。ただしSSR用の設定がいろいろ必要っぽい。 https://material-ui.com/ https://github.com/mui-org/material-ui/tree/master/examples/nextjs https://tech.playground.style/javascript/next-material-ui/

移し変えるかぁ...面倒だが。

初期設定 https://material-ui.com/getting-started/installation/

Reactコンポーネントで指定できるの思ったより良い感じだな。

Running command: npm run build-functions
npm WARN lifecycle The node binary used for scripts is /var/folders/vl/dj884t816mj6ch0bvn80hlsc0000gn/T/yarn--1611412015683-0.5227895432393217/node but npm is using /Users/yosuke/.anyenv/envs/ndenv/versions/v10.16.0/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.

これしてみた

npm config set scripts-prepend-node-path true
Duplicate identifier 'LibraryManagedAttributes'
node_modules/@types/react/index.d.ts:2982:14 - error TS2300: Duplicate identifier 'LibraryManagedAttributes'.

2982         type LibraryManagedAttributes<C, P> = C extends React.MemoExoticComponent<infer T> | React.LazyExoticComponent<infer T>
                  ~~~~~~~~~~~~~~~~~~~~~~~~

  node_modules/@types/react-transition-group/node_modules/@types/react/index.d.ts:2981:14
    2981         type LibraryManagedAttributes<C, P> = C extends React.MemoExoticComponent<infer T> | React.LazyExoticComponent<infer T>
                      ~~~~~~~~~~~~~~~~~~~~~~~~
    'LibraryManagedAttributes' was also declared here.

定義がダブっている模様。package.jsonに次を書き足して再度yarn。

"resolutions": {
    "@types/react": "^16.13.1"
},

デプロイ

(node:32695) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 17)
Warning: viewport meta tags should not be used in _document.js's <Head>. https://err.sh/next.js/no-document-viewport-meta

こういうのも出たのでviewportを移動。

まだ半端だけどとりあえず導入はできた。