Add ability to select first day of week

pages/[user]/[type].tsx

@@ -86,7 +86,12 @@ export default function Type(props) {
     }
 
     // Create placeholder elements for empty days in first week
-    const weekdayOfFirst = dayjs().month(selectedMonth).date(1).day();
+    let weekdayOfFirst = dayjs().month(selectedMonth).date(1).day();
+    if (props.user.weekStart === 'Monday') {
+      weekdayOfFirst -= 1;
+      if (weekdayOfFirst < 0)
+        weekdayOfFirst = 6;
+    }
     const emptyDays = Array(weekdayOfFirst).fill(null).map((day, i) =>
         <div key={`e-${i}`} className={"text-center w-10 h-10 rounded-full mx-auto"}>
             {null}
@@ -283,9 +288,11 @@ export default function Type(props) {
                   </div>
                 </div>
                 <div className="grid grid-cols-7 gap-y-4 text-center">
+                  {props.user.weekStart !== 'Monday' ? (
                     <div className="uppercase text-gray-400 text-xs tracking-widest">
                     Sun
                   </div>
+                  ) : null}
                   <div className="uppercase text-gray-400 text-xs tracking-widest">
                     Mon
                   </div>
@@ -304,6 +311,11 @@ export default function Type(props) {
                   <div className="uppercase text-gray-400 text-xs tracking-widest">
                     Sat
                   </div>
+                  {props.user.weekStart === 'Monday' ? (
+                    <div className="uppercase text-gray-400 text-xs tracking-widest">
+                    Sun
+                  </div>
+                  ) : null}
                   {calendar}
                 </div>
               </div>
@@ -358,7 +370,8 @@ export async function getServerSideProps(context) {
             eventTypes: true,
             startTime: true,
             timeZone: true,
-            endTime: true
+            endTime: true,
+            weekStart: true,
         }
     });
 

pages/api/user/profile.ts

@@ -28,6 +28,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     const description = req.body.description;
     const avatar = req.body.avatar;
     const timeZone = req.body.timeZone;
+    const weekStart = req.body.weekStart;
 
     const updateUser = await prisma.user.update({
         where: {
@@ -39,6 +40,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
           avatar,
           bio: description,
           timeZone: timeZone,
+          weekStart: weekStart,
         },
     });
 

pages/settings/profile.tsx

@@ -20,6 +20,7 @@ export default function Settings(props) {
     const avatarRef = useRef<HTMLInputElement>();
 
     const [ selectedTimeZone, setSelectedTimeZone ] = useState({ value: props.user.timeZone });
+    const [ selectedWeekStartDay, setSelectedWeekStartDay ] = useState(props.user.weekStart || 'Sunday');
 
     if (loading) {
         return <p className="text-gray-400">Loading...</p>;
@@ -35,12 +36,13 @@ export default function Settings(props) {
         const enteredDescription = descriptionRef.current.value;
         const enteredAvatar = avatarRef.current.value;
         const enteredTimeZone = selectedTimeZone.value;
+        const enteredWeekStartDay = selectedWeekStartDay;
 
         // TODO: Add validation
 
         const response = await fetch('/api/user/profile', {
             method: 'PATCH',
-            body: JSON.stringify({username: enteredUsername, name: enteredName, description: enteredDescription, avatar: enteredAvatar, timeZone: enteredTimeZone}),
+            body: JSON.stringify({username: enteredUsername, name: enteredName, description: enteredDescription, avatar: enteredAvatar, timeZone: enteredTimeZone, weekStart: enteredWeekStartDay}),
             headers: {
                 'Content-Type': 'application/json'
             }
@@ -102,6 +104,17 @@ export default function Settings(props) {
                                         <TimezoneSelect id="timeZone" value={selectedTimeZone} onChange={setSelectedTimeZone} className="shadow-sm focus:ring-blue-500 focus:border-blue-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md" />
                                     </div>
                                 </div>
+                                <div>
+                                    <label htmlFor="weekStart" className="block text-sm font-medium text-gray-700">
+                                        First Day of Week
+                                    </label>
+                                    <div className="mt-1">
+                                        <select id="weekStart" value={selectedWeekStartDay} onChange={e => setSelectedWeekStartDay(e.target.value)} className="shadow-sm focus:ring-blue-500 focus:border-blue-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md">
+                                            <option value="Sunday">Sunday</option>
+                                            <option value="Monday">Monday</option>
+                                        </select>
+                                    </div>
+                                </div>
                                 </div>
 
                                 <div className="mt-6 flex-grow lg:mt-0 lg:ml-6 lg:flex-grow-0 lg:flex-shrink-0">
@@ -175,6 +188,7 @@ export async function getServerSideProps(context) {
             bio: true,
             avatar: true,
             timeZone: true,
+            weekStart: true,
         }
     });
 

prisma/schema.prisma

@@ -39,6 +39,7 @@ model User {
   bio           String?
   avatar        String?
   timeZone      String @default("Europe/London")
+  weekStart     String? @default("Sunday")
   startTime     Int @default(0)
   endTime       Int @default(1440)
   createdDate   DateTime  @default(now()) @map(name: "created")