Skip to content

Commit

Permalink
Merge pull request #22 from NwinNwin/steven-creation+layout
Browse files Browse the repository at this point in the history 
Steven creation+layout
  • Loading branch information
@stevem-zhou
stevem-zhou authored Aug 23, 2023
2 parents b611284 + e446158 commit 9cba2f9
Show file tree
Hide file tree
Showing 6 changed files with 71 additions and 46 deletions.
10 changes: 5 additions & 5 deletions src/components/CreateModal/Calendar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,16 +107,16 @@

.react-calendar__tile:enabled:hover,
.react-calendar__tile:enabled:focus {
background-color: #e6e6e6;
background-color: #accdee;
}

/* .react-calendar__tile--now {
background: #ffff76;
}
background: #accdee;
} */

.react-calendar__tile--now:enabled:hover,
/* .react-calendar__tile--now:enabled:hover,
.react-calendar__tile--now:enabled:focus {
background: #ffffa9;
background: #accdee;
} */

.react-calendar__tile--hasActive {
Expand Down
62 changes: 41 additions & 21 deletions src/components/CreateModal/CreateModal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,9 @@ import {
Stepper,
useSteps,
Box,
ModalCloseButton,
} from "@chakra-ui/react";
// import logo from "../../assets/images/small_logo.png";
import upload from "../../assets/images/download.png";
import { storage } from "../../firebase";
import { ref, uploadBytes, getDownloadURL } from "firebase/storage";
import { UserAuth } from "../../context/AuthContext";
Expand All @@ -49,11 +49,13 @@ export default function CreateModal({
setIsEdit,
setPosition,
centerPosition,
setUploadImg,
uploadImg,
upload,
}) {
const { user } = UserAuth();
const { onLoginModalOpen } = useContext(DataContext);
const { isOpen, onOpen, onClose } = useDisclosure();
const [uploadImg, setUploadImg] = useState(upload);

const uploadFile = () => {
if (!newAddedItem.image) return;
Expand All @@ -71,7 +73,7 @@ export default function CreateModal({
"https://firebasestorage.googleapis.com/v0/b/zotnfound2.appspot.com/o/zotnfound2%2Fimages%2FNaN"
)
) {
setUploadImg(upload);
setUploadImg("");
} else {
setUploadImg(url);
setNewAddedItem((prev) => ({ ...prev, image: url }));
Expand Down Expand Up @@ -144,7 +146,21 @@ export default function CreateModal({
)}
<Modal
isOpen={isOpen}
onClose={onClose}
onClose={() => {
setNewAddedItem({
image: "",
type: "",
islost: true,
name: "",
description: "",
itemDate: "",
});
setUploadImg("");
setActiveStep(0);
setIsCreate(true);
setIsEdit(false);
onClose();
}}
size="5xl"
closeOnOverlayClick={false}
>
Expand All @@ -154,7 +170,7 @@ export default function CreateModal({
{/* stepper */}
<Stepper size="lg" index={activeStep} flex={1}>
{steps.map((step, index) => (
<Step key={index} onClick={() => setActiveStep(index)}>
<Step key={index}>
<StepIndicator>
<StepStatus
complete={<StepIcon />}
Expand All @@ -172,6 +188,7 @@ export default function CreateModal({
</Step>
))}
</Stepper>
<ModalCloseButton color={"#c43232"} />
{/* steppper */}
<Flex width="100%" justifyContent={"center"} mt="5%" mb="3%">
{/* first step */}
Expand All @@ -185,6 +202,7 @@ export default function CreateModal({
variant="outline"
placeholder="Item Name"
mb="2"
value={newAddedItem.name}
onChange={(e) =>
setNewAddedItem((prev) => ({
...prev,
Expand All @@ -196,6 +214,7 @@ export default function CreateModal({
variant="outline"
placeholder="Description of Item"
mb="2"
value={newAddedItem.description}
onChange={(e) =>
setNewAddedItem((prev) => ({
...prev,
Expand Down Expand Up @@ -233,7 +252,10 @@ export default function CreateModal({
<option value="phone">Phone</option>
<option value="others">Others</option>
</Select> */}
<TypeSelector setNewAddedItem={setNewAddedItem} />
<TypeSelector
setNewAddedItem={setNewAddedItem}
newAddedItem={newAddedItem}
/>
<FormControl>
<Flex flexDir={"column"}>
<FormLabel htmlFor="lost-item">
Expand All @@ -246,6 +268,7 @@ export default function CreateModal({
size="lg"
colorScheme="red"
mr="2%"
isChecked={newAddedItem.islost}
onChange={() =>
setNewAddedItem((prev) => ({
...prev,
Expand Down Expand Up @@ -362,40 +385,30 @@ export default function CreateModal({
</Text>

<Flex mb="10%" ml="1%">
<MdDriveFileRenameOutline size={"1.3em"}/>
<MdDriveFileRenameOutline size={"1.3em"} />
<Text maxW="20vw" ml="2%" fontSize={15}>
{newAddedItem.name}
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Aut libero quis possimus numquam alias, ipsum
perferendis animi laboriosam quasi minus eligendi
culpa magnam nostrum non tenetur doloremque explicabo
vitae porro?
</Text>
</Flex>

<Flex mb="10%">
<MdOutlineDescription size={"1.3em"}/>
<MdOutlineDescription size={"1.3em"} />
<Text maxW="20vw" ml="2%" fontSize={15}>
{newAddedItem.description}
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Exercitationem tempore sunt cupiditate quaerat
blanditiis delectus natus culpa ad est aliquam nihil
omnis ipsum incidunt, magnam beatae earum neque, sint
nostrum?
</Text>
</Flex>

<Flex mb="10%">
<FaMagnifyingGlass size={"1.3em"}/>
<FaMagnifyingGlass size={"1.3em"} />
<Text maxW="20vw" ml="2%" fontSize={15}>
{newAddedItem.islost ? "LOST" : "FOUND"}
{", "}
{newAddedItem.type}
{newAddedItem.type.toUpperCase()}
</Text>
</Flex>

<Flex mb="10%">
<SlCalender size={"1.3em"}/>
<SlCalender size={"1.3em"} />
<Text maxW="20vw" ml="2%" fontSize={15}>
{newAddedItem.itemDate}
</Text>
Expand Down Expand Up @@ -437,6 +450,13 @@ export default function CreateModal({
)}
{activeStep < 4 ? (
<Button
isDisabled={
(activeStep === 0 && newAddedItem.name === "") ||
newAddedItem.description === "" ||
(activeStep === 1 && newAddedItem.type === "") ||
(activeStep === 2 && newAddedItem.itemDate === "") ||
(activeStep === 3 && uploadImg === "")
}
variant={"solid"}
colorScheme="blue"
size="lg"
Expand Down
11 changes: 8 additions & 3 deletions src/components/Home/Home.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,14 +35,13 @@ import {
} from "@chakra-ui/react";
import { SettingsIcon, ChevronDownIcon, StarIcon } from "@chakra-ui/icons";
import logo from "../../assets/images/small_logo.png";
import upload from "../../assets/images/download.png";

import logout from "../../assets/logos/logout.svg";
import userlogo from "../../assets/logos/userlogo.svg";
import yourposts from "../../assets/logos/yourposts.svg";
import axios from "axios";



export default function Home() {
const [search, setSearch] = useState("");
const [data, setData] = useState([]);
Expand Down Expand Up @@ -103,6 +102,7 @@ export default function Home() {
const [position, setPosition] = useState(centerPosition);
const [focusLocation, setFocusLocation] = useState();
const [screenWidth, setScreenWidth] = useState(window.screen.width);
const [uploadImg, setUploadImg] = useState("");

// LOGIN MODAL
const {
Expand Down Expand Up @@ -143,7 +143,6 @@ export default function Home() {
getData();
}, []);


window.onresize = () => {
setScreenWidth(window.screen.width);
};
Expand Down Expand Up @@ -318,6 +317,9 @@ export default function Home() {
centerPosition={centerPosition}
newAddedItem={newAddedItem}
setNewAddedItem={setNewAddedItem}
setUploadImg={setUploadImg}
uploadImg={uploadImg}
upload={upload}
/>
</Flex>
</Flex>
Expand Down Expand Up @@ -468,6 +470,9 @@ export default function Home() {
setPosition={setPosition}
focusLocation={focusLocation}
setFocusLocation={setFocusLocation}
setUploadImg={setUploadImg}
uploadImg={uploadImg}
upload={upload}
/>
</Flex>
<Flex
Expand Down
8 changes: 6 additions & 2 deletions src/components/Map/Map.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,14 +39,16 @@ export default function Map({
setPosition,
focusLocation,
setFocusLocation,
setUploadImg,
uploadImg,
upload
}) {
const { user } = UserAuth();
const { data, setLoading } = useContext(DataContext);
const { isOpen, onOpen, onClose } = useDisclosure();
const [itemData, setItemData] = useState({});
const [showDonut, setShowDonut] = useState(false);
console.log(showDonut);
console.log(focusLocation);

const allowedBounds = [
[33.656487295651, -117.85412222020983],
[33.65580858123096, -117.82236486775658],
Expand Down Expand Up @@ -91,6 +93,7 @@ export default function Map({
.map((item) => {
return (
<Marker
key={item.location}
position={item.location}
eventHandlers={{
click: () => {
Expand Down Expand Up @@ -169,6 +172,7 @@ export default function Map({
itemDate: "",
});
setIsCreate(!isCreate);
setUploadImg("")
})
.catch((err) => console.log(err));

Expand Down
10 changes: 4 additions & 6 deletions src/components/Type/TypeCard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,10 @@ import { Flex, Image, Text } from "@chakra-ui/react";
export default function TypeCard({
type,
icon,
pressed,
setPressed,
setNewAddedItem,
newAddedItem
}) {
const handleOnClick = () => {
setPressed(type);
setNewAddedItem((prev) => ({
...prev,
type: type,
Expand All @@ -18,7 +16,7 @@ export default function TypeCard({

return (
<Flex
backgroundColor={pressed === type ? "#787092" : "#a698d8"}
backgroundColor={newAddedItem.type === type ? "#787092" : "#a698d8"}
w="11vw"
h="11vw"
m="2%"
Expand All @@ -29,8 +27,8 @@ export default function TypeCard({
onClick={handleOnClick}
_hover={{cursor: "pointer"}}
>
<Text>{type}</Text>
<Image src={icon} w="5vw" h="5vw" />
<Text as="b" mb="5%">{type.toUpperCase()}</Text>
<Image src={icon} w="5vw" h="5vw" alt="test"/>
</Flex>
);
}
16 changes: 7 additions & 9 deletions src/components/TypeSelector/TypeSelector.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,20 @@
import { React, useState } from "react";
import { Flex } from "@chakra-ui/react";
import { Flex} from "@chakra-ui/react";
import TypeCard from "../Type/TypeCard";
import { iconsMap } from "../Map/MapIcons";
import logo from "../../assets/images/small_logo.png";

export default function TypeSelector(props) {
const [pressed, setPressed] = useState("");

const types = {
headphone: iconsMap["headphone"][true],
phone: iconsMap["phone"][true],
wallet: iconsMap["wallet"][true],
key: iconsMap["key"][true],
others: iconsMap["others"][true],
headphone: iconsMap["headphone"][props.newAddedItem.islost].options.iconUrl,
phone: iconsMap["phone"][props.newAddedItem.islost].options.iconUrl,
wallet: iconsMap["wallet"][props.newAddedItem.islost].options.iconUrl,
key: iconsMap["key"][props.newAddedItem.islost].options.iconUrl,
others: iconsMap["others"][props.newAddedItem.islost].options.iconUrl,
};

const typeContainers = Object.keys(types).map((type) => (
<TypeCard key={type} type={type} icon={logo} pressed={pressed} setPressed={setPressed} setNewAddedItem={props.setNewAddedItem}/>
<TypeCard key={type} type={type} icon={types[type]} newAddedItem={props.newAddedItem} setNewAddedItem={props.setNewAddedItem}/>
));

return (
Expand Down

0 comments on commit 9cba2f9

Please sign in to comment.