Merge pull request #20 from line/LIFFP-5075

UI improvement + change UI filtering

src/App.module.css

@@ -12,7 +12,13 @@ body {
   margin: 40px 0;
   width: 400px;
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.qrCode {
+  max-width: 128px;
+  height: auto;
 }
 
 @media only screen and (max-width: 375px) {
@@ -25,7 +31,7 @@ body {
 
 @media only screen and (max-width: 480px) {
   .liffIdBox {
-    width: 250px;
+    width: auto;
     display: block;
   }
 }

src/App.tsx

@@ -1,20 +1,16 @@
-import React, { useState } from 'react'
+import React from 'react'
 import liff from '@line/liff'
 import styles from './App.module.css'
 import Header from './components/Header'
 import Snippet from './components/Snippet'
 import Input from './components/Input'
-import Select from './components/Select'
-import { FilterContext, FilterTypes, FilterType } from './Context'
+import { FilterContext, FilterTypes } from './Context'
+import qrCode from './qr-code.png'
 
-const getFilterOptions = () => {
-  return Object.entries(FilterTypes).map(([value, label]) => ({
-    label, value
-  }))
-}
+const isMINI = new URLSearchParams(location.search).has('mini')
+const filter = isMINI ? FilterTypes.MINI : FilterTypes.LIFF
 
 function App() {
-  const [filter, setFilter] = useState<FilterType>(FilterTypes.ALL)
   let isLoggedIn = false
   try {
     isLoggedIn = liff.isLoggedIn()
@@ -28,15 +24,9 @@ function App() {
         <div className={styles.liffIdBox}>
           <Input
             readonly
-            value={'LIFF ID: ' + import.meta.env.VITE_LIFF_ID || ''}
-          />
-          <Select
-            value={filter}
-            options={getFilterOptions()}
-            handleChange={(e) => {
-              setFilter(e.target.value as FilterType)
-            }}
+            value={`LIFF URL: https://liff.line.me/${import.meta.env.VITE_LIFF_ID.toString()}`}
           />
+          <img src={qrCode} className={styles.qrCode} />
         </div>
         <h1>Client APIs</h1>
         {!isLoggedIn ? (

src/Context.tsx

@@ -1,11 +1,10 @@
 import React from 'react'
 
 export const FilterTypes = {
-  ALL: 'ALL',
   LIFF: 'LIFF',
   MINI: 'MINI'
 } as const
 
 export type FilterType = keyof typeof FilterTypes
 
-export const FilterContext = React.createContext<FilterType>(FilterTypes.ALL)
+export const FilterContext = React.createContext<FilterType>(FilterTypes.LIFF)

src/components/Snippet.tsx

@@ -73,9 +73,7 @@ export default function Snippet({
     <FilterContext.Consumer>
       {
         (filter) => 
-          (filter === FilterTypes.ALL 
-          || (filter === FilterTypes.LIFF && isInLIFF) 
-          || (filter === FilterTypes.MINI && isInMINI))
+          ((filter === FilterTypes.LIFF && isInLIFF) || (filter === FilterTypes.MINI && isInMINI))
           && <div className={styles.snippet}>
           <div className={styles.head}>
             <h2 className={styles.title}>