linkShortener: Add a link in the list too

This commit is contained in:
divlo 2020-08-04 11:36:20 +02:00
parent d8137a8c5b
commit 3877e974c5
2 changed files with 39 additions and 13 deletions

View File

@ -79,7 +79,8 @@ exports.postLink = async (req, res, next) => {
const shortcutLinkResult = `${shortLinkBaseURL}/${result.shortcut}` const shortcutLinkResult = `${shortLinkBaseURL}/${result.shortcut}`
return res.status(200).json({ return res.status(200).json({
resultHTML: `URL Raccourcie : <br/> <br/> <a target="_blank" rel="noopener noreferrer" href="${shortcutLinkResult}">${shortcutLinkResult}</a>`, resultHTML: `URL Raccourcie : <br/> <br/> <a target="_blank" rel="noopener noreferrer" href="${shortcutLinkResult}">${shortcutLinkResult}</a>`,
result: shortcutLinkResult result: shortcutLinkResult,
linkDatabase: result
}) })
} catch (error) { } catch (error) {
console.log(error) console.log(error)

View File

@ -16,9 +16,9 @@ import 'notyf/notyf.min.css'
import '../../public/css/pages/FunctionComponent.css' import '../../public/css/pages/FunctionComponent.css'
import '../../public/css/pages/admin.css' import '../../public/css/pages/admin.css'
const CreateLink = () => { const CreateLink = ({ linksData, setLinksData }) => {
const { isAuth, user } = useContext(UserContext) const { isAuth, user } = useContext(UserContext)
const [inputState, setInputState] = useState({}) const [inputState, setInputState] = useState({ url: '', shortcutName: '' })
const [message, setMessage] = useState('') const [message, setMessage] = useState('')
const [isLoading, setIsLoading] = useState(false) const [isLoading, setIsLoading] = useState(false)
@ -29,6 +29,9 @@ const CreateLink = () => {
const response = await api.post('/links', inputState, { const response = await api.post('/links', inputState, {
headers: { Authorization: user.token } headers: { Authorization: user.token }
}) })
const linksDataState = { ...linksData }
linksDataState.rows.push(response.data.linkDatabase)
setLinksData(linksDataState)
setMessage(response.data.resultHTML) setMessage(response.data.resultHTML)
setIsLoading(false) setIsLoading(false)
setInputState({ url: '', shortcutName: '' }) setInputState({ url: '', shortcutName: '' })
@ -66,6 +69,7 @@ const CreateLink = () => {
Entrez le lien à raccourcir : Entrez le lien à raccourcir :
</label> </label>
<input <input
value={inputState.url}
onChange={handleChange} onChange={handleChange}
type='text' type='text'
name='url' name='url'
@ -80,6 +84,7 @@ const CreateLink = () => {
Entrez le nom du raccourci : Entrez le nom du raccourci :
</label> </label>
<input <input
value={inputState.shortcutName}
onChange={handleChange} onChange={handleChange}
type='text' type='text'
name='shortcutName' name='shortcutName'
@ -105,14 +110,13 @@ const CreateLink = () => {
} }
let pageLinks = 1 let pageLinks = 1
const LinksList = () => { const LinksList = ({
linksData,
setLinksData,
isLoadingLinks,
setLoadingLinks
}) => {
const { isAuth, user } = useContext(UserContext) const { isAuth, user } = useContext(UserContext)
const [linksData, setLinksData] = useState({
hasMore: true,
rows: [],
totalItems: 0
})
const [isLoadingLinks, setLoadingLinks] = useState(true)
const [isEditing, setIsEditing] = useState(false) const [isEditing, setIsEditing] = useState(false)
const [defaultInputState, setDefaultInputState] = useState({ const [defaultInputState, setDefaultInputState] = useState({
@ -288,7 +292,11 @@ const LinksList = () => {
<td className='table-row'> <td className='table-row'>
<a href={link.url}>{link.url}</a> <a href={link.url}>{link.url}</a>
</td> </td>
<td className='table-row'>{link.shortcut}</td> <td className='table-row'>
<a href={`https://s.divlo.fr/${link.shortcut}`}>
{link.shortcut}
</a>
</td>
<td <td
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
onClick={() => handleEditLink(link)} onClick={() => handleEditLink(link)}
@ -399,16 +407,33 @@ const LinksList = () => {
} }
const FunctionTabManager = props => { const FunctionTabManager = props => {
const [linksData, setLinksData] = useState({
hasMore: true,
rows: [],
totalItems: 0
})
const [isLoadingLinks, setLoadingLinks] = useState(true)
return ( return (
<FunctionTabs <FunctionTabs
setSlideIndex={props.setSlideIndex} setSlideIndex={props.setSlideIndex}
slideIndex={props.slideIndex} slideIndex={props.slideIndex}
> >
<div className='FunctionComponent__slide'> <div className='FunctionComponent__slide'>
<CreateLink /> <CreateLink
linksData={linksData}
setLinksData={setLinksData}
isLoadingLinks={isLoadingLinks}
setLoadingLinks={setLoadingLinks}
/>
</div> </div>
<div className='FunctionComponent__slide'> <div className='FunctionComponent__slide'>
<LinksList /> <LinksList
linksData={linksData}
setLinksData={setLinksData}
isLoadingLinks={isLoadingLinks}
setLoadingLinks={setLoadingLinks}
/>
</div> </div>
<div className='FunctionComponent__slide'> <div className='FunctionComponent__slide'>
<FunctionArticle article={props.article} /> <FunctionArticle article={props.article} />