Merge pull request #21 from line/for-mini

feat: handling liff id for mini

Author: sugarshin

.env

@@ -1 +1,4 @@
-VITE_LIFF_ID=1656508316-k7jNojXm
+VITE_LIFF_ID=1656508316-k7jNojXm
+
+# TODO
+VITE_LIFF_ID_MINI=

src/App.tsx

@@ -4,14 +4,15 @@ import styles from './App.module.css'
 import Header from './components/Header'
 import Snippet from './components/Snippet'
 import Input from './components/Input'
-import { FilterContext, FilterTypes } from './Context'
+import { FilterContext, FilterType } from './Context'
 import qrCode from './qr-code.png'
 import { SHARE_TARGET_PICKER_FIXED_ARGUMENT_LIST } from './constants'
 
-const isMINI = new URLSearchParams(location.search).has('mini')
-const filter = isMINI ? FilterTypes.MINI : FilterTypes.LIFF
+type Props = {
+  filter: FilterType;
+};
 
-function App() {
+function App({ filter }: Props) {
   let isLoggedIn = false
   try {
     isLoggedIn = liff.isLoggedIn()

src/Context.tsx

@@ -1,9 +1,5 @@
 import React from 'react'
-
-export const FilterTypes = {
-  LIFF: 'LIFF',
-  MINI: 'MINI'
-} as const
+import { FilterTypes } from './FilterTypes'
 
 export type FilterType = keyof typeof FilterTypes
 

src/FilterTypes.ts

@@ -0,0 +1,4 @@
+export const FilterTypes = {
+  LIFF: 'LIFF',
+  MINI: 'MINI'
+} as const

src/components/Snippet.tsx

@@ -4,7 +4,8 @@ import Input from './Input'
 import styles from './Snippet.module.css'
 import Tag from './Tag'
 import TextArea from './TextArea'
-import { FilterContext, FilterTypes } from '../Context'
+import { FilterContext } from '../Context'
+import { FilterTypes } from '../FilterTypes'
 import Pulldown from './Pulldown'
 
 interface SippetProps {

src/main.tsx

@@ -3,13 +3,18 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import './main.css'
 import App from './App'
+import { FilterTypes } from './FilterTypes'
+
+const isMINI = new URLSearchParams(location.search).has('mini')
+const filter = isMINI ? FilterTypes.MINI : FilterTypes.LIFF
+const liffId = isMINI ? import.meta.env.VITE_LIFF_ID_MINI : import.meta.env.VITE_LIFF_ID
 
 liff
-  .init({ liffId: import.meta.env.VITE_LIFF_ID || '' })
+  .init({ liffId })
   .then(() => {
     ReactDOM.render(
       <React.StrictMode>
-        <App />
+        <App filter={filter} />
       </React.StrictMode>,
       document.getElementById('root')
     )

src/vite-env.d.ts

@@ -2,6 +2,7 @@
 
 interface ImportMetaEnv {
   readonly VITE_LIFF_ID: string;
+  readonly VITE_LIFF_ID_MINI: string;
 }
 
 interface ImportMeta {