Archived
🐛 FIX: randomQuote + backup fixes
This commit is contained in:
Divlo committed
1 parent
015b0be11f
commit
aca93676e9
4 files changed
+25
-19
No files matched your search
+1
-1
@@ -22,4 +22,4 @@ INSERT INTO `functions` (`id`, `title`, `slug`, `description`, `image`, `type`,
|
||||
(13, 'Liste de choses à faire', 'toDoList', 'Prévoyez la liste de choses que vous devez faire.', '/images/functions/toDoList.png', 'page', NULL, NULL, 1, '2019-12-26 00:00:00', '2020-04-27 16:34:34', 1),
|
||||
(14, 'Juste Prix', 'rightPrice', 'Arriverez-vous à deviner le prix d\'un objet ?', '/images/functions/rightPrice.png', 'page', NULL, NULL, 1, '2020-04-27 20:17:05', '2020-04-27 21:59:22', 3),
|
||||
(15, 'Chronomètre', 'chronometerTimer', 'Gérer votre temps facilement (et adopter la technique Pomodoro).', '/images/functions/chronometerTimer.png', 'page', NULL, NULL, 1, '2020-04-29 09:28:08', '2020-04-29 09:45:29', 1),
|
||||
(16, 'Les méthodes des tableaux', 'arrayMethods', 'Et si on refaisait les méthodes natives de l\'objet global \"Array\" ?', '/images/functions/arrayMethods.png', 'article', '<p><strong>JavaScript</strong> est un langage <strong>orienté objet</strong>, chaque type comme \"String\", \"Number\", ... sont en réalité des objets. <br>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nCe sont des \"<a target=\"_blank\" href=\"https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux\">Objets globaux</a>\", qui dispose de méthodes bien utiles. 😎 Pourquoi je vous dit ça ?<br>\n\n\n\n\n\n\n\n\n\n\n\n\n\nCar aujourd\"hui nous allons reproduire les méthodes de l\"objet global \"<a target=\"_blank\" href=\"https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array\">Array</a>\", c\"est un bon exercice pour progresser.<br>\n<br>\n\n\n\n\n\n\n\n\n\n\nNous allons réaliser une classe (syntaxe ES6+) qu\"on va appeler \"DivloArray\" par exemple et reproduire 6 méthodes (push, forEach, map, filter, reverse et join), bien évidemment libre à vous d\"en faire plus. 😊 Je vais expliquer le code une méthode après l\"autre donc bout de code par bout de code, si vous voulez avoir le code source complet, il est disponible sur ce <a target=\"_blank\" href=\"https://gist.github.com/Divlo/4ffc8ed007d293372ee449d2647fcad9\">GitHub Gist.</a><br>\n<br>\n\n\n\n\n\n\n\n\n\nDonc tout d\"abord, nous devons créer la classe avec un constructor et faire une nouvelle instance de cet objet dans une variable :<br>\n\n\n\n\n\n\n\n(Libre à vous de renommer les variables comme bon vous semble.) <br>\n</p><div class=\"vscode-editor\" style=\"color: #d4d4d4;background-color: #1e1e1e;font-family: Consolas, \'Courier New\', monospace;font-weight: normal;font-size: 14px;line-height: 19px;white-space: pre;\"><div><span style=\"color: #569cd6;\">class</span><span style=\"color: #d4d4d4;\"> </span><span style=\"color: #4ec9b0;\">DivloArray</span><span style=\"color: #d4d4d4;\"> {</span></div><div><span style=\"color: #d4d4d4;\"> </span><span style=\"color: #569cd6;\">constructor</span><span style=\"color: #d4d4d4;\">(</span><span style=\"color: #9cdcfe;\">array</span><span style=\"color: #d4d4d4;\">) {</span></div><div><span style=\"color: #d4d4d4;\"> </span><span style=\"color: #569cd6;\">this</span><span style=\"color: #d4d4d4;\">.</span><span style=\"color: #9cdcfe;\">array</span><span style=\"color: #d4d4d4;\"> = </span><span style=\"color: #9cdcfe;\">array</span><span style=\"color: #d4d4d4;\">;</span></div><div><span style=\"color: #d4d4d4;\"> }</span></div><div><span style=\"color: #d4d4d4;\">}</span></div><br>\n\n<div><span style=\"color: #569cd6;\">const</span><span style=\"color: #d4d4d4;\"> </span><span style=\"color: #9cdcfe;\">divloArray</span><span style=\"color: #d4d4d4;\"> = </span><span style=\"color: #569cd6;\">new</span><span style=\"color: #d4d4d4;\"> </span><span style=\"color: #4ec9b0;\">DivloArray</span><span style=\"color: #d4d4d4;\">([</span><span style=\"color: #b5cea8;\">57</span><span style=\"color: #d4d4d4;\">, </span><span style=\"color: #b5cea8;\">4</span><span style=\"color: #d4d4d4;\">, </span><span style=\"color: #b5cea8;\">2</span><span style=\"color: #d4d4d4;\">, </span><span style=\"color: #b5cea8;\">8</span><span style=\"color: #d4d4d4;\">, </span><span style=\"color: #b5cea8;\">16</span><span style=\"color: #d4d4d4;\">, </span><span style=\"color: #b5cea8;\">25</span><span style=\"color: #d4d4d4;\">]);</span></div></div><p><br>\n\n\n\n\n\n- Nous allons commencer par créer la première méthode très utilisée qui consiste à ajouter un ou plusieurs éléments à la fin d\"un tableau, je parle bien évidemment de la méthode <strong>push</strong>.</p><div class=\"vscode-editor\" style=\"color: #d4d4d4;background-color: #1e1e1e;font-family: Consolas, \'Courier New\', monospace;font-weight: normal;font-size: 14px;line-height: 19px;white-space: pre;\"><div><span style=\"color: #6a9955;\">/**</span></div><div><span style=\"color: #6a9955;\"> * </span><span style=\"color: #569cd6;\">@description</span><span style=\"color: #6a9955;\"> Ajoute un ou plusieurs éléments à la fin d\"un tableau et retourne la nouvelle taille du tableau.</span></div><div><span style=\"color: #6a9955;\"> * </span><span style=\"color: #569cd6;\">@param</span><span style=\"color: #6a9955;\"> </span><span style=\"color: #4ec9b0;\">{*}</span><span style=\"color: #6a9955;\"> </span><span style=\"color: #9cdcfe;\">elements</span><span style=\"color: #6a9955;\"> Éléments à ajoutés</span></div><div><span style=\"color: #6a9955;\"> * </span><span style=\"color: #569cd6;\">@returns</Line truncated
|
||||
(16, 'Les méthodes des tableaux', 'arrayMethods', 'Et si on refaisait les méthodes natives de l\'objet global \"Array\" ?', '/images/functions/arrayMethods.png', 'article', '<p><strong>JavaScript</strong> est un langage <strong>orienté objet</strong>, chaque type comme \"String\", \"Number\", ... sont en réalité des objets. <br>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nCe sont des \"<a target=\"_blank\" href=\"https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux\">Objets globaux</a>\", qui dispose de méthodes bien utiles. 😎 Pourquoi je vous dit ça ?<br>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nCar aujourd\"hui nous allons reproduire les méthodes de l\"objet global \"<a target=\"_blank\" href=\"https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array\">Array</a>\", c\"est un bon exercice pour progresser.<br>\n<br>\n\n\n\n\n\n\n\n\n\n\n\nNous allons réaliser une classe (syntaxe ES6+) qu\"on va appeler \"DivloArray\" par exemple et reproduire 6 méthodes (push, forEach, map, filter, reverse et join), bien évidemment libre à vous d\"en faire plus. 😊 Je vais expliquer le code une méthode après l\"autre donc bout de code par bout de code, si vous voulez avoir le code source complet, il est disponible sur ce <a target=\"_blank\" href=\"https://gist.github.com/Divlo/4ffc8ed007d293372ee449d2647fcad9\">GitHub Gist.</a><br>\n<br>\n\n\n\n\n\n\n\n\n\n\nDonc tout d\"abord, nous devons créer la classe avec un constructor et faire une nouvelle instance de cet objet dans une variable :<br>\n\n\n\n\n\n\n\n\n(Libre à vous de renommer les variables comme bon vous semble.) <br>\n</p><div class=\"vscode-editor\" style=\"color: #d4d4d4;background-color: #1e1e1e;font-family: Consolas, \'Courier New\', monospace;font-weight: normal;font-size: 14px;line-height: 19px;white-space: pre;\"><div><span style=\"color: #569cd6;\">class</span><span style=\"color: #d4d4d4;\"> </span><span style=\"color: #4ec9b0;\">DivloArray</span><span style=\"color: #d4d4d4;\"> {</span></div><div><span style=\"color: #d4d4d4;\"> </span><span style=\"color: #569cd6;\">constructor</span><span style=\"color: #d4d4d4;\">(</span><span style=\"color: #9cdcfe;\">array</span><span style=\"color: #d4d4d4;\">) {</span></div><div><span style=\"color: #d4d4d4;\"> </span><span style=\"color: #569cd6;\">this</span><span style=\"color: #d4d4d4;\">.</span><span style=\"color: #9cdcfe;\">array</span><span style=\"color: #d4d4d4;\"> = </span><span style=\"color: #9cdcfe;\">array</span><span style=\"color: #d4d4d4;\">;</span></div><div><span style=\"color: #d4d4d4;\"> }</span></div><div><span style=\"color: #d4d4d4;\">}</span></div><br>\n\n<div><span style=\"color: #569cd6;\">const</span><span style=\"color: #d4d4d4;\"> </span><span style=\"color: #9cdcfe;\">divloArray</span><span style=\"color: #d4d4d4;\"> = </span><span style=\"color: #569cd6;\">new</span><span style=\"color: #d4d4d4;\"> </span><span style=\"color: #4ec9b0;\">DivloArray</span><span style=\"color: #d4d4d4;\">([</span><span style=\"color: #b5cea8;\">57</span><span style=\"color: #d4d4d4;\">, </span><span style=\"color: #b5cea8;\">4</span><span style=\"color: #d4d4d4;\">, </span><span style=\"color: #b5cea8;\">2</span><span style=\"color: #d4d4d4;\">, </span><span style=\"color: #b5cea8;\">8</span><span style=\"color: #d4d4d4;\">, </span><span style=\"color: #b5cea8;\">16</span><span style=\"color: #d4d4d4;\">, </span><span style=\"color: #b5cea8;\">25</span><span style=\"color: #d4d4d4;\">]);</span></div></div><p><br>\n\n\n\n\n\n\n- Nous allons commencer par créer la première méthode très utilisée qui consiste à ajouter un ou plusieurs éléments à la fin d\"un tableau, je parle bien évidemment de la méthode <strong>push</strong>.</p><div class=\"vscode-editor\" style=\"color: #d4d4d4;background-color: #1e1e1e;font-family: Consolas, \'Courier New\', monospace;font-weight: normal;font-size: 14px;line-height: 19px;white-space: pre;\"><div><span style=\"color: #6a9955;\">/**</span></div><div><span style=\"color: #6a9955;\"> * </span><span style=\"color: #569cd6;\">@description</span><span style=\"color: #6a9955;\"> Ajoute un ou plusieurs éléments à la fin d\"un tableau et retourne la nouvelle taille du tableau.</span></div><div><span style=\"color: #6a9955;\"> * </span><span style=\"color: #569cd6;\">@param</span><span style=\"color: #6a9955;\"> </span><span style=\"color: #4ec9b0;\">{*}</span><span style=\"color: #6a9955;\"> </span><span style=\"color: #9cdcfe;\">elements</span><span style=\"color: #6a9955;\"> Éléments à ajoutés</span></div><div><span style=\"color: #6a9955;\"> * </span><span style=\"color: #569cd6;\Line truncated
|
||||
@@ -0,0 +1 @@
|
||||
.github/backup
|
||||
@@ -6,10 +6,10 @@ import api from '../../utils/api';
|
||||
import useAPI from '../../hooks/useAPI';
|
||||
import './FunctionsList.css';
|
||||
|
||||
let pageFunctions = 1;
|
||||
const FunctionsList = (props) => {
|
||||
|
||||
const { categoryId } = useRouter().query;
|
||||
let pageFunctions = 1;
|
||||
|
||||
// State de recherche et de catégories
|
||||
const [, categories] = useAPI('/categories');
|
||||
@@ -56,13 +56,13 @@ const FunctionsList = (props) => {
|
||||
const getFunctionsData = async () => {
|
||||
setLoadingFunctions(true);
|
||||
const URL = `${(props.isAdmin) ? "/admin/functions" : "/functions"}?page=${pageFunctions}&limit=10&categoryId=${inputSearch.selectedCategory}&search=${inputSearch.search}`;
|
||||
const result = await api.get(URL, {
|
||||
const { data } = await api.get(URL, {
|
||||
headers: {
|
||||
...(props.isAdmin && props.token != undefined) && { 'Authorization': props.token }
|
||||
}
|
||||
});
|
||||
setLoadingFunctions(false);
|
||||
return result.data;
|
||||
return data;
|
||||
}
|
||||
|
||||
const handleChange = (event) => {
|
||||
|
||||
@@ -36,7 +36,7 @@ const GenerateQuote = () => {
|
||||
const notyf = new Notyf.Notyf({
|
||||
duration: 5000
|
||||
});
|
||||
copyToClipboard(`"${quote.quote}" - ${quote.author}`);
|
||||
copyToClipboard(`"${quote?.quote}" - ${quote?.author}`);
|
||||
notyf.success('Citation copiée dans le presse-papier!');
|
||||
}
|
||||
|
||||
@@ -50,15 +50,15 @@ const GenerateQuote = () => {
|
||||
</div>
|
||||
<div style={{ marginTop: '20px' }} className="row justify-content-center">
|
||||
<div className="col-24 text-center">
|
||||
<p>" {quote.quote} "</p>
|
||||
<p>- {quote.author}</p>
|
||||
<p>" {quote?.quote} "</p>
|
||||
<p>- {quote?.author}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginBottom: '20px' }} className="row justify-content-center">
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
href={`https://twitter.com/intent/tweet?text="${quote.quote}" - ${quote.author}&via=Divlo_FR&hashtags=citation,FunctionProject&url=https://function.divlo.fr/functions/randomQuote`}
|
||||
href={`https://twitter.com/intent/tweet?text="${quote?.quote}" - ${quote?.author}&via=Divlo_FR&hashtags=citation,FunctionProject&url=https://function.divlo.fr/functions/randomQuote`}
|
||||
className="btn btn-lg btn-primary"
|
||||
>
|
||||
<FontAwesomeIcon icon={faTwitter} style={{ width: '1em' }} /> Twitter
|
||||
@@ -68,26 +68,22 @@ const GenerateQuote = () => {
|
||||
);
|
||||
}
|
||||
|
||||
let pageQuotes = 1;
|
||||
const QuoteList = () => {
|
||||
|
||||
const [quotesData, setQuotesData] = useState({ hasMore: true, rows: [], totalItems: 0 });
|
||||
const [isLoadingQuotes, setLoadingQuotes] = useState(true);
|
||||
const [pageQuotes, setPageQuotes] = useState(1);
|
||||
|
||||
// Récupère les citations si la page change
|
||||
// Récupère les citations initiales
|
||||
useEffect(() => {
|
||||
getQuotesData();
|
||||
}, [pageQuotes]);
|
||||
getQuotesData().then((data) => setQuotesData(data));
|
||||
}, []);
|
||||
|
||||
const getQuotesData = async () => {
|
||||
setLoadingQuotes(true);
|
||||
const { data } = await api.get(`/quotes?limit=20page=${pageQuotes}`);
|
||||
setQuotesData({
|
||||
hasMore: data.hasMore,
|
||||
rows: [...quotesData.rows, ...data.rows],
|
||||
totalItems: data.totalItems
|
||||
});
|
||||
const { data } = await api.get(`/quotes?page=${pageQuotes}&limit=20`);
|
||||
setLoadingQuotes(false);
|
||||
return data;
|
||||
}
|
||||
|
||||
// Permet la pagination au scroll
|
||||
@@ -97,7 +93,16 @@ const QuoteList = () => {
|
||||
if (observer.current) observer.current.disconnect();
|
||||
observer.current = new IntersectionObserver((entries) => {
|
||||
if (entries[0].isIntersecting && quotesData.hasMore) {
|
||||
setPageQuotes(pageQuotes + 1);
|
||||
pageQuotes += 1;
|
||||
getQuotesData().then((data) => {
|
||||
setQuotesData((oldData) => {
|
||||
return {
|
||||
hasMore: data.hasMore,
|
||||
rows: [...oldData.rows, ...data.rows],
|
||||
totalItems: data.totalItems
|
||||
};
|
||||
});
|
||||
});
|
||||
}
|
||||
}, { threshold: 1 });
|
||||
if (node) observer.current.observe(node);
|
||||
|
||||
Reference in new issue
Block a user