From 8a4b27fc703bf3020761a9940786e237e93020dc Mon Sep 17 00:00:00 2001 From: Frikky Date: Tue, 30 Apr 2024 19:27:32 +0200 Subject: [PATCH] Pipeline sync fixes --- frontend/src/components/AppGrid.jsx | 1382 +++++++++++----------- frontend/src/components/Billing.jsx | 1 + frontend/src/components/BillingStats.jsx | 4 +- frontend/src/components/CacheView.jsx | 6 +- frontend/src/components/Files.jsx | 2 +- frontend/src/components/NewHeader.jsx | 2 +- frontend/src/views/AppCreator.jsx | 2 +- frontend/src/views/Search.jsx | 128 +- 8 files changed, 738 insertions(+), 789 deletions(-) diff --git a/frontend/src/components/AppGrid.jsx b/frontend/src/components/AppGrid.jsx index e84bbf35..a9581a27 100644 --- a/frontend/src/components/AppGrid.jsx +++ b/frontend/src/components/AppGrid.jsx @@ -6,20 +6,20 @@ import { Link } from "react-router-dom"; import { removeQuery } from "../components/ScrollToTop.jsx"; import { useMemo } from "react"; -import { Tabs, Tab } from "@mui/material"; +import { Tabs, Tab, Collapse } from "@mui/material"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; import ExpandLessIcon from "@mui/icons-material/ExpandLess"; import { Search as SearchIcon, CloudQueue as CloudQueueIcon, Code as CodeIcon, + CollectionsOutlined, + CookieSharp, } from "@mui/icons-material"; import { toast } from "react-toastify" import ClearIcon from '@mui/icons-material/Clear'; import Box from '@mui/material/Box'; -// import noImage from "../no_image.png" - import CircularProgress from '@mui/material/CircularProgress'; import algoliasearch from "algoliasearch/lite"; @@ -247,29 +247,9 @@ const AppGrid = (props) => { }; const [isLoggedIn, setIsLoggedIn] = useState(false); - const [userInfo, setUserInfo] = useState([]); + const [isLoading, setIsLoading] = useState(true) - useEffect(() => { - var baseurl = globalUrl; - fetch(baseurl + "/api/v1/getinfo", { - credentials: "include", - headers: { - 'Content-Type': 'application/json', - }, - }) - .then(response => response.json()) - .then(responseJson => { - if (responseJson.success) { - setIsLoggedIn(true); - setUserInfo(responseJson); - } - }) - .catch(error => { - console.log("Failed login check: ", error); - }); - }, []); - - //Component to fetch all app from the algolia + // Component to fetch all public app from the algolia. const Hits = ({ hits, insights, @@ -287,15 +267,38 @@ const AppGrid = (props) => { } }; - const [allActivatedAppIds, setAllActivatedAppIds] = useState(() => { - const storedApps = isLoggedIn && localStorage.getItem('allActivatedAppIds'); - return storedApps ? JSON.parse(storedApps) : userInfo.active_apps; - }); - const [isAppActivated, setIsAppActivated] = useState(false); - const [isActivateAppSuccess, setIsActivateAppSuccess] = useState(false); + //check user login and get user info. + const [allActivatedAppIds, setAllActivatedAppIds] = useState(null); + const [userdata, setUserdata] = useState([]); + + useEffect(() => { + var baseurl = globalUrl; + fetch(baseurl + "/api/v1/getinfo", { + credentials: "include", + headers: { + 'Content-Type': 'application/json', + }, + }) + .then(response => response.json()) + .then(responseJson => { + if (responseJson.success) { + setIsLoggedIn(true); + setUserdata(responseJson); + setAllActivatedAppIds(responseJson.active_apps) + } else { + setIsLoggedIn(false); + } + setIsLoading(false) + }) + .catch(error => { + console.log("Failed login check: ", error); + }); + }, [currTab]); //Function for activation and deactivation of app const handleActivateButton = (event, data, type) => { + + //use prevent default so it will stop redirection to the app page event.preventDefault(); if (!isLoggedIn) { toast.error("Please log in to your account to activate the app.") @@ -333,7 +336,6 @@ const AppGrid = (props) => { const updatedIds = allActivatedAppIds.filter(id => id !== data.objectID); setAllActivatedAppIds(updatedIds); } - setIsActivateAppSuccess(prev => !prev); } }) .catch(error => { @@ -341,244 +343,241 @@ const AppGrid = (props) => { }); } - useEffect(() => { - isLoggedIn && localStorage.setItem('allActivatedAppIds', JSON.stringify(allActivatedAppIds)); - }, [allActivatedAppIds]); - - - const memoizedHits = useMemo(() => { - return hits.map((data, index) => { - let workflowDelay = 0; - const isHeader = true; - const paperStyle = { - color: "rgba(241, 241, 241, 1)", - padding: isHeader ? null : 15, - cursor: "pointer", - maxWidth: 339, - maxHeight: 96, - borderRadius: 8, - transition: 'background-color 0.3s ease', - backgroundColor: "rgba(26, 26, 26, 1)", - }; - - const appUrl = - isCloud - ? `/apps/${data.objectID}?queryID=${data.__queryID}` - : `https://shuffler.io/apps/${data.objectID}?queryID=${data.__queryID}`; - - //check if appExist in userInfo.active_app or not. - return ( - - - - { - setMouseHoverIndex(index); - }} - onMouseOut={() => { - setMouseHoverIndex(-1); - }} - > - - ) : ( - - )} - - )} - - - - - - - - - ); - }); - }, [hits, mouseHoverIndex, isActivateAppSuccess, allActivatedAppIds]); + let workflowDelay = 0; + const isHeader = true; + const paperStyle = { + color: "rgba(241, 241, 241, 1)", + padding: isHeader ? null : 15, + cursor: "pointer", + maxWidth: 339, + maxHeight: 96, + borderRadius: 8, + transition: 'background-color 0.3s ease', + }; return ( - -
- {memoizedHits} -
- +
+ {!isLoading ? ( + +
+ {hits.map((data, index) => { + const appUrl = + isCloud + ? `/apps/${data.objectID}?queryID=${data.__queryID}` + : `https://shuffler.io/apps/${data.objectID}?queryID=${data.__queryID}`; + + return ( + + + + { + setMouseHoverIndex(index); + }} + onMouseLeave={() => { + setMouseHoverIndex(-1); + }} + > + + ) : ( + + )} +
+ )} +
+ + + + + + + + ); + }) + } + + + ) : ( +
+ )} + ); }; @@ -591,11 +590,10 @@ const AppGrid = (props) => { //Component to Filter all apps base on category const FilterAllAppsByCategory = () => { - const [isRefinementListExpanded, setIsRefinementListExpanded] = - useState(true); + const [isCategoreListExpanded, setIsCategoreListExpanded] = useState(true); const toggleRefinementList = () => { - setIsRefinementListExpanded((prevState) => !prevState); + setIsCategoreListExpanded((prevState) => !prevState); }; const categoryButtonStyling = { @@ -627,27 +625,27 @@ const AppGrid = (props) => { onClick={toggleRefinementList} > Category - {isRefinementListExpanded ? ( + {isCategoreListExpanded ? ( ) : ( )} - {isRefinementListExpanded && ( - <> + +
- - )} +
+ ); }; //Component to filter all apps base on Action label const FilterByActionLabel = () => { + const [isActionLabelExpanded, setIsActionLabelExpanded] = useState(false); - useState(false); const toogleActionLabel = () => { setIsActionLabelExpanded((prevState) => !prevState); @@ -667,7 +665,6 @@ const AppGrid = (props) => { fontWeight: 400 } - return (
{ )} - {isActionLabelExpanded && ( - <> + +
- - )} +
+
); }; @@ -747,12 +744,12 @@ const AppGrid = (props) => { {isCreatedWithExpanded ? : } - {isCreatedWithExpanded && ( - <> + +
- - )} +
+ ); }; @@ -826,7 +823,7 @@ const AppGrid = (props) => { ); }; - const FilterApps = () => { + const FilterForAllApps = () => { return (
{ }; //Search box for the orgs and users apps - const SearchBoxForOrgsAndUsersApp = ({ searchQuery, setSearchQuery }) => { + const SearchBoxForOrgAndUserApp = ({ searchQuery, setSearchQuery }) => { + + const updateUrl = (query) => { + const urlSearchParams = new URLSearchParams(window.location.search); + urlSearchParams.set("q", query); + const newUrl = `${window.location.pathname}?${urlSearchParams.toString()}`; + window.history.pushState({ path: newUrl }, "", newUrl); + }; return (
@@ -928,7 +932,10 @@ const AppGrid = (props) => { cursor: "pointer", marginRight: 10 }} - onClick={() => setSearchQuery('')} + onClick={() => { + setSearchQuery(''); + updateUrl(''); + }} /> )} - {isCategoreListExpanded && topCategories && topCategories.length > 0 && ( -
+ +
{topCategories.map((data, index) => ( - - + ))}
- )} +
); }; - const [isActionLabelExpanded, setIsActionLabelExpanded] = useState(false); - const toogleActionLabel = () => { - setIsActionLabelExpanded((prevState) => !prevState); - }; + const FilterUsersAndOrgsAppByActionLabel = ({ selectedTagsForUserAndOrgApps, setSelectedTagsForUserAndOrgApps }) => { - const FilterUsersAndOrgsAppByActionLabel = ({ userAndOrgsApp }) => { + const [isActionLabelExpanded, setIsActionLabelExpanded] = useState(false); + const toggleActionLabel = () => { + setIsActionLabelExpanded((prevState) => !prevState); + }; + //Find top 9 tags from the database const findTopTags = () => { const tagCountMap = {}; - // Check if userAndOrgsApp is an array before iterating over it and Find top 10 tags from the apps if (Array.isArray(userAndOrgsApp)) { userAndOrgsApp.forEach((app) => { const tags = app.tags; - if (tags && tags.length > 0) { tags.forEach((tag) => { tagCountMap[tag] = (tagCountMap[tag] || 0) + 1; @@ -1136,13 +1180,13 @@ const AppGrid = (props) => { tagArray.sort((a, b) => b.count - a.count); - const topTags = tagArray.slice(0, 9); + const topTags = tagArray.slice(0, 8); return topTags; }; + const topTags = findTopTags(); - const [selectedCategories, setSelectedCategories] = useState([]); const handleCheckboxChange = (index) => { const category = topTags[index].tag; @@ -1154,108 +1198,98 @@ const AppGrid = (props) => { setSelectedTagsForUserAndOrgApps([...updatedCheckboxStates, category]); } }; - const handleClearFilter = () => { setSelectedTagsForUserAndOrgApps([]); }; const actionLabelButtonStyling = { - cursor: "pointer", - color: "white", - border: "none", - backgroundColor: "transparent", + cursor: 'pointer', + color: 'white', + border: 'none', + backgroundColor: 'transparent', fontSize: 16, - display: "flex", - flexDirection: "row", - width: "100%", + display: 'flex', + width: '100%', height: 30, + flexDirection: 'row', textTransform: 'none', - marginBottom: isActionLabelExpanded && 16, - fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)" - } + fontFamily: 'var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)', + marginBottom: isActionLabelExpanded && 15 + }; return (
- - - {isActionLabelExpanded && topTags && topTags.length > 0 && ( - <> - {topTags.map((data, index) => ( + +
+ {topTags && topTags.length > 0 && topTags.map((data, index) => ( - ))} - - - )} +
+
); }; - const [selectedOptionOfCreatedWith, setSelectedOptionOfCreatedWith] = useState([]); - const [isCreatedWithExpanded, setIsCreatedWithExpanded] = useState(false); - const toogleCreatedWith = () => { - setIsCreatedWithExpanded((prevState) => !prevState); - }; - const FilterUsersAndOrgsAppByCreatedWith = () => { + + + const FilterUsersAndOrgsAppByCreatedWith = ({ selectedOptionOfCreatedWith, setSelectedOptionOfCreatedWith }) => { + + const [isCreatedWithExpanded, setIsCreatedWithExpanded] = useState(false); + + const toogleCreatedWith = () => { + setIsCreatedWithExpanded((prevState) => !prevState); + }; const AppCreatedWithOptions = ['App Editor', 'Python'] @@ -1309,8 +1343,8 @@ const AppGrid = (props) => { {isCreatedWithExpanded ? : } - {isCreatedWithExpanded && ( - <> + +
{AppCreatedWithOptions.map((data, index) => ( - - )} +
+
); }; @@ -1370,6 +1406,7 @@ const AppGrid = (props) => { const toogleCreatedBy = () => { setIscreatedByExpanded((prevState) => !prevState); }; + const [isButtonDisable, setIsButtonDisable] = useState(true) const createdByButtonStyling = { @@ -1434,48 +1471,7 @@ const AppGrid = (props) => { ); }; - const FilterUserAndOrgApps = () => { - - const [userAndOrgsApp, setUserAndOrgsApp] = useState([]); - - useEffect(() => { - if (currTab === 2) { - const baseUrl = globalUrl; - const userAppsUrl = `${baseUrl}/api/v1/users/apps`; - fetch(userAppsUrl, { - method: "GET", - credentials: "include", - headers: { - "Content-Type": "application/json", - }, - }) - .then((response) => response.json()) - .then((data) => { - setUserAndOrgsApp(data); - }) - .catch((err) => { - console.error("Error fetching user apps:", err); - }); - } else if (currTab === 1) { - const baseUrl = globalUrl; - const appsUrl = `${baseUrl}/api/v1/apps`; - fetch(appsUrl, { - method: "GET", - credentials: "include", - headers: { - "Content-Type": "application/json", - }, - }) - .then((response) => response.json()) - .then((data) => { - setUserAndOrgsApp(data); - }) - .catch((err) => { - console.error("Error fetching apps:", err); - }); - } - }, [currTab]); - + const FilterForUserAndOrgApps = ({ setselectedCategoryForUsersAndOgsApps, setSelectedTagsForUserAndOrgApps, setSelectedOptionOfCreatedWith, selectedCategoryForUsersAndOgsApps, selectedTagsForUserAndOrgApps, selectedOptionOfCreatedWith }) => { return (
{ Filter By - - - + + +
)} ) } - const [isLoading, setIsLoading] = useState(false) + useEffect(() => { - if (currTab) { - setselectedCategoryForUsersAndOgsApps([]); - setSelectedTagsForUserAndOrgApps([]); - setSelectedOptionOfCreatedWith([]); - setIsCategoryListExpanded(true); - setIsActionLabelExpanded(false); - setIsCreatedWithExpanded(false); - } if (currTab === 1 || currTab === 2) { setIsLoading(true); } - + if (currTab) { + setUserAndOrgsApp([]) + } }, [currTab]) //Component to fetch all apps created by user and Org - const UserAndOrgApps = () => { - + const UserAndOrgApps = ({ selectedCategoryForUsersAndOgsApps, selectedTagsForUserAndOrgApps, selectedOptionOfCreatedWith }) => { const [searchQuery, setSearchQuery] = useState(""); - const [userAndOrgAppData, setUserAndOrgAppData] = useState([]) - - const allActivatedAppIdsString = localStorage.getItem('allActivatedAppIds'); - const allActivatedAppIds = allActivatedAppIdsString ? JSON.parse(allActivatedAppIdsString) : []; - const latestActivatedAppId = allActivatedAppIds.length > 0 ? allActivatedAppIds[allActivatedAppIds.length - 1] : null; - - useEffect(() => { - if (currTab === 2 && isLoggedIn != undefined && isLoggedIn != null && isLoggedIn === true) { - const baseUrl = globalUrl; - const URL = `${baseUrl}/api/v1/users/apps`; - fetch(URL, { - method: "GET", - credentials: "include", - headers: { - "Content-Type": "application/json", - }, - }) - .then((response) => { - return response.json(); - }) - .then((data) => { - setUserAndOrgAppData(data) - setIsLoading(false) - }) - .catch((err) => { - console.error("Error fetching user apps:", err); - }); - } - else if (currTab === 1 && isLoggedIn != undefined && isLoggedIn != null && isLoggedIn === true) { - const baseUrl = globalUrl; - const URL = `${baseUrl}/api/v1/apps`; - fetch(URL, { - method: "GET", - credentials: "include", - headers: { - "Content-Type": "application/json", - }, - }) - .then((response) => { - return response.json(); - }) - .then((data) => { - setUserAndOrgAppData(data) - setIsLoading(false); - }) - .catch((err) => { - console.error("Error fetching user apps:", err); - }); - } - }, []) //Search app base on app name, category and tag - const filteredUserAppdata = Array.isArray(userAndOrgAppData) ? userAndOrgAppData.filter((app) => { + const filteredUserAppdata = Array.isArray(userAndOrgsApp) ? userAndOrgsApp.filter((app) => { const matchesSearchQuery = ( searchQuery === "" || app.name.toLowerCase().includes(searchQuery.toLowerCase()) || @@ -1614,214 +1553,213 @@ const AppGrid = (props) => { const [mouseHoverIndex, setMouseHoverIndex] = useState(-1); var counted = 0; - const memoizedHits = useMemo(() => { - return filteredUserAppdata.map((data, index) => { - const isMouseOverOnCloudIcon = false; - const xs = 12; - const rowHandler = 12; - const searchClient = {}; - const userdata = {}; - - const paperStyle = { - backgroundColor: "#1A1A1A", - color: "rgba(241, 241, 241, 1)", - padding: isHeader ? null : 15, - cursor: "pointer", - position: "relative", - width: 339, - height: 96, - borderRadius: 8, - }; - - var parsedname = ""; - for (var key = 0; key < data.name.length; key++) { - var character = data.name.charAt(key); - if (character === character.toUpperCase()) { - if ( - data.name.charAt(key + 1) !== undefined && - data.name.charAt(key + 1) === - data.name.charAt(key + 1).toUpperCase() - ) { - } else { - parsedname += " "; - } - } - parsedname += character; - } - - parsedname = ( - parsedname.charAt(0).toUpperCase() + parsedname.substring(1) - ).replaceAll("_", " "); - - const normalizedString = (name) => { - if (typeof name === 'string') { - return name.replace(/_/g, ' '); - } else { - return name; - } - }; - - const appUrl = - isCloud === false - ? `/apps/${data.id}` - : `https://shuffler.io/apps/${data.id}`; - - return ( - - - - { - setMouseHoverIndex(index); - }} - onMouseOut={() => { - setMouseHoverIndex(-1); - }} - > - - {data.name} -
-
- {normalizedString(data.name)} -
-
- {data.categories !== null - ? normalizedString(data.categories).join(", ") - : "NA"} -
-
- {data.tags && - data.tags.map((tag, tagIndex) => ( - - {normalizedString(tag)} - {tagIndex < data.tags.length - 1 ? ", " : ""} - - ))} -
- {/* )} */} -
- - - - - - ); - }); - }, [filteredUserAppdata, latestActivatedAppId]); - - return (
- {isLoggedIn ? ( -
- {isLoading ? : ( -
- - -
- {memoizedHits} -
- -
- )} -
+ {isLoading ? ( + ) : (
- Please login to your account first to view {`${currTab === 1 ? "Organization" : "My"}`} Apps.
- Or signup to create a new account. + {isLoggedIn ? ( +
+
+ + +
+ {filteredUserAppdata.map((data, index) => { + const isMouseOverOnCloudIcon = false; + const xs = 12; + const rowHandler = 12; + const searchClient = {}; + const userdata = {}; + + const paperStyle = { + backgroundColor: mouseHoverIndex === index ? "rgba(26, 26, 26, 1)" : "#1A1A1A", + color: "rgba(241, 241, 241, 1)", + padding: isHeader ? null : 15, + cursor: "pointer", + position: "relative", + width: 339, + height: 96, + borderRadius: 8, + }; + + var parsedname = ""; + for (var key = 0; key < data.name.length; key++) { + var character = data.name.charAt(key); + if (character === character.toUpperCase()) { + if ( + data.name.charAt(key + 1) !== undefined && + data.name.charAt(key + 1) === + data.name.charAt(key + 1).toUpperCase() + ) { + } else { + parsedname += " "; + } + } + parsedname += character; + } + + parsedname = ( + parsedname.charAt(0).toUpperCase() + parsedname.substring(1) + ).replaceAll("_", " "); + + const normalizedString = (name) => { + if (typeof name === 'string') { + return name.replace(/_/g, ' '); + } else { + return name; + } + }; + + const appUrl = + isCloud === true + ? `/apps/${data.id}` + : `https://shuffler.io/apps/${data.id}`; + + return ( + + + + { + setMouseHoverIndex(index); + }} + onMouseOut={() => { + setMouseHoverIndex(-1); + }} + > + + {data.name} +
+
+ {normalizedString(data.name)} +
+
+ {data.categories !== null + ? normalizedString(data.categories).join(", ") + : "NA"} +
+
+ {data.tags && + data.tags.map((tag, tagIndex) => ( + + {normalizedString(tag)} + {tagIndex < data.tags.length - 1 ? ", " : ""} + + ))} +
+ {/* )} */} +
+ + + + + + ); + }) + } +
+ +
+
+ ) : ( + Please login to your account first to view {`${currTab === 1 ? "Organization" : "My"}`} Apps.
+ Or signup to create a new account. + )}
)}
@@ -1829,7 +1767,7 @@ const AppGrid = (props) => { }; - const AppTab = () => { + const AppTab = ({ selectedCategoryForUsersAndOgsApps, selectedTagsForUserAndOrgApps, selectedOptionOfCreatedWith }) => { const [isAnyAppActivated, setIsAnyAppActivated] = useState(false); @@ -1889,7 +1827,7 @@ const AppGrid = (props) => { {currTab === 0 ? ( ) : currTab === 1 || currTab === 2 ? ( - + ) : null} @@ -1898,6 +1836,40 @@ const AppGrid = (props) => { const CustomSearchBox = connectSearchBox(SearchBox); const CustomHits = connectHits(Hits); + + const DisplayAllAppsTab = () => { + const [selectedCategoryForUsersAndOgsApps, setselectedCategoryForUsersAndOgsApps] = useState([]); + const [selectedTagsForUserAndOrgApps, setSelectedTagsForUserAndOrgApps] = useState([]); + const [selectedOptionOfCreatedWith, setSelectedOptionOfCreatedWith] = useState([]); + + return ( +
+ +
+ {currTab === 0 ? ( + + ) : ( + + )} + +
+ + +
+ ); + }; + return (
{ display: "flex", }} > - {/* -
- -
- */}
- -
- {currTab === 0 ? : } - -
- {/* */} - - + {showSuggestion === true ? (
{
{ const AppStats = (defaultprops) => { - const { globalUrl, selectedOrganization, userdata, isCloud, inputWorkflows, } = defaultprops; + const { globalUrl, selectedOrganization, userdata, isCloud, inputWorkflows,clickedFromOrgTab } = defaultprops; const [keys, setKeys] = useState([]) const [searches, setSearches] = useState([]); @@ -703,7 +703,7 @@ const AppStats = (defaultprops) => { textAlign: "center", padding: 40, margin: 5, - marginLeft: 90, + marginLeft: clickedFromOrgTab? null:90, backgroundColor: theme.palette.platformColor, border: "1px solid rgba(255,255,255,0.3)", maxWidth: 300, diff --git a/frontend/src/components/CacheView.jsx b/frontend/src/components/CacheView.jsx index 22500fe2..c5c4e9c3 100644 --- a/frontend/src/components/CacheView.jsx +++ b/frontend/src/components/CacheView.jsx @@ -304,7 +304,7 @@ const CacheView = (props) => { }, }} required - fullWidth={true} + fullWidth autoComplete="Value" placeholder="123" id="Valuefield" @@ -349,7 +349,7 @@ const CacheView = (props) => { return ( -
+
{modalView}

Shuffle Datastore

@@ -434,6 +434,8 @@ const CacheView = (props) => { style={{ minWidth: 300, maxWidth: 300, + height:200, + overflowX: "hidden", }} primary={validate.valid ? { }} onDrop={uploadFile} > -
+
{ logo diff --git a/frontend/src/views/AppCreator.jsx b/frontend/src/views/AppCreator.jsx index 209407ea..6a1c577d 100755 --- a/frontend/src/views/AppCreator.jsx +++ b/frontend/src/views/AppCreator.jsx @@ -3075,7 +3075,7 @@ const AppCreator = (defaultprops) => { 0 && (!refreshUrl.startsWith("http") || refreshUrl.includes("//shuffler.")) ? "2px solid red" : "inherit", }} fullWidth={true} placeholder="The URL to retrieve refresh-tokens at" diff --git a/frontend/src/views/Search.jsx b/frontend/src/views/Search.jsx index 687e392f..b9b65f06 100644 --- a/frontend/src/views/Search.jsx +++ b/frontend/src/views/Search.jsx @@ -57,52 +57,52 @@ const Search = (props) => { //Stop unnecessariry re-rendering of the component to improve performace const MemoizedAppGrid = useMemo(() => , [curTab]); + />, [curTab]); -const MemoizedWorkflowGrid = useMemo(() => , [curTab]); + const MemoizedWorkflowGrid = useMemo(() => , [curTab]); -const MemoizedDocsGrid = useMemo(() => , [curTab]); + const MemoizedDocsGrid = useMemo(() => , [curTab]); -const MemoizedCreatorGrid = useMemo(() => , [curTab]); + const MemoizedCreatorGrid = useMemo(() => , [curTab]); const MemoizedDiscordChat = useMemo(() => ) -const useStyles = makeStyles({ - hideIndicator: { - display: 'none', - }, - customTab: { - justifyContent: 'center', - gap: '46px', - } -}); -const classes = useStyles(); + const useStyles = makeStyles({ + hideIndicator: { + display: 'none', + }, + customTab: { + justifyContent: 'center', + gap: '46px', + } + }); + const classes = useStyles(); if (serverside === true) { return null; @@ -177,7 +177,7 @@ const classes = useStyles(); const StyledTab = styled(Tab)(({ theme }) => ({ width: 151, height: 51, - padding: "10px 20px", + padding: "10px 20px", borderRadius: 8, fontWeight: 600, textTransform: "none", @@ -192,16 +192,16 @@ const classes = useStyles(); })); const tabSpanStyling = { - display: 'flex', - flexDirection: 'row', - alignItems: 'center' + display: 'flex', + flexDirection: 'row', + alignItems: 'center' } - const tabTextStyling = { - marginLeft: '5px', - color: 'white' + const tabTextStyling = { + marginLeft: '5px', + color: 'white' } - + // Random names for type & autoComplete. Didn't research :^) const landingpageDataBrowser = ( @@ -219,7 +219,7 @@ const classes = useStyles(); margin: isHeader ? null : "auto", marginTop: hidemargins === true ? 0 : isHeader ? null : 25, backgroundColor: "rgba(33, 33, 33, 1)", - borderRadius:8 + borderRadius: 8 }} value={curTab} indicatorColor="primary" @@ -228,28 +228,28 @@ const classes = useStyles(); aria-label="disabled tabs example" variant="scrollable" scrollButtons="auto" - classes={{indicator: classes.hideIndicator, root: classes.customTab}} + classes={{ indicator: classes.hideIndicator, root: classes.customTab }} > - + App } /> - + Workflow } @@ -257,11 +257,11 @@ const classes = useStyles(); - + Docs } @@ -273,7 +273,7 @@ const classes = useStyles(); }} label={ - + Creators } @@ -285,17 +285,17 @@ const classes = useStyles(); }} label={ - - Discord Chat + + Discord Chat } /> - {curTab === 0 && MemoizedAppGrid} - {curTab === 1 && MemoizedWorkflowGrid} - {curTab === 2 && MemoizedDocsGrid} - {curTab === 3 && MemoizedCreatorGrid} - {curTab === 4 && MemoizedDiscordChat} + {curTab === 0 && MemoizedAppGrid} + {curTab === 1 && MemoizedWorkflowGrid} + {curTab === 2 && MemoizedDocsGrid} + {curTab === 3 && MemoizedCreatorGrid} + {curTab === 4 && MemoizedDiscordChat}
);