Skip to content

Commit

Permalink
finished for now
Browse files Browse the repository at this point in the history
  • Loading branch information
mialana committed Oct 13, 2023
1 parent 485762c commit 9a845eb
Show file tree
Hide file tree
Showing 2 changed files with 45 additions and 64 deletions.
46 changes: 1 addition & 45 deletions frontend/plan/components/meetUtil.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -145,48 +145,4 @@ export const getTimeString = (meetings: Meeting[]) => {
return `${intToTime(parseFloat(maxrange.split("-")[0]))}-${intToTime(
parseFloat(maxrange.split("-")[1])
)} ${daySet}`;
};

// Used for box coloring, from StackOverflow:
// https://stackoverflow.com/questions/7616461/generate-a-hash-from-string-in-javascript
const hashString = (s: string) => {
let hash = 0;
if (!s || s.length === 0) return hash;
for (let i = 0; i < s.length; i += 1) {
const chr = s.charCodeAt(i);
hash = (hash << 5) - hash + chr;
hash |= 0; // Convert to 32bit integer
}
return hash;
};

// step 2 in the CIS121 review: hashing with linear probing.
// hash every section to a color, but if that color is taken, try the next color in the
// colors array. Only start reusing colors when all the colors are used.
export const getColor = (() => {
const colors = [
Color.BLUE,
Color.RED,
Color.AQUA,
Color.ORANGE,
Color.GREEN,
Color.PINK,
Color.SEA,
Color.INDIGO,
];
// some CIS120: `used` is a *closure* storing the colors currently in the schedule
let used: Color[] = [];
return (c: string) => {
if (used.length === colors.length) {
// if we've used all the colors, it's acceptable to start reusing colors.
used = [];
}
let i = Math.abs(hashString(c));
while (used.indexOf(colors[i % colors.length]) !== -1) {
i += 1;
}
const color = colors[i % colors.length];
used.push(color);
return color;
};
})();
};
63 changes: 44 additions & 19 deletions frontend/plan/components/schedule/ScheduleSelectorDropdown.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import React, { useState, useEffect, useRef } from "react";
import styled from "styled-components";
import { Icon } from "../bulma_derived_components";
import { User, Color, FriendshipState, Schedule as ScheduleType, ColorsMap } from "../../types";
import { User, Schedule as ScheduleType, Color, FriendshipState } from "../../types";
import { nextAvailable } from "../../reducers/schedule";
import { getColor } from "../meetUtil";

const ButtonContainer = styled.div<{ isActive: boolean; isPrimary?: boolean }>`
line-height: 1.5;
Expand Down Expand Up @@ -409,12 +408,53 @@ const ScheduleSelectorDropdown = ({
}: ScheduleSelectorDropdownProps) => {
const [isActive, setIsActive] = useState(false);
const ref = useRef<HTMLDivElement>(null);
const [colors, setColors] = useState({} as ColorsMap)

let hasFriends = friendshipState.acceptedFriends.length != 0;
let numRequests = friendshipState.requestsReceived.length;

// Used for box coloring, from StackOverflow:
// https://stackoverflow.com/questions/7616461/generate-a-hash-from-string-in-javascript
const hashString = (s: string) => {
let hash = 0;
if (!s || s.length === 0) return hash;
for (let i = 0; i < s.length; i += 1) {
const chr = s.charCodeAt(i);
hash = (hash << 5) - hash + chr;
hash |= 0; // Convert to 32bit integer
}
return hash;
};

// step 2 in the CIS121 review: hashing with linear probing.
// hash every section to a color, but if that color is taken, try the next color in the
// colors array. Only start reusing colors when all the colors are used.
const getColor = (() => {
const colors = [
Color.BLUE,
Color.RED,
Color.AQUA,
Color.ORANGE,
Color.GREEN,
Color.PINK,
Color.SEA,
Color.INDIGO,
];
// some CIS120: `used` is a *closure* storing the colors currently in the schedule
let used: Color[] = [];
return (c: string) => {
if (used.length === colors.length) {
// if we've used all the colors, it's acceptable to start reusing colors.
used = [];
}
let i = Math.abs(hashString(c));
while (used.indexOf(colors[i % colors.length]) !== -1) {
i += 1;
}
const color = colors[i % colors.length];
used.push(color);
return color;
};
})();

useEffect(() => {
const listener = (event: Event) => {
Expand All @@ -431,21 +471,6 @@ const ScheduleSelectorDropdown = ({
};
});

function test(key: string) {
setColors({...colors,
[key]: getColor(key)})

return colors[key]
}

useEffect(() => {
friendshipState.acceptedFriends.map((friend) => {
test(friend.username)
})
}, [friendshipState])



return (
<ScheduleDropdownContainer ref={ref} isActive={isActive}>
<span className="selected_name">
Expand Down Expand Up @@ -545,7 +570,7 @@ const ScheduleSelectorDropdown = ({
friendshipState.activeFriend.username ===
friend.username
}
color={colors[friend.username]}
color={getColor(friend.username)}
/>
))}
<AddNew onClick={addFriend} role="button" href="#">
Expand Down

0 comments on commit 9a845eb

Please sign in to comment.