Skip to content

Commit

Permalink
Results for search
Browse files Browse the repository at this point in the history
  • Loading branch information
@kevincharles
kevincharles committed Apr 3, 2023
1 parent f7c1380 commit 20f2af2
Show file tree
Hide file tree
Showing 3 changed files with 258 additions and 66 deletions.
124 changes: 124 additions & 0 deletions public/api/searchPublicActivities.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: access");
header("Access-Control-Allow-Methods: POST");
header("Access-Control-Allow-Credentials: true");
header('Content-Type: application/json');

require 'defineDBAndUserAndCourseInfo.php';

$success = TRUE;
$message = "";

$q = mysqli_real_escape_string($conn,$_REQUEST["q"]);

if ($q == ""){
$success = FALSE;
$message = 'Internal Error: missing search query';
}

$matchingUsers = [];
$matchingActivities = [];
//Get Matching Activities
if ($success) {
$sql = "
SELECT cc.doenetId,
CAST(cc.jsonDefinition as CHAR) AS json,
cc.imagePath,
cc.label,
cc.courseId,
p.doenetId AS 'pageDoenetId'
FROM course_content AS cc
LEFT JOIN pages AS p
ON p.containingDoenetId = cc.doenetId
WHERE cc.label LIKE '%$q%'
AND cc.isPublic = 1
AND cc.isDeleted = 0
LIMIT 100
";

$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()){
$json = json_decode($row['json'], true);
array_push($matchingActivities,[
'doenetId' => $row['doenetId'],
'courseId' => $row['courseId'],
'version' => $json['version'],
'content' => $json['content'],
'imagePath' => $row['imagePath'],
'label' => $row['label'],
'public' => '1',
'pageDoenetId' => $row['pageDoenetId'],
]);
}
// $courseToOwnerFullName = [];
foreach($matchingActivities as &$activity){
$courseId = $activity['courseId'];
$sql = "
SELECT u.firstName,
u.lastName
FROM course_role AS cr
LEFT JOIN course_user AS cu
ON cu.roleId = cr.roleId
LEFT JOIN user AS u
ON u.userId = cu.userId
WHERE cr.courseId = '$courseId'
AND cr.isOwner = 1
LIMIT 1
";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
$row = $result->fetch_assoc();
$activity['fullName'] = $row['firstName'] . ' ' . $row['lastName'];
}
}
}


$sql = "
SELECT c.courseId,
u.firstName,
u.lastName
FROM user AS u
LEFT JOIN course AS c
ON c.portfolioCourseForUserId = u.userId
WHERE c.portfolioCourseForUserId IS NOT NULL
AND CONCAT(u.firstName, ' ', u.lastName) LIKE '%$q%'
LIMIT 100
";

$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()){
$json = json_decode($row['json'], true);
array_push($matchingUsers,[
'courseId' => $row['courseId'],
'firstName' => $row['firstName'],
'lastName' => $row['lastName'],
]);
}
}



}



$response_arr = array(
"success"=>$success,
"message"=>$message,
"searchResults"=>["users"=>$matchingUsers,"activities"=>$matchingActivities],
);


// set response code - 200 OK
http_response_code(200);

// make it json format
echo json_encode($response_arr);
$conn->close();

?>
184 changes: 128 additions & 56 deletions src/Tools/_framework/Paths/Community.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,93 @@
import React from 'react';
import { Box, Text } from '@chakra-ui/react';
import { Avatar, Box, Image, Tabs, Text } from '@chakra-ui/react';
import { useLoaderData, useOutletContext } from 'react-router';
import styled from 'styled-components';
import { Carousel } from '../../../_reactComponents/PanelHeaderComponents/Carousel';
import Searchbar from '../../../_reactComponents/PanelHeaderComponents/SearchBar';
import { Form, useFetcher, useSubmit } from 'react-router-dom';
import { Form, Link } from 'react-router-dom';
import { map } from 'lodash';


export async function loader({ request }){
const url = new URL(request.url);
const q = url.searchParams.get("q");
console.log("q",q)
if (q){
//Show search results
// const response = await fetch('/api/getHPCarouselData.php');
// const data = await response.json();
return {q,searchResults:[]}
const response = await fetch(`/api/searchPublicActivities.php?q=${q}`);
const respObj = await response.json();
return {q,searchResults:respObj.searchResults}
}else{
const response = await fetch('/api/getHPCarouselData.php');
const data = await response.json();
return data;
const { carouselData } = await response.json();
return { carouselData };
}
}

// export async function action({ request }) {
function Card({ doenetId, imagePath, label, fullName }) {

// const formData = await request.formData();
// const formObj = Object.fromEntries(formData);
// console.log("community up",formObj)
// // let response = await axios.post("/api/updatePortfolioActivitySettings.php",{
// // ...updates, doenetId:params.doenetId
// // })
const activityLink = `/portfolio/${doenetId}/viewer`;

// // if (referrer == "portfolioeditor"){
// // return redirect(`/portfolioeditor/${updates.doenetId}?tool=editor&doenetId=${updates.doenetId}&pageId=${updates.pageDoenetId}`)
// // }else{
// // const portfolioCourseId = response.data.portfolioCourseId;
// // return redirect(`/portfolio/${portfolioCourseId}`)
// // }
// return {search:formObj.search,matchingCardInfo:[]};

// }
return (
<Box
display="flex"
flexDirection="column"
height="180px"
width="180px"
background="black"
overflow="hidden"
margin="10px"
border="2px solid #949494"
borderRadius= "6px"
>
<Box
height="130px">
<Link to={activityLink}>
<Image
width="100%"
height="100%"
objectFit="contain"
src={imagePath}
alt="Activity Card"
/>
</Link>
</Box>
<Box
height="50px"
display="flex"
justifyContent="flex-start"
padding="2px"
color="black"
background="white"
>
<Box
width="40px"
display="flex"
alignContent="center"
justifyContent="center"
alignItems="center"
position="relative"
>
<Avatar size="sm" name={fullName} />
<Box
position="absolute"
width="100px"
left="8px"
bottom="0px"
>
<Text fontSize='10px'>{fullName}</Text>
</Box>
</Box>
<Box>
<Text
fontSize='sm'
lineHeight='1'
noOfLines={2}
>{label}</Text>
</Box>
</Box>
</Box>
);
}

function Heading(props) {
return <div style={{
Expand Down Expand Up @@ -90,8 +137,7 @@ const CarouselSection = styled.div`
export function Community(){
// let context = useOutletContext();
const {carouselData, q, searchResults} = useLoaderData();
const submit = useSubmit();
console.log({carouselData, q, searchResults})
// console.log({carouselData, q, searchResults})

if (q){
return (<>
Expand All @@ -100,25 +146,62 @@ if (q){
<Box
width="400px"
>
<Form
onChange={(event) => {
submit(event.currentTarget);
}}
>
{/* <input type="text" name="search" /> */}
{/* <button type="submit">Search</button> */}
<Searchbar
// submitAction={(e)=>{
// console.log("submitAction",e?.currentTarget)
// submit(e.currentTarget);
// }}
/>
</Form>
<Form>
<Searchbar defaultValue={q}/>
</Form>
</Box>
{/* <input type='text' width="400px" /> */}
</SearchBarContainer>
</SearchBarSection>
<Heading heading={`searching for "${q}"`} />
<Box
display="flex"
flexDirection="column"
justifyContent="center"
alignItems="center"
height="100px"
background= "var(--canvas)"
>
<Text
fontSize="24px"
>Results for
<Text as='span'
fontSize="24px"
fontWeight="700"
> {q}</Text>
</Text>
</Box>
<Box
display="grid"
gridTemplateColumns="240px auto"
minHeight="calc(100vh - 200px)"
// height="100%"
>
{/* <Tabs> */}
<Box
gridColumn="1/2"
background= "var(--mainGray)"
>

</Box>
<Box
gridColumn="2/3"
background= "var(--mainGray)"
>
{searchResults?.activities.map((activityObj)=>{
const { doenetId, imagePath, label, fullName } = activityObj;
console.log("activityObj",activityObj)
//{ activityLink, doenetId, imagePath, label, fullName }
return <Card
key={doenetId}
doenetId={doenetId}
imagePath={imagePath}
label={label}
fullName={fullName}
/>
})}
</Box>
{/* </Tabs> */}
</Box>

</>)
}

Expand All @@ -128,20 +211,9 @@ if (q){
<Box
width="400px"
>
<Form
onChange={(event) => {
submit(event.currentTarget);
}}
>
{/* <input type="text" name="search" /> */}
{/* <button type="submit">Search</button> */}
<Searchbar
// submitAction={(e)=>{
// console.log("submitAction",e?.currentTarget)
// submit(e.currentTarget);
// }}
/>
</Form>
<Form>
<Searchbar defaultValue={q}/>
</Form>
</Box>
{/* <input type='text' width="400px" /> */}
</SearchBarContainer>
Expand Down
16 changes: 6 additions & 10 deletions src/_reactComponents/PanelHeaderComponents/SearchBar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,12 @@ import { Button, Input, InputGroup, InputLeftElement, InputRightAddon } from '@c
import { Search2Icon } from "@chakra-ui/icons";


export default function Searchbar({name='q',submitAction=()=>{}}) {
export default function Searchbar({
name='q',
defaultValue,
}) {


// return <input type="text" name="search" />

return (
<>
<InputGroup borderRadius={5} size="sm">
Expand All @@ -23,10 +24,7 @@ export default function Searchbar({name='q',submitAction=()=>{}}) {
placeholder="Search..."
border="1px solid #949494"
name={name}
onKeyDown={(e)=>{
if (e.key === 'Enter' || e.key === "Spacebar" || e.key === " "){
submitAction(e)
}}}
defaultValue={defaultValue}
/>
<InputRightAddon
p={0}
Expand All @@ -36,12 +34,10 @@ export default function Searchbar({name='q',submitAction=()=>{}}) {
borderRightRadius={3.3}
>
<Button
type="submit"
size="sm"
borderLeftRadius={0}
borderRightRadius={3.3}
onClick={()=>{
submitAction();
}}
>
Search
</Button>
Expand Down

0 comments on commit 20f2af2

Please sign in to comment.