synonym search
1.0.0
อรรถาภิธาน ที่มีความหมาย
จำคำศัพท์ทั้งหมดที่คุณพบเมื่อใช้อรรถาภิธาน
SynonymSearch ช่วยให้คุณทบทวนสิ่งที่คุณเพิ่งเรียนรู้ (และอาจลืม) โดยการจัดเรียงรายการคำค้นหาทั้งหมดของคุณตามคำจำกัดความที่ใช้ร่วมกันในขณะที่คุณค้นหา
SynonymSearch ช่วยให้คุณทดสอบความคล้ายคลึงกันของคำที่มีความหมายเหมือนกันโดยการฉีดคำเหล่านั้นลงในประโยคที่ความหมายขึ้นอยู่กับคำจำกัดความที่คำพ้องความหมายร่วมกัน แอปช่วยให้คุณเข้าใจคำจำกัดความได้อย่างแข็งขัน จากนั้นตรวจสอบกับที่เก็บคำพ้องความหมาย
โครงการนี้ได้รับการพัฒนาโดยเป็นส่วนหนึ่งของโมดูล MS2 Interactive Front End ที่ Code Institute เขียนขึ้นเพื่อทำงานร่วมกับรูปแบบการตอบสนอง JSON ของ Collegiate® Thesaurus ของ Merriam-Webster และได้รับการพัฒนาด้วย React ผ่าน Next.js บูตเครื่องด้วย create-next-app และปรับใช้กับ Vercel
กรุณาเยี่ยมชมโครงการที่นี่: synonyms.vercel.app
หมายเหตุสำหรับการอ้างอิง: โครงการก่อนหน้านี้มีชื่อว่า 'synonym-chaser'
การจำลองแผนผังเริ่มต้นในต้นเดือนมกราคม 2021 เพื่อสร้างความสัมพันธ์ระหว่างองค์ประกอบที่แตกต่างกัน และมอบหมายความรับผิดชอบที่เหมาะสม
แนวทางนี้ช่วยแจกแจงขอบเขตของโครงการ และที่สำคัญที่สุดคือเป็นเกณฑ์มาตรฐานสำหรับการอ้างอิงสำหรับการพัฒนาและการแก้ไขปัญหา
ดูการคิดในการตอบสนอง (เอกสาร)
{Results} => {Root} => {Sense} => {Option} (ดูไดเรกทอรีผลลัพธ์)
{Saves} => {Selection} (ดูไดเร็กทอรีบันทึก)
{Results} =>{Root} => {Sense} ผ่าน {ReplaceSubStringNode} (ดู string.helper.js) ตอนนี้แยกย่อยเป็น {Saves} => {Selection} (ดูการแสดงผล) 
{Sense} => {Option} ในแผนผังผลลัพธ์ (ดูไดเรกทอรีผลลัพธ์) ใช้เส้นขอบด้านบนและด้านล่างที่สอดคล้องกันกับโหนดทั้งหมดที่มีเนื้อหาแบบไดนามิก เส้นขอบแบบแยกเหล่านี้ได้รับการออกแบบมาเพื่อถ่ายทอดขนาดวัสดุของโน้ตแพดให้เป็นจุดสัมผัสที่ผู้ใช้คุ้นเคย wordBoxes เหล่านี้จะแตกต่างกันเพียงการเว้นวรรค และมีหน้าที่รับผิดชอบในการถ่ายทอดลำดับชั้นใน รายการรายการด้วย ภาพ
ThemeProvider ของ Material-UI ล้อมแอปเพื่อส่งผ่านสไตล์ลงไปที่โครงสร้างส่วนประกอบ ดูธีม Material-UI ตระกูลแบบอักษรถูกตั้งค่าเป็นอาร์เรย์ของแบบอักษรของระบบเพื่อปรับให้เข้ากับการกำหนดค่าอุปกรณ์/แพลตฟอร์ม/ผู้ใช้ และหลีกเลี่ยงการขึ้นอยู่กับแบบอักษรที่ชัดเจน อ็อบเจ็กต์ commonSettings ใน theme.context.js มีรายการการแทนที่เหล่านี้ ซึ่งผสานเข้ากับผู้ให้บริการธีมของ Material-UI ดู Material-UI Global-css
export const commonSettings = {
typography : {
fontFamily : [
'-apple-system' ,
'BlinkMacSystemFont' ,
'"Segoe UI"' ,
'Roboto' ,
'"Helvetica Neue"' ,
'Arial' ,
'sans-serif' ,
'"Apple Color Emoji"' ,
'"Segoe UI Emoji"' ,
'"Segoe UI Symbol"' ,
] . join ( ',' ) ,
} ,
} แอปนี้มีสีหลักและสีรองสองชุดสำหรับธีมสีอ่อนและธีมสีเข้มที่กำหนดค่าผ่านการกำหนดค่าพาเล็ตของ Material UI พฤติกรรมและสถานะของสีขึ้นอยู่กับคุณสมบัติที่กำหนดไว้ในออบเจ็กต์ธีมเริ่มต้นของ Material-UI สีรองจะถูกตั้งค่าเป็นโทนสีกลาง ในขณะที่แม่สีจะแสดงเป็น "สีเด่น" เอกพจน์ แนวทางขั้นต่ำสุดในการใช้ชุดสีคือการปรับปรุงสมุดบันทึก
const lightTheme = createMuiTheme ( {
palette : {
type : 'light' ,
primary : {
main : '#ff3200' ,
} ,
secondary : {
main : grey [ 900 ] ,
} ,
} ,
... commonSettings ,
} ) ; const darkTheme = createMuiTheme ( {
palette : {
type : 'dark' ,
primary : {
main : lightblue [ 500 ] ,
} ,
secondary : {
main : '#fafafa' ,
} ,
background : {
default : '#151515' ,
} ,
} ,
... commonSettings ,
} ) ; เว็บไซต์นี้จำลองเป็นเว็บแอปพลิเคชันแบบก้าวหน้าเพื่อเรนเดอร์ฟังก์ชันการทำงานของแอปหน้าเดียวโดยไม่ต้องโหลดหน้าซ้ำเต็ม และได้รับการปรับปรุงให้ทำงานเหมือนกับแอปเนทีฟ เฟรมเวิร์กทำให้มั่นใจถึงความยืดหยุ่นในเบราว์เซอร์
เว็บไซต์ใช้ประโยชน์จากปุ่มการทำงานแบบลอยขนาดใหญ่ (FAB) เพื่อนำทางระหว่างมุมมองระยะไกลทั้งสามอย่างรวดเร็ว: "ค้นหา" "ข้อมูล" และ "บันทึก" คำอุปมาอุปมัยที่มองเห็นถูกนำมาใช้เพื่อนำเสนอโหมดมุมมองเหล่านี้อย่างรอบคอบและมีประสิทธิภาพ
ปุ่ม "โทรด่วน" แบบลอยจะยังคงอยู่ในมุมมองต่างๆ เพื่อเข้าถึงการทำงานหลักของแอปได้อย่างรวดเร็ว เช่น การสืบค้นคำ การล้างประวัติที่บันทึกไว้ และการสลับโหมดสว่างหรือมืด
แอปนี้มีหน้าจอเริ่มต้นที่กำหนดเองในการโหลดหน้าแรกเพื่ออธิบายวัตถุประสงค์โดยกระชับ: "แอปอรรถาภิธานเชิงโต้ตอบ"
jsx , jss js (บูทสแตรปด้วย Nestjs)next ไปเพื่อพัฒนา next build เพื่อเตรียมการผลิต และ next startcommit กับ Git และ push ไปยัง GitHubpush es ผ่าน Git พร้อมกัน สไตล์ถูกเขียนด้วยไวยากรณ์ jss และเป็นไปตามข้อกำหนดสำหรับ Material-UI เพื่อเล่นอย่างดีกับการเรนเดอร์ฝั่งเซิร์ฟเวอร์ Nextjs ซึ่งรวมถึงตรรกะในการปรับแต่ง pages/_document เพื่อแทรกสไตล์ที่เรนเดอร์ฝั่งเซิร์ฟเวอร์ลงในมาร์กอัปก่อนที่จะใช้งาน โปรดทราบว่านี่เป็นคำแนะนำที่ไม่เป็นทางการ และควรได้รับการปรับโครงสร้างใหม่หาก/เมื่อ MUI เผยแพร่ปลั๊กอินอย่างเป็นทางการสำหรับ Nextjs ซึ่งคล้ายกับปลั๊กอินสำหรับ MUI/Gatsby
ออบเจ็กต์สไตล์ทั้งหมดถูกสร้างขึ้นด้วย hook makeStyles ของ MUI และปฏิบัติตามคำแนะนำใน Docs สไตล์ MUI สำหรับการกำหนดธีม ซึ่งรวมถึงการแทนที่ CSS และการสืบค้นสื่อ ออบเจ็กต์สไตล์สำหรับส่วนประกอบหลักจะถูกคั่นด้วยขอบเขตในไดเร็กทอรีสไตล์และนำเข้าในโมดูลตามต้องการ อย่างไรก็ตาม ส่วนประกอบบางอย่าง ได้แก่ Launcher มีอุปกรณ์ประกอบฉากสไตล์ทั้งหมดที่ถูกประกาศไว้ในไฟล์ส่วนประกอบเอง โปรดทราบว่าในที่สุดสไตล์ทั้งหมดควรถูกส่งออกจากไดเร็กทอรีเดียวเพื่อความสอดคล้องกัน
แผนผัง results จะแสดงส่วนประกอบ jsx ในการเรียก API ทุกครั้งโดยไม่ต้องกำหนดค่าเริ่มต้นค่าคงที่ อุปกรณ์ประกอบฉากและนิพจน์แบบมีเงื่อนไขจะควบคุมการวนซ้ำของสคีมาการตอบสนองจาก MW-Thesaurus API โปรดทราบว่าค่าและการตรวจสอบประเภท Prop ได้รับการเขียนขึ้นโดยเฉพาะเพื่อรับข้อมูลที่ถูกต้องจากสคีมานี้:
ตัวอย่างคำที่บันทึกไว้แต่ละคำจะคงคุณสมบัติของกลุ่มผลลัพธ์ที่ "นำมา" มาจาก -- เช่น คำจำกัดความเฉพาะของคำ ป้ายกำกับ รากศัพท์ -- เพื่อเพิ่มค่าของคำที่ซ้ำกันและกลุ่มคำตามคำจำกัดความที่เข้าใจได้ ในขณะเดียวกันก็ทำให้มั่นใจได้ว่าแต่ละคำจะเหมือนกัน ไม่ว่าจะเหมือนกันก็ตาม ตามค่าชื่อ จะแตกต่างหากความหมายและความรู้สึกแตกต่างกัน
React hooks useReducer , useContext , createContext ถูกประกอบเข้าด้วยกันใน context/words.context (ดู HistoryProvider) เพื่อจัดเตรียมตัวตัดบริบทสำหรับส่วนประกอบต่างๆ เพื่อแชร์และใช้ข้อมูลเดียวกัน โปรดทราบว่าตรรกะนี้มีการสร้างแบบจำลองโดยตรงจากตัวอย่างที่ตั้งไว้ใน next.js/examples/with-context-api
ตามสิ่งที่ทำได้โดย hooks wrapper บริบทที่ส่งออกของ HistoryProvider useHistory และ useDispatchHstory ซึ่งใช้กับส่วนประกอบที่มีลำดับสูงกว่า ส่วนประกอบที่ใช้ร่วมกัน และฟังก์ชันตัวช่วยใน helpers/* เพื่อจัดการ DOM อย่างรุนแรง - ตรรกะเดียวกันนี้ถูกนำมาใช้ใหม่เพื่อขี่หลาย ๆ hooks พร้อม wrapper แบบกำหนดเองด้วย ThemeProvider ของ MUI (ดู ThemeProvider) ในกรณีนี้ การตั้งค่ามุมมองจะช่วยให้ส่วนประกอบใดๆ สามารถเปลี่ยนหน้าได้จากทุกที่ เป็นต้น โปรดทราบว่าลักษณะที่รับได้ทั้งหมดของผู้ให้บริการเค้าโครงบริบทนี้
export const ThemeContextProvider = ( { children } ) => {
// Sets the theme for MUI ThemeProvider to use
const [ darkMode , setDarkMode ] = useState ( false ) ;
// Sets the current view
const [ value , setValue ] = useState ( 'launch' ) ;
// Hooks to set warning colors for searchText input
const [ meta , setMeta ] = useState ( true ) ;
const [ root , setRoot ] = useState ( '' ) ;
// Rides an MUI hook to set a memoized theme
const prefersDarkMode = useMediaQuery ( '(prefers-color-scheme: dark)' ) ;
useMemo (
( ) => ( prefersDarkMode
? setDarkMode ( true )
: setDarkMode ( false ) ) ,
[ prefersDarkMode ] ,
) ;
// Provides all values and the hooks that control them
return (
< ThemeDispatchContext . Provider
value = { {
darkMode ,
setDarkMode ,
value ,
setValue ,
meta ,
setMeta ,
root ,
setRoot ,
} }
>
< ThemeProvider
theme = {
darkMode
? darkTheme
: lightTheme
}
>
{ children }
< / ThemeProvider >
< / ThemeDispatchContext . Provider >
) ;
} ;
// All state/hooks are accessible by importing
// a catch-all export below
// Example:
// // anyFile.js
// import { useDispatchTheme } from './../theme.context'
//
// const dispatch = useDispatchTheme()
//
// Change any/all states from any component
// dispatch.setDarkMode(false)
// dispatch.setValue('search')
//
export const useDispatchTheme = ( ) => useContext ( ThemeDispatchContext ) ;
การใช้ MW-Thesaurus นั้นฟรีสำหรับจุดประสงค์ที่ไม่ใช่เชิงพาณิชย์และ/หรือเพื่อการศึกษา โลโก้แบรนด์ที่โดดเด่นในแท็บข้อมูลเป็นไปตามหลักเกณฑ์การสร้างแบรนด์ที่ร้องขอโดยแต่ไม่จำกัดเพียงศูนย์พัฒนาของ Merriam-Webster
ขณะนี้คีย์ Thesaurus API ที่ลงทะเบียนซึ่งเชื่อมโยงกับโปรเจ็กต์นี้เป็นแบบสาธารณะ หลังจากการสนทนานี้ ความพยายามในการป้องกันการเรียก API บนฝั่งไคลเอ็นต์นั้นไม่มีจุดหมาย เนื่องจากคีย์ส่วนตัวจะถูกเปิดเผยอยู่เสมอ การกำหนดค่าเพิ่มเติมเพื่อให้มีจุดสิ้นสุดภายในใน /pages/api ควรพิจารณาตามเส้นทาง Nextjs API โปรดทราบว่าคีย์ถูกเปิดเผยจาก .env.local ด้วยเหตุผลข้างต้นและเพื่อวัตถุประสงค์ทางการศึกษาของโปรเจ็กต์
const axiosConfig = { baseURL : 'https://dictionaryapi.com/api/v3/references/' , } ;
function searchThesaurus ( searchText , selection ) {
const query = selection || searchText ;
// Key is processed from ignored env.local
// use this method if API endpoint is set up in /pages/api/*
const key = process . env . MW_THESAURUS_KEY ;
// @note Key is explicitly declared otherwise
// for Production/submission
return axiosGetCancellable (
`/thesaurus/json/ ${ query } ?key= ${ key } ` ,
axiosConfig ,
) ;
}หมายเหตุ: คำอธิบายทั้งหมดของวิธีการที่ผิดปกติสามารถพบได้ในบล็อกความคิดเห็นที่เป็นไปตามมาตรฐาน jsDoc
ผู้ใช้คาดว่าจะเห็นคำอธิบายภายในไม่กี่วินาทีหลังจากมาถึงไซต์
Launcher :useEffect ที่ไม่มีการพึ่งพาช่วยให้ Launcher ทำงานเพียงครั้งเดียวในการโหลดหน้าแรกuseContext อนุญาตให้ Launcher ตั้ง value การดูหน้าเว็บปัจจุบันเป็น ' search ' หลังจากหมดเวลาSynonym Search An Interactive Thesaurus App " เป็นเวลาสองวินาทีครึ่งเมื่อมาถึงไซต์ import React , { useEffect , useState } from 'react' ;
import { useDispatchTheme } from '../../context/theme.context' ;
const Launcher = ( ) => {
const classes = useStyles ( ) ;
const viewDispatch = useDispatchTheme ( ) ;
const [ open , setOpen ] = useState ( true ) ;
const [ showOpen , setShowOpen ] = useState ( true ) ;
useEffect ( ( ) => {
setTimeout ( ( ) => {
setShowOpen ( false ) ;
setTimeout ( ( ) => {
setOpen ( false ) ;
viewDispatch . setValue ( 'search' ) ;
} , 350 ) ;
} , 2500 ) ;
} , [ ] ) ;
return (
< >
< Backdrop
className = { classes . backdrop }
open = { open }
/ >
< Grow
in = { showOpen }
unmountOnExit
>
< Box className = { classes . launch } >
{ ... excerpt . . . }
Synonym
/Search
An Interactive Thesaurus App
{ ... excerpt . . . }
< / Box >
< / Grow >
< / >
) ;
} ;
ผู้ใช้ต้องการนำทางระหว่างมุมมองต่างๆ อย่างรวดเร็ว
Speed (Dial) :onClickFixedBottom (แยกจาก FixBottom) ช่วยให้ Speed Dial ด้านล่างเลื่อนไปเหนือแถบด้านล่างบนมือถืออย่างตอบสนองเมื่อเลื่อนuseScrollTrigger อนุญาตให้ Speed Dial สลับการมองเห็นด้วย ScrollTop ซึ่งเป็นปุ่มการทำงานแบบลอยที่เมื่อคลิกแล้ว จะเลื่อนหน้าต่างกลับไปที่ด้านบนของหน้าโดยใช้จุดยึดที่มี id="back-to-top"Search จะถูกส่งผ่านไปยัง Speed Dial เพื่อเปิดใช้งาน onSearchTextChange ซึ่งเป็นฟังก์ชันที่ส่งข้อความค้นหาไปยัง Thesaurus APIuseState อนุญาตให้ useEffect ปิด SpeedDial ทุกครั้งที่ value หน้าผ่าน useDispatch เปลี่ยนแปลง ยกเว้นเมื่อ Search activeToggleTheme , Search , ClearSavesSpeedDialSpeedDial เปิดอยู่ToggleThemenot <mode> นี้SpeedDial ถูกปิดSavesSpeedDialSpeedDial เปิดอยู่SearchSpeedDial ยังคงเปิดอยู่SearchSpeedDial จะหายไปScrollTop จะปรากฏขึ้นScrollTopSpeedDial จะปรากฏขึ้นx และ y (ขึ้น/ลง ใน มุมมอง ซ้าย/ขวา ระหว่าง มุมมอง) ได้อย่างรวดเร็วโดยการคลิกการดำเนินการ SpeedDial สำหรับมุมมองที่พวกเขานำเสนอ นอกจากนี้ การนำทางด้วยปุ่มต่อมุมมองยังสามารถเข้าถึงได้ในส่วนหัวของหน้า อีกสองมุมมองคือ Saves และ Info ซึ่งเป็นกลุ่มปุ่มการกระทำแบบลอยตัวเดียวกันกับการกระทำภายใน SpeedDial ความสอดคล้องและความแปลกประหลาดของธีม สี และ UI ส่งผลต่อแรงกระตุ้นและความคุ้นเคยกับจุดสัมผัสแบบถาวรที่ถ่ายทอดของผู้ใช้ import React , { useEffect , useState } from 'react' ;
import { useDispatchTheme } from '../../context/theme.context' ;
const Speed = ( {
children ,
value ,
index ,
searchText ,
loading ,
onSearchTextChange ,
... other
} ) => {
const trigger = useScrollTrigger ( ) ;
const classes = useStyles ( ) ;
const [ open , setOpen ] = useState ( false ) ;
const [ direction , setDirection ] = useState ( 'up' ) ;
const matches = useMediaQuery ( '(min-width:600px)' ) ;
const viewDispatch = useDispatchTheme ( ) ;
const view = viewDispatch . value ? viewDispatch . value : null ;
const handleClick = ( event ) => setOpen ( ! open ) ;
open && trigger ? setOpen ( false ) : null ;
useEffect ( ( ) => {
setTimeout ( ( ) => {
if ( viewDispatch . value !== 'search' ) {
setOpen ( false ) ;
}
} , 10 ) ;
} , [ view ] ) ;
return (
< Slide appear direction = "up" in = { ! trigger } >
< FixedBottom offset = { matches ? 16 : 48 } >
< SpeedDial
ariaLabel = "actions"
className = { classes . speedDialGroup }
FabProps = { {
className : clsx ( classes . speedDial , classes . bottom ) ,
size : matches ? 'medium' : 'small' ,
style : { padding : matches ? '12px' : '8px' } ,
} }
onClick = { handleClick }
open = { open }
direction = { direction }
>
{ ... Search action }
{ ... Toggle theme action }
{ ... Clear cache action }
/ >
< / SpeedDial >
< / FixedBottom >
< / Slide >
) ;
} ;
export default Speed ;
ผู้ใช้ต้องการดูแหล่งข้อมูลที่เชื่อถือได้
Brands (Material-UI AvatarGroup ):useEffect อนุญาตให้ useState พลิกระยะขอบเมื่อตั้งค่าหน้าเป็น view ปัจจุบัน => Info ซึ่งจะทำให้อวตารเคลื่อนไหวเพื่อขยายราวกับต้อนรับผู้ใช้เข้าสู่โต๊ะข้อมูล ในขณะที่ย่อหน้าสั้น ๆ เป็นจุดเด่นเพื่ออธิบาย " SynonymStory " ที่อยู่ด้านหลัง " SynonymSearch "Logo ห้ารายการ สำหรับแต่ละอินสแตนซ์: React , NextJS , MaterialUI , CodeInstitute และ Merriam-WebsterSearchInfoInfoBrands ปรากฏขึ้นMerriam-WebsterMerriam-Webster Developer Center websiteInfo import React , { useEffect , useState } from 'react' ;
import { useDispatchTheme } from '../../context/theme.context' ;
const Brands = ( { children } ) => {
const classes = useStyles ( ) ;
const viewDispatch = useDispatchTheme ( ) ;
const [ active , setActive ] = useState ( false ) ;
const { value } = viewDispatch ;
useEffect ( ( ) => {
if ( value === 'info' ) {
setTimeout ( ( ) => {
setActive ( true ) ;
} , 750 ) ;
}
} , [ ] ) ;
return (
< AvatarGroup
className = {
clsx (
classes . avatarGroup , active
? classes . active
: classes . inactive ,
)
}
>
< Logo
name = "React"
url = "https://react.org/"
path = "/images/reactLogo.png"
/ >
< Logo
name = "Next JS"
url = "https://nextjs.org/"
path = "/images/nextJSLogo.svg"
/ >
< Logo
name = "Material UI"
url = "https://material-ui.com/"
path = "/images/materialUILogoLight.png"
darkImage = "/images/materialUILogoDark.png"
/ >
< Logo
name = "Code Institute"
url = "https://codeinstitute.net/"
path = "/images/codeInstituteLogo.png"
/ >
< Logo
name = "Merriam-Webster"
url = "https://dictionaryapi.com/"
path = "/images/merriamWebsterLogoLight.png"
/ >
< / AvatarGroup >
) ;
} ;
ผู้ใช้ต้องการค้นหาคำพ้องความหมาย
Search :loading : ไม่ว่าจะโหลดผลลัพธ์หรือไม่meta : ไม่ว่าอินพุตของผู้ใช้จะสร้างผลลัพธ์ที่ถูกต้องหรือไม่root : ไม่ว่ารายการแรกในอาร์เรย์ของผลลัพธ์จะตรงกับสิ่งที่ผู้ใช้พิมพ์หรือไม่useState อนุญาตให้เงื่อนไขเหล่านี้เปลี่ยนแปลงแบบไดนามิกuseRef ถูกแนบเข้ากับส่วนประกอบอินพุต และอนุญาตให้เหตุการณ์คีย์และเมาส์โฟกัส focus อมต์อินพุตตามเงื่อนไขข้างต้นอย่างมีเงื่อนไขField , Input .SearchSearch ในส่วนหัวimmediately successful word >immediately successful wordSearch ในส่วนหัวincomplete word >real word >real wordSearch ในส่วนหัวa word with no matches >good word >new word const Field = ( {
label ,
onChange ,
placeHolder ,
helperText ,
loading ,
} ) => {
const theme = useTheme ( ) ;
const trigger = useScrollTrigger ( ) ;
const [ active , setActive ] = useState ( false ) ;
const textInput = useRef ( null ) ;
const metaDispatch = useDispatchTheme ( ) ;
const { meta , root } = metaDispatch ;
const handleSearchButton = ( ) => {
setActive ( true ) ;
setTimeout ( ( ) => {
textInput . current && textInput . current . focus ( ) ;
} , 100 ) ;
} ;
const handleClickAway = ( ) => setActive ( false ) ;
const handleBackDrop = ( ) => setActive ( false ) ;
const onKeyPress = ( ) => setActive ( false ) ;
const match
= textInput . current
? textInput . current . value === root
: false ;
active && trigger ? setActive ( false ) : null ;
useEffect ( ( ) => {
if ( active && match ) {
setTimeout ( ( ) => {
setActive ( false ) ;
} , 2000 ) ;
}
} , [ ] ) ;
return (
< ClickAwayListener
onClickAway = { handleClickAway }
>
< >
< Backdrop
open = { active }
onClick = { handleBackDrop }
/ >
< Fab
size = "small"
color = "primary"
aria-label = "search"
onClick = { handleSearchButton }
variant = { active ? 'extended' : 'round' }
style = { active ? {
backgroundColor :
loading
? theme . palette . warning . main
: ! meta
? theme . palette . error . main
: meta && match
? theme . palette . success . main
: theme . palette . primary . main ,
} : null }
>
< Input
label = { label }
placeHolder = { placeHolder }
helperText = { helperText }
active = { active }
match = { match }
meta = { meta }
loading = { loading }
textInput = { textInput }
onKeyPress = { onKeyPress }
onChange = { onChange }
/ >
< / Fab >
< / >
< / ClickAwayListener >
) ;
} ;
ผู้ใช้ต้องการดูประวัติการค้นหา
useHistory เป็น hook Context เพื่อเข้าถึงค่าที่จัดเก็บไว้ใน HistoryProvideruseReducer อนุญาตให้ HistoryProver จัดกลุ่มคำที่สืบค้นตามคำจำกัดความที่แชร์Selectionผู้ใช้ต้องการดูคำที่ใช้ในประโยค
Display :Sense เพื่อส่งผ่านเสา sampleString และ optionWord ซึ่งจะเปิดใช้งานเหตุการณ์ Intersection Observer และเมาส์เพื่อเปลี่ยนเสา optionWord แบบไดนามิก{it} {/it} และ {lquo} {rquo} เนื่องจากเป็นแท็กเปิดและปิด ฟังก์ชันการแทนที่ regex จึงพิสูจน์ได้ว่าเชื่อถือได้ในการทำความสะอาดสตริงตัวอย่างอย่างสม่ำเสมอเมื่อมีคำจำกัดความเกิดขึ้น (ดูตัวอย่างการตอบสนองจาก Theaurus API)ผู้ใช้ต้องการเห็นแท็กถัดจากผลลัพธ์ซ้ำ (หรือที่เรียกว่าคำที่บันทึกไว้แล้ว)
useReducer ใน HistoryProvider :HistoryProvider จะถูกบันทึกด้วยคุณสมบัติที่อนุญาตการตรวจสอบโดยการเปรียบเทียบคุณสมบัติเหล่านี้กับคำใหม่:Counters :HistorySaves เพื่อให้ผู้ใช้สามารถดู 'การทำซ้ำ' หรือที่รู้จักในชื่อคำที่ผู้ใช้บันทึกไว้ตามคำจำกัดความของคุณสมบัติที่พวกเขาแชร์ const [ savedWords , dispatch ] = useReducer ( ( state , action ) => {
switch ( action . type ) {
case 'add' :
const wordIndex = state . findIndex ( ( word ) => word . uuid === action . uuid
|| word . name === action . name
&& word . sense === action . sense ) ;
if ( wordIndex !== - 1 ) {
return state . map ( ( word , i ) => ( {
... word ,
value : word . value + ( wordIndex === i ? 1 : 0 ) ,
} ) ) ;
}
return [
... state ,
{
id : state . length ,
name : action . name ,
value : 1 ,
root : action . root ,
label : action . label ,
uuid : action . uuid ,
sense : action . sense ,
} ,
] ;
case 'remove' :
return state . filter ( ( word ) => word . id !== action . id ) ;
case 'clear' :
return [ ] ;
default :
return state ;
}
} , [ ] ) ;
ผู้ใช้ต้องการลบประวัติการค้นหาที่บันทึกไว้
Clear :DeleteForever ที่เป็นฟังก์ชัน dispatch ของ useReducer จาก HistoryProvider ซึ่งจะลบทุกอย่างออกจากบริบทDelete ที่แสดงโดยส่วนประกอบ Chip Material-UI // clear.button.js
// excerpt
const wordsDispatch = useDispatchHistory ( ) ;
const handleClick = ( event ) => {
wordsDispatch ( {
type : 'clear' ,
} ) ;
} ;
// words.context.js
// excerpt from reducer
// the above handler calls case 'remove'
case 'remove' :
return state . filter ( ( word ) => word . id !== action . id ) ;ดูผลลัพธ์ล่าสุด
Lighthouse ผ่าน Vercel ใช้เพื่อทดสอบประสิทธิภาพ ซึ่งให้ผลลัพธ์ที่ไม่ซ้ำใครในทุก ๆ git push lighthouse-badges ใช้เพื่อสร้างป้ายใหม่สำหรับการปรับใช้ทุกครั้งโดยการติดตั้ง npm i -g lighthouse-badges และผลักดัน URL ที่แฮชใหม่ไปยังอาร์เรย์ของ URL:
lighthouse-badges
-o docs/badges -r
-u https://synonyms.vercel.app/ [... all other urls]
# Output to docs/badges
# Badges will contain the respective
average score(s) of all the urls
supplied, combined
ตัวชี้วัดของ Lighthouse ได้แก่ การเข้าถึงและประสิทธิภาพ จะสร้างแฟล็กเฉพาะในการตรวจสอบแต่ละครั้ง มีการปรับเปลี่ยนทุกครั้งที่กดเพื่อแก้ไขปัญหาใดๆ โดยเฉพาะ
role กลับไปด้านบน
create-next-app และปรับใช้กับ Vercel ซึ่งฉันทำสำเร็จด้วยขั้นตอนต่อไปนี้:commit และ push โค้ดจาก IDE ในเครื่องของฉันไปยัง Github ผ่าน Git และเทอร์มินัล iTerm ของ MacBook Proselect ซึ่งอยู่ที่ด้านซ้ายบนของข้อความแจ้งทันที"โครงการของคุณได้รับการปรับใช้เรียบร้อยแล้ว"
กลับไปด้านบน
git clone https://github.com/israelias/synonym-chasercd ไปที่ชื่อของ repo นี้: cd synonym-chasernpm install npm run dev
# or
yarn dev เปิดเบราว์เซอร์ของคุณไปที่ localhost:3000
info นั้นมาจาก Thesaurus Collegiate Thesaurus ของ Merriam-Websterกลับไปด้านบน
